/* ==========================================================================
   Pirivision Handbook — Custom styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Marka palette'i (topbar, link, accent)
   --------------------------------------------------------------------------
   mkdocs.yml içinde `palette.primary: custom` + `palette.accent: custom`
   ayarı, Material'ın hazır renk listesini bypass edip CSS değişkenlerini
   bizim tanımlamamıza izin verir. Aşağıdaki bloklar light + dark
   şemalarında topbar, link, vurgu rengini Pirivision marka değerlerine
   sabitler.

   Frontend kaynağı:
     - #0A2540 (deep navy) — compass border, ana brand vurgusu
     - #0070D2 (kaptan blue) — Kaptan FAB, accent / link rengi
   -------------------------------------------------------------------------- */

/* Light theme — primary: deep navy, accent: kaptan blue */
[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --md-primary-fg-color:        #0A2540;
  --md-primary-fg-color--light:  #143A5C;
  --md-primary-fg-color--dark:   #061726;
  --md-primary-bg-color:         #ffffff;
  --md-primary-bg-color--light:  #ffffffcc;
}

[data-md-color-scheme="default"][data-md-color-accent="custom"] {
  --md-accent-fg-color:          #0070D2;
  --md-accent-fg-color--transparent: #0070D21A;
  --md-accent-bg-color:          #ffffff;
  --md-accent-bg-color--light:   #ffffffcc;
}

/* Dark theme — primary: parlak mavi (aktif sidebar linki için kontrast),
   topbar arka planı .md-header override'ı ile ayrı bir koyu navy'ye sabitlenir.
   Bu ayrım, aynı değişkenin hem topbar bg hem aktif nav link rengi olarak
   kullanılmasından doğan kontrast çakışmasını çözer. */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color:        #7BB7FF;
  --md-primary-fg-color--light:  #A8CFFF;
  --md-primary-fg-color--dark:   #4A8FE0;
  --md-primary-bg-color:         #0F1B2D;
  --md-primary-bg-color--light:  #0F1B2Dcc;
  --md-typeset-a-color:          #7BB7FF;
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color:          #5BB1FF;
  --md-accent-fg-color--transparent: #5BB1FF1A;
  --md-accent-bg-color:          #0F1B2D;
  --md-accent-bg-color--light:   #0F1B2Dcc;
}

/* --------------------------------------------------------------------------
   0-a) Topbar (md-header) — logo & başlık tipografisi
   --------------------------------------------------------------------------
   Logo digitheta_logo.png (kareye yakın). Material default'ta logo 1.2rem,
   bizim için biraz daha belirgin yapıyoruz; başlık metni Inter font'unda
   semibold + harf aralığı ile kurumsal his.
   -------------------------------------------------------------------------- */
/* Topbar arka planı her iki şemada da sabit koyu navy: #0B1729.
   Önceki light mode değeri #0A2540 idi, kullanıcı isteğiyle slate ile
   aynı koyu tona (#0B1729) alındı — marka tutarlılığı + her iki şemada
   topbar görsel olarak aynı. Primary değişkeni dark mode'da aktif nav
   link rengine ayrılmış olduğu için topbar'ı manuel sabitliyoruz. */
.md-header {
  background-color: #0B1729;
  box-shadow: 0 2px 8px rgba(11, 23, 41, 0.28);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #0B1729;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Sidebar primary nav title — drawer mode'da primary sidebar'ın üst
   kısmında "Pirivision Handbook" başlığını gösteren kart. Material
   default'ta primary fg renginde dolgulu kart olarak çıkıyor; biz bu
   "cover"ı sade tutuyoruz — kart/border yok, fakat scroll sırasında
   altındaki nav linkleriyle iç içe girmemesi için arka plan sidebar
   zemininin rengiyle sabitlendi (var(--md-default-bg-color)). */
.md-nav--primary > .md-nav__title,
[data-md-color-scheme="slate"] .md-nav--primary > .md-nav__title {
  background-color: var(--md-default-bg-color);
  box-shadow: none;
  border: 0;
  color: var(--md-default-fg-color);
}

/* Topbar üzerindeki metin / ikon renkleri her iki şemada da beyaz tonu */
.md-header__title,
.md-header__topic > .md-ellipsis,
.md-header__button,
.md-search__input {
  color: rgba(255, 255, 255, 0.92);
}

.md-header__button.md-logo {
  margin: 0.2rem 0.4rem 0.2rem 0;
  padding: 0.2rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
  display: block;
}

/* Site başlığı — Inter / Helvetica fallback */
.md-header__title {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

/* Topbar üzerindeki search kutusu — yumuşak yarı saydam */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Search açıkken (beyaz arka plan) yazılan metin görünür olsun */
[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  color: #0b1729;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Tab/section bar (varsa) — primary'nin biraz açığı */
.md-tabs {
  background-color: var(--md-primary-fg-color--light);
}

/* Dil switcher (alternate dropdown) — daha belirgin */
.md-header__option .md-select__inner {
  border-radius: 6px;
}

/* Mode toggle (sun/moon) butonu — hover'da accent vurgusu */
.md-header__button[data-md-color-scheme]:hover,
.md-header label[for^="__palette"]:hover {
  color: var(--md-accent-fg-color) !important;
}

/* --------------------------------------------------------------------------
   1) Ekran görüntüsü çerçeve stili (mevcut .pv-screenshot)
   -------------------------------------------------------------------------- */
.md-content img.pv-screenshot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.25rem auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background: var(--md-default-bg-color);
  padding: 6px;
}

.md-content img.pv-screenshot:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   2) Görsel placeholder iskeleti
   Kullanım: ![alt](path){.placeholder}
   Asset henüz eklenmediğinde gri kesik çerçeve + diyagonal şerit gösterir.
   -------------------------------------------------------------------------- */
.md-content img.placeholder {
  display: block;
  max-width: 100%;
  min-height: 240px;
  margin: 1.25rem auto;
  border: 2px dashed var(--md-default-fg-color--lighter);
  border-radius: 12px;
  padding: 1.5rem;
  background: repeating-linear-gradient(45deg,
      var(--md-default-fg-color--lightest),
      var(--md-default-fg-color--lightest) 10px,
      transparent 10px,
      transparent 20px);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   3) Custom "video" admonition
   Kullanım:
   !!! video "Başlık"
       Video içeriği veya iframe link'i.
   -------------------------------------------------------------------------- */
:root {
  --md-admonition-icon--video: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>');
}

.md-typeset .admonition.video,
.md-typeset details.video {
  border-color: #7c4dff;
}

.md-typeset .video>.admonition-title,
.md-typeset .video>summary {
  background-color: rgba(124, 77, 255, 0.1);
}

.md-typeset .video>.admonition-title::before,
.md-typeset .video>summary::before {
  background-color: #7c4dff;
  -webkit-mask-image: var(--md-admonition-icon--video);
  mask-image: var(--md-admonition-icon--video);
}

/* --------------------------------------------------------------------------
   4) KPI tipi badge'leri
   Kullanım: <span class="kpi-badge cartesian">Cartesian</span>
   -------------------------------------------------------------------------- */
.md-typeset .kpi-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  margin-right: 0.25em;
  color: #fff;
}

