/* ==========================================================================
   EggMaster — Icindekiler / kategori rayi
   toc.js ile birlikte calisir: liste icerikteki basliklardan uretilir.
   Markup <details> — mobilde acilir/kapanir, masaustunde her zaman acik.
   Kullanan sayfalar: about (Contents), faq (Categories)
   ========================================================================== */

.toc {
  background-color: var(--em-surface-lowest);
  border-radius: var(--em-radius-lg);
  box-shadow: var(--em-shadow-warm);
  padding: var(--em-space-2) var(--em-space-3);
}

/* Icerikte baslik yoksa JS bu isareti ekler */
.toc[hidden] { display: none; }

.toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--em-space-1);
  padding-block: var(--em-space-1);
  color: var(--em-ink-variant);
  cursor: pointer;
  list-style: none;
}
.toc__summary::-webkit-details-marker { display: none; }

.toc__summary svg {
  width: 18px;
  height: 18px;
  transition: transform var(--em-dur) var(--em-ease);
}
.toc[open] .toc__summary svg { transform: rotate(180deg); }

.toc__list {
  display: grid;
  gap: 2px;
  margin-top: var(--em-space-1);
}

.toc__link {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--em-outline-variant);
  color: var(--em-ink-variant);
  font-size: var(--em-body-sm-size);
  font-weight: 500;
  line-height: 1.4;
}
.toc__link:hover { color: var(--em-primary); }

.toc__link.is-active {
  border-left-color: var(--em-yolk-dim);
  color: var(--em-primary);
  font-weight: 700;
}

/* Alt seviye (h3) basliklar */
.toc__link--sub {
  padding-left: 24px;
  font-size: 13px;
  font-weight: 400;
}

/* --- Kartsiz varyant (FAQ kategorileri) ---------------------------------- */
.toc--bare {
  background: none;
  box-shadow: none;
  padding: 0;
}
.toc--bare .toc__list { gap: var(--em-stack-sm); }
.toc--bare .toc__link {
  padding: 2px 0;
  border-left: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- Masaustu: yapiskan ray, katlanmaz ----------------------------------- */
@media (min-width: 901px) {
  .toc {
    position: sticky;
    top: calc(var(--em-header-h) + var(--em-space-3));
    align-self: start;
  }

  /* Baslik burada sadece bir etikettir */
  .toc__summary {
    cursor: default;
    pointer-events: none;
  }
  .toc__summary svg { display: none; }

  .toc--bare .toc__summary { margin-bottom: var(--em-stack-sm); }
}