/* ============================================================================
   Kuante — Ürün Liste Sayfası (urunler.php / en/products.php)
   Referans: DESIGN-KUANTE.md

   Tüm kurallar .k-catalog altına kapsüllenmiştir. Sayfanın eski satır içi
   stilleri `.card`, `.title`, `.btn`, `.grid`, `.body`, `.container` gibi çok
   genel adları GLOBAL tanımlıyor ve Bootstrap/Crafto ile çakışıyordu; ayrıca
   `body`'ye radial-gradient basıp `*{box-sizing}` sıfırlaması yapıyordu.
   ========================================================================== */

.k-catalog {
  max-width: var(--k-page-max);
  margin-inline: auto;
  padding: var(--k-space-48) var(--k-page-gutter) var(--k-space-96);
  color: var(--k-ink);
  font-family: var(--k-font-body);
}
.k-catalog a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------- SAYFA BAŞLIĞI -- */
.k-catalog .hero {
  padding: 0 0 var(--k-space-32);
  margin: 0 0 var(--k-space-32);
  border: 0;
  border-bottom: 1px solid var(--k-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.k-catalog .hero h1 {
  margin: 0 0 var(--k-space-8);
  font-family: var(--k-font-display);
  font-size: var(--k-text-heading);
  font-weight: var(--k-w-350);
  line-height: var(--k-lh-tight);
  letter-spacing: var(--k-tracking-heading);
  color: var(--k-ink);
}
.k-catalog .hero p {
  margin: 0;
  font-size: var(--k-text-body-sm);
  line-height: var(--k-lh-normal);
  color: var(--k-muted);
}

/* ------------------------------------------------------------- BREADCRUMB -- */
.k-catalog .breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--k-space-8);
  flex-wrap: wrap;
  margin-top: var(--k-space-16);
  font-size: var(--k-text-caption);
}
.k-catalog .crumb { display: flex; align-items: center; gap: var(--k-space-8); }
.k-catalog .crumb a {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--k-aqua-700);          /* 5.60:1 */
}
.k-catalog .crumb a:hover { color: var(--k-ink); text-decoration: underline; }
.k-catalog .crumb span { color: var(--k-muted); }
.k-catalog .sep { opacity: 1; color: var(--k-muted); }

/* --------------------------------------------------------------- ARAÇ ÇUBUĞU */
.k-catalog .toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--k-space-16);
  margin-bottom: var(--k-space-32);
}
.k-catalog .search {
  display: flex;
  align-items: center;
  gap: var(--k-space-8);
  height: 48px;
  padding-inline: 16px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-input);
  background: var(--k-canvas);
  box-shadow: none;
  color: var(--k-muted);
}
.k-catalog .search:focus-within { border-color: var(--k-aqua-600); }
.k-catalog .search input {
  all: unset;
  flex: 1;
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-text-body-sm);
}
.k-catalog .search input::placeholder { color: var(--k-muted); }

.k-catalog .select {
  appearance: none;
  height: 48px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-input);
  background: var(--k-canvas)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B78' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")
    no-repeat right 14px center;
  box-shadow: none;
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-text-body-sm);
  cursor: pointer;
}
.k-catalog .select:focus { outline: none; border-color: var(--k-aqua-600); }

/* --------------------------------------------------------------- KART IZGARA */
.k-catalog .grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--k-space-24);
}
.k-catalog .card {
  grid-column: span 12;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--k-canvas);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-card);
  overflow: hidden;
  box-shadow: none;
  transform: none;
  transition: border-color var(--k-dur) var(--k-ease);
}
.k-catalog .card:hover,
.k-catalog .card:focus-within { border-color: var(--k-ink); transform: none; box-shadow: none; }
@media (min-width: 640px)  { .k-catalog .card { grid-column: span 6 } }
@media (min-width: 1024px) { .k-catalog .card { grid-column: span 4 } }

.k-catalog .thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--k-surface);
  /* Kart flex kolon; flex item'ın içerik tabanlı min-height'i görselin gerçek
     yüksekliğini dayatıp aspect-ratio'yu eziyordu (bazı kartlar 1:1 çıkıyordu). */
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
}
.k-catalog .thumb img {
  width: 100%; height: 100%;
  /* Ürün/kategori görselleri kırpılmıyor (detay sayfasıyla aynı kural).
     Görseller dikeyden yataya çok değişken oranda; cover kullanıldığında
     1100x1208'lik bir görselin ~%32'si kesiliyordu. */
  object-fit: contain;
  object-position: center;
  padding: var(--k-space-16);
  display: block;
  filter: none;
}

/* Görsel üstü rozet — aqua, sistemin "açık" tek rengi */
.k-catalog .pill {
  position: absolute;
  left: 12px; top: 12px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--k-radius-pill);
  background: var(--k-aqua);
  backdrop-filter: none;
  font-family: var(--k-font-mono);
  font-size: var(--k-text-label);
  letter-spacing: var(--k-tracking-mono);
  line-height: 1;
  color: var(--k-ink);                /* aqua üzerinde 7.52:1 */
}

.k-catalog .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--k-space-16);
}
/* Başlık ve buton eskiden aynı `.title` kutusunda yan yanaydı; dar kartta
   alt alta düşüp yapışık duruyorlardı. Buton artık `.cta` içinde ve kartın
   en altında — açıklama uzunluğu ne olursa olsun tüm kartlarda aynı hizada. */