.md-typeset .kpi-badge.cartesian {
  background: #1976d2;
}

.md-typeset .kpi-badge.circular {
  background: #7b1fa2;
}

.md-typeset .kpi-badge.gauge {
  background: #f57c00;
}

.md-typeset .kpi-badge.datagrid {
  background: #455a64;
}

.md-typeset .kpi-badge.map {
  background: #2e7d32;
}

.md-typeset .kpi-badge.text {
  background: #5d4037;
}

.md-typeset .kpi-badge.two-column {
  background: #c2185b;
}

/* --------------------------------------------------------------------------
   5) "TODO" placeholder paragrafı (renkli soft uyarı)
   Sayfanın iskelet (placeholder) sürümlerinde kullanılır.
   -------------------------------------------------------------------------- */
.md-typeset .placeholder-note {
  border-left: 4px solid #f9a825;
  background: rgba(249, 168, 37, 0.08);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.pv-folder-card {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.1rem;
  max-width: 520px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.pv-folder-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.8rem;
  padding: 0.18rem 0.25rem;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--md-default-fg-color);
}

.pv-folder-row:hover {
  background: var(--md-default-fg-color--lightest);
}

.pv-folder-root {
  margin-bottom: 0.45rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
}

.pv-folder-parent {
  font-weight: 600;
}

.pv-folder-group {
  margin-top: 0.35rem;
}

.pv-folder-children {
  margin-left: 1.2rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

.pv-folder-icon {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 0.75rem;
  flex: 0 0 auto;
  border-radius: 0.16rem;
  background: linear-gradient(180deg, #ffd978 0%, #f5b335 100%);
}

.pv-folder-icon::before {
  content: "";
  position: absolute;
  top: -0.18rem;
  left: 0.08rem;
  width: 0.45rem;
  height: 0.25rem;
  border-radius: 0.16rem 0.16rem 0 0;
  background: #f2c14e;
}

.pv-folder-card {
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  max-width: 520px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
}

.pv-folder-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.9rem;
  font-size: 0.92rem;
}

.pv-folder-item.is-root {
  font-weight: 700;
  color: var(--md-primary-fg-color);
}

.pv-folder-item[data-level="1"] {
  margin-left: 1rem;
  font-weight: 600;
}

.pv-folder-item[data-level="2"] {
  margin-left: 2.4rem;
}

.pv-folder-icon {
  width: 1rem;
  height: 0.75rem;
  display: inline-block;
  position: relative;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd978 0%, #f5b335 100%);
}

.pv-folder-icon::before {
  content: "";
  position: absolute;
  top: -0.18rem;
  left: 0.08rem;
  width: 0.45rem;
  height: 0.25rem;
  border-radius: 2px 2px 0 0;
  background: #f2c14e;
}

.pv-folder-card {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1rem 1rem 1.1rem;
  max-width: 560px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.pv-folder-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2rem;
  padding: 0.22rem 0;
  font-size: 0.95rem;
  color: var(--md-default-fg-color);
}

.pv-folder-item.is-root {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.35rem;
}

.pv-folder-item[data-level="1"] {
  margin-left: 1.1rem;
  font-weight: 600;
}

.pv-folder-item[data-level="2"] {
  margin-left: 3rem;
}

.pv-folder-item[data-level="2"]::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  width: 0.65rem;
  border-top: 1px solid var(--md-default-fg-color--lighter);
}

.pv-folder-item[data-level="2"]::after {
  content: "";
  position: absolute;
  left: -1rem;
  top: -0.9rem;
  height: 1.9rem;
  border-left: 1px solid var(--md-default-fg-color--lighter);
}

.pv-folder-icon {
  width: 1rem;
  height: 0.75rem;
  display: inline-block;
  position: relative;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd978 0%, #f5b335 100%);
  flex: 0 0 auto;
}

.pv-folder-icon::before {
  content: "";
  position: absolute;
  top: -0.18rem;
  left: 0.08rem;
  width: 0.45rem;
  height: 0.25rem;
  border-radius: 2px 2px 0 0;
  background: #f2c14e;
}

.pv-folder-card {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1rem 1rem 1.1rem;
  max-width: 560px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.pv-folder-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2rem;
  padding: 0.22rem 0;
  font-size: 0.95rem;
  color: var(--md-default-fg-color);
}

.pv-folder-item.is-root {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin-bottom: 0.35rem;
}

.pv-folder-item[data-level="1"] {
  margin-left: 1.75rem;
  font-weight: 600;
}

.pv-folder-item[data-level="2"] {
  margin-left: 4rem;
}

/* PORT -> level 1 bağlantısı */
.pv-folder-item[data-level="1"]::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  width: 0.55rem;
  border-top: 1px solid var(--md-default-fg-color--lighter);
}

.pv-folder-item[data-level="1"]::after {
  content: "";
  position: absolute;
  left: -1rem;
  top: -1rem;
  height: 2rem;
  border-left: 1px solid var(--md-default-fg-color--lighter);
}

/* level 1 -> level 2 bağlantısı */
.pv-folder-item[data-level="2"]::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  width: 0.55rem;
  border-top: 1px solid var(--md-default-fg-color--lighter);
}

.pv-folder-item[data-level="2"]::after {
  content: "";
  position: absolute;
  left: -1rem;
  top: -1rem;
  height: 2rem;
  border-left: 1px solid var(--md-default-fg-color--lighter);
}

.pv-folder-icon {
  width: 1rem;
  height: 0.75rem;
  display: inline-block;
  position: relative;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd978 0%, #f5b335 100%);
  flex: 0 0 auto;
}

.pv-folder-icon::before {
  content: "";
  position: absolute;
  top: -0.18rem;
  left: 0.08rem;
  width: 0.45rem;
  height: 0.25rem;
  border-radius: 2px 2px 0 0;
  background: #f2c14e;
}

