/* ==========================================================================
   Siber Tuzak — ortak stil
   Tek dosya, bağımlılık yok. Renkler token olarak :root'ta; tema değişimi
   sadece token'ları yeniden tanımlar, bileşenler hep token üzerinden çalışır.

   TASARIM SİSTEMİ · ekol: "Takip Tablosu" (kokpit)
   Ana sayfa bir yazı listesi değil, taranabilir bir bülten takip tablosudur.
   İmza hamle: CVSS skoru satır içinde ısı çubuğu olarak uzar (.heat).
   Tipografi: Literata (metin) + IBM Plex Mono (veri) — self-host, dış istek yok.
   Radius sistemi keskin (2/4/6/8px): bu bir veri yüzeyi, kart galerisi değil.
   ========================================================================== */

/* ---------- Yazı tipleri: self-host, Türkçe subset (ı/İ/ğ/ş dahil) ----------
   Kaynak: Literata (SIL OFL) + IBM Plex Mono (SIL OFL) — lisanslar assets/fonts/.
   Google Fonts'tan indirilip Türkçe+Latin glif setine subset'lendi (376 KB -> 84 KB).
   Literata variable: opsz 16'ya sabitlendi, wght ekseni 400-900 korundu.        */

@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/literata-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                 U+2010-2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/literata-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0192, U+0218-021B, U+02C7, U+02D8-02DD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibmplexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                 U+2010-2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibmplexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0192, U+0218-021B, U+02C7, U+02D8-02DD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibmplexmono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                 U+2010-2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibmplexmono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0192, U+0218-021B, U+02C7, U+02D8-02DD;
}

:root {
  color-scheme: dark light;

  --bg:          #0a0e12;
  --surface:     #121820;
  --surface-2:   #18202a;
  --surface-3:   #1f2934;
  --ink:         #e9eef4;
  --muted:       #97a5b4;
  --faint:       #6b7a8a;
  --line:        #232e3a;
  --line-strong: #32404e;

  --accent:      #e8a33d;
  --accent-ink:  #1a1206;
  --accent-soft: #2a2011;

  --crit:        #ff5f6a;
  --crit-soft:   #2c1418;
  --crit-ink:    #ffa8ad;
  --high:        #f0a35a;
  --high-soft:   #2d2013;
  --high-ink:    #f5c188;
  --low:         #8d9dad;
  --low-soft:    #1c242d;
  --low-ink:     #b6c3cf;
  --ok:          #4ecb8d;
  --ok-soft:     #12291e;

  /* Tipografi — Literata metni taşır, Plex Mono veriyi. Font yüklenmezse
     Georgia/sistem mono devralır; "font yüklenmedi" görünümü oluşmaz. */
  --serif: "Literata", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans:  var(--serif);

  /* Tip ölçeği — oran 1.25 */
  --t-2xs: 0.64rem;  --t-xs:  0.8rem;   --t-sm:  0.9rem;    --t-base: 1rem;
  --t-md:  1.25rem;  --t-lg:  1.563rem; --t-xl:  1.953rem;  --t-2xl:  2.441rem;

  /* Boşluk ritmi */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;

  /* Radius — bu bir veri yüzeyi: keskin kalır */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px;

  /* Gölge — yalnız yüzey ayrımı, dekor değil */
  --shadow-hair: 0 1px 0 var(--line);
  --shadow-lift: 0 2px 10px rgb(0 0 0 / 0.28);

  --measure: 44rem;
  --wide:    64rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:          #eef1f5;
    --surface:     #ffffff;
    --surface-2:   #f5f8fa;
    --surface-3:   #eaeff4;
    --ink:         #10151b;
    --muted:       #52606f;
    --faint:       #7a8794;
    --line:        #dae1e8;
    --line-strong: #c3ccd6;

    --accent:      #a86a06;
    --accent-ink:  #ffffff;
    --accent-soft: #fbf0dc;

    --crit:        #c4232f;
    --crit-soft:   #fbe6e8;
    --crit-ink:    #8b1720;
    --high:        #a85c0c;
    --high-soft:   #fbeedd;
    --high-ink:    #77400a;
    --low:         #4c5b6a;
    --low-soft:    #e8edf2;
    --low-ink:     #384654;
    --ok:          #17734a;
    --ok-soft:     #e0f1e8;
  }
}

