/* =========================================================================
   teknikbakis.com — site.css  v3 (Kitaplık)
   Tüm değerler design-tokens.css'ten gelir. Çıplak hex/px yok.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--c-bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-body);
  color: var(--c-ink);
  background: var(--c-bg);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.018em;
}

p { margin: 0 0 var(--space-4); }

a { color: inherit; text-decoration-color: var(--c-line); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--c-warm); }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

time, .num, .card__id, .side__n, .dossier__value { font-variant-numeric: tabular-nums; }

.skip-link { position: absolute; left: -9999px; background: var(--c-ink); color: var(--c-bg); padding: var(--space-2) var(--space-4); }
.skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 20; }

.shell { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Etiket. text-transform YOK — Türkçe lang="tr" altında uppercase İngilizce
   "i"yi "İ" yapar (FortiGate → FORTİGATE). Kaynakta büyük yazılır. */
.label {
  font-family: var(--font-mono);
  font-size: var(--type-3xs);
  letter-spacing: var(--tracking-label);
  color: var(--c-soft);
  font-weight: 500;
}

/* ========================= ÜST ŞERİT ==================================== */
.top {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.top__in {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-md);
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--c-soft); font-weight: 400; }

.search {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-input);
  padding: var(--space-2) var(--space-4);
  min-width: 17rem;
  flex: 0 1 22rem;
}
.search::placeholder { color: var(--c-soft); }
.search:focus { border-color: var(--c-accent); background: var(--c-card); }

.nav { display: flex; gap: var(--space-6); margin-left: auto; align-items: center; }
.nav a { font-family: var(--font-display); font-size: var(--type-sm); color: var(--c-soft); text-decoration: none; }
.nav a:hover { color: var(--c-ink); }
.nav a[aria-current="page"] { color: var(--c-ink); font-weight: 600; }

.theme-toggle {
  font-family: var(--font-mono);
  font-size: var(--type-3xs);
  letter-spacing: var(--tracking-label);
  color: var(--c-soft);
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-chip);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--c-soft); color: var(--c-ink); }

/* ========================= GİRİŞ ======================================== */
.intro { padding-block: var(--space-7) var(--space-5); }
.intro h1 { font-size: var(--type-xl); margin-bottom: var(--space-3); max-width: 20ch; }
.intro p { color: var(--c-soft); max-width: 62ch; margin: 0; }

/* ========================= KİTAPLIK DÜZENİ ============================== */
.library {
  display: grid;
  grid-template-columns: var(--side-width) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  padding-bottom: var(--space-9);
}

/* ---- Sol konu listesi (İMZA HAMLE: canlı filtre) ---- */
.side { position: sticky; top: var(--space-8); }
.side h2 {
  font-family: var(--font-mono);
  font-size: var(--type-3xs);
  letter-spacing: var(--tracking-label);
  color: var(--c-soft);
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.side ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.side li { margin-bottom: var(--space-1); }
.side__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--type-sm);
  color: var(--c-body);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  background: none;
  text-align: left;
  font-family: var(--font-body);
}
.side__item:hover { background: var(--c-card); }
.side__item[aria-pressed="true"] {
  background: var(--c-card);
  border-color: var(--c-line);
  color: var(--c-ink);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
.side__n { font-family: var(--font-mono); font-size: var(--type-2xs); color: var(--c-soft); }

/* ---- Kart ızgarası ---- */
/* auto-FILL: filtre sonucu tek kart kalsa bile kart genişliği sabit kalır.
   (auto-fit olsaydı tek kart tüm satıra yayılıp orantısız görünürdü.) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: var(--space-5);
  align-content: start;
}

.card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }

/* ⚠️ Zorunlu: `.card` display:flex tanımlı olduğu için `hidden` attribute'unun
   varsayılan display:none'ı sınıf kuralı tarafından eziliyordu — filtre JS'i
   doğru çalışsa bile kartlar gizlenmiyordu. Bu satır olmadan filtre ölür. */
.card[hidden] { display: none; }
.card:hover .card__title { text-decoration: underline; text-decoration-color: var(--c-warm); }

.card__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--c-line);
}
.card__id {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: 0.05em;
  color: var(--c-warm);
}
.card__date { font-family: var(--font-mono); font-size: var(--type-2xs); color: var(--c-soft); margin-left: auto; }

