/* ============================================================
   ATAVAL — Knowledge base (FAQ + pillar guide)
   Re-skins the imported content into the ATAVAL design system.
   Loaded by /bilgi-bankasi/sss/ and /bilgi-bankasi/rehber/.
   ============================================================ */

/* ---------- Search bar (FAQ) ---------- */
.kb-search{ background: var(--paper); border-bottom: 1px solid var(--rule); padding: 28px 0; }
.search-wrapper{ position: relative; max-width: 640px; margin: 0 auto; }
.search-box{
  width: 100%; padding: 15px 46px 15px 48px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--ice-deep); background: var(--cream); color: var(--ink); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.search-box:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46,74,107,0.1); }
.search-icon{ position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-muted); pointer-events: none; }
.search-clear{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer; display: none;
  align-items: center; justify-content: center; color: var(--ink-soft); font-size: 1.1em; line-height: 1;
}
.search-clear.visible{ display: flex; }
.stats{ display: flex; justify-content: center; gap: 28px; margin-top: 18px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-muted); flex-wrap: wrap; text-transform: uppercase; }
.stats strong{ color: var(--accent); }

/* ---------- Category chips ---------- */
.chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0 0; }
.chip{
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  padding: 8px 15px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  cursor: pointer; transition: all .12s; user-select: none; font-weight: 500; text-transform: uppercase;
}
.chip:hover{ border-color: var(--brand); color: var(--brand); }
.chip.active{ background: var(--accent); color: var(--paper); border-color: var(--accent); }
.chip-count{ margin-left: 6px; opacity: .7; }

/* ---------- Toolbar ---------- */
.kb-toolbar{
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 22px 0 8px; margin-bottom: 8px;
}
.kb-toolbar .result-count{ font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--ink); }
.kb-toolbar .result-count b{ color: var(--accent); }
.toolbar-btn{
  background: transparent; border: 1px solid var(--rule); color: var(--ink-soft);
  padding: 7px 14px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; transition: all .12s;
}
.toolbar-btn:hover{ border-color: var(--brand); color: var(--brand); }

/* ---------- Categories + Q&A accordion ---------- */
.kb-body{ padding: 8px 0 72px; }
.category{ margin-bottom: 36px; scroll-margin-top: 90px; }
.category-title{
  font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--accent); display: flex; align-items: center; gap: 12px;
}
.category-title .badge{
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  background: var(--accent-soft); color: var(--accent-deep); padding: 3px 10px; text-transform: uppercase;
}
.qa{ background: var(--paper); border: 1px solid var(--rule); margin: 10px 0; padding: 20px 22px; }
.qa .q{
  font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45; margin-bottom: 10px;
  padding-left: 16px; position: relative;
}
.qa .q::before{ content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--accent); }
.qa .answer{ color: var(--ink-soft); line-height: 1.7; }
.qa .answer p{ margin-bottom: 10px; }
.qa .answer p:last-child{ margin-bottom: 0; }
.qa.hidden, .category.hidden{ display: none; }
mark{ background: #f3e4c0; padding: 1px 3px; color: inherit; }

.no-results{ text-align: center; padding: 56px 20px; color: var(--ink-muted); border: 1px dashed var(--ice-deep); margin: 20px 0; display: none; }
.no-results.visible{ display: block; }
.no-results h3{ margin-bottom: 8px; color: var(--ink); }

/* ---------- Pillar layout ---------- */
.kb-layout{ display: grid; grid-template-columns: 264px 1fr; gap: 48px; align-items: start; padding: 44px 0 72px; }
.toc{ position: sticky; top: 18px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto; }
.toc h3{ font-family: "IBM Plex Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-muted); margin: 18px 0 10px; }
.toc h3:first-child{ margin-top: 0; }
.toc ol{ list-style: none; padding: 0; margin: 0; }
.toc a{
  display: block; padding: 7px 12px; font-size: 13.5px; color: var(--ink-soft);
  border-left: 2px solid transparent; line-height: 1.4;
}
.toc a:hover{ background: var(--cream); color: var(--brand); }
.toc a.active{ background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }

/* ---------- Pillar content (article prose) ---------- */
.content{ max-width: 800px; min-width: 0; }
.content section{ margin-bottom: 52px; scroll-margin-top: 24px; }
.content h2{ font-size: clamp(24px,2.6vw,30px); font-weight: 600; color: var(--ink); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--accent); letter-spacing: -0.01em; }
.content h3{ font-size: 19px; font-weight: 600; color: var(--ink); margin: 30px 0 12px; }
.content h4{ font-size: 16px; font-weight: 600; margin: 18px 0 8px; }
.content p{ margin-bottom: 14px; color: var(--ink-soft); }
.content ul, .content ol{ margin: 0 0 16px; padding-left: 22px; color: var(--ink-soft); }
.content li{ margin-bottom: 7px; }
.content strong{ font-weight: 600; color: var(--ink); }
.content blockquote{ background: var(--paper); padding: 16px 22px; margin: 20px 0; color: var(--ink-soft); }

.content table{ width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; background: var(--paper); border: 1px solid var(--rule); }
.content th{ background: var(--brand); color: var(--paper); text-align: left; padding: 12px 14px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.content td{ padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-soft); }
.content tr:last-child td{ border-bottom: none; }
.content tr:nth-child(even) td{ background: var(--cream); }
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

.content details{ background: var(--paper); border: 1px solid var(--rule); margin: 8px 0; padding: 14px 20px; }
.content details[open]{ border-color: var(--brand); }
.content details summary{ cursor: pointer; font-weight: 600; color: var(--ink); padding: 2px 0 2px 26px; position: relative; list-style: none; user-select: none; }
.content details summary::-webkit-details-marker{ display: none; }
.content details summary::before{ content: "+"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 1.2em; color: var(--accent); }
.content details[open] summary::before{ content: "−"; }
.content details > *:not(summary){ margin-top: 10px; color: var(--ink-soft); }
.info-box{ background: var(--accent-soft); padding: 16px 20px; margin: 18px 0; font-size: 15px; color: var(--ink-soft); }
.info-box strong{ color: var(--accent-deep); }

/* ---------- KB CTA ---------- */
.kb-cta{ background: var(--brand-deep); color: var(--paper); padding: 52px 0; text-align: center; border-top: 4px solid var(--accent); }
.kb-cta h2{ color: var(--paper); font-size: 26px; margin-bottom: 12px; }
.kb-cta p{ color: rgba(248,247,241,0.85); max-width: 640px; margin: 0 auto 24px; }
.kb-cta .cta-buttons{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 920px){
  .kb-layout{ grid-template-columns: 1fr; gap: 0; }
  .toc{ position: static; max-height: none; background: var(--paper); border: 1px solid var(--rule); padding: 18px; margin-bottom: 24px; }
}