/* Kullanıcının tema düğmesi kök elemana data-theme basar; media query'yi ezmeli. */
:root[data-theme="dark"] {
  --bg:#0a0e12; --surface:#121820; --surface-2:#18202a; --surface-3:#1f2934;
  --ink:#e9eef4; --muted:#97a5b4; --faint:#6b7a8a; --line:#232e3a; --line-strong:#32404e;
  --accent:#e8a33d; --accent-ink:#1a1206; --accent-soft:#2a2011;
  --crit:#ff5f6a; --crit-soft:#2c1418; --crit-ink:#ffa8ad;
  --high:#f0a35a; --high-soft:#2d2013; --high-ink:#f5c188;
  --low:#8d9dad; --low-soft:#1c242d; --low-ink:#b6c3cf;
  --ok:#4ecb8d; --ok-soft:#12291e;
}
:root[data-theme="light"] {
  --bg:#eef1f5; --surface:#ffffff; --surface-2:#f5f8fa; --surface-3:#eaeff4;
  --ink:#10151b; --muted:#52606f; --faint:#7a8794; --line:#dae1e8; --line-strong:#c3ccd6;
  --accent:#a86a06; --accent-ink:#ffffff; --accent-soft:#fbf0dc;
  --crit:#c4232f; --crit-soft:#fbe6e8; --crit-ink:#8b1720;
  --high:#a85c0c; --high-soft:#fbeedd; --high-ink:#77400a;
  --low:#4c5b6a; --low-soft:#e8edf2; --low-ink:#384654;
  --ok:#17734a; --ok-soft:#e0f1e8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

code, .mono { font-family: var(--mono); font-variant-ligatures: none; }
p code, li code, td code {
  font-size: 0.86em; background: var(--surface-3); border: 1px solid var(--line);
  padding: 0.08em 0.36em; border-radius: var(--r-sm); white-space: nowrap;
}

/* ---------- Kabuk ---------- */
.shell { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* ---------- Üst bar ---------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar-in {
  max-width: var(--wide); margin: 0 auto; padding: 0.9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-weight: 800; font-size: 1.12rem; letter-spacing: -0.02em; color: var(--ink);
}
.wordmark:hover { text-decoration: none; }
.wordmark .bracket { color: var(--accent); font-family: var(--mono); font-weight: 700; }
.topnav { display: flex; gap: 1.2rem; font-size: 0.9rem; }
.topnav a { color: var(--muted); }
.topnav a:hover { color: var(--ink); text-decoration: none; }

/* ---------- Ana sayfa hero ---------- */
.hero { padding: 3rem 0 1rem; border-bottom: 1px solid var(--line); }
.hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.1; letter-spacing: -0.03em;
  font-weight: 820; margin: 0 0 0.7rem; text-wrap: balance; max-width: 22ch;
}
.hero p { color: var(--muted); font-size: 1.08rem; margin: 0; max-width: 46rem; }

/* ---------- Yazı listesi ---------- */
.feed { padding: 1rem 0 4rem; display: flex; flex-direction: column; }
.entry { padding: 1.9rem 0; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry-meta {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--faint); margin-bottom: 0.55rem;
}
.entry h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25; letter-spacing: -0.02em;
  font-weight: 740; margin: 0 0 0.45rem; text-wrap: balance;
}
.entry h2 a { color: var(--ink); }
.entry h2 a:hover { color: var(--accent); text-decoration: none; }
.entry .dek { color: var(--muted); margin: 0 0 0.7rem; }
.entry .more { font-size: 0.88rem; font-weight: 620; }