.card__body { padding: var(--space-5); flex: 1; }
.card__title { font-size: var(--type-md); line-height: var(--leading-snug); margin-bottom: var(--space-3); }
.card__lede { color: var(--c-body); font-size: var(--type-sm); margin: 0; }

.card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-sunk);
}
.card__time { font-family: var(--font-mono); font-size: var(--type-3xs); color: var(--c-soft); margin-left: auto; }

.chip {
  font-family: var(--font-mono);
  font-size: var(--type-3xs);
  color: var(--c-accent);
  background: var(--c-accent-wash);
  border-radius: var(--radius-chip);
  padding: 0.2rem var(--space-3);
  white-space: nowrap;
}
.status {
  font-family: var(--font-mono);
  font-size: var(--type-3xs);
  border-radius: var(--radius-pill);
  padding: 0.2rem var(--space-4);
  white-space: nowrap;
}
.status--solved { color: var(--c-ok); background: var(--c-ok-wash); }
.status--open   { color: var(--c-warm); background: var(--c-warm-wash); }
/* Derleme kayıtları çözülmüş/açık değildir — nötr durum */
.status--note   { color: var(--c-accent); background: var(--c-accent-wash); }

/* Filtre sonucu boşsa */
.empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-card);
  padding: var(--space-7);
  text-align: center;
  color: var(--c-soft);
}
.empty[hidden] { display: none; }

/* ========================= KAYIT SAYFASI ================================ */
.paper { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.case-head { padding-block: var(--space-7) var(--space-5); }
.case-head h1 { font-size: var(--type-xl); max-width: 24ch; margin-bottom: var(--space-4); }
.case-head .lede { font-size: var(--type-md); color: var(--c-soft); max-width: 58ch; line-height: 1.45; margin: 0; }

/* Künye — kitaplık künye kartı */
.dossier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.dossier__cell {
  padding: var(--space-4) var(--space-5);
  border-left: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.dossier__cell:first-child { border-left: 0; }
.dossier__key { font-family: var(--font-mono); font-size: var(--type-3xs); letter-spacing: var(--tracking-label); color: var(--c-soft); }
.dossier__value { font-family: var(--font-mono); font-size: var(--type-2xs); font-weight: 500; color: var(--c-ink); }
.dossier__value--stamp   { color: var(--c-warm); font-weight: 600; }
.dossier__value--verdict { color: var(--c-ok); font-weight: 600; }

.case-body {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-7);
  padding-block: var(--space-6) var(--space-9);
  align-items: start;
}

.prose { max-width: var(--measure-width); }
.prose h2 { font-size: var(--type-lg); margin-block: var(--space-8) var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-line); }
.prose h3 { font-size: var(--type-md); margin-block: var(--space-6) var(--space-3); }
.prose ul, .prose ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }

.prose pre {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-input);
  padding: var(--space-4);
  overflow-x: auto;
  line-height: 1.5;
  margin: 0 0 var(--space-5);
}
.prose :not(pre) > code {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-chip);
  padding: 0.1em 0.35em;
}

.takeaway {
  border-left: 3px solid var(--c-warm);
  background: var(--c-warm-wash);
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
}
.takeaway p:last-child { margin-bottom: 0; }
.takeaway .label { display: block; margin-bottom: var(--space-2); color: var(--c-warm); }

.exhibit {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: var(--space-6) 0;
  background: var(--c-card);
  box-shadow: var(--shadow-card);
}
.exhibit__head { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--c-line); background: var(--c-sunk); }
.exhibit__id { color: var(--c-warm); font-weight: 600; }
.exhibit__frame { aspect-ratio: 16 / 9; display: block; width: 100%; border: 0; background: var(--c-ink); }
.exhibit__note { padding: var(--space-3) var(--space-5); color: var(--c-soft); font-size: var(--type-2xs); margin: 0; border-top: 1px solid var(--c-line); }
.exhibit__note:empty { display: none; }
.exhibit pre { margin: 0; border: 0; border-radius: 0; background: transparent; }

