/* ==========================================================================
   pixepi — category.css  ·  yalnızca /kategoriler/{slug} kategori sayfası
   --------------------------------------------------------------------------
   Ortak bileşenler base.css'tedir; burada kategori kahramanı ve kahraman
   sonrası ritim ayarlanır. Renkler token ve --accent'ten gelir; yeni bileşen
   ya da renk uydurulmaz.
   Yüklenme sırası: fonts.css → base.css → catalog.css → category.css
   ========================================================================== */

/* --- 1. Sayfa üstü + kahraman ------------------------------------------- */
/* .section yerine sade sarmalayıcı: dikey ritmi sayfa kendisi kurar. */
.page-top{padding:30px 0 0}

.cat-hero{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:clamp(24px,3.4vw,36px);
  background:
    radial-gradient(520px 240px at 6% -20%,rgba(var(--accent-rgb),.18),transparent 70%),
    linear-gradient(140deg,#0d1624,#0a111d);
}
.cat-hero-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cat-hero .cat-badge{
  display:grid;place-items:center;width:54px;height:54px;border-radius:15px;flex:none;
  border:1px solid rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.14);color:var(--accent);
}
.cat-hero .cat-badge svg{width:26px;height:26px}
.cat-hero h1{font-size:clamp(25px,3.4vw,38px);font-weight:800;line-height:1.12}
.cat-hero .cat-lead{margin-top:12px;max-width:640px;font-size:16px;line-height:1.7;color:var(--muted)}
.cat-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cat-fact{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line-2);background:#0b1320;font-size:13px;color:var(--muted);
}
.cat-fact:before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent)}
.cat-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* --- 2. Dar ekran -------------------------------------------------------- */
@media (max-width:820px){
  .page-top{padding-top:22px}
}