.pv-folder-card {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.2rem;
  max-width: 560px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
  background: var(--md-default-bg-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.pv-folder-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2rem;
  padding: 0.3rem 0;
  color: var(--md-default-fg-color);
  font-size: 1rem;
}

.pv-folder-root {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

/* PORT altındaki ana seviye */
.pv-folder-root-children {
  position: relative;
  margin-left: 1.4rem;
  padding-left: 1.4rem;
}

/* PORT'tan aşağı inen tek parça ana çizgi */
.pv-folder-root-children::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.85rem;
  border-left: 1px solid #b8b8b8;
}

/* Tesis 1 / Tesis 2 / Test Sources satırlarının PORT ana çizgisine bağlanması */
.pv-folder-root-children>.pv-folder-group>.pv-folder-parent::before,
.pv-folder-root-children>.pv-folder-top-leaf::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 50%;
  width: 0.8rem;
  border-top: 1px solid #b8b8b8;
}

/* grup blokları arası boşluk */
.pv-folder-group {
  margin-bottom: 0.35rem;
}

.pv-folder-parent {
  font-weight: 700;
}

/* Tesis alt klasörleri */
.pv-folder-children {
  position: relative;
  margin-left: 2rem;
  padding-left: 1.4rem;
  margin-top: 0.1rem;
}

/* Tesis'in altındaki dikey çizgi */
.pv-folder-children::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.85rem;
  border-left: 1px solid #b8b8b8;
}

/* SCADA / MES / Quality yatay bağlantıları */
.pv-folder-children>.pv-folder-row::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 50%;
  width: 0.8rem;
  border-top: 1px solid #b8b8b8;
}

/* son child'ın altına dikey çizgi fazla uzamasın */
.pv-folder-children>.pv-folder-row:last-child {
  margin-bottom: 0;
}

/* folder icon */
.pv-folder-icon {
  width: 1rem;
  height: 0.75rem;
  display: inline-block;
  position: relative;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd978 0%, #f1b63e 100%);
  flex: 0 0 auto;
}

.pv-folder-icon::before {
  content: "";
  position: absolute;
  top: -0.18rem;
  left: 0.08rem;
  width: 0.45rem;
  height: 0.24rem;
  border-radius: 2px 2px 0 0;
  background: #f0c35a;
}

/* --------------------------------------------------------------------------
   6) Sidebar "Modüller" bölüm başlığı — Ana Sayfa ile Modüller arasında
   yatay ayraç çizgisi. Çizgi, iki bölüm arasındaki boşluğun TAM ORTASINDA
   olacak şekilde `::before` pseudo-element ile yerleştirilir.

   Mekanik:
     • margin-top: 1.4rem  →  Ana Sayfa ile Modüller arasında 1.4rem boşluk
     • ::before top: -0.7rem → çizgi gap'in tam ortasında (1.4rem / 2)

   Selector: `[href="moduller/"]` (kök) + `[href$="/moduller/"]` (alt path).
   -------------------------------------------------------------------------- */
.md-nav__item>.md-nav__link[href="moduller/"],
.md-nav__item>.md-nav__link[href$="/moduller/"] {
  position: relative;

  /* .pirivision-text — Helvetica tabanlı, kalın, scheme-adaptive ton */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-transform: none;
  letter-spacing: 0.5px;

  margin-top: 1.4rem;
}

.md-nav__item>.md-nav__link[href="moduller/"]::before,
.md-nav__item>.md-nav__link[href$="/moduller/"]::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  pointer-events: none;
}

.md-nav__item>.md-nav__link[href="moduller/"]:hover,
.md-nav__item>.md-nav__link[href$="/moduller/"]:hover {
  color: var(--md-accent-fg-color);
}

.md-nav__item>.md-nav__link[href="moduller/"]>.md-ellipsis,
.md-nav__item>.md-nav__link[href$="/moduller/"]>.md-ellipsis {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   8) Sidebar AI bölüm başlığı — Atlas ile AI arasında ortalanmış ayraç
   çizgisi + Modüller başlığıyla aynı font ağırlığı/ton/büyüklük.

   AI artık root seviyesinde bir tek-sayfa entry (Modüller gibi). Render
   yapısı: `<li.md-nav__item> > <a href="AI/">`. Direct-child selector
   doğal olarak çalışır.

   Selector: `[href="AI/"]` (kök) + `[href$="/AI/"]` (alt sayfalardaki
   relative path; ör. `../AI/`, `../../AI/`). HTML attr selector'ı
   case-sensitive olduğu için `captain-ai/` (lowercase) çakışmaz.

   Mekanik: margin-top: 1.4rem + ::before top: -0.7rem  →  çizgi gap'in
   TAM ORTASINDA. Modüller divider'ı ile birebir aynı pattern.
   -------------------------------------------------------------------------- */
.md-nav__item>.md-nav__link[href="AI/"],
.md-nav__item>.md-nav__link[href$="/AI/"] {
  position: relative;

  /* .pirivision-text — Helvetica tabanlı, kalın, scheme-adaptive ton */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-transform: none;
  letter-spacing: 0.5px;

  margin-top: 1.4rem;
}

.md-nav__item>.md-nav__link[href="AI/"]::before,
.md-nav__item>.md-nav__link[href$="/AI/"]::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  pointer-events: none;
}

.md-nav__item>.md-nav__link[href="AI/"]:hover,
.md-nav__item>.md-nav__link[href$="/AI/"]:hover {
  color: var(--md-accent-fg-color);
}

.md-nav__item>.md-nav__link[href="AI/"]>.md-ellipsis,
.md-nav__item>.md-nav__link[href$="/AI/"]>.md-ellipsis {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   9) Sidebar "Ekosistem" bölüm başlığı — Kaptan AI ile Ekosistem arasında
   ortalanmış ayraç çizgisi + Modüller/AI başlıklarıyla birebir aynı
   font/ton/büyüklük.

   NOT: Bu bölüm önceden "Ek Modüller" (ek-moduller.md) olarak
   adlandırılmıştı; nav `ekosistem.md` olarak yeniden adlandırıldı, CSS
   selector'ları da `[href="ekosistem/"]`'e güncellendi. Eski `ek-moduller/`
   artığı kaldırıldı.

   Mekanik: margin-top: 1.4rem + ::before top: -0.7rem  →  çizgi gap'in
   TAM ORTASINDA. Modüller / AI divider'larıyla birebir aynı pattern.
   -------------------------------------------------------------------------- */
.md-nav__item>.md-nav__link[href="ekosistem/"],
.md-nav__item>.md-nav__link[href$="/ekosistem/"] {
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-transform: none;
  letter-spacing: 0.5px;
  margin-top: 1.4rem;
}

.md-nav__item>.md-nav__link[href="ekosistem/"]::before,
.md-nav__item>.md-nav__link[href$="/ekosistem/"]::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  pointer-events: none;
}

