<aside class="filter-panel">
  <div class="filter-group">
    <h3 class="filter-title">Kategori</h3>
    <label class="filter-item">
      <input type="checkbox" checked /> CSS <span class="badge badge-default">24</span>
    </label>
    <label class="filter-item">
      <input type="checkbox" /> Figma <span class="badge badge-default">18</span>
    </label>
  </div>
  <div class="filter-group">
    <h3 class="filter-title">Sorting</h3>
    <label class="filter-item"><input type="radio" name="sort" checked /> En Yeni</label>
    <label class="filter-item"><input type="radio" name="sort" /> Most popular</label>
  </div>
</aside>

<style>
.filter-group { margin-bottom: 1.5rem; }
.filter-title { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.filter-item  { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0; cursor: pointer; font-size: 0.875rem; }
</style>