.k-catalog .title { display: block; margin: 0; }
.k-catalog .title :is(h2,h3,h4,h5,h6) {
  margin: 0;
  font-family: var(--k-font-display);
  font-size: var(--k-text-subheading);
  font-weight: var(--k-w-350);
  line-height: var(--k-lh-snug);
  letter-spacing: var(--k-tracking-heading);
  color: var(--k-ink);
}
/* Kartın tamamı tıklanabilir */
.k-catalog .title :is(h2,h3,h4,h5,h6) a::after { content: ""; position: absolute; inset: 0; }

.k-catalog .desc {
  margin: var(--k-space-8) 0 0;
  max-width: 46ch;
  font-size: var(--k-text-caption);
  line-height: var(--k-lh-normal);
  color: var(--k-muted);              /* 5.37:1 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.k-catalog .meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: var(--k-space-16) 0 0;
}
.k-catalog .chip {
  padding: 5px 10px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-pill);
  background: transparent;
  font-family: var(--k-font-mono);
  font-size: var(--k-text-label);
  letter-spacing: var(--k-tracking-mono);
  line-height: 1;
  color: var(--k-muted);
}

.k-catalog .cta {
  display: flex;
  gap: var(--k-space-8);
  /* auto: aksiyon her zaman kartın dibine yapışır */
  margin-top: auto;
  padding-top: var(--k-space-24);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.k-catalog .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-8);
  height: 40px;
  padding-inline: 20px;
  min-width: 0;
  border: 1.5px solid var(--k-ink);
  border-radius: var(--k-radius-pill);
  background: transparent;
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-text-caption);
  font-weight: var(--k-w-medium);
  line-height: 1;
  text-transform: none;      /* tema .btn'e uppercase veriyordu */
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: background-color var(--k-dur-fast) var(--k-ease),
              color var(--k-dur-fast) var(--k-ease);
}
.k-catalog .btn.primary {
  background: var(--k-ink);
  border-color: var(--k-ink);
  color: var(--k-on-dark);            /* 14.85:1 */
  box-shadow: none;
}
.k-catalog .btn.primary:hover {
  background: var(--k-aqua-700);
  border-color: var(--k-aqua-700);
  transform: none;
  box-shadow: none;
}
.k-catalog .btn.ghost { background: transparent; border-color: var(--k-ink); }
.k-catalog .btn.ghost:hover { background: var(--k-ink); color: var(--k-on-dark); transform: none; }

/* ------------------------------------------------------------ SAYFALAMA -- */
.k-catalog .pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--k-space-48);
}
.k-catalog .page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-pill);
  background: transparent;
  color: var(--k-ink);
  font-size: var(--k-text-caption);
  box-shadow: none;
  transition: background-color var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease);
}
.k-catalog .page:hover { border-color: var(--k-ink); }
.k-catalog .page.active {
  background: var(--k-ink);
  border-color: var(--k-ink);
  color: var(--k-on-dark);
  box-shadow: none;
}

.k-catalog .empty {
  padding: var(--k-space-64);
  text-align: center;
  color: var(--k-muted);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-card);
  background: transparent;
}

@media (max-width: 575.98px) {
  .k-catalog .toolbar { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Kategori sayfasına özel ekler (kategori.php / en/category.php)
   Aynı .k-catalog kapsülünü kullanır; yukarıdaki kart/ızgara/araç çubuğu
   kuralları olduğu gibi geçerlidir.
   ========================================================================== */

/* Breadcrumb (kategori sayfası ayrı sınıf adı kullanıyor) */
.k-catalog .breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--k-space-8);
  margin: 0 0 var(--k-space-16);
  font-size: var(--k-text-caption);
  color: var(--k-muted);
}
.k-catalog .breadcrumb a {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--k-aqua-700);
}
.k-catalog .breadcrumb a:hover {
  background: transparent;
  box-shadow: none;
  color: var(--k-ink);
  text-decoration: underline;
}
.k-catalog .breadcrumb .sep { opacity: 1; color: var(--k-muted); }
.k-catalog .breadcrumb [aria-current="page"] {
  font-weight: var(--k-w-medium);
  color: var(--k-ink);
}

/* Alt kategori bağlantıları */
.k-catalog .subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--k-space-16);
}
.k-catalog .subcat {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-8);
  padding: 9px 16px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-pill);
  background: transparent;
  font-size: var(--k-text-caption);
  color: var(--k-ink);
  box-shadow: none;
  transition: border-color var(--k-dur-fast) var(--k-ease),
              background-color var(--k-dur-fast) var(--k-ease);
}
.k-catalog .subcat:hover { border-color: var(--k-ink); }
.k-catalog .subcat .dot {
  width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: var(--k-radius-pill);
  background: var(--k-aqua);
}
.k-catalog .subcat small { color: var(--k-muted); }

.k-catalog .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--k-space-8);
}

/* ============================================================================
   Kategori kartları

   Bu slot karışık içerik taşıyor: üst kategorilerde iç mekân FOTOĞRAFI,
   alt kategorilerde ürün RENDER'ı. Ölçtüm: 4:3 kutuda cover kullanıldığında
   1920x1080 render'ların %25'i, 1100x1208 fotoğrafların %32'si kesiliyordu.

   "Ürün görselleri kırpılmasın" kuralı gereği contain kullanılıyor. Fotoğraf
   ağırlıklı kartlarda kenarlarda boşluk kalıyor; kutu oranı 4:3 yerine 1:1'e
   çekilerek bu boşluk azaltıldı (fotoğraflar 0.91, render'lar 1.78 oranında).
   ========================================================================== */
.k-catalog--cat .thumb { aspect-ratio: 1 / 1; }
.k-catalog--cat .thumb img { padding: var(--k-space-16); }