/* ————— Container Grid ————— */
.grid{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media(min-width:880px){ .grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1240px){ .grid{ grid-template-columns:1fr 1fr 1fr } }

/* ————— Controls ————— */
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.controls .chips{flex-wrap:wrap}
.controls .right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.controls .chips.small .chip{padding:4px 10px;font-size:11px}
.sort{display:flex;align-items:center;gap:8px}
.sort select{border:1px solid var(--border);background:var(--soft);color:#fff;border-radius:10px;padding:8px 10px;outline:none}

/* ————— Card ————— */
.card-cve{
  position:relative; overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border-radius:16px; box-shadow:var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-cve:hover{ transform: translateY(-3px); box-shadow:0 14px 50px rgba(0,0,0,.35) }

/* top glow strip */
.strip{
  position:absolute; inset:0 0 auto 0; height:64px;
  background: radial-gradient(120px 60px at 80% 0, rgba(34,211,238,.25), transparent 60%),
              radial-gradient(140px 60px at 20% 0, rgba(16,185,129,.18), transparent 60%);
  filter: blur(10px); opacity:.55; pointer-events:none
}

/* severity ribbon */
.ribbon{
  position:absolute; left:12px; top:10px;
  padding:6px 10px; font-weight:800; font-size:12px; color:#0B1020;
  border-radius:8px; transform:rotate(-6deg); border:1px solid rgba(0,0,0,.15)
}
.ribbon.low{background:#86efac}
.ribbon.medium{background:#fde68a}
.ribbon.high{background:#fb7185}
.ribbon.critical{background:#f43f5e}

/* header row inside */
.cve-top{display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding:16px}
.left h3{margin:0 0 6px; font-size:18px}
.meta{display:flex; gap:8px; flex-wrap:wrap}
.pill{border:1px solid var(--border); background:var(--soft); color:var(--text-dim);
  padding:4px 8px; border-radius:999px; font-size:12px}

/* CVSS donut */
.donut{position:relative; width:58px; height:58px; border-radius:50%; border:1px solid var(--border)}
.donut .ring{position:absolute; inset:4px; border-radius:50%; background:var(--bg)}
.score{
  position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:12px; color:#fff
}

/* body */
.cve-body{padding:0 16px 14px}
.desc{color:var(--text-dim); line-height:1.6; margin:8px 0}
.cwe{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.cwe .chip{padding:4px 10px; font-size:11px}

.metrics{
  display:grid; gap:8px; grid-template-columns:1fr 1fr; margin-top:10px
}
.mbar{display:flex; align-items:center; gap:8px}
.mbar .lab{width:110px; color:var(--text-dim); font-size:12px}
.mbar .bar{flex:1; height:8px; border-radius:999px; background:rgba(255,255,255,.08); position:relative; overflow:hidden}
.mbar .bar > i{position:absolute; left:0; top:0; bottom:0; width:30%; background:linear-gradient(90deg, rgba(34,211,238,.45), rgba(52,211,153,.35))}

/* footer */
.cve-foot{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-top:1px solid var(--border)}
.actions{display:flex; gap:8px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--soft); color:var(--text-dim); font-weight:600
}
.bookmark.is-on{background:#fff; color:#0B1020}

/* ----- NAV: match index header tabs exactly ----- */
.tabs { padding: 4px; border-radius: 12px }          /* index ile aynı */
.tabs .tab,
.tabs .tab:link,
.tabs .tab:visited,
.tabs .tab:active,
.tabs .tab:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* index.css -> .tab değerleri */
  padding: 8px 12px;
  line-height: 1;
  height: auto;
  font-weight: 600;
  color: var(--text-faint);
  background: transparent;
  border: 0;                          /* <a> için reset */
  text-decoration: none;              /* <a> için reset */
  border-radius: 999px;
  -webkit-appearance: none;           /* <button> için reset */
  appearance: none;
  cursor: pointer;
}
.tabs .tab.is-active {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid var(--border);
}
/* header paddings exactly same as index */
.header.pad { padding: 16px }


/* skeleton for grid */
.skel{height:240px; border:1px solid var(--border); background:var(--panel); border-radius:16px; position:relative; overflow:hidden}
.skel::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:sh .9s linear infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}