/**
 * Konu / dokümantasyon sayfaları — Holodepth ana temadan ayrı, çakışmayı önler.
 * Kullanım: body’de .doc-page + .topic-layout.doc-layout + .doc-article
 */

body.page-topic.doc-page .topic-layout.doc-layout {
  flex: 1;
  width: 100%;
  max-width: min(100%, 76rem);
  margin: 0 auto;
  padding: clamp(4.75rem, 8vw, 5.5rem) clamp(1rem, 4.5vw, 2.75rem) clamp(2.5rem, 5vw, 4rem);
  box-sizing: border-box;
}

body.page-topic.doc-page .doc-article {
  margin: 0;
  padding: 0;
  min-height: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}

/* Ana okuma kutusu — uzun metinler */
.doc-panel {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(165deg,
      rgba(14, 18, 28, 0.92) 0%,
      rgba(8, 10, 16, 0.88) 50%,
      rgba(10, 12, 20, 0.94) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 -18px 36px rgba(0, 0, 0, 0.42) inset,
    0 2px 6px rgba(0, 0, 0, 0.35);
  padding: clamp(1.35rem, 3.5vw, 2.25rem) clamp(1.1rem, 3vw, 2rem);
}

.doc-header {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.doc-eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(46, 231, 242, 0.75);
}

.doc-h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3.8vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.doc-lead {
  margin: 1rem 0 0;
  max-width: none;
  width: 100%;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(195, 202, 218, 0.92);
}

.doc-section {
  margin-top: clamp(1.75rem, 4vw, 2.35rem);
  scroll-margin-top: 5rem;
}

.doc-header+.doc-section {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Bölüm başlık bloğu: rozet + başlık + ayırıcı çizgi */
.doc-section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 1.35rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.doc-section__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(5.5rem, 32%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a78bfa 0%, rgba(46, 231, 242, 0.55) 100%);
}

.doc-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.5rem;
  margin: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #e9d5ff;
  background: linear-gradient(160deg,
      rgba(167, 139, 250, 0.28) 0%,
      rgba(167, 139, 250, 0.07) 100%);
  border: 1px solid rgba(167, 139, 250, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset;
}

.doc-h2 {
  margin: 0;
  font-size: clamp(1.22rem, 2.65vw, 1.5rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* İç alt başlıklar — numara/h2’den bir tık daha sakin */
.doc-h3 {
  margin: 1.45rem 0 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.88);
}

/* Tablo öncesi bölüm başlığı — diğer doc-h3’lerden daha sakin, premium çizgi */
/* Video bloğu — mat kutu, 16:9 çerçeve */
.doc-video-box {
  margin-top: 0.5rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(55, 100, 175, 0.35);
  background: linear-gradient(168deg,
      rgba(0, 2, 8, 0.96) 0%,
      rgba(4, 8, 18, 0.94) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65) inset,
    0 1px 0 rgba(90, 140, 210, 0.05) inset,
    0 -12px 24px rgba(0, 0, 0, 0.42) inset;
}

.doc-video-box>.doc-h3--video-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: rgba(248, 250, 255, 0.96);
}

.doc-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #020308;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.4) inset;
}

.doc-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.doc-caption-wrap {
  margin-top: 1rem;
}

.doc-caption {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: rgba(175, 188, 212, 0.95);
}

.doc-caption strong {
  color: rgba(220, 228, 242, 0.98);
}

/* Sorun / çözüm kartları */
.doc-issues {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.doc-issue {
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 -8px 18px rgba(0, 0, 0, 0.32) inset;
}

.doc-issue .doc-h4 {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(200, 215, 245, 0.98);
}

.doc-issue .doc-prose {
  margin: 0;
}

.doc-issue .doc-prose p {
  margin: 0 0 0.65rem;
}

.doc-issue .doc-prose p:last-child {
  margin-bottom: 0;
}

.doc-h3--table-lead {
  margin-top: 1.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.35;
  color: rgba(248, 250, 255, 0.94);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(90, 130, 200, 0.22);
  max-width: none;
  width: 100%;
}

.doc-prose {
  max-width: none;
  width: 100%;
  font-size: 0.97rem;
  line-height: 1.68;
  color: rgba(185, 193, 210, 0.94);
}

.doc-prose p {
  margin: 0 0 1rem;
}

.doc-prose p:last-child {
  margin-bottom: 0;
}

/*
  Paragraf başı işareti: satır içi, em-tabanlı (mobilde metinle küçülür); ekstra blok boşluğu yok.
  İstemeyen bloklar: .doc-issue içi metin, veya kök .doc-prose'e .doc-prose--plain ekleyerek kapatın.
*/
.doc-issue .doc-prose>p::before,
.doc-prose.doc-prose--plain>p::before {
  content: none;
}

.doc-prose>p::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-inline-end: clamp(0.28rem, 0.48em, 0.52rem);
  margin-inline-start: 0;
  border-style: solid;
  border-width: 0.2em 0 0.2em 0.32em;
  border-color: transparent transparent transparent rgba(46, 231, 242, 0.42);
  vertical-align: 0.12em;
  transform: translateY(-0.03em);
}

@media (max-width: 520px) {
  .doc-prose>p::before {
    border-width: 0.17em 0 0.17em 0.27em;
    margin-inline-end: clamp(0.22rem, 0.42em, 0.46rem);
    border-left-color: rgba(46, 231, 242, 0.36);
  }
}

@media (prefers-contrast: more) {
  .doc-prose>p::before {
    border-left-color: rgba(46, 231, 242, 0.88);
  }
}

.doc-prose ul,
.doc-prose ol {
  margin: 0.65rem 0 1rem;
  padding-left: 1.2rem;
}