/* ---------- Rozetler ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: var(--r-sm);
  border: 1px solid transparent; white-space: nowrap;
}
.tag.crit { background: var(--crit-soft); color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 34%, transparent); }
.tag.high { background: var(--high-soft); color: var(--high-ink); border-color: color-mix(in srgb, var(--high) 34%, transparent); }
.tag.low  { background: var(--low-soft);  color: var(--low-ink);  border-color: color-mix(in srgb, var(--low) 34%, transparent); }
.tag.plain { background: var(--surface-3); color: var(--muted); border-color: var(--line); }

.score {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 800; font-size: 0.8rem;
  min-width: 2.5rem; padding: 0.1rem 0.42rem; border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums; color: #12161a;
}
.score.crit { background: var(--crit); }
.score.high { background: var(--high); }
.score.low  { background: var(--low); }
@media (prefers-color-scheme: light) {
  .score.crit, .score.high, .score.low { color: #fff; }
}
:root[data-theme="light"] .score.crit,
:root[data-theme="light"] .score.high,
:root[data-theme="light"] .score.low { color: #fff; }
:root[data-theme="dark"] .score.crit,
:root[data-theme="dark"] .score.high,
:root[data-theme="dark"] .score.low { color: #12161a; }

/* ---------- Makale ---------- */
.article-head { padding: 2.6rem 0 1.6rem; border-bottom: 1px solid var(--line); }
.kicker {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.9rem;
}
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--crit); box-shadow: 0 0 0 3px var(--crit-soft); }
.article-head h1 {
  font-size: clamp(1.75rem, 4.4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.03em;
  font-weight: 820; margin: 0 0 0.75rem; text-wrap: balance;
}
.standfirst { color: var(--muted); font-size: 1.08rem; margin: 0 0 1.5rem; }
.byline {
  font-family: var(--mono); font-size: 0.76rem; color: var(--faint);
  display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center;
}

.factstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin: 1.6rem 0 0;
}
.factstrip .cell { background: var(--surface); padding: 0.72rem 0.9rem; }
.factstrip .k { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.factstrip .v { font-family: var(--mono); font-size: 0.95rem; font-weight: 700; margin-top: 0.12rem; }
.factstrip .v.crit { color: var(--crit); }

.article-body { padding: 0 0 4rem; }
.article-body h2 {
  font-size: clamp(1.3rem, 3vw, 1.65rem); line-height: 1.22; letter-spacing: -0.02em;
  font-weight: 760; margin: 2.8rem 0 0.6rem; text-wrap: balance;
}
.article-body h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.01em; margin: 2rem 0 0.5rem; }
.article-body h4 { font-size: 1.0rem; font-weight: 700; margin: 1.5rem 0 0.4rem; }
.article-body p { margin: 0 0 1.05rem; }
.article-body ul, .article-body ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.article-body li { margin-bottom: 0.55rem; }
.article-body li::marker { color: var(--faint); }
.article-body strong { font-weight: 700; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.8rem 0 0; }
.lede { color: var(--muted); font-size: 1.03rem; margin: 0.2rem 0 1.1rem; }
.aside { color: var(--faint); font-size: 0.86rem; font-style: italic; }

/* ---------- Uyarı kutuları ---------- */
.note {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  background: var(--surface-2); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 1.05rem 1.2rem; margin: 1.5rem 0;
}
.note.danger { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit-soft) 55%, var(--surface)); }
.note.warn   { border-left-color: var(--high); background: color-mix(in srgb, var(--high-soft) 55%, var(--surface)); }
.note.good   { border-left-color: var(--ok);   background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface)); }
.note .nt {
  font-weight: 740; font-size: 0.96rem; margin-bottom: 0.35rem; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.note .nt .lbl {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.12rem 0.45rem; border-radius: var(--r-sm); background: var(--surface-3); color: var(--muted);
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Tablolar ---------- */
.tablewrap {
  overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface);
}
.tablewrap::-webkit-scrollbar { height: 9px; }
.tablewrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; font-size: 0.86rem; min-width: 42rem; }
table.narrow-t { min-width: 30rem; }
thead th {
  background: var(--surface-3); text-align: left; font-size: 0.67rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 750;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
tbody td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
.nowrap { white-space: nowrap; }
.fixv { font-family: var(--mono); font-size: 0.8rem; color: var(--ok); font-weight: 650; }
.nofix { color: var(--crit); font-weight: 700; font-size: 0.82rem; }
.vector { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); word-break: break-all; }

