<nav class="pagination" aria-label="Pagination">
  <a href="?page=1" class="page-btn" aria-label="Previous">←</a>
  <a href="?page=1" class="page-btn">1</a>
  <a href="?page=2" class="page-btn active" aria-current="page">2</a>
  <a href="?page=3" class="page-btn">3</a>
  <span class="page-ellipsis">…</span>
  <a href="?page=8" class="page-btn">8</a>
  <a href="?page=3" class="page-btn" aria-label="Sonraki">→</a>
</nav>

<style>
.pagination { display: flex; align-items: center; gap: 0.375rem; }
.page-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; border: 1px solid var(--border);
  color: var(--muted); text-decoration: none;
  transition: all 0.15s;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
.page-ellipsis { padding: 0 0.25rem; color: var(--muted); }
</style>