.md-nav__item>.md-nav__link[href="ekosistem/"]:hover,
.md-nav__item>.md-nav__link[href$="/ekosistem/"]:hover {
  color: var(--md-accent-fg-color);
}

.md-nav__item>.md-nav__link[href="ekosistem/"]>.md-ellipsis,
.md-nav__item>.md-nav__link[href$="/ekosistem/"]>.md-ellipsis {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   10-a) Sidebar "Features" bölüm başlığı — Automation ile Features arasında
   ortalanmış ayraç çizgisi + Modüller/AI/Ek Modüller başlıklarıyla birebir
   aynı font/ton/büyüklük.

   Mekanik: margin-top: 1.4rem + ::before top: -0.7rem  →  çizgi gap'in
   TAM ORTASINDA. Önceki divider blokları ile birebir aynı pattern.
   -------------------------------------------------------------------------- */
.md-nav__item>.md-nav__link[href="features/"],
.md-nav__item>.md-nav__link[href$="/features/"] {
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-transform: none;
  letter-spacing: 0.5px;
  margin-top: 1.4rem;
}

.md-nav__item>.md-nav__link[href="features/"]::before,
.md-nav__item>.md-nav__link[href$="/features/"]::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  pointer-events: none;
}

.md-nav__item>.md-nav__link[href="features/"]:hover,
.md-nav__item>.md-nav__link[href$="/features/"]:hover {
  color: var(--md-accent-fg-color);
}

.md-nav__item>.md-nav__link[href="features/"]>.md-ellipsis,
.md-nav__item>.md-nav__link[href$="/features/"]>.md-ellipsis {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   9-z) Top-level divider başlıkları — aktif state + dark mode düzeltmeleri
   --------------------------------------------------------------------------
   Modüller / AI Ekosistemi / Ekosistem / Özellikler (Features) — tüm divider
   başlıklar tek selector listesi altında consolidate edilmiş override.

   Çözülen iki problem:

   (1) AKTİF STATE ÇAKIŞMASI
       Material'ın `.md-nav__link--active` rule'u nav linkini
       `--md-primary-fg-color`'a (dark mode'da parlak mavi #7BB7FF) zorluyor.
       Yukarıdaki bireysel divider rule'ları sadece attribute-selector
       specificity'sine sahip → Material kazanıyor → divider sayfasındayken
       başlık parlak mavi + helvetica + letter-spacing bir arada karışık
       görünüyordu. Bu blok `--active` class'ını selector zincirine ekleyip
       specificity'yi artırarak override eder.

   (2) DARK MODE KONTRAST YETERSİZLİĞİ
       `var(--md-default-fg-color--light)` slate scheme'de 0.56 opacity ile
       geliyor → koyu zemin üzerinde geri planda kalıyordu. `[scheme=slate]`
       prefix'li override daha yüksek opacity'li explicit rgba kullanıyor.

   Selector tek bir consolidated liste:
     [href="moduller/"] / [href$="/moduller/"]
     [href="AI/"]       / [href$="/AI/"]      (case-sensitive: captain-ai çakışmaz)
     [href="ekosistem/"]/ [href$="/ekosistem/"]
     [href="features/"] / [href$="/features/"]
   -------------------------------------------------------------------------- */

/* (1-a) Aktif divider başlığı — light mode */
.md-nav__item>.md-nav__link.md-nav__link--active[href="moduller/"],
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/moduller/"],
.md-nav__item>.md-nav__link.md-nav__link--active[href="AI/"],
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/AI/"],
.md-nav__item>.md-nav__link.md-nav__link--active[href="ekosistem/"],
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/ekosistem/"],
.md-nav__item>.md-nav__link.md-nav__link--active[href="features/"],
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/features/"] {
  color: var(--md-default-fg-color);
  font-weight: 700;
  /* position/overflow/margin-top korunur — Material bazı sürümlerde aktif
     link'e overflow:hidden veya farklı positioning ekleyerek ::before'u kırar */
  position: relative;
  overflow: visible;
  margin-top: 1.4rem;
}

/* (1-b) Aktif divider'ın .md-ellipsis child'ı da inherit etsin */
.md-nav__item>.md-nav__link.md-nav__link--active[href="moduller/"]>.md-ellipsis,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/moduller/"]>.md-ellipsis,
.md-nav__item>.md-nav__link.md-nav__link--active[href="AI/"]>.md-ellipsis,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/AI/"]>.md-ellipsis,
.md-nav__item>.md-nav__link.md-nav__link--active[href="ekosistem/"]>.md-ellipsis,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/ekosistem/"]>.md-ellipsis,
.md-nav__item>.md-nav__link.md-nav__link--active[href="features/"]>.md-ellipsis,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/features/"]>.md-ellipsis {
  color: inherit;
  font-weight: inherit;
}

/* (1-c) Aktif divider'ın ::before ayraç çizgisi — Material aktif indicator
   olarak ::before'a background-color, width veya height ekleyebilir (sol bar
   efekti); burada geometry + renk sıfırlanarak yatay divider geri getirilir. */
.md-nav__item>.md-nav__link.md-nav__link--active[href="moduller/"]::before,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/moduller/"]::before,
.md-nav__item>.md-nav__link.md-nav__link--active[href="AI/"]::before,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/AI/"]::before,
.md-nav__item>.md-nav__link.md-nav__link--active[href="ekosistem/"]::before,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/ekosistem/"]::before,
.md-nav__item>.md-nav__link.md-nav__link--active[href="features/"]::before,
.md-nav__item>.md-nav__link.md-nav__link--active[href$="/features/"]::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  pointer-events: none;
}

/* (2-a) Dark mode (slate) base color — kontrastlı açık ton */
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href="moduller/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href$="/moduller/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href="AI/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href$="/AI/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href="ekosistem/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href$="/ekosistem/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href="features/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link[href$="/features/"] {
  color: rgba(232, 238, 245, 0.82);
}

/* (2-b) Dark mode aktif divider — en parlak ton + layout korunur */
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="moduller/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/moduller/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="AI/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/AI/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="ekosistem/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/ekosistem/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="features/"],
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/features/"] {
  color: rgba(255, 255, 255, 0.96);
  position: relative;
  overflow: visible;
  margin-top: 1.4rem;
}

/* (2-c) Dark mode aktif divider'ın ::before — aynı çizgi, transparan bg */
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="moduller/"]::before,
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/moduller/"]::before,
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="AI/"]::before,
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/AI/"]::before,
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="ekosistem/"]::before,
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/ekosistem/"]::before,
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href="features/"]::before,
[data-md-color-scheme="slate"] .md-nav__item>.md-nav__link.md-nav__link--active[href$="/features/"]::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  pointer-events: none;
}