/* ---------- CVE kartları ---------- */
.cve { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; margin: 1rem 0; }
.cve > .top {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.8rem 1.05rem; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.cve .cid { font-family: var(--mono); font-weight: 780; font-size: 0.94rem; }
.cve .cname { color: var(--muted); font-size: 0.9rem; flex: 1 1 auto; min-width: 10rem; }
.cve > .in { padding: 1rem 1.05rem 1.1rem; }
.cve > .in p { margin: 0 0 0.7rem; font-size: 0.96rem; }
.cve .chips { display: flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; margin-top: 0.6rem; }

/* ---------- Adımlar ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.2rem 0; }
.steps > li { position: relative; padding-left: 2.9rem; margin-bottom: 1.35rem; min-height: 2rem; }
.steps > li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: -0.1rem;
  width: 2rem; height: 2rem; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  font-family: var(--mono); font-weight: 780; font-size: 0.88rem;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.steps > li .sh { font-weight: 700; display: block; margin-bottom: 0.15rem; }

/* ---------- Kod ---------- */
pre {
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 0.9rem 1rem; overflow-x: auto; font-family: var(--mono);
  font-size: 0.8rem; line-height: 1.6; margin: 0.9rem 0 1.2rem; color: var(--ink);
}
pre .cmt { color: var(--faint); }

/* ---------- Alt bilgi ---------- */
.disclaimer {
  margin-top: 2.5rem; padding: 1.05rem 1.2rem; border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg); background: var(--surface-2); color: var(--muted); font-size: 0.85rem;
}
.sitefoot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 2rem 0; color: var(--faint); font-size: 0.85rem;
}
.sitefoot .in { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   ANA SAYFA — "Takip Tablosu"
   Ana sayfa bir yazı akışı değil, taranabilir bir bülten kaydıdır. Ziyaretçi
   önce kendi ürününü arar, sonra okur. Bu yüzden sıra: durum → filtre → kayıt.
   Filtreler ve durum şeridi tablodaki data-* özniteliklerinden beslenir;
   yeni yazı eklemek = tabloya bir satır eklemek. Build adımı yok.
   ========================================================================== */

/* ---------- Durum şeridi ---------- */
.statusbar {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--muted);
}
.statusbar .in {
  max-width: var(--wide); margin: 0 auto; padding: var(--s-3) var(--s-5);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.statusbar .pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--crit); box-shadow: 0 0 0 3px var(--crit-soft);
}
.statusbar .pulse.calm { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.statusbar b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.statusbar .sep { color: var(--faint); }

/* ---------- Sayfa başlığı: tablonun ne olduğunu tek satırda söyler ---------- */
.ledger-head { padding: var(--s-7) 0 var(--s-5); }
.ledger-head h1 {
  font-size: clamp(1.6rem, 4vw, var(--t-xl)); line-height: 1.15; letter-spacing: -0.025em;
  font-weight: 800; margin: 0 0 var(--s-2); text-wrap: balance; max-width: 24ch;
}
.ledger-head p { color: var(--muted); font-size: var(--t-sm); margin: 0; max-width: 52ch; }

/* ---------- Filtre rayı ---------- */
.filterbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 0 0 var(--s-3); border-bottom: 1px solid var(--line-strong);
}
.filterbar .grp { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.filterbar .grp + .grp { border-left: 1px solid var(--line); padding-left: var(--s-3); margin-left: var(--s-1); }
.filterbar .lbl {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-right: var(--s-1);
}
.fbtn {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  padding: 0.3rem 0.55rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.fbtn:hover { color: var(--ink); border-color: var(--faint); }
.fbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fbtn[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.fbtn .n { opacity: 0.55; font-weight: 400; }
/* Marka adları büyütülmez: lang="tr" + uppercase, "Fortinet"i "FORTİNET" yapar.
   Ayrıca marka kendi yazımıyla doğrudur (VMware, vCenter). */
.fbtn.marka { text-transform: none; letter-spacing: 0.02em; }

/* Vitrindeki okuma bağlantısı */
.lead .more {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.lead .more:hover { text-decoration: none; gap: var(--s-3); }
@media (prefers-reduced-motion: no-preference) { .lead .more { transition: gap 160ms ease; } }
.lead[hidden] { display: none; }

/* ---------- Öne çıkan kayıt: tablonun büyütülmüş satırı ---------- */
.lead {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-5);
  padding: var(--s-6) 0; border-bottom: 1px solid var(--line);
}
.lead .col-sig { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.lead h2 {
  font-size: clamp(1.2rem, 3vw, var(--t-lg)); line-height: 1.25; letter-spacing: -0.02em;
  font-weight: 700; margin: 0 0 var(--s-2); text-wrap: balance;
}
.lead h2 a { color: var(--ink); }
.lead h2 a:hover { color: var(--accent); text-decoration: none; }
.lead .dek { color: var(--muted); margin: 0 0 var(--s-3); font-size: var(--t-sm); max-width: 62ch; }
.lead .meta {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint);
  display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2);
}

/* ---------- Kayıt tablosu ---------- */
.ledger-wrap { padding-bottom: var(--s-8); }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 0; }
.ledger thead th {
  background: transparent; border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); font-weight: 600;
  text-align: left; padding: var(--s-3) var(--s-3) var(--s-2) 0; white-space: nowrap;
}
.ledger tbody td {
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.ledger tbody tr:hover td { background: var(--surface-2); }
.ledger tbody tr[hidden] { display: none; }
.ledger .c-title { font-family: var(--serif); font-size: var(--t-base); line-height: 1.35; }
.ledger .c-title a { color: var(--ink); font-weight: 600; }
.ledger .c-title a:hover { color: var(--accent); text-decoration: none; }
.ledger .c-title .sub {
  display: block; font-family: var(--mono); font-size: var(--t-2xs);
  color: var(--faint); letter-spacing: 0.04em; margin-top: 0.2rem;
}
.ledger .c-mono {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ledger .durum {
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: 0.04em; white-space: nowrap;
}
.ledger .durum.acik { color: var(--crit); }
.ledger .durum.yamali { color: var(--ok); }

/* ---------- İMZA HAMLE: CVSS ısı çubuğu ----------
   Skor yalnız yazılmaz, satırda yer kaplar. 9.8'lik bir satır göz taramasında
   2.7'lik satırdan fiziksel olarak daha ağır basar — tabloyu okunur kılan şey bu.  */
.heat { display: flex; align-items: center; gap: var(--s-2); min-width: 6.5rem; }
.heat .val {
  font-family: var(--mono); font-weight: 600; font-size: var(--t-xs);
  font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2.1rem;
}
.heat .bar {
  position: relative; flex: 1 1 auto; height: 5px; min-width: 2.5rem;
  background: var(--surface-3); border-radius: var(--r-xs); overflow: hidden;
}
.heat .bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--oran, 0%); background: var(--low);
  transition: width 220ms ease;
}
.heat.crit .bar::after { background: var(--crit); }
.heat.high .bar::after { background: var(--high); }
.heat.crit .val { color: var(--crit); }
@media (prefers-reduced-motion: reduce) { .heat .bar::after { transition: none; } }