.apparatus { position: sticky; top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); font-size: var(--type-xs); }
.apparatus section { border-top: 1px solid var(--c-line); padding-top: var(--space-3); }
.apparatus h2 { font-family: var(--font-mono); font-size: var(--type-3xs); letter-spacing: var(--tracking-label); color: var(--c-soft); font-weight: 500; margin-bottom: var(--space-3); }
.apparatus ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.apparatus a { color: var(--c-soft); }
.apparatus a:hover { color: var(--c-ink); }
.toc a[aria-current="true"] { color: var(--c-ink); font-weight: 600; }

/* =========================================================================
   ANALİZ BİLEŞENLERİ
   Zafiyet/bülten analizi kayıtları için: CVSS rozetleri, uyarı kutuları,
   ürün matrisleri, adım listeleri. Sınıf adları kaynak makaleyle aynı
   tutuldu (taşınan içerik düzenlenmeden çalışsın diye), stiller token'dan.
   ========================================================================= */

.prose .mono, code.mono, span.mono { font-family: var(--font-mono); font-variant-ligatures: none; }
.nowrap { white-space: nowrap; }
.aside { color: var(--c-soft); font-size: var(--type-xs); font-style: italic; }
.prose hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-7) 0; }

/* Giriş üstü etiket + spot paragraf */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--type-3xs);
  letter-spacing: var(--tracking-label);
  color: var(--c-warm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.kicker .dot {
  width: 0.4rem; height: 0.4rem; border-radius: var(--radius-pill);
  background: var(--c-crit);
  box-shadow: 0 0 0 3px var(--c-crit-wash);
}
.standfirst { color: var(--c-soft); font-size: var(--type-md); line-height: 1.45; margin: 0 0 var(--space-5); max-width: 62ch; }
.byline { font-family: var(--font-mono); font-size: var(--type-2xs); color: var(--c-soft); display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }

/* CVSS skoru — dolu rozet */
.score {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--type-2xs);
  min-width: 2.5rem; padding: 0.15rem var(--space-2);
  border-radius: var(--radius-chip);
  color: var(--c-on-severity);
}
.score.crit { background: var(--c-crit); }
.score.high { background: var(--c-high); }
.score.low  { background: var(--c-low); }

/* Etiket rozeti — çerçeveli */
.prose .tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: var(--type-3xs); font-weight: 600;
  letter-spacing: 0.06em; padding: 0.15rem var(--space-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-chip);
  color: var(--c-soft);
}
.prose .tag.crit  { color: var(--c-crit); background: var(--c-crit-wash); border-color: var(--c-crit); }
.prose .tag.high  { color: var(--c-high); background: var(--c-high-wash); border-color: var(--c-high); }
.prose .tag.low   { color: var(--c-low);  background: var(--c-low-wash);  border-color: var(--c-low); }
.prose .tag.plain { color: var(--c-soft); background: var(--c-sunk); }

.vector { font-family: var(--font-mono); font-size: var(--type-3xs); color: var(--c-soft); word-break: break-all; }
.fixv   { font-family: var(--font-mono); font-size: var(--type-2xs); color: var(--c-ok); font-weight: 600; }
.nofix  { color: var(--c-crit); font-weight: 700; font-size: var(--type-2xs); }

/* Ürün / düzeltme matrisleri
   Tablolar okuma sütunundan (68ch) geniştir. İki önlem birlikte çalışır:
   (1) blok metin sınırını iki yana taşar, (2) yine sığmazsa yatay kaydırır ve
   sağ kenardaki iç gölge kaydırılabilir olduğunu belli eder. */
.tablewrap {
  overflow-x: auto;
  margin: var(--space-5) 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-card);
  box-shadow: inset -10px 0 10px -10px rgb(22 25 28 / 0.28);
}
.prose > .tablewrap,
.prose > .cve {
  width: calc(100% + var(--space-8));
  margin-inline: calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  max-width: calc(100vw - var(--space-9));
}
.prose table { border-collapse: collapse; width: 100%; font-size: var(--type-2xs); min-width: 38rem; }
.prose table.narrow-t { min-width: 26rem; }
.prose td .vector { display: inline-block; max-width: 9rem; }
.prose th, .prose td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.prose thead th {
  font-family: var(--font-mono); font-size: var(--type-3xs);
  letter-spacing: var(--tracking-label); color: var(--c-soft); font-weight: 500;
  background: var(--c-sunk); white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--c-sunk); }