/* (3) Hover override — accent rengi her iki şemada da öncelikli */
.md-nav__item>.md-nav__link[href="moduller/"]:hover,
.md-nav__item>.md-nav__link[href$="/moduller/"]:hover,
.md-nav__item>.md-nav__link[href="AI/"]:hover,
.md-nav__item>.md-nav__link[href$="/AI/"]:hover,
.md-nav__item>.md-nav__link[href="ekosistem/"]:hover,
.md-nav__item>.md-nav__link[href$="/ekosistem/"]:hover,
.md-nav__item>.md-nav__link[href="features/"]:hover,
.md-nav__item>.md-nav__link[href$="/features/"]:hover {
  color: var(--md-accent-fg-color);
}

/* --------------------------------------------------------------------------
   9-α) AKTİF DIVIDER SAYFASI — body.divider-page tabanlı override
   --------------------------------------------------------------------------
   GERÇEKLİK: Material 9.x aktif sidebar nav linkini
   `<a href="./" class="md-nav__link md-nav__link--active">` olarak render
   ediyor. Yani Modüller sayfasındayken Modüller linkinin href'i artık
   `moduller/` veya `../moduller/` değil, salt `./`.
   Bu yüzden yukarıdaki tüm `--active[href="moduller/"]` selector'ları
   AKTİF DIVIDER SAYFADA match ETMİYOR — divider stili kayboluyordu.

   ÇÖZÜM: `assets/javascripts/divider-page-class.js` aktif divider sayfada
   body'ye `divider-page` class'ı ekliyor; bu blok da `body.divider-page`
   prefix'iyle aktif `[href="./"]` link'ine tam divider stilini geri uyguluyor.
   -------------------------------------------------------------------------- */

/* (α-1) Light mode — base divider stili */
body.divider-page .md-nav__item > .md-nav__link.md-nav__link--active[href="./"] {
  position: relative;
  overflow: visible;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0.5px;
  margin-top: 1.4rem;
  color: var(--md-default-fg-color);
}

/* (α-2) Yatay ayraç çizgisi — gap'in tam ortasında */
body.divider-page .md-nav__item > .md-nav__link.md-nav__link--active[href="./"]::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  pointer-events: none;
}

/* (α-3) Child .md-ellipsis inherit etsin */
body.divider-page .md-nav__item > .md-nav__link.md-nav__link--active[href="./"] > .md-ellipsis {
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* (α-4) Dark mode (slate) — daha parlak ton */
[data-md-color-scheme="slate"] body.divider-page
  .md-nav__item > .md-nav__link.md-nav__link--active[href="./"] {
  color: rgba(255, 255, 255, 0.96);
}

/* (α-5) Hover override (kendi sayfasında bile accent'e dönsün) */
body.divider-page .md-nav__item > .md-nav__link.md-nav__link--active[href="./"]:hover {
  color: var(--md-accent-fg-color);
}

/* --------------------------------------------------------------------------
   10) Extension nav badge — CaptainAI, Product Memory ve Automation
   sidebar linklerinin yanına hafif "#Extension" etiketi ekler.

   CaptainAI flat entry → <li> > <a>  — direct child (>) çalışır.
   Product Memory / Automation section → <li> > <label> > <a>
   — <a> direct child DEĞİL; descendant selector (boşluk) gerekir.
   -------------------------------------------------------------------------- */

/* CaptainAI — flat entry, direct child selector */
.md-nav__item>.md-nav__link[href="captain-ai/"]::after,
.md-nav__item>.md-nav__link[href$="/captain-ai/"]::after,
/* Product Memory & Automation — section, descendant selector */
.md-nav__item .md-nav__link[href="productmemory/"]::after,
.md-nav__item .md-nav__link[href$="/productmemory/"]::after,
.md-nav__item .md-nav__link[href="automation/"]::after,
.md-nav__item .md-nav__link[href$="/automation/"]::after,
/* AKTİF DURUM — href selector'ları section kendi sayfasındayken
   `href="./"` olduğu için eşleşmez ve badge kaybolur.
   `extension-badge-persist.js` URL'den section'ı tespit edip ilgili
   <a> elementine `pv-extension-badge` class'ı ekler; bu selector onu
   yakalar. */
a.md-nav__link.pv-extension-badge::after {
  content: "#EXTENSION";
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.15em 0.42em;
  font-size: 0.6em;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 4px;
  vertical-align: middle;
  pointer-events: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11) .pv-ext-tag — sayfa başlığında (h1) "#Extension" chip rozeti.
   Kullanım: # Başlık <span class="pv-ext-tag">#Extension</span>

   Pill/chip stili: hafif border + yumuşak arka plan + küçük font.
   vertical-align:middle + top:-0.18em ikilisi h1'in büyük line-height'ına
   karşı rozeti görsel merkeze sabitler.
   -------------------------------------------------------------------------- */
.md-typeset .pv-ext-tag {
  display: inline-block;
  font-size: 0.37em;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;

  color: var(--md-default-fg-color--light);
  background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 5px;

  padding: 0.25em 0.55em;
  margin-left: 0.55em;

  vertical-align: middle;
  position: relative;
  top: -0.18em;
}

/* --------------------------------------------------------------------------
   13) Ana sayfa hero — viewport-fill tanıtım bölümü
   --------------------------------------------------------------------------
   Ana sayfa ilk açıldığında (default zoom %100) yalnızca hero görünür;
   altındaki "Platform Akışı" başlığı ve sonraki tablolar ilk viewport'ta
   parçalı şekilde gözükmez. Kullanıcı hero'daki "Akışı keşfet" butonuna
   veya scroll'a tepki verince narrative içerik akmaya başlar.

   Mekanik:
     • min-height: calc(100vh - var(--header-h)) → viewport'u doldur.
       Material header default ~2.4rem, mobil + ek padding için 5.5rem
       payı bırakıyoruz; küçük ekranlarda media query ile düşürülüyor.
     • flex/center → içerik dikey + yatay merkezde.
     • Negatif margin-top — Material .md-content__inner default
       padding-top: 1.2rem; hero bu boşluğu yutarak topbar'a yaslanır.
     • Soft radial gradient + alt fade — sayfanın geri kalanına yumuşak
       geçiş verir; "burada hero bitti, scroll edince devamı geliyor"
       hissini korur.

   Hero içindeki H1 (.pv-hero h1) gradient text efektiyle render edilir;
   light mode'da deep-navy → kaptan-blue, dark mode'da düz açık ton.
   -------------------------------------------------------------------------- */
.md-typeset .pv-hero {
  min-height: calc(100vh - 5.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1.2rem 0 3.5rem;
  /* Yatay padding kasıtlı olarak yüksek (3rem). Hero'nun gradient bg'si
     viewport'un tam kenarına gider; içerideki tüm öğeleri bu padding ile
     içeri çekiyoruz ki Port/Atlas gibi flow uçları gradient kenarına
     yapışmasın. Mobil/tablet media query'lerinde bu değer azaltılır. */
  padding: 2rem 3rem 3rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(0, 112, 210, 0.10), transparent 55%),
    radial-gradient(ellipse at 82% 72%, rgba(10, 37, 64, 0.08), transparent 55%),
    var(--md-default-bg-color);
  text-align: center;
}

[data-md-color-scheme="slate"] .md-typeset .pv-hero {
  background:
    radial-gradient(ellipse at 18% 28%, rgba(91, 177, 255, 0.14), transparent 55%),
    radial-gradient(ellipse at 82% 72%, rgba(123, 183, 255, 0.06), transparent 55%),
    var(--md-default-bg-color);
}

/* Alt bölüme yumuşak fade — viewport sınırında "kesilmiş içerik" hissi
   yerine "devamı aşağıda" hissi verir. */
.md-typeset .pv-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, transparent, var(--md-default-bg-color));
  pointer-events: none;
}

