/* Wiki "Başlarken" pages — Roller ve yetkiler (Figma 26:542 · mobile 129:1734)
   and Sık sorulanlar (Figma 26:739 · mobile 129:1876) */

/* Module / page link tag (brand tint) */
.wiki-link-tag {
  display: inline-flex;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-link);
  white-space: nowrap;
}
a.wiki-link-tag { transition: background-color var(--duration-base) var(--ease-standard); }
a.wiki-link-tag:hover { background: var(--color-border-divider); }

/* ---------- Principles ---------- */
.wiki-principles {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-brand-tint);
}
.wiki-principles__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-14) var(--space-16); }
.wiki-principles__item + .wiki-principles__item { border-top: 1px solid var(--color-surface-page); }
.wiki-principles__title { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--color-text-primary); }
.wiki-principles__text { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }

/* ---------- Role profiles ---------- */
.wiki-role-profiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.wiki-role-profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 18px var(--space-16);
  border: 1px solid var(--color-border-divider);
  border-radius: 16px;
  background: var(--color-surface-page);
  scroll-margin-top: calc(var(--navbar-height) + var(--space-16));
}
.wiki-role-profile:target { border-color: var(--color-border-focus-ring); }
.wiki-role-profile__head { display: flex; flex-direction: column; gap: 2px; }
.wiki-role-profile__name { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-primary); }
.wiki-role-profile__subtitle { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
.wiki-role-row { display: flex; gap: var(--space-10); font-size: 15px; line-height: 1.5; color: var(--color-text-primary); }
.wiki-role-row__mark { flex: 0 0 auto; font-weight: 600; }
.wiki-role-row--does .wiki-role-row__mark { color: var(--color-feedback-success); }
.wiki-role-row--limit .wiki-role-row__mark { color: var(--color-text-secondary); }
.wiki-role-profile__modules { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* ---------- Note (orange) ---------- */
.wiki-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: 16px;
  background: var(--color-accent-tint);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.wiki-note__icon { flex: 0 0 auto; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--color-accent-recommended); }
.wiki-note__text { display: flex; flex-direction: column; gap: var(--space-4); }
.wiki-note__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }

/* ---------- Link cards ---------- */
.wiki-link-cards {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-divider);
  border-radius: 16px;
}
.wiki-link-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-14) var(--space-16);
  background: var(--color-surface-page);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.wiki-link-card + .wiki-link-card { border-top: 1px solid var(--color-border-divider); }
.wiki-link-card:hover { background: var(--color-state-hover-bg); }
.wiki-link-card__title { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--color-text-link); }
.wiki-link-card__text { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }

/* ---------- FAQ ---------- */
.wiki-faq { display: flex; flex-direction: column; gap: var(--space-20); }
.wiki-faq__filter {
  display: flex;
  gap: var(--space-8);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.wiki-faq__filter::-webkit-scrollbar { display: none; }

.wiki-faq__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-divider);
  border-radius: 16px;
}
.wiki-faq__item { scroll-margin-top: calc(var(--navbar-height) + var(--space-16)); }
.wiki-faq__item + .wiki-faq__item { border-top: 1px solid var(--color-border-divider); }
.wiki-faq__item.is-open { background: var(--color-surface-subtle); }
/* The first visible item never draws a top line (filtering hides items).
   Phones only: from 768 px every question is its own card with a full border. */
@media (max-width: 1023px) {
  .wiki-faq__item.is-first { border-top: 0; }
}

.wiki-faq__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-10) var(--space-12);
  width: 100%;
  padding: var(--space-16);
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wiki-faq__toggle:focus-visible { box-shadow: inset var(--shadow-focus); }
.wiki-faq__category {
  grid-column: 1 / -1;
  justify-self: start;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-pill);
  background: var(--color-surface-canvas);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.wiki-faq__question { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--color-text-primary); }
/* + / − drawn with two bars so it stays crisp at any size */
.wiki-faq__icon { position: relative; width: 12px; height: 12px; margin: 7px 2px 0; }
.wiki-faq__icon::before,
.wiki-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.75px;
  margin-top: -0.875px;
  border-radius: 1px;
  background: var(--color-brand-primary);
  transition: transform var(--duration-base) var(--ease-standard);
}
.wiki-faq__icon::after { transform: rotate(90deg); }
.wiki-faq__item.is-open .wiki-faq__icon::after { transform: rotate(0deg); }

.wiki-faq__answer { display: flex; flex-direction: column; gap: var(--space-10); padding: 0 var(--space-16) var(--space-16); margin-top: calc(var(--space-6) * -1); }
.wiki-faq__answer > p:first-child { font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }
.wiki-faq__related { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--color-text-secondary); }

