/* ==========================================================================
   Hobili Tasarım Sistemi v1 — kategori.css
   Yalnızca kategori sayfasına özgü küçük eklemeler. hobili.css'ten sonra yüklenir.
   Yalnızca --hb-* belirteçleri kullanılır; açık ve koyu temada aynı biçimde çalışır.
   ========================================================================== */

/* İçerik yolu: yapışkan menünün altında nefes alanı */
.hb-cat-crumbs {
  padding-top: var(--hb-space-4);
}

/* --------------------------------------------------------------------------
   Kahraman alanı: metin + yumuşak görsel mozaiği
   -------------------------------------------------------------------------- */
/* Tek sütunda da açık sütun şablonu: içerik (ör. uzun sözcük, görsel) sütunu genişletip taşma yaratmasın */
.hb-cat-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: center;
}

@media (min-width: 992px) {
  .hb-cat-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

/* Mozaiğin arkasındaki sıcak, yuvarlak zemin (yalnızca süs) */
.hb-cat-hero__media {
  position: relative;
  isolation: isolate;
  padding: var(--hb-space-4) var(--hb-space-4) 0 0;
}

.hb-cat-hero__media::before {
  content: "";
  position: absolute;
  inset: 0 0 var(--hb-space-6) var(--hb-space-6);
  z-index: -1;
  border-radius: var(--hb-radius-xl);
  background-color: var(--hb-chip-bg);
}

.hb-cat-collage {
  height: clamp(15rem, 10rem + 20vw, 27rem);
}

.hb-cat-collage img {
  min-height: 0;
  box-shadow: var(--hb-shadow-sm);
}

/* Sayılarla kategori özeti */
.hb-cat-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-space-3);
  margin: var(--hb-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.hb-cat-stats > li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .125rem;
  min-width: 9rem;
  padding: .875rem 1.25rem;
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius);
  background-color: var(--hb-surface);
  box-shadow: var(--hb-shadow-xs);
}

.hb-cat-stats__value {
  font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--hb-text);
}

.hb-cat-stats__value--date {
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  letter-spacing: -.01em;
}

/* Etiket iki satıra inebilir: satır aralığı en az 1,5 (1.4.8) */
.hb-cat-stats__label {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--hb-muted);
}

/* --------------------------------------------------------------------------
   Alt kategori sekmeleri ve araç çubuğu
   Alt kategoriler sayfa bağlantısıdır: sessiz metin sekmeleri, etkin sekmede
   3 px alt çizgi. İçerik türü süzgeci (çipler) bunlardan görünüşçe ayrılır.
   -------------------------------------------------------------------------- */
.hb-cat-subnav {
  margin-bottom: var(--hb-space-4);
}

.hb-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--hb-space-5);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hb-border);
  list-style: none;
}

/* Etkin olmayan sekmenin kenarlığı yok (zorlanmış renklerde saydam kenarlık görünür olurdu);
   alttaki 3 px boşluk iç boşlukla karşılanır, böylece sekmeler aynı hizada kalır. */
.hb-cat-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: -1px;
  padding: .625rem .125rem calc(.625rem + 3px);
  color: var(--hb-muted);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.hb-cat-tab:not([aria-current]):hover {
  color: var(--hb-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

.hb-cat-tab[aria-current] {
  padding-bottom: .625rem;
  border-bottom: 3px solid var(--hb-primary);
  color: var(--hb-text);
  font-weight: 700;
}

.hb-cat-tab__count {
  font-weight: 500;
  color: var(--hb-muted);
}

/* Süzgeç araç çubuğu: çerçevesiz, ana sayfadaki .hb-filterbar gibi sayfanın üzerinde durur */
.hb-cat-toolbar {
  margin-bottom: var(--hb-space-5);
}

.hb-cat-toolbar .hb-filterbar {
  margin-bottom: var(--hb-space-3);
}

.hb-cat-toolbar .hb-filter-status {
  margin: 0;
}

/* --------------------------------------------------------------------------
   "Örgüye nereden başlamalı?" bandı
   -------------------------------------------------------------------------- */
.hb-cat-start dfn {
  font-style: normal;
  font-weight: 700;
  color: var(--hb-text);
}

.hb-cat-start .hb-prose > :last-child {
  margin-bottom: 0;
}

/* Bant (surface-2) içindeki beyaz kart: içindeki etiketler yeniden varsayılan yumuşak zemini alır,
   yoksa bandın "yüzey rengi" ayarı yüzünden kartın zeminiyle aynı renkte kalırlar. */
.hb-cat-first {
  --hb-soft-bg: var(--hb-surface-2);
  --hb-soft-bg-hover: var(--hb-surface-3);
  --hb-soft-border: transparent;
  padding: var(--hb-space-4) var(--hb-space-4) var(--hb-space-5);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius-card);
  background-color: var(--hb-surface);
  box-shadow: var(--hb-shadow-sm);
}

.hb-cat-first .hb-eyebrow {
  margin: var(--hb-space-1) var(--hb-space-1) var(--hb-space-3);
}

/* --------------------------------------------------------------------------
   İlgili kategoriler: üç geniş karo
   -------------------------------------------------------------------------- */
.hb-cat-grid.hb-cat-grid--3 {
  grid-template-columns: minmax(0, 1fr);
}

.hb-cat-grid--3 .hb-cat-tile {
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .hb-cat-grid.hb-cat-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hb-cat-grid--3 .hb-cat-tile {
    aspect-ratio: 4 / 3;
  }
}

/* Karo etiketindeki proje sayısı (.hb-cat-tile__count) hobili.css'tedir (bölüm 13). */

/* --------------------------------------------------------------------------
   Erişilebilirlik ortam sorguları ve yazdırma
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .hb-cat-hero__media::before {
    display: none;
  }

  .hb-cat-stats > li,
  .hb-cat-first {
    border-color: CanvasText;
  }

  .hb-cat-tab[aria-current] {
    border-bottom-color: Highlight;
  }
}

@media print {
  .hb-cat-hero__media,
  .hb-cat-subnav,
  .hb-cat-toolbar {
    display: none !important;
  }

  .hb-cat-stats > li,
  .hb-cat-first {
    box-shadow: none;
  }
}