.md-typeset .pv-hero-inner {
  position: relative;
  z-index: 1;
  /* Hero-inner 820px → title ve paragraf rahat sığar; flow ise pill+ok
     küçültüldüğü için bu inner'ın içinde belirgin auto-margin ile ortada
     toplanır. Pill toplam genişliği ~390-420px civarı, flow box ~470-500px
     → 820px inner'da her iki yandan ~160px+ inset. */
  max-width: 820px;
  margin: 0 auto;
}

/* Eyebrow chip — .pv-screenshot ile aynı çerçeve dilini kullanır:
   border + yumuşak shadow + bg-color zemin + iç padding + halo ring.
   Hero'nun radial gradient'i chip zeminine çok yakın olduğundan ekstra
   `outline` halkası + güçlü drop-shadow ile chip yüzeyden açıkça
   yükseltilir. Amaç: chip ile hero arka planı arasındaki sert/silik
   geçişi yumuşatmak; chip etrafında belirgin "matted" çerçeve hissi
   vermek. */
.md-typeset .pv-hero-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
  background: var(--md-default-bg-color);
  padding: 0.55em 1.25em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 999px;
  /* Çift katmanlı shadow: yakın katman chip kenarlarını net keser,
     uzak katman zemine doğru yumuşak halka açar — pv-screenshot ile
     paralel görsel dil. */
  box-shadow:
    0 1px 2px rgba(10, 37, 64, 0.06),
    0 8px 24px rgba(10, 37, 64, 0.14);
  margin-bottom: 1.75rem;
}

[data-md-color-scheme="slate"] .md-typeset .pv-hero-eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Hero başlığı — gradient metin (light), düz parlak ton (dark).
   Font-size clamp() ile viewport'a göre fluid: max 2.6rem (geniş ekran),
   sidebar+TOC açıkken (content ~800-900px) ~2rem'e düşer → "5 adımda
   Veri'den Dashboard'a." başlığı tek satırda kalır, iki satıra kırılmaz. */
.md-typeset .pv-hero h1 {
  font-size: clamp(1.7rem, 1.4vw + 1.2rem, 2.6rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  /* Material .md-typeset h1'in default border-bottom'unu kapat — hero başlığı
     altında çizgi olmamalı. */
  border-bottom: 0;
  padding-bottom: 0;
}

[data-md-color-scheme="default"] .md-typeset .pv-hero h1 {
  background: linear-gradient(135deg, #0A2540 0%, #0070D2 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-md-color-scheme="slate"] .md-typeset .pv-hero h1 {
  color: #E8EFF7;
}

.md-typeset .pv-hero p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  max-width: 620px;
  margin: 0 auto 2rem;
}

/* Ana flow satırı (Port → Atlas) — geniş ekranda tek satıra zorlanır;
   küçük ekranlarda media query bloğunda wrap'a açılır. İkincil flow
   (.is-secondary) da nowrap — 4 pill her zaman tek satırda gösterilir. */
.md-typeset .pv-hero-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.55rem;
  margin: 0 auto 1.25rem;
}

.md-typeset .pv-hero-flow.is-primary {
  flex-wrap: nowrap;
  /* Flow geometrisi:
       • width: fit-content → kendi içeriği kadar genişler. İçerik küçük
         (kompakt pill + ince ok) olduğu için flow box dar kalır →
         hero-inner içinde auto-margin ile ortada toplanır.
       • max-width: calc(100% - 2rem) → her durumda parent'a 1rem buffer.
       • box-sizing: border-box → padding bu sınırın İÇİNDEN sayılır.
       • padding clamp(1.5rem, 4vw, 2.5rem) → minimum 1.5rem inset.
     Net etki: pill'ler küçük + flow box kompakt + 820px inner →
     Port ve Atlas hero ortasında toplanır, kenardan belirgin mesafe açar. */
  width: fit-content;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  margin: 0 auto 1.1rem;
  padding: 0 clamp(1.5rem, 4vw, 2.5rem);
  /* Gap kompakt — pill ve oklar birbirine yakın, toplam genişlik küçük */
  gap: clamp(0.12rem, 0.4vw, 0.35rem);
}

.md-typeset .pv-hero-flow.is-secondary {
  flex-wrap: nowrap;          /* 4 pill tek satırda kalır */
  max-width: 640px;
  gap: 0.2rem 0.35rem;        /* gap hafif kısaltıldı — daha sıkışık ama tek satır */
  margin: 0;
}

/* Pill — hem <span> hem <a> olarak render edilebilir. Anchor varyantı için
   text-decoration kaldırılır, color override edilir; ziyaret edilmiş /
   focus-visible state'leri pill stiline uyumlanır. Anchor seçicisi (a.pv-...)
   Material'ın varsayılan a-rengini ezecek specificity'ye sahip. */