/* ---------- Support box ---------- */
.wiki-support {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-20) var(--space-16);
  border-radius: 16px;
  background: var(--color-brand-tint);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.wiki-support__text { display: flex; flex-direction: column; gap: var(--space-4); }
.wiki-support__title { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--color-text-primary); }
.wiki-support__button { width: 100%; }

/* ---------- Tablet: mobile layout, role cards in two columns
   (Figma: Wiki — Roller ve yetkiler / Sık sorulanlar — tablet 768) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .wiki-role-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-16); }
  .wiki-faq__toggle { gap: var(--space-10); }
  .wiki-faq .wiki-chip { border-radius: 18px; line-height: 1.5; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .wiki-link-tag { border-radius: var(--radius-sm); }

  .wiki-principles { flex-direction: row; gap: var(--space-20); padding: var(--space-24) var(--space-28); border-radius: var(--radius-lg); }
  .wiki-principles__item { flex: 1 1 0; gap: var(--space-4); padding: 0; }
  .wiki-principles__item + .wiki-principles__item { border-top: 0; }
  .wiki-principles__title { font-size: 18px; line-height: 1.4; letter-spacing: -0.005em; color: var(--color-text-link); }
  .wiki-principles__text { font-size: 15px; line-height: 1.55; letter-spacing: -0.002em; }

  .wiki-role-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
  .wiki-role-profile { gap: var(--space-14); padding: var(--space-24) var(--space-28); border-color: var(--color-border-default); border-radius: var(--radius-lg); }
  .wiki-role-profile__name { font-size: 22px; }
  .wiki-role-profile__subtitle { font-size: 12px; line-height: 1.4; font-weight: 500; }
  .wiki-role-row { font-size: 15px; line-height: 1.55; letter-spacing: -0.002em; }
  .wiki-role-row--limit { color: var(--color-text-secondary); }

  .wiki-note { gap: var(--space-14); padding: 18px var(--space-24) 18px var(--space-20); font-size: 15px; line-height: 1.55; }
  .wiki-note__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-accent-recommended);
    line-height: 1.3;
    color: var(--color-text-primary);
  }
  .wiki-note__title { line-height: 1.3; }

  .wiki-link-cards { flex-direction: row; gap: var(--space-16); overflow: visible; border: 0; border-radius: 0; }
  .wiki-link-card { flex: 1 1 0; gap: var(--space-4); padding: var(--space-16) 18px; border: 1px solid var(--color-border-default); border-radius: 16px; }
  .wiki-link-card + .wiki-link-card { border-top: 1px solid var(--color-border-default); }
  .wiki-link-card__title { line-height: 1.3; }

  .wiki-faq { gap: var(--space-40); }
  .wiki-faq__filter { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .wiki-faq .wiki-chip:not([aria-pressed="true"]) { border-color: var(--color-border-strong); }
  .wiki-faq__list { gap: var(--space-12); overflow: visible; border: 0; border-radius: 0; }
  .wiki-faq__item {
    border: 1px solid var(--color-border-default);
    border-radius: 18px;
    background: var(--color-surface-page);
    transition: border-color var(--duration-base) var(--ease-standard);
  }
  .wiki-faq__item + .wiki-faq__item { border-top: 1px solid var(--color-border-default); }
  .wiki-faq__item.is-open { border-color: var(--color-border-focus-ring); background: var(--color-surface-page); }
  .wiki-faq__item:hover { border-color: var(--color-border-strong); }
  .wiki-faq__item.is-open:hover { border-color: var(--color-border-focus-ring); }
  .wiki-faq__toggle { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-16); padding: 22px var(--space-28); border-radius: 18px; }
  .wiki-faq__category { grid-column: auto; border-radius: var(--radius-sm); }
  .wiki-faq__question { font-size: 17px; line-height: 1.3; letter-spacing: -0.003em; }
  .wiki-faq__icon { width: 13px; height: 13px; margin: 0 1px; }
  .wiki-faq__answer { padding: 0 var(--space-28) 22px; margin-top: calc(var(--space-12) * -1); }
  .wiki-faq__answer > p:first-child { letter-spacing: -0.002em; line-height: 1.55; }
  .wiki-faq__related { gap: var(--space-8); font-size: 12px; line-height: 1.4; }

  .wiki-support { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-24) var(--space-28); border-radius: var(--radius-lg); }
  .wiki-support__title { line-height: 1.4; letter-spacing: -0.005em; }
  .wiki-support__button { width: auto; flex: 0 0 auto; }
}