.doc-prose li {
  margin-bottom: 0.45rem;
}

.doc-prose li::marker {
  color: rgba(46, 231, 242, 0.45);
}

.doc-prose strong {
  font-weight: 600;
  color: rgba(220, 228, 240, 0.98);
}

/*
  Liste satırı başındaki terimler (ör. map, normalMap): API/özellik adı gibi okunur;
  yalnızca <li>nin doğrudan ilk çocuğu <strong> ise uygulanır — cümle içi vurgu aynı kalır.
*/
.doc-prose ul:not(.doc-points)>li>strong:first-child {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.94em;
  letter-spacing: 0.04em;
  color: rgba(130, 215, 248, 0.98);
  text-shadow: 0 0 22px rgba(46, 231, 242, 0.14);
}

/* Gövde içi bağlantılar (varsayılan) */
.doc-prose a {
  color: rgba(160, 195, 255, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(90, 140, 210, 0.45);
  text-underline-offset: 0.18em;
  transition:
    color 0.18s ease,
    text-decoration-color 0.18s ease;
}

.doc-prose a:hover {
  color: rgba(210, 225, 255, 0.98);
  text-decoration-color: rgba(46, 231, 242, 0.55);
}

.doc-prose a:focus-visible {
  outline: 2px solid rgba(46, 231, 242, 0.45);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Sayfa girişi (hook) içi linkler — aksi halde tarayıcı varsayılan mavisi kalır */
.doc-header__hook a {
  color: rgba(185, 218, 255, 0.96);
  text-decoration: underline;
  text-decoration-color: rgba(46, 231, 242, 0.38);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition:
    color 0.18s ease,
    text-decoration-color 0.18s ease;
}

.doc-header__hook a:hover {
  color: #ffffff;
  text-decoration-color: rgba(181, 108, 255, 0.55);
}

.doc-header__hook a:focus-visible {
  outline: 2px solid rgba(46, 231, 242, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
 * Konu çapraz linki (.doc-link--topic) — doc gövdesi / lead / hook / figcaption demo blokları için ortak minimal chip.
 * Özet kutusu (.doc-page-recap a.doc-link--topic) ayrı: gradient metin, aşağıda tanımlı.
 */
.doc-prose a.doc-link--topic,
.doc-lead a.doc-link--topic,
.doc-header__hook a.doc-link--topic,
.doc-header .doc-prose a.doc-link--topic,
.doc-array-camera-demo__caption a.doc-link--topic,
.doc-material-demo__caption a.doc-link--topic,
.doc-bmd-demo__caption a.doc-link--topic,
.doc-basic-mantik a.doc-link--topic,
.doc-page-recap__list a.doc-link--topic,
.doc-page-recap__series-order a.doc-link--topic,
.doc-page-recap__context a.doc-link--topic {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 0.14em 0.46em 0.16em;
  margin: 0 0.04em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(226, 234, 248, 0.95);
  text-decoration: none;
  border-radius: 6px;
  background: rgba(12, 18, 30, 0.52);
  border: 1px solid rgba(100, 140, 185, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.18s ease,
    transform 0.15s ease;
}

.doc-prose a.doc-link--topic::after,
.doc-lead a.doc-link--topic::after,
.doc-header__hook a.doc-link--topic::after,
.doc-header .doc-prose a.doc-link--topic::after,
.doc-array-camera-demo__caption a.doc-link--topic::after,
.doc-material-demo__caption a.doc-link--topic::after,
.doc-bmd-demo__caption a.doc-link--topic::after,
.doc-basic-mantik a.doc-link--topic::after,
.doc-page-recap__list a.doc-link--topic::after,
.doc-page-recap__series-order a.doc-link--topic::after,
.doc-page-recap__context a.doc-link--topic::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.24em;
  font-size: 0.7em;
  font-weight: 600;
  opacity: 0.42;
  vertical-align: 0.06em;
  color: rgba(130, 165, 205, 0.75);
}

.doc-prose a.doc-link--topic:hover,
.doc-lead a.doc-link--topic:hover,
.doc-header__hook a.doc-link--topic:hover,
.doc-header .doc-prose a.doc-link--topic:hover,
.doc-array-camera-demo__caption a.doc-link--topic:hover,
.doc-material-demo__caption a.doc-link--topic:hover,
.doc-bmd-demo__caption a.doc-link--topic:hover,
.doc-basic-mantik a.doc-link--topic:hover,
.doc-page-recap__list a.doc-link--topic:hover,
.doc-page-recap__series-order a.doc-link--topic:hover,
.doc-page-recap__context a.doc-link--topic:hover {
  border-color: rgba(110, 175, 215, 0.28);
  background: rgba(18, 28, 48, 0.68);
  color: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 6px 20px rgba(0, 0, 0, 0.18);
}

.doc-prose a.doc-link--topic:active,
.doc-lead a.doc-link--topic:active,
.doc-header__hook a.doc-link--topic:active,
.doc-header .doc-prose a.doc-link--topic:active,
.doc-array-camera-demo__caption a.doc-link--topic:active,
.doc-material-demo__caption a.doc-link--topic:active,
.doc-bmd-demo__caption a.doc-link--topic:active,
.doc-basic-mantik a.doc-link--topic:active,
.doc-page-recap__list a.doc-link--topic:active,
.doc-page-recap__series-order a.doc-link--topic:active,
.doc-page-recap__context a.doc-link--topic:active {
  transform: translateY(1px);
}

.doc-prose a.doc-link--topic:focus-visible,
.doc-lead a.doc-link--topic:focus-visible,
.doc-header__hook a.doc-link--topic:focus-visible,
.doc-header .doc-prose a.doc-link--topic:focus-visible,
.doc-array-camera-demo__caption a.doc-link--topic:focus-visible,
.doc-material-demo__caption a.doc-link--topic:focus-visible,
.doc-bmd-demo__caption a.doc-link--topic:focus-visible,
.doc-basic-mantik a.doc-link--topic:focus-visible,
.doc-page-recap__list a.doc-link--topic:focus-visible,
.doc-page-recap__series-order a.doc-link--topic:focus-visible,
.doc-page-recap__context a.doc-link--topic:focus-visible {
  outline: 1px solid rgba(120, 195, 235, 0.4);
  outline-offset: 2px;
}

/*
 * Bölüm 3 çapraz vurgusu (.doc-link--section3) — .doc-link--topic ile birlikte: mor metin + mor alt çizgi, ↗ yok.
 */
.doc-prose a.doc-link--topic.doc-link--section3,
.doc-lead a.doc-link--topic.doc-link--section3,
.doc-header__hook a.doc-link--topic.doc-link--section3,
.doc-header .doc-prose a.doc-link--topic.doc-link--section3,
.doc-array-camera-demo__caption a.doc-link--topic.doc-link--section3,
.doc-material-demo__caption a.doc-link--topic.doc-link--section3,
.doc-bmd-demo__caption a.doc-link--topic.doc-link--section3,
.doc-basic-mantik a.doc-link--topic.doc-link--section3,
.doc-page-recap__list a.doc-link--topic.doc-link--section3,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3,
.doc-page-recap__context a.doc-link--topic.doc-link--section3,
.doc-ray-multi__advanced-note a.doc-link--topic.doc-link--section3 {
  display: inline;
  padding: 0;
  margin: 0 0.04em;
  font-weight: 600;
  color: #c9a8ff;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline solid;
  text-decoration-color: #b56cff;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.doc-prose a.doc-link--topic.doc-link--section3::after,
.doc-lead a.doc-link--topic.doc-link--section3::after,
.doc-header__hook a.doc-link--topic.doc-link--section3::after,
.doc-header .doc-prose a.doc-link--topic.doc-link--section3::after,
.doc-array-camera-demo__caption a.doc-link--topic.doc-link--section3::after,
.doc-material-demo__caption a.doc-link--topic.doc-link--section3::after,
.doc-bmd-demo__caption a.doc-link--topic.doc-link--section3::after,
.doc-basic-mantik a.doc-link--topic.doc-link--section3::after,
.doc-page-recap__list a.doc-link--topic.doc-link--section3::after,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3::after,
.doc-page-recap__context a.doc-link--topic.doc-link--section3::after,
.doc-ray-multi__advanced-note a.doc-link--topic.doc-link--section3::after {
  content: none;
  display: none;
  margin: 0;
}

.doc-prose a.doc-link--topic.doc-link--section3:hover,
.doc-lead a.doc-link--topic.doc-link--section3:hover,
.doc-header__hook a.doc-link--topic.doc-link--section3:hover,
.doc-header .doc-prose a.doc-link--topic.doc-link--section3:hover,
.doc-array-camera-demo__caption a.doc-link--topic.doc-link--section3:hover,
.doc-material-demo__caption a.doc-link--topic.doc-link--section3:hover,
.doc-bmd-demo__caption a.doc-link--topic.doc-link--section3:hover,
.doc-basic-mantik a.doc-link--topic.doc-link--section3:hover,
.doc-page-recap__list a.doc-link--topic.doc-link--section3:hover,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3:hover,
.doc-page-recap__context a.doc-link--topic.doc-link--section3:hover,
.doc-ray-multi__advanced-note a.doc-link--topic.doc-link--section3:hover {
  color: #e4d4ff;
  text-decoration-color: #d4a8ff;
  background: rgba(181, 108, 255, 0.1);
  border: none;
  box-shadow: none;
}

.doc-prose a.doc-link--topic.doc-link--section3:focus-visible,
.doc-lead a.doc-link--topic.doc-link--section3:focus-visible,
.doc-header__hook a.doc-link--topic.doc-link--section3:focus-visible,
.doc-header .doc-prose a.doc-link--topic.doc-link--section3:focus-visible,
.doc-array-camera-demo__caption a.doc-link--topic.doc-link--section3:focus-visible,
.doc-material-demo__caption a.doc-link--topic.doc-link--section3:focus-visible,
.doc-bmd-demo__caption a.doc-link--topic.doc-link--section3:focus-visible,
.doc-basic-mantik a.doc-link--topic.doc-link--section3:focus-visible,
.doc-page-recap__list a.doc-link--topic.doc-link--section3:focus-visible,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3:focus-visible,
.doc-page-recap__context a.doc-link--topic.doc-link--section3:focus-visible,
.doc-ray-multi__advanced-note a.doc-link--topic.doc-link--section3:focus-visible {
  outline: 2px solid rgba(181, 108, 255, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
}

.doc-prose a.doc-link--topic.doc-link--section3:active,
.doc-lead a.doc-link--topic.doc-link--section3:active,
.doc-header__hook a.doc-link--topic.doc-link--section3:active,
.doc-header .doc-prose a.doc-link--topic.doc-link--section3:active,
.doc-array-camera-demo__caption a.doc-link--topic.doc-link--section3:active,
.doc-material-demo__caption a.doc-link--topic.doc-link--section3:active,
.doc-bmd-demo__caption a.doc-link--topic.doc-link--section3:active,
.doc-basic-mantik a.doc-link--topic.doc-link--section3:active,
.doc-page-recap__list a.doc-link--topic.doc-link--section3:active,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3:active,
.doc-page-recap__context a.doc-link--topic.doc-link--section3:active,
.doc-ray-multi__advanced-note a.doc-link--topic.doc-link--section3:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .doc-prose a,
  .doc-prose a.doc-link--topic,
  .doc-lead a.doc-link--topic,
  .doc-header__hook a.doc-link--topic,
  .doc-array-camera-demo__caption a.doc-link--topic,
  .doc-material-demo__caption a.doc-link--topic,
  .doc-bmd-demo__caption a.doc-link--topic,
  .doc-basic-mantik a.doc-link--topic,
  .doc-page-recap__list a.doc-link--topic,
  .doc-page-recap__series-order a.doc-link--topic,
  .doc-page-recap__context a.doc-link--topic,
  .doc-page-recap a.doc-link--topic,
  .doc-header .doc-prose a.doc-link--topic {
    transition: none;
  }

  .doc-header__hook a {
    transition: none;
  }

  .doc-prose a.doc-link--topic:active,
  .doc-lead a.doc-link--topic:active,
  .doc-header__hook a.doc-link--topic:active,
  .doc-array-camera-demo__caption a.doc-link--topic:active,
  .doc-material-demo__caption a.doc-link--topic:active,
  .doc-bmd-demo__caption a.doc-link--topic:active,
  .doc-basic-mantik a.doc-link--topic:active,
  .doc-page-recap__list a.doc-link--topic:active,
  .doc-page-recap__series-order a.doc-link--topic:active,
  .doc-page-recap__context a.doc-link--topic:active,
  .doc-page-recap a.doc-link--topic:active,
  .doc-header .doc-prose a.doc-link--topic:active {
    transform: none;
  }
}

/* Başlık altı konu linklerini yan yana gruplamak (chip stilleri yukarıdaki ortak kurallardan gelir). */
.doc-topic-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem 0.55rem;
  margin: 0.15rem 0 0;
  vertical-align: baseline;
}

.doc-topic-strip__sep {
  font-weight: 600;
  color: rgba(110, 135, 170, 0.4);
  user-select: none;
}

/* Dizi / özet satırında mavi alt çizgili anahtar kelime + kare ayraçlar (yakında konular) */
.doc-seq-highlight {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.32rem 0.4rem;
  vertical-align: baseline;
}

.doc-seq-highlight__mark {
  display: inline-block;
  width: 0.32rem;
  height: 0.32rem;
  margin-bottom: 0.06em;
  background: rgba(248, 252, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.doc-seq-highlight__key {
  font-weight: 600;
  color: rgba(94, 200, 255, 0.98);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(94, 200, 255, 0.72);
}

/* Mevcut sayfa etiketi (<span>); tıklanabilir değil — el işareti yanıltmasın */
.doc-seq-highlight__key[aria-current="page"] {
  cursor: default;
}

/* Dizi şeridindeki gerçek linkler (gradient .doc-link--topic vb.) için imleç net olsun */
.doc-seq-highlight a {
  cursor: pointer;
}

.doc-seq-highlight__key.is-soon {
  cursor: not-allowed;
}

.doc-seq-highlight__key:is(a):hover {
  color: rgba(130, 225, 255, 1);
  text-decoration-color: rgba(130, 225, 255, 0.92);
}

.doc-seq-highlight__key:focus-visible {
  outline: 2px solid rgba(94, 200, 255, 0.65);
  outline-offset: 2px;
}

.doc-seq-highlight__sep {
  font-weight: 600;
  color: rgba(200, 210, 230, 0.58);
  letter-spacing: 0.12em;
  user-select: none;
}

/* Vurgu / highlight blokları — koyu iç, uzay mavisi vurgu */
.doc-callout {
  margin: 1.15rem 0;
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(55, 100, 175, 0.42);
  background: linear-gradient(168deg,
      #000000 0%,
      #02040c 38%,
      #050a18 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72) inset,
    0 1px 0 rgba(90, 140, 210, 0.06) inset,
    0 -14px 28px rgba(0, 0, 0, 0.5) inset;
}

.doc-callout__title {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(150, 185, 255, 0.96);
}

.doc-callout .doc-prose {
  max-width: none;
}

.doc-callout .doc-prose p:last-child {
  margin-bottom: 0;
}

.doc-callout--violet {
  border-color: rgba(181, 108, 255, 0.22);
  background: linear-gradient(168deg,
      rgba(8, 4, 16, 0.98) 0%,
      rgba(12, 6, 22, 0.95) 50%,
      rgba(6, 4, 14, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.72) inset,
    0 1px 0 rgba(160, 120, 220, 0.07) inset,
    0 -14px 28px rgba(0, 0, 0, 0.48) inset;
}

.doc-callout--violet .doc-callout__title {
  color: rgba(220, 200, 255, 0.98);
}

/* Küçük bilgi satırları (Hız, HMR vb.) */
.doc-points {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.doc-points li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(70, 120, 210, 0.55);
  font-size: 0.92rem;
  line-height: 1.58;
  color: rgba(165, 185, 220, 0.92);
}

.doc-points li:last-child {
  margin-bottom: 0;
}

.doc-points strong {
  display: block;
  margin-bottom: 0.22rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(120, 175, 255, 0.96);
}

/* Kod / terminal satırları */
.doc-code {
  margin: 0.65rem 0;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.35) inset;
  overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(200, 230, 245, 0.95);
  /* ===, => vb. ligatürleri kapat (yapı/token aynı, yalnızca görünüm) */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.doc-code code {
  font-family: inherit;
  font-variant-ligatures: inherit;
  font-feature-settings: inherit;
}

.doc-code .token {
  font-variant-ligatures: inherit;
  font-feature-settings: inherit;
}

/* Tam örnek: editör çerçevesi — premium başlık (sol: chrome, sağ: sekme + kopyala) */
.doc-code-editor {
  margin: 0.85rem 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(10, 12, 22, 0.55) 0%, rgba(2, 4, 10, 0.72) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 32px rgba(0, 0, 0, 0.42);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.doc-code-editor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 2.55rem;
  padding: 0.4rem 0.65rem 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(46, 231, 242, 0.09);
  background: linear-gradient(180deg, rgba(18, 22, 38, 0.92) 0%, rgba(6, 8, 16, 0.96) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.doc-code-editor__lead {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.doc-code-editor__tail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
}

.doc-code-editor__dots {
  display: flex;
  gap: 5px;
}

.doc-code-editor__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.doc-code-editor__dots span:nth-child(1) {
  background: rgba(255, 95, 86, 0.88);
}

.doc-code-editor__dots span:nth-child(2) {
  background: rgba(255, 189, 46, 0.88);
}

.doc-code-editor__dots span:nth-child(3) {
  background: rgba(39, 201, 63, 0.88);
}

/* Sağ: sekme grubu */
.doc-code-editor__tabs {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.doc-code-editor__tab {
  margin: 0;
  padding: 0.32rem 0.65rem;
  border: none;
  border-radius: 6px;
  font: inherit;
  letter-spacing: 0.04em;
  color: rgba(150, 168, 200, 0.72);
  background: transparent;
  cursor: default;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.doc-code-editor__tab--active {
  color: rgba(230, 240, 255, 0.96);
  background: linear-gradient(180deg, rgba(46, 231, 242, 0.12) 0%, rgba(46, 231, 242, 0.04) 100%);
  box-shadow:
    0 0 0 1px rgba(46, 231, 242, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.doc-code-editor__tab:disabled:not(.doc-code-editor__tab--active) {
  opacity: 0.42;
}

.doc-code-editor__tab:disabled.doc-code-editor__tab--active {
  opacity: 1;
  cursor: default;
}

/* Kopyala */
.doc-code-editor__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(20, 26, 42, 0.9) 0%, rgba(4, 8, 18, 0.95) 100%);
  color: rgba(120, 195, 240, 0.88);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.doc-code-editor__copy:hover {
  border-color: rgba(46, 231, 242, 0.35);
  color: rgba(46, 231, 242, 0.98);
  box-shadow:
    0 0 0 1px rgba(46, 231, 242, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.doc-code-editor__copy:focus-visible {
  outline: 2px solid rgba(46, 231, 242, 0.45);
  outline-offset: 2px;
}

.doc-code-editor__copy:active {
  transform: translateY(1px);
}

.doc-code-editor__copy--done {
  border-color: rgba(120, 210, 160, 0.45);
  color: rgba(140, 230, 180, 0.95);
}

.doc-code-editor__copy-icon {
  display: block;
  pointer-events: none;
}

.doc-code-editor>.doc-code {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.45) inset;
}

@media (max-width: 520px) {
  .doc-code-editor__bar {
    flex-wrap: wrap;
    padding: 0.45rem 0.55rem;
  }

  .doc-code-editor__tail {
    width: 100%;
    justify-content: space-between;
  }
}

/* İsteğe bağlı: eski manuel .tok-* span’ları (tercih: language-* + css/prism-holodepth.css) */
.doc-code--hl {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

.doc-code--hl .tok-kw {
  color: rgba(199, 146, 234, 0.98);
}

.doc-code--hl .tok-fn {
  color: rgba(130, 170, 255, 0.98);
}

.doc-code--hl .tok-str {
  color: rgba(195, 232, 141, 0.96);
}

.doc-code--hl .tok-num {
  color: rgba(247, 140, 108, 0.98);
}

.doc-code--hl .tok-prop {
  color: rgba(255, 203, 107, 0.95);
}

.doc-code--hl .tok-cmnt {
  color: rgba(120, 140, 160, 0.75);
  font-style: italic;
}

.doc-code--hl .tok-de {
  color: rgba(255, 203, 140, 0.95);
}

.doc-prose code {
  padding: 0.14em 0.45em;
  border-radius: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.86em;
  color: rgba(120, 210, 165, 0.96);
  background: rgba(2, 6, 6, 0.72);
  border: 1px solid rgba(60, 140, 100, 0.22);
  box-shadow:
    0 1px 0 rgba(90, 200, 140, 0.06) inset,
    0 1px 2px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

/* Blok kod / editör: satır içi <code> pill stilleri uygulanmasın (Prism .token) */
.doc-prose pre.doc-code code,
.doc-prose .doc-code-editor .doc-code code {
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Callout içi satır kodu — uzay mavisi (genel prose yeşilinden ayrı) */
.doc-callout code,
.doc-callout .doc-prose code {
  padding: 0.12em 0.38em;
  border-radius: 5px;
  font-size: 0.84em;
  color: rgba(155, 205, 255, 0.95);
  background: rgba(4, 14, 36, 0.92);
  border: 1px solid rgba(55, 100, 170, 0.4);
  box-shadow: 0 1px 0 rgba(60, 110, 180, 0.08) inset;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
}

/* Sahne / kamera / renderer mini kartlar */
.doc-triad {
  display: grid;
  gap: 0.65rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 540px) {
  .doc-triad {
    grid-template-columns: repeat(3, 1fr);
  }
}

.doc-triad__item {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 -10px 20px rgba(0, 0, 0, 0.35) inset;
}

.doc-triad__item h4 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(46, 231, 242, 0.9);
}

.doc-triad__item p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(165, 175, 195, 0.95);
}

.doc-tool-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.doc-tool-list li {
  position: relative;
  margin-bottom: 0.55rem;
  padding-left: 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(185, 193, 210, 0.94);
}

.doc-tool-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(181, 108, 255, 0.75);
}

.doc-tool-list strong {
  color: rgba(225, 220, 245, 0.98);
}

/* Mobil: dış kenar + panel içi boşlukları daralt; p/li hizasını justify yerine start */
@media (max-width: 720px) {
  body.page-topic.doc-page .topic-layout.doc-layout {
    padding-top: clamp(4.25rem, 7vw, 5rem);
    padding-bottom: clamp(2rem, 4.5vw, 3.25rem);
    padding-left: max(0.45rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.45rem, env(safe-area-inset-right, 0px));
  }

  .doc-panel {
    border-radius: 12px;
    padding: clamp(0.85rem, 2.4vw, 1.2rem) clamp(0.55rem, 2vw, 1rem);
  }

  .doc-header {
    margin-bottom: clamp(1.2rem, 3.5vw, 1.85rem);
    padding-bottom: clamp(0.85rem, 2.5vw, 1.35rem);
  }

  .doc-lead,
  .doc-prose,
  .doc-prose p,
  .doc-prose li {
    text-align: start;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .doc-prose ul,
  .doc-prose ol {
    padding-left: 1rem;
  }

  .doc-triad {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  body.page-topic.doc-page .topic-layout.doc-layout {
    padding-left: max(0.3rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.3rem, env(safe-area-inset-right, 0px));
  }

  .doc-panel {
    padding: 0.8rem 0.45rem;
  }
}

/* Tek satırlık render hattı özeti (doc sayfaları) */
.doc-pipeline-diagram {
  margin: 1rem 0 1.15rem;
  padding: 0.95rem 1rem 1.05rem;
  border-radius: 12px;
  border: 1px solid rgba(55, 100, 175, 0.38);
  background: linear-gradient(165deg,
      rgba(4, 8, 18, 0.92) 0%,
      rgba(6, 10, 22, 0.88) 45%,
      rgba(8, 6, 20, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55) inset,
    0 1px 0 rgba(90, 140, 210, 0.05) inset;
}

.doc-pipeline-diagram__title {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(150, 185, 255, 0.88);
}

.doc-pipeline-diagram__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 500;
}

.doc-pipeline-diagram__flow+.doc-pipeline-diagram__flow {
  margin-top: 0.75rem;
}

.doc-pipeline-diagram__node {
  padding: 0.32em 0.55em 0.34em;
  border-radius: 7px;
  border: 1px solid rgba(46, 231, 242, 0.22);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(218, 226, 242, 0.96);
  white-space: nowrap;
}

.doc-pipeline-diagram__sep {
  color: rgba(46, 231, 242, 0.42);
  font-weight: 600;
  user-select: none;
}

@media (max-width: 520px) {
  .doc-pipeline-diagram__flow {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .doc-pipeline-diagram__sep {
    align-self: center;
    transform: rotate(90deg);
    line-height: 1;
  }

  .doc-pipeline-diagram__node {
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .doc-panel,
  .doc-callout,
  .doc-page-recap,
  .doc-page-recap__link {
    transition: none;
  }
}

/* Sayfa özeti & komşu konular — makale sonu (topic sayfaları) */
.doc-page-recap {
  margin-top: 2.35rem;
  padding: 1.25rem 1.2rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(90, 130, 200, 0.28);
  background: linear-gradient(165deg,
      rgba(8, 12, 24, 0.72) 0%,
      rgba(4, 8, 18, 0.88) 55%,
      rgba(6, 10, 20, 0.82) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    0 10px 36px rgba(0, 0, 0, 0.35);
  /* Özet satır içi linkler: çok duraklı yumuşak geçiş (kısa metinde «yarı yarıya» kesilme hissi azalır) */
  --recap-link-grad: linear-gradient(118deg,
      #e8fcff 0%,
      #c8f7ff 11%,
      #8aeef4 24%,
      #5ee0f0 36%,
      #6ec8ff 48%,
      #8ab4ff 60%,
      #a8b0ff 72%,
      #c8c0ff 86%,
      #eadfff 100%);
  --recap-link-grad-hover: linear-gradient(118deg,
      #f8ffff 0%,
      #e2fcff 10%,
      #b0f4ff 22%,
      #7aecff 34%,
      #72d8ff 46%,
      #94c4ff 58%,
      #b8c0ff 70%,
      #d8d4ff 84%,
      #faf4ff 100%);
  --recap-link-grad-visited: linear-gradient(118deg,
      #caeaf2 0%,
      #b2e0ec 14%,
      #9ad4e6 28%,
      #86c8e0 42%,
      #7eb8d8 54%,
      #8aa8d0 68%,
      #9ca0c8 82%,
      #b4b4d4 100%);
}

.doc-page-recap__rule {
  height: 2px;
  margin: 0 0 1.1rem;
  border: none;
  border-radius: 2px;
  background: linear-gradient(90deg,
      rgba(46, 231, 242, 0.15) 0%,
      rgba(94, 200, 255, 0.55) 42%,
      rgba(181, 108, 255, 0.45) 100%);
  opacity: 0.95;
}

.doc-page-recap__title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(170, 205, 255, 0.95);
}

.doc-page-recap__list {
  margin: 0 0 1.25rem;
  padding-left: 1.15rem;
  font-size: 0.93rem;
  line-height: 1.62;
  color: rgba(185, 200, 232, 0.94);
}

.doc-page-recap__list li {
  margin-bottom: 0.45rem;
}

.doc-page-recap__list li:last-child {
  margin-bottom: 0;
}

/*
 * WebGL okuma sırası — dikey “roadmap”: cam yüzey, rozet numaraları, aktif adım,
 * ince bağlantı çizgisi (timeline).
 */
.doc-page-recap__series-order {
  --holo-road-badge-size: 1.875rem;
  --holo-road-pad-x: 1rem;
  counter-reset: holo-road-step;
  list-style: none;
  margin: 0.25rem 0 1.45rem;
  padding: 0.35rem 0;
  border-radius: 14px;
  border: 1px solid rgba(94, 180, 255, 0.28);
  background: linear-gradient(168deg,
      rgba(22, 32, 58, 0.78) 0%,
      rgba(12, 18, 38, 0.62) 42%,
      rgba(16, 22, 46, 0.74) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.42) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 42px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(46, 231, 242, 0.06);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(195, 210, 240, 0.94);
}

.doc-page-recap__subtitle:has(+ .doc-page-recap__series-order) {
  margin-bottom: 0.65rem;
  letter-spacing: 0.12em;
}

.doc-page-recap__series-order li {
  counter-increment: holo-road-step;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.82rem;
  margin: 0;
  min-height: 2.65rem;
  padding: 0.45rem var(--holo-road-pad-x);
  border-bottom: 1px solid rgba(110, 150, 210, 0.07);
}

.doc-page-recap__series-order li:last-child {
  border-bottom: none;
}

.doc-page-recap__series-order li::before {
  content: counter(holo-road-step);
  flex-shrink: 0;
  width: var(--holo-road-badge-size);
  height: var(--holo-road-badge-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: rgba(228, 238, 255, 0.94);
  background: linear-gradient(152deg,
      rgba(46, 231, 242, 0.22) 0%,
      rgba(72, 140, 210, 0.14) 55%,
      rgba(120, 90, 200, 0.16) 100%);
  border: 1px solid rgba(130, 190, 255, 0.38);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.doc-page-recap__series-order li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--holo-road-pad-x) + var(--holo-road-badge-size) / 2 - 1px);
  top: calc(50% + var(--holo-road-badge-size) / 2 - 4px);
  bottom: -2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
      rgba(94, 200, 255, 0.42) 0%,
      rgba(140, 130, 240, 0.22) 70%,
      rgba(181, 108, 255, 0.08) 100%);
  z-index: 0;
  opacity: 0.88;
}

.doc-page-recap__series-order li:has(strong) {
  background: linear-gradient(90deg,
      rgba(46, 231, 242, 0.07) 0%,
      rgba(94, 200, 255, 0.04) 38%,
      rgba(181, 108, 255, 0.06) 100%);
}

.doc-page-recap__series-order li:has(strong)::before {
  background: linear-gradient(145deg, #38e8f5 0%, #5ec8ff 48%, #b56cff 110%);
  color: rgba(10, 14, 26, 0.94);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25) inset,
    0 0 22px rgba(46, 231, 242, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

.doc-page-recap__series-order li:has(strong) strong {
  color: rgba(252, 253, 255, 0.99);
  font-weight: 700;
}

.doc-page-recap__series-order a {
  font-weight: 600;
  letter-spacing: 0.015em;
  text-decoration: none;
  border-radius: 4px;
  background: var(--recap-link-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

.doc-page-recap__series-order a:visited {
  background: var(--recap-link-grad-visited);
  -webkit-background-clip: text;
  background-clip: text;
}

.doc-page-recap__series-order a:hover {
  background: var(--recap-link-grad-hover);
  -webkit-background-clip: text;
  background-clip: text;
  filter: brightness(1.06);
}

.doc-page-recap__series-order a:active {
  filter: brightness(0.96);
}

.doc-page-recap__series-order a:focus-visible {
  outline: 2px solid rgba(46, 231, 242, 0.55);
  outline-offset: 3px;
}

.doc-page-recap__series-order + .doc-page-recap__subtitle {
  margin-top: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .doc-page-recap__series-order a {
    transition: none;
  }
}

.doc-page-recap__list code {
  font-size: 0.86em;
}

/*
 * Özet listesinde sayfa-içi çapalar: çizgi yok — yalnızca gradient metin rengi.
 */
.doc-page-recap__list a[href^="#"] {
  position: relative;
  display: inline;
  padding: 0;
  margin: 0;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: 0.012em;
  text-decoration: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  vertical-align: baseline;
  background: var(--recap-link-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: filter 0.2s ease;
}

.doc-page-recap__list a[href^="#"]:visited {
  background: var(--recap-link-grad-visited);
  -webkit-background-clip: text;
  background-clip: text;
}

.doc-page-recap__list a[href^="#"]:hover {
  background: var(--recap-link-grad-hover);
  -webkit-background-clip: text;
  background-clip: text;
  filter: brightness(1.05);
}

.doc-page-recap__list a[href^="#"]:active {
  filter: brightness(0.96);
}

.doc-page-recap__list a[href^="#"]:focus-visible {
  outline: 2px solid rgba(46, 231, 242, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}

.doc-page-recap__list a[href^="#"] code {
  font-size: 0.92em;
  font-weight: 600;
  color: rgba(175, 220, 248, 0.96);
  -webkit-text-fill-color: rgba(175, 220, 248, 0.96);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  border: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .doc-page-recap__list a[href^="#"],
  .doc-page-recap a.doc-link--topic {
    transition: none;
  }

  .doc-page-recap__list a[href^="#"]:active,
  .doc-page-recap a.doc-link--topic:active {
    transform: none;
  }
}

.doc-page-recap__subtitle {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 185, 255, 0.92);
}

.doc-page-recap__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  /* Geniş ekranda uzun tek satır taşarsa yatay kaydırma; dar ekranda aşağıda sütun + satır kırılımı */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Önceki / sonraki: kompakt «chip» — katmanlı gölge ile hafif 3B derinlik */
.doc-page-recap__link {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 0.42rem 0.78rem 0.44rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.doc-page-recap__link--prev {
  border: 1px solid rgba(130, 168, 225, 0.44);
  background: linear-gradient(168deg,
      rgba(28, 38, 62, 0.9) 0%,
      rgba(14, 22, 42, 0.72) 45%,
      rgba(8, 12, 26, 0.86) 100%);
  color: rgba(175, 205, 245, 0.96);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 2px 5px rgba(0, 0, 0, 0.32) inset,
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(110, 155, 220, 0.22);
}

.doc-page-recap__link--prev:hover {
  border-color: rgba(120, 205, 255, 0.55);
  color: rgba(220, 235, 255, 0.98);
  background: linear-gradient(168deg,
      rgba(34, 48, 78, 0.94) 0%,
      rgba(18, 28, 50, 0.82) 45%,
      rgba(10, 16, 32, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.42) inset,
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 2px 4px rgba(0, 0, 0, 0.28) inset,
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(94, 200, 255, 0.14);
}

.doc-page-recap__link--next {
  border: 1px solid rgba(58, 175, 215, 0.4);
  background: linear-gradient(152deg,
      rgba(40, 86, 135, 0.68) 0%,
      rgba(28, 58, 108, 0.56) 38%,
      rgba(58, 42, 105, 0.6) 100%);
  color: rgba(238, 244, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.48) inset,
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 -2px 6px rgba(0, 0, 0, 0.28) inset,
    0 6px 18px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(46, 231, 242, 0.14);
}

.doc-page-recap__link--next:hover {
  border-color: rgba(130, 210, 255, 0.52);
  color: #fff;
  background: linear-gradient(152deg,
      rgba(50, 102, 158, 0.78) 0%,
      rgba(36, 74, 128, 0.66) 40%,
      rgba(80, 54, 138, 0.64) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.38) inset,
    0 1px 0 rgba(255, 255, 255, 0.11) inset,
    0 -2px 5px rgba(0, 0, 0, 0.22) inset,
    0 9px 26px rgba(0, 0, 0, 0.48),
    0 0 26px rgba(181, 108, 255, 0.16);
}

.doc-page-recap__link:focus-visible {
  outline: 2px solid rgba(46, 231, 242, 0.55);
  outline-offset: 2px;
}

.doc-page-recap__context {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(180, 200, 235, 0.85);
}

.doc-page-recap__context a.doc-link--topic code {
  font-size: 0.92em;
  font-weight: 600;
  color: rgba(175, 220, 248, 0.96);
  -webkit-text-fill-color: rgba(175, 220, 248, 0.96);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  border: 0;
  padding: 0;
}

/*
 * Özet kutusu (.doc-page-recap) içindeki .doc-link--topic: liste ile aynı — gradient yazı, çizgi yok.
 */
.doc-page-recap a.doc-link--topic {
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-decoration: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  vertical-align: baseline;
  cursor: pointer;
  background: var(--recap-link-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: filter 0.2s ease;
}

.doc-page-recap a.doc-link--topic:visited {
  background: var(--recap-link-grad-visited);
  -webkit-background-clip: text;
  background-clip: text;
}

.doc-page-recap a.doc-link--topic:hover {
  background: var(--recap-link-grad-hover);
  -webkit-background-clip: text;
  background-clip: text;
  filter: brightness(1.05);
}

.doc-page-recap a.doc-link--topic:active {
  filter: brightness(0.96);
}

.doc-page-recap a.doc-link--topic::after {
  content: none;
  display: none;
  margin: 0;
}

.doc-page-recap a.doc-link--topic:focus-visible {
  outline: 2px solid rgba(46, 231, 242, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Özet listesinde .doc-link--section3: gradient yerine mor + alt çizgi (recap kurallarından sonra). */
.doc-page-recap__list a.doc-link--topic.doc-link--section3,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3 {
  background: none;
  filter: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
  color: #c9a8ff;
  text-decoration: underline solid;
  text-decoration-color: #b56cff;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.doc-page-recap__list a.doc-link--topic.doc-link--section3:visited,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3:visited {
  background: none;
  color: #b89ae8;
  -webkit-text-fill-color: unset;
}

.doc-page-recap__list a.doc-link--topic.doc-link--section3:hover,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3:hover {
  background: rgba(181, 108, 255, 0.12);
  color: #e4d4ff;
  text-decoration-color: #d4a8ff;
  filter: none;
}

.doc-page-recap__list a.doc-link--topic.doc-link--section3:focus-visible,
.doc-page-recap__series-order a.doc-link--topic.doc-link--section3:focus-visible {
  outline: 2px solid rgba(181, 108, 255, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {

  .doc-page-recap__list a[href^="#"],
  .doc-page-recap a.doc-link--topic {
    background: none;
    filter: none;
    -webkit-text-fill-color: unset;
    color: rgba(190, 228, 255, 0.96);
  }

  .doc-page-recap__list a[href^="#"]:visited,
  .doc-page-recap a.doc-link--topic:visited {
    color: rgba(165, 205, 225, 0.92);
  }

  .doc-page-recap__list a[href^="#"]:hover,
  .doc-page-recap a.doc-link--topic:hover {
    color: #ffffff;
  }
}

@media (max-width: 640px) {
  .doc-page-recap__nav {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
  }

  .doc-page-recap__link {
    display: block;
    box-sizing: border-box;
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: unset;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.2;
    padding: 0.34rem 0.72rem 0.36rem;
  }
}