/* Site genelinde TEK sayfa numarası tasarımı.
   Referans: /berlin (şehir sayfası). O görünüm `layout-*.css` içinde
   `.list--area .section--wrapper .section--area .pagination …` zincirine bağlıydı,
   yani sadece o sarmalayıcıya sahip sayfalarda uygulanıyordu; eyalet sayfası
   Bootstrap varsayılanına, arama/firmen sayfaları ise üçüncü bir tasarıma
   düşüyordu. Buradaki kurallar sarmalayıcıdan bağımsızdır ve iki ayrı markup'ı
   birden kapsar:

     1) <ul class="pagination"><li class="page-item"><a class="page-link">  (şehir/bölge/eyalet)
     2) <nav class="pagination"><a class="page-link">                        (arama, firmen)

   Ölçüler /berlin'den ölçülerek alındı — o sayfanın görünümü değişmemeli. */

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 40px 0;
  padding-left: 0;
  list-style: none;
}

/* Aralık `gap` ile değil margin ile: /berlin'de zaten
   `.page-item:not(:last-child) { margin-right: 10px }` var, gap eklenseydi
   aralık iki katına çıkardı. */
.pagination > *:not(:last-child) {
  margin-right: 10px;
}

.page-item {
  display: list-item;
  list-style: none;
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  background: rgba(103, 120, 148, .1);
  color: #677894;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}

/* Bootstrap ilk/son kutuya kendi yarıçapını veriyor (.page-item:first-child
   .page-link) ve seçici bizimkinden spesifik — köşeler 6px'e kayıyordu. */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  border-radius: 5px;
}

.page-link:hover {
  border-color: rgb(var(--portal-primary-rgb, var(--primary-rgb, 13 110 253)));
  color: #677894;
}

/* Bulunulan sayfa. Üç yazımı da karşılıyor:
   Bootstrap görünümü (li.active > .page-link) ve arama sayfasının
   doğrudan a.page-link.active yazımı. */
.page-item.active .page-link,
.active > .page-link,
.page-link.active {
  border-color: #0d6efd;
  background: rgba(103, 120, 148, .1);
  color: #677894;
}

.page-item.disabled .page-link,
.disabled > .page-link,
.page-link.disabled {
  border-color: #dee2e6;
  background: rgba(103, 120, 148, .1);
  color: #677894;
  pointer-events: none;
}

/* Arama/firmen sayfalarındaki ok ikonları 40x40 kutuya sığsın. */
.page-link svg,
.page-link i {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}

@media (max-width: 600px) {
  .pagination {
    margin: 28px 0;
  }

  .pagination > *:not(:last-child) {
    margin-right: 6px;
  }

  .page-link {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}