.md-typeset .pv-hero-step,
.md-typeset a.pv-hero-step,
.md-typeset a.pv-hero-step:visited {
  display: inline-block;
  /* clamp() — viewport'a göre orantılı sığma. Boyutlar bilinçli olarak
     kompakt: pill'ler küçük → toplam content daralır → flow auto-margin'i
     genişler → Port ve Atlas görünür biçimde hero ortasında toplanır,
     kenardan belirgin mesafe açar. */
  padding: clamp(0.28em, 0.5vw + 0.18em, 0.4em) clamp(0.5em, 1vw + 0.35em, 0.85em);
  font-size: clamp(0.7rem, 0.3vw + 0.6rem, 0.85rem);
  font-weight: 600;
  color: var(--md-primary-fg-color--dark);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(10, 37, 64, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.md-typeset .pv-hero-step:hover,
.md-typeset a.pv-hero-step:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.10);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.md-typeset a.pv-hero-step:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

[data-md-color-scheme="slate"] .md-typeset .pv-hero-step,
[data-md-color-scheme="slate"] .md-typeset a.pv-hero-step,
[data-md-color-scheme="slate"] .md-typeset a.pv-hero-step:visited {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: #E8EFF7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Ekstensiyon pill'i — ana akışa göre daha hafif; outline yok, soluk
   arka plan, küçük tipografi. Görsel hiyerarşi: Port→Atlas baskın,
   AI/Eklentiler ikincil. <a> varyantı için color/visited override'ları. */
.md-typeset .pv-hero-step.is-ext,
.md-typeset a.pv-hero-step.is-ext,
.md-typeset a.pv-hero-step.is-ext:visited {
  padding: 0.32em 0.75em;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  background: transparent;
  border: 1px dashed var(--md-default-fg-color--lighter);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-typeset .pv-hero-step.is-ext,
[data-md-color-scheme="slate"] .md-typeset a.pv-hero-step.is-ext,
[data-md-color-scheme="slate"] .md-typeset a.pv-hero-step.is-ext:visited {
  color: rgba(232, 239, 247, 0.78);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.md-typeset .pv-hero-step.is-ext:hover,
.md-typeset a.pv-hero-step.is-ext:hover {
  border-style: solid;
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
  transform: none;
  box-shadow: none;
}

.md-typeset .pv-hero-arrow {
  /* Ok pill'lerden bilinçli olarak daha küçük — sade ayırıcı görevini
     görür, tipografi yığını oluşturmaz. Maks 0.75rem, geniş ekranda bile
     incedir; toplam content küçülür → Port/Atlas içe yaklaşır. */
  font-size: clamp(0.6rem, 0.22vw + 0.55rem, 0.75rem);
  font-weight: 600;
  color: var(--md-default-fg-color--lighter);
  user-select: none;
  margin: 0 -0.05rem;
}

.md-typeset .pv-hero-dot {
  font-size: 0.95rem;
  color: var(--md-default-fg-color--lighter);
  user-select: none;
  line-height: 1;
}

/* Ek satır kapsayıcısı — etiket + ikincil flow */
.md-typeset .pv-hero-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 0 auto 2rem;
}

.md-typeset .pv-hero-extra-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  opacity: 0.75;
}

/* CTA butonu — accent renginde dolgulu pill */
.md-typeset a.pv-hero-button,
.md-typeset a.pv-hero-button:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.75em 1.7em;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: var(--md-accent-fg-color);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 112, 210, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.md-typeset a.pv-hero-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 112, 210, 0.34);
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset a.pv-hero-button {
  box-shadow: 0 6px 18px rgba(91, 177, 255, 0.22);
}

[data-md-color-scheme="slate"] .md-typeset a.pv-hero-button:hover {
  box-shadow: 0 10px 24px rgba(91, 177, 255, 0.30);
}

/* --------------------------------------------------------------------------
   Topbar — logo/hamburger konumlandırma (mobil + desktop)
   --------------------------------------------------------------------------
   MOBİL (≤76.25em):
     Material'ın DOM'unda logo hamburger'dan önce geliyor (a.md-logo →
     label[for="__drawer"]). Flexbox order ile hamburger sola, logo sağa
     alınır — standart mobil nav konvansiyonuyla örtüşür.
     Logo görünürlüğü: dil değiştirici + 2 tema toggle + arama ikonu
     kombinasyonu logo'yu bastırabiliyor; !important ile korunuyor.

   DESKTOP (≥76.25em):
     Logo ve TOC toggle, Material'ın varsayılan render sırası veya diğer
     override'lar nedeniyle sağa kayabiliyor. Negatif order değerleriyle
     her iki eleman da title + sağ kontroller bloğunun ÖNÜNE alınır:
       Logo  → order: -2  (en sol)
       TOC   → order: -1  (logo'nun hemen sağı)
       Title → order:  0  (default, flex-grow ile geri kalanı doldurur)
       ☀ ᴬ Ara → order: 0 (default, title'dan sonra DOM sırasına göre sağa)
   -------------------------------------------------------------------------- */

/* Mobil: logo görünürlük + hamburger/logo sırası
   Negatif order zorunlu: Material'ın kendi elementleri order:0 alır,
   pozitif değerler onların SAĞINA iter. Negatif değerlerle her ikisi de
   sola sabitleniyor:
     Hamburger → order: -2  (en sol)
     Logo      → order: -1  (hamburger'ın hemen sağı)
     Başlık / arama / toggle → order: 0 (sağ taraf, default) */
@media screen and (max-width: 76.25em) {
  label.md-header__button[for="__drawer"] {
    order: -2;
  }

  .md-header__button.md-logo {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: -1;
  }

  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 1.3rem !important;
    width: auto !important;
    display: block !important;
  }
}

/* Desktop: mobille aynı sıra — hamburger en sol, logo hemen sağı */
@media screen and (min-width: 76.25em) {
  label.md-header__button[for="__drawer"] {
    order: -2;
  }

  .md-header__button.md-logo {
    order: -1;
  }
}

/* Mobil — viewport daha kısa, paragraf tipografisi küçülür, ana satır
   wrap'a açılır (nowrap kaldırılır), ok karakterleri gizlenir; pill'ler
   alt alta sarar. h1 boyutu artık global clamp() ile fluid; burada
   override etmiyoruz. */
@media screen and (max-width: 600px) {
  .md-typeset .pv-hero {
    min-height: calc(100vh - 4rem);
    padding: 1.5rem 1.25rem 2.5rem;
  }
  .md-typeset .pv-hero p {
    font-size: 0.98rem;
  }
  .md-typeset .pv-hero-flow.is-primary {
    flex-wrap: wrap;
    width: auto;
    gap: 0.4rem;
  }
  .md-typeset .pv-hero-arrow,
  .md-typeset .pv-hero-dot {
    display: none;
  }
}

/* Tablet/orta — hero outer padding daralır. h1 boyutu clamp() ile zaten
   viewport'a göre azalıyor; sabit override gereksiz. */