/* Uyarı kutuları */
.note {
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  background: var(--c-sunk);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.note.danger { border-left-color: var(--c-crit); background: var(--c-crit-wash); }
.note.warn   { border-left-color: var(--c-high); background: var(--c-high-wash); }
.note.good   { border-left-color: var(--c-ok);   background: var(--c-ok-wash); }
.note .nt {
  font-family: var(--font-display); font-weight: 700; font-size: var(--type-sm);
  margin-bottom: var(--space-2); display: flex; align-items: center;
  gap: var(--space-2); flex-wrap: wrap;
}
.note .nt .lbl {
  font-family: var(--font-mono); font-size: var(--type-3xs);
  letter-spacing: var(--tracking-label); font-weight: 500;
  padding: 0.1rem var(--space-2); border-radius: var(--radius-chip);
  background: var(--c-card); border: 1px solid var(--c-line); color: var(--c-soft);
}
.note p:last-child { margin-bottom: 0; }
.note p { font-size: var(--type-sm); }

/* CVE kartı */
.cve {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-card);
  overflow: hidden;
  margin: var(--space-5) 0;
}
.cve > .top {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-sunk);
}
.cve .cid   { font-family: var(--font-mono); font-weight: 700; font-size: var(--type-sm); color: var(--c-warm); }
.cve .cname { color: var(--c-soft); font-size: var(--type-sm); flex: 1 1 auto; min-width: 10rem; }
.cve > .in  { padding: var(--space-4) var(--space-5); }
.cve > .in p { margin: 0 0 var(--space-3); font-size: var(--type-sm); }
.cve > .in p:last-child { margin-bottom: 0; }
.cve .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Numaralı adım listesi */
.steps { counter-reset: s; list-style: none; padding: 0; margin: var(--space-5) 0; }
.steps > li { position: relative; padding-left: var(--space-8); margin-bottom: var(--space-5); min-height: 2rem; }
.steps > li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-input);
  background: var(--c-accent-wash); color: var(--c-accent);
  font-family: var(--font-mono); font-size: var(--type-2xs); font-weight: 600;
  border: 1px solid var(--c-line);
}
.steps > li .sh { font-family: var(--font-display); font-weight: 700; display: block; margin-bottom: var(--space-1); }
.prose pre .cmt { color: var(--c-soft); }

@media (max-width: 48rem) {
  .steps > li { padding-left: var(--space-7); }
  .note { padding: var(--space-3) var(--space-4); }
}

/* ========================= ALT ŞERİT ==================================== */
.foot {
  border-top: 1px solid var(--c-line);
  background: var(--c-card);
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  padding-block: var(--space-5);
  color: var(--c-soft);
  font-size: var(--type-xs);
}

/* ========================= DUYARLI ====================================== */
@media (max-width: 64rem) {
  .library { grid-template-columns: 1fr; gap: var(--space-5); }
  .side { position: static; }
  .side ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
  .side li { margin: 0; }
  .side__item { border: 1px solid var(--c-line); background: var(--c-card); }
  .case-body { grid-template-columns: 1fr; gap: var(--space-5); }
  .apparatus { position: static; }
}

@media (max-width: 48rem) {
  .top__in { flex-wrap: wrap; gap: var(--space-3); }
  .search { order: 3; flex: 1 1 100%; min-width: 0; }
  .nav { gap: var(--space-4); }
  .intro h1 { font-size: var(--type-lg); }
  .case-head h1 { font-size: var(--type-lg); }
  .dossier { grid-template-columns: 1fr 1fr; }
  .dossier__cell:nth-child(odd) { border-left: 0; }
  .dossier__cell { border-top: 1px solid var(--c-line); }
  .dossier__cell:nth-child(-n+2) { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .top, .foot, .apparatus, .side, .theme-toggle { display: none; }
  .library, .case-body { grid-template-columns: 1fr; }
  body { background: #fff; color: #000; }
}