/* ---------- Filtre boş sonucu ---------- */
.empty {
  padding: var(--s-7) 0; text-align: center; color: var(--muted);
  font-family: var(--mono); font-size: var(--t-sm);
}
.empty[hidden] { display: none; }

/* ---------- Ok işareti: fontta yok, SVG olarak çiziliyor ---------- */
.arrow { width: 0.95em; height: 0.95em; vertical-align: -0.1em; flex: none; }

/* ---------- Mobil: tablo satırı bloğa dönüşür ---------- */
@media (max-width: 760px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger tbody tr {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "sig   uretici tarih"
      "title title   title"
      "cvss  cvss    durum";
    gap: var(--s-2) var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
  }
  .ledger tbody td { border: 0; padding: 0; }
  .ledger tbody tr:hover td { background: transparent; }
  .ledger .t-sig     { grid-area: sig; }
  .ledger .t-uretici { grid-area: uretici; align-self: center; }
  .ledger .t-tarih   { grid-area: tarih; align-self: center; text-align: right; }
  .ledger .t-title   { grid-area: title; }
  .ledger .t-cvss    { grid-area: cvss; align-self: center; }
  .ledger .t-durum   { grid-area: durum; text-align: right; align-self: center; }
  .heat { min-width: 0; }
  .lead { grid-template-columns: 1fr; gap: var(--s-3); }
  .lead .col-sig { flex-direction: row; align-items: center; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .steps > li { padding-left: 2.6rem; }
  .topnav { gap: 0.9rem; font-size: 0.84rem; }
  .statusbar .in { padding-left: var(--s-4); padding-right: var(--s-4); }
}