@media screen and (max-width: 960px) and (min-width: 601px) {
  .md-typeset .pv-hero {
    padding: 2rem 2rem 3rem;
  }
}

/* --------------------------------------------------------------------------
   12) Navigation footer — Previous / Next hizalama düzeltmesi
   --------------------------------------------------------------------------
   Sol sidebar görünürken (≥76.25em) .md-footer__inner'a padding-left
   ekleyerek "Önceki" butonu sidebar alanının dışına taşıyoruz.
   Her iki sidebar da görünürken (≥97em) sağ tarafa da aynı dengelemeyi
   uyguluyoruz.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 76.25em) {
  .md-footer__inner {
    padding-left: 12.9rem;
  }
}

@media screen and (min-width: 97em) {
  .md-footer__inner {
    padding-right: 12.9rem;
  }
}

/* --------------------------------------------------------------------------
   13) Sidebar collapse toggle — VSCode benzeri floating tab
   --------------------------------------------------------------------------
   `assets/javascripts/sidebar-toggle.js` body'ye fixed-position bir tab
   enjekte eder. JS tab'ın `left` değerini sidebar'ın sağ kenarına
   (overlap 8px) veya kapalıyken viewport sol kenarına (0) ayarlar.
   Body'ye `pv-sidebar-collapsed` class'ı toggle eder.

   Bu CSS bloğu:
     • Tab'ı yalnızca desktop'ta gösterir (≥76.25em). Mobil/tablette
       Material'ın kendi drawer hamburger'ı zaten var.
     • Tab'a sabit ölçü, yumuşak chevron ikonu, light/dark scheme uyumlu
       border + shadow, hover/focus state, smooth `left` ve SVG rotate
       transition'ları verir.
     • body.pv-sidebar-collapsed iken primary sidebar'ı `display: none`
       yapar. Material flex layout content'i doğal şekilde genişletir.
     • body.pv-sidebar-collapsed iken footer padding-left'ini sıfırlar.
     • Chevron SVG default sola bakar; collapsed iken 180° döner.
   -------------------------------------------------------------------------- */

/* Mobil/tablet: tab tamamen gizli — Material drawer hamburger'ı yeterli */
.pv-sidebar-toggle {
  display: none;
}

@media screen and (min-width: 76.25em) {
  /* Floating tab — sidebar'ın doğal uzantısı gibi okunur:
       • Aynı bg-color → sidebar zemininin devamı
       • Hairline border (lightest) → seam yerine ince ayrım çizgisi
       • Shadow neredeyse görünmez — sadece subtle depth ipucu, "yüzeyden
         fırlayan element" hissi vermez
       • Chevron muted gri → başlık olarak değil "drawer pull" olarak okunur
     Hover'da bile tab kendini hafifçe büyültmez; sadece chevron rengi ve
     ince bg tint değişir. */
  .pv-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    top: 50vh;
    left: 0; /* JS başlangıç pozisyonunu hemen ayarlar */
    transform: translateY(-50%);
    z-index: 3;

    width: 20px;
    height: 52px;
    padding: 0;
    margin: 0;

    /* Sol taraf düz, sağ taraf hafif yuvarlatılmış (drawer pull dili).
       Border tonu --lightest → sidebar'ın kendi natural divider tonuyla
       hizalı; göze net çizgi olarak çarpmaz. */
    border: 1px solid var(--md-default-fg-color--lightest);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color--lighter);

    /* Ufak yatay shadow — sadece sağa doğru çok hafif depth, sidebar
       devamında yüzeyden ayrılma hissi yok */
    box-shadow: 1px 0 3px rgba(10, 37, 64, 0.04);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    transition:
      left 0.22s ease,
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
  }

  /* SVG ikon — küçük, sade chevron */
  .pv-sidebar-toggle svg {
    transition: transform 0.22s ease;
    fill: currentColor;
    pointer-events: none;
  }

  /* Collapsed iken chevron 180° döner → sağa bakar (expand aksiyonu) */
  body.pv-sidebar-collapsed .pv-sidebar-toggle svg {
    transform: rotate(180deg);
  }

  /* Hover — sadece chevron rengi belirginleşir + çok hafif bg tint.
     Border ve geometri değişmez → tab yerinden zıplamaz. */
  .pv-sidebar-toggle:hover {
    background: var(--md-default-fg-color--lightest);
    color: var(--md-default-fg-color--light);
    box-shadow: 1px 0 4px rgba(10, 37, 64, 0.06);
  }

  /* Klavye odağı — accent outline (erişilebilirlik için belirgin tek
     instance burada) */
  .pv-sidebar-toggle:focus-visible {
    outline: 2px solid var(--md-accent-fg-color);
    outline-offset: 2px;
  }

  /* Collapsed state'te tab viewport sol kenarında — burada border-left
     görünür hale gelir ki kenara yapışmış kart hissi versin */
  body.pv-sidebar-collapsed .pv-sidebar-toggle {
    border-left: 1px solid var(--md-default-fg-color--lightest);
  }

  /* Dark scheme — sidebar'ın slate zeminiyle aynı renk ailesi,
     hairline beyaz border, neredeyse hissedilmez shadow */
  [data-md-color-scheme="slate"] .pv-sidebar-toggle {
    background: var(--md-default-bg-color);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(232, 239, 247, 0.55);
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.20);
  }

  [data-md-color-scheme="slate"] .pv-sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(232, 239, 247, 0.90);
    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.30);
  }

  [data-md-color-scheme="slate"] body.pv-sidebar-collapsed .pv-sidebar-toggle {
    border-left-color: rgba(255, 255, 255, 0.08);
  }

  /* Collapsed state — primary sidebar gizlenir */
  body.pv-sidebar-collapsed .md-sidebar--primary {
    display: none;
  }

  /* Footer Önceki/Sonraki butonları için sol padding sıfırla */
  body.pv-sidebar-collapsed .md-footer__inner {
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   ChatGPT topbar link (chatgpt-link.js tarafından enjekte edilir)
   --------------------------------------------------------------------------
   Material'ın .md-header__button class'ı temel boyutlamayı ve hover'ı
   sağlar. Buradaki kurallar yalnızca ince ayar: SVG rengi ve opacity. */
.pv-chatgpt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  color: var(--md-primary-bg-color);
  text-decoration: none;
}

.pv-chatgpt-link img {
  filter: brightness(0) invert(1);
}

.pv-chatgpt-link:hover {
  opacity: 1;
}

[data-md-color-scheme="slate"] .pv-chatgpt-link {
  opacity: 0.65;
}

[data-md-color-scheme="slate"] .pv-chatgpt-link:hover {
  opacity: 1;
}