/* ============================================================
   KAYSE — Knowledge base (FAQ + pillar guide)
   Re-skins the imported content into the KAYSE 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(11,58,84,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); }

/* ---------- Pillar callouts (marine guide) ---------- */
.content .warn-box{ background: #fff8ed; border: 1px solid #fcd9a3; border-left: 3px solid #e8901a;
  padding: 16px 20px; margin: 20px 0; color: var(--ink-soft); }
.content .warn-box strong{ color: #8a5108; }
.content .warn-box p:last-child, .content .highlight-box p:last-child{ margin-bottom: 0; }
.content .highlight-box{ background: var(--paper); border: 1px solid var(--ice-deep);
  border-left: 3px solid var(--accent); padding: 16px 20px; margin: 20px 0; }

.content ul.checklist{ list-style: none; padding-left: 0; }
.content ul.checklist li{ position: relative; padding-left: 30px; margin-bottom: 10px; }
.content ul.checklist li::before{ content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border: 2px solid var(--accent); }

.comparison-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.comparison-card{ padding: 18px 20px; border: 1px solid var(--rule); background: var(--paper); }
.comparison-card.positive{ background: #f0fbf4; border-color: #b8e8c9; }
.comparison-card.negative{ background: #fef3f2; border-color: #fbcdc7; }
.comparison-card h4{ margin-top: 0; }
.comparison-card ul{ margin-bottom: 0; }

.content .cta-box{ background: var(--brand-deep); color: var(--paper); padding: 36px 32px;
  text-align: center; margin: 40px 0; border-top: 3px solid var(--accent); }
.content .cta-box h3{ color: var(--paper); font-size: 22px; margin: 0 0 10px; }
.content .cta-box p{ color: rgba(248,247,241,0.85); max-width: 560px; margin: 0 auto 20px; }
.cta-button{ display: inline-block; background: var(--accent); color: var(--paper);
  padding: 15px 32px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; }
.cta-button:hover{ background: var(--accent-deep); color: var(--paper); }

.content .related-links{ background: var(--paper); border: 1px solid var(--rule);
  padding: 22px 26px; margin: 36px 0 0; }
.content .related-links h3{ margin-top: 0; }
.content .related-links ul{ margin-bottom: 0; }

.guide-cat-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px; margin: 20px 0; }
.guide-cat-card{ border: 1px solid var(--rule); background: var(--paper); padding: 14px 16px; }
.guide-cat-card .name{ display: block; font-weight: 600; color: var(--ink); font-size: 15px; }
.guide-cat-card .desc{ display: block; font-size: 13px; color: var(--ink-muted); margin-top: 4px; line-height: 1.45; }

/* guide hero byline (date · reading time · author) */
.page-hero .hero-meta{ font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: 0.06em; color: rgba(248,247,241,0.72); margin-top: 14px; }

@media (max-width: 640px){ .comparison-grid{ grid-template-columns: 1fr; } }

/* ---------- 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; }
}