/**
 * Axtea — ÜRÜNLER sayfası
 * -----------------------------------------------------------------------------
 * Renkler AXTEA-ÜRÜNLER.pdf'ten piksel örneklemesiyle alındı:
 *   sayfa zemini #eceefa · filtre kutusu #cdd1f3 · Uygula #7b88e3
 *   kart #ffffff · seri rozeti #17282d · göz dairesi #eceefa (ikon #7d8ae3)
 *   CTA #444b81 · sayfalama aktif #17282d · footer #17282d
 * main.css'e DOKUNULMUYOR (satır numaraları sabit kalsın).
 */

.urunler-sayfa,
body:has(.urun-listesi-section) {
  background-color: #eceefa;
}

/* --- Filtre çubuğu -------------------------------------------------------- */
.urun-filtre-section {
  padding-top: 70px;
}

.urun-filtre {
  background-color: #cdd1f3;
  border-radius: 12px;
  padding: 26px 30px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
}

.urun-filtre-alan {
  flex: 1 1 220px;
  min-width: 0;
}

.urun-filtre-etiket {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
}

/* main.js tüm <select>leri niceSelect'e çeviriyor ($("select").niceSelect()),
 * o yüzden hem ham select hem .nice-select biçimlendiriliyor. */
.urun-filtre select,
.urun-filtre .nice-select {
  width: 100%;
  height: 54px;
  line-height: 52px;
  padding: 0 46px 0 20px;
  border: 0;
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--tj-color-heading-primary);
  font-size: 16px;
  font-weight: var(--tj-fw-medium);
}

.urun-filtre .nice-select::after {
  border-bottom: 2px solid var(--tj-color-heading-primary);
  border-right: 2px solid var(--tj-color-heading-primary);
  width: 8px;
  height: 8px;
  right: 22px;
  margin-top: -5px;
}

.urun-filtre .nice-select .list {
  width: 100%;
  border-radius: 8px;
  margin-top: 6px;
}

.urun-filtre-buton {
  flex: 0 0 auto;
}

.urun-uygula {
  min-width: 118px;
  height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 30px;
  background-color: #7b88e3;
  color: #ffffff;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  transition: all 0.3s;
}

.urun-uygula:hover {
  background-color: var(--tj-color-theme-primary);
}

@media only screen and (max-width: 991px) {
  .urun-filtre {
    gap: 18px;
  }
  .urun-filtre-alan {
    flex: 1 1 100%;
  }
  .urun-filtre-buton {
    flex: 1 1 100%;
  }
  .urun-uygula {
    width: 100%;
  }
}

/* --- Ürün kartları -------------------------------------------------------- */
.urun-listesi-section {
  padding-top: 40px;
  padding-bottom: 70px;
}

.urun-thumb {
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 22px;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.urun-rozet {
  position: absolute;
  top: 22px;
  inset-inline-start: 22px;
  z-index: 2;
  padding: 7px 16px 9px;
  border-radius: 8px;
  background-color: #17282d;
  color: #ffffff;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
}

.urun-onizle {
  position: absolute;
  top: 22px;
  inset-inline-end: 22px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #eceefa;
  color: #7d8ae3;
  font-size: 18px;
  transition: all 0.3s;
}

.urun-onizle:hover {
  background-color: var(--tj-color-theme-primary);
  color: #ffffff;
}

/* Tasarımdaki sade dış hatlı göz — tema fontundaki tji-eye-box'ın etrafında
 * kutu olduğu için satır içi SVG kullanıldı. */
.urun-onizle svg {
  display: block;
  width: 20px;
  height: 20px;
}

.urun-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.urun-img img {
  max-width: 100%;
  height: auto;
}

.urun-content {
  padding-top: 16px;
}

.urun-baslik {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.3;
}

.urun-baslik a {
  color: var(--tj-color-heading-primary);
}

.urun-baslik a:hover {
  color: var(--tj-color-theme-primary);
}

.urun-kategori {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tj-color-text-body);
}

@media only screen and (max-width: 767px) {
  .urun-thumb {
    min-height: 260px;
  }
}

/* --- Sayfalama ------------------------------------------------------------ */
.urun-sayfalama {
  padding-top: 30px;
  text-align: center;
}

.urun-sayfalama .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.urun-sayfalama .page-numbers li {
  line-height: 1;
}

.urun-sayfalama .page-numbers li .page-numbers {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9bfd6;
  border-radius: 50%;
  background-color: transparent;
  color: var(--tj-color-heading-primary);
  font-size: 16px;
  font-weight: var(--tj-fw-medium);
  transition: all 0.3s;
}

.urun-sayfalama .page-numbers li .page-numbers.current,
.urun-sayfalama .page-numbers li .page-numbers:hover {
  background-color: #17282d;
  border-color: #17282d;
  color: #ffffff;
}

/* --- CTA ------------------------------------------------------------------ */
.urunler-cta {
  padding-bottom: 0;
}

.urunler-cta .cta-area {
  background-color: #444b81;
  align-items: center;
}

.urunler-cta .cta-content .title {
  color: #ffffff;
}

/* ⚠️ Buradaki `.cta-content { width: 66% }` kuralı 2026-08-24'te KALDIRILDI:
 * CTA artık TÜM sayfalarda aynı olmalı, kural axtea.css'e (global) taşındı
 * ve %60 olarak yeniden ölçüldü. Buraya tekrar ekleme — iki farklı
 * genişlik oluşur. */

/* ⚠️ FOOTER MESAFESİ: tema `.tj-cta-section`a `margin-bottom:-195px` verip
 * bandı footer'ın içine sokuyor. Ölçüm: footer logosu CTA'nın altından yalnız
 * 5px aşağıdaydı. Tasarımda bu boşluk ~85px — footer üst iç boşluğu artırıldı.
 * (Bu dosya SADECE urunler.php'de yükleniyor, anasayfa etkilenmez.) */
.tj-footer-section.footer-2 {
  padding-top: 190px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-footer-section.footer-2 {
    padding-top: 150px;
  }
}

@media only screen and (max-width: 1199px) {
  .tj-footer-section.footer-2 {
    padding-top: 130px;
  }
}

/* Footer rozetleri (+75 COUNTRY / 2 BRANCHES) artık axtea.css'te —
 * anasayfa footer'ında da kullanılıyor, ortak dosyada olmalı. */