/* Malzeme hub'i + moodboard — page-malzeme-hub.php
 *
 * Kapsam `.k-mhub` -- baska hicbir yuzeye dokunmaz.
 * Ayri dosya: theme.css / v13-fixes.css / tokens.css baska islerde acik ve
 * paralel yazma onlari daha once birden fazla kez ezdi.
 *
 * ⚠ YENI RENK / FONT TANIMI YOK. Her deger tokens.css'ten geliyor.
 * ⚠ Mobil oncelikli: taban kurallar telefon icin, genisleme min-width ile.
 * ⚠ 1.106 hucre var -- `content-visibility:auto` olmadan ilk boyama uzuyor.
 *   `contain-intrinsic-size` verilmezse kaydirma cubugu zipliyor, o yuzden
 *   ikisi birlikte.
 */

.k-site .k-mhub {
  background: var(--surface-page);
  color: var(--text-primary);
}

.k-site .k-mhub__wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.k-site .k-mhub__h2 {
  font-family: var(--text-heading-font);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin: 0 0 var(--space-5);
}

/* --- Hero ---------------------------------------------------------------- */

.k-site .k-mhub__hero {
  padding-block: var(--space-9) var(--space-8);
  border-bottom: var(--border-width) solid var(--border-hairline);
}

.k-site .k-mhub__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--size-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
}

.k-site .k-mhub__h1 {
  margin: 0 0 var(--space-5);
  font-family: var(--text-display-font);
  font-size: var(--size-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: var(--ls-display-2);
  font-weight: var(--weight-regular);
  color: var(--text-heading);
}

.k-site .k-mhub__lede {
  max-width: var(--container-narrow);
  margin: 0;
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--text-secondary);
}

/* --- Malzeme rehberleri -------------------------------------------------- */

.k-site .k-mhub__pillars { padding-block: var(--space-9); }

/* Mobilde yatay serit: bes kart alt alta dizilirse izgara ekranin altina
   itiliyor ve sayfanin asil isi gorunmuyor. */
.k-site .k-mhub__prow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
}

.k-site .k-mhub__pcard {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--space-6);
  min-height: 172px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-control);
}

.k-site .k-mhub__pcard:hover,
.k-site .k-mhub__pcard:focus-visible {
  border-color: var(--border-focus);
  background: var(--surface-brand-quiet);
}

.k-site .k-mhub__pname {
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.k-site .k-mhub__pdesc {
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--text-secondary);
}

.k-site .k-mhub__parrow { color: var(--text-brand); line-height: 0; }

/* --- Moodboard ----------------------------------------------------------- */

.k-site .k-mhub__board {
  padding-block: var(--space-8);
  background: var(--surface-sunken);
  border-block: var(--border-width) solid var(--border-hairline);
}

.k-site .k-mhub__bhead { margin-bottom: var(--space-5); }
.k-site .k-mhub__bhead .k-mhub__h2 { margin-bottom: var(--space-2); }

.k-site .k-mhub__bnote {
  margin: 0;
  max-width: var(--container-narrow);
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

.k-site .k-mhub__btray {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 42%;
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-1) var(--gutter) var(--space-4);
  min-height: 148px;
}

.k-site .k-mhub__btray:empty::after {
  content: attr(data-empty);
  align-self: center;
  font-size: var(--size-body-sm);
  color: var(--text-tertiary);
}

.k-site .k-mhub__bitem {
  scroll-snap-align: start;
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--space-2);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.k-site .k-mhub__bimg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.k-site .k-mhub__bmeta {
  display: grid;
  gap: 1px;
  padding: 0 var(--space-1) var(--space-1);
  min-width: 0;
}

.k-site .k-mhub__bmeta b,
.k-site .k-mhub__bmeta i {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-site .k-mhub__bmeta b {
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.k-site .k-mhub__bmeta i {
  font-size: var(--size-micro);
  line-height: 1.4;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.k-site .k-mhub__bx {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--surface-scrim);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-control);
}

.k-site .k-mhub__bx:hover { background: var(--surface-card); color: var(--text-brand); }

.k-site .k-mhub__bfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  justify-content: space-between;
}

.k-site .k-mhub__bcount {
  margin: 0;
  font-size: var(--size-spec);
  line-height: var(--lh-spec);
  letter-spacing: var(--ls-spec);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.k-site .k-mhub__bacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.k-site .k-mhub__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-md);
  padding-inline: var(--space-5);
  border-radius: var(--radius-chip);
  border: var(--border-width) solid transparent;
  font-family: inherit;
  font-size: var(--size-body-sm);
  letter-spacing: var(--ls-ui);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}

/* Panonun TEK eylemi.
 *
 * ⚠ OLCUM (WCAG 2.1, 2026-08-27) -- burasi bir kez YANLIS yapildi:
 *   Kaldirilan `--quiet` butonu `--control-quiet-bg` (= --grey-50) kullaniyordu;
 *   panelin kendi zemini de `--surface-sunken` (= --grey-50). Dolgu/zemin
 *   kontrasti 1.0:1 -- yani buton panelden AYIRT EDILEMIYORDU. Tek ayirici
 *   1px `--border-default` idi, o da 1.27:1 (1.4.11 esigi 3:1). Kusur buydu.
 *
 *   Kalan tek CTA olculdu:
 *     beyaz metin / bordo-600 dolgu ....... 11.37:1  (AA 4.5 · AAA 7 gecti)
 *     bordo-600 dolgu / panel --grey-50 ... 10.26:1  (1.4.11 3:1 gecti)
 *     hover bordo-700 ..................... 13.88:1 / 12.52:1
 *   Yeni renk TANIMLANMADI; ikisi de tokens.css'ten.
 */
.k-site .k-mhub__btn--solid {
  background: var(--surface-brand);
  color: var(--text-inverse);
}

.k-site .k-mhub__btn--solid:hover { background: var(--surface-brand-hover); }

.k-site .k-mhub__btn[disabled] { opacity: .45; cursor: default; }

.k-site .k-mhub__btn[hidden] { display: none; }

/* --- Filtreler ----------------------------------------------------------- */

.k-site .k-mhub__lib { padding-block: var(--space-9) var(--section-y); }

.k-site .k-mhub__filters {
  position: sticky;
  /* Yapiskan baslik altinda kalmasin. */
  top: var(--header-h);
  z-index: 3;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter) var(--space-3);
  margin-inline: calc(var(--gutter) * -1);
  /* ⚠ backdrop-filter KULLANILMADI: fixed alt cubuk (.kvlbar) ve teklif
     diyalogu ayni sayfada; backdrop-filter iceren bir ata fixed torunlar icin
     kapsayici blok yaratip onlari kaydiriyor. Duz yuzey yeterli. */
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-hairline);
}

/* ⚠ flex-wrap ZORUNLU: mobilde `.k-mhub__flabel` tam satir kapliyor. Wrap
   olmadan etiket 279px aliyor, chip seridi 32px'e sikisip ekran disina
   tasiyordu (olculdu 390px'te). */
.k-site .k-mhub__frow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.k-site .k-mhub__flabel {
  flex: none;
  width: 100%;
  font-size: var(--size-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}

.k-site .k-mhub__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 220px;
  min-width: 0;
  padding-inline: var(--space-4);
  height: var(--control-h-md);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-chip);
  color: var(--text-tertiary);
}

.k-site .k-mhub__search:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.k-site .k-mhub__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--size-body-sm);
  color: var(--text-primary);
}

.k-site .k-mhub__search input:focus { outline: none; }

.k-site .k-mhub__sel {
  flex: 1 1 180px;
  min-width: 0;
  height: var(--control-h-md);
  padding-inline: var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-chip);
  font-family: inherit;
  font-size: var(--size-body-sm);
  color: var(--text-primary);
}

/* Chip seridi mobilde yatay kayar; sarmak filtre cubugunu ekranin yarisi
   yapiyordu. */
.k-site .k-mhub__chips {
  display: flex;
  /* Mobilde etiketin ALTINDA tam satir; ekranin iki kenarina tasar. */
  flex: 1 1 100%;
  min-width: 0;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: var(--space-1);
}

.k-site .k-mhub__chips::-webkit-scrollbar { display: none; }

.k-site .k-mhub__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-chip);
  background: var(--surface-card);
  font-family: inherit;
  font-size: var(--size-body-sm);
  letter-spacing: var(--ls-ui);
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}

.k-site .k-mhub__chip:hover { background: var(--control-quiet-bg-hover); }

.k-site .k-mhub__chip[aria-pressed="true"] {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--text-inverse);
}

.k-site .k-mhub__chip[aria-pressed="true"] .k-mhub__n { color: var(--text-inverse); opacity: .72; }

.k-site .k-mhub__n {
  font-size: var(--size-micro);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.k-site .k-mhub__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--dot, var(--grey-200));
  box-shadow: var(--shadow-inset-hairline);
  flex: none;
}

.k-site .k-mhub__frow--status {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.k-site .k-mhub__count {
  margin: 0;
  font-size: var(--size-spec);
  line-height: var(--lh-spec);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.k-site .k-mhub__clear {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--size-body-sm);
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.k-site .k-mhub__jump {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-body-sm);
  color: var(--text-primary);
  text-decoration: none;
}

.k-site .k-mhub__jumpn {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--radius-circle);
  background: var(--surface-brand);
  color: var(--text-inverse);
  font-size: var(--size-micro);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

/* --- Kartela izgarasi ---------------------------------------------------- */

.k-site .k-mhub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: var(--space-4) var(--space-3);
  margin-top: var(--space-7);
}

.k-site .k-mhub__sw {
  /* 1.106 hucre: goruntu disindakiler render edilmesin. */
  content-visibility: auto;
  contain-intrinsic-size: auto 148px;
  display: grid;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  min-width: 0;
}

.k-site .k-mhub__sw[hidden] { display: none; }

.k-site .k-mhub__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* Gorsel yuklenene kadar hucre swatch'in ortalama rengiyle dolu durur --
     gri iskelet yerine gercek renk. */
  background: var(--sw, var(--surface-sunken));
  box-shadow: var(--shadow-inset-hairline);
  transition: var(--transition-control);
}

.k-site .k-mhub__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.k-site .k-mhub__sw:hover .k-mhub__thumb,
.k-site .k-mhub__sw:focus-visible .k-mhub__thumb {
  box-shadow: 0 0 0 2px var(--border-focus);
}

.k-site .k-mhub__tick {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  background: var(--surface-brand);
  color: var(--text-inverse);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}

.k-site .k-mhub__sw[aria-pressed="true"] .k-mhub__tick { opacity: 1; transform: none; }

.k-site .k-mhub__sw[aria-pressed="true"] .k-mhub__thumb {
  box-shadow: 0 0 0 2px var(--surface-brand);
}

.k-site .k-mhub__code,
.k-site .k-mhub__coll {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.k-site .k-mhub__code {
  font-size: var(--size-micro);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.k-site .k-mhub__coll {
  font-size: var(--size-micro);
  line-height: 1.35;
  color: var(--text-tertiary);
}

.k-site .k-mhub__empty {
  margin: var(--space-10) 0;
  text-align: center;
  font-size: var(--size-body);
  color: var(--text-secondary);
}

.k-site .k-mhub__note {
  margin: var(--space-8) 0 0;
  max-width: var(--container-narrow);
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--text-tertiary);
}

/* --- Genisleme ----------------------------------------------------------- */

@media (min-width: 600px) {
  .k-site .k-mhub__prow { grid-auto-columns: 46%; }
  .k-site .k-mhub__btray { grid-auto-columns: 22%; }
  .k-site .k-mhub__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  /* Etiket ile serit ayni satira doner. */
  .k-site .k-mhub__flabel { width: auto; min-width: 96px; }
  .k-site .k-mhub__chips { flex: 1 1 0; }
}

@media (min-width: 1024px) {
  .k-site .k-mhub__hero { padding-block: var(--space-11) var(--space-9); }
  .k-site .k-mhub__prow {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .k-site .k-mhub__btray {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .k-site .k-mhub__chips {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .k-site .k-mhub__grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* Yapiskan filtre cubugu, mobil cekmece/diyalog acikken ustte kalmasin. */
.k-site.kvl-noscroll .k-mhub__filters,
.k-site.k-drawer-open .k-mhub__filters { position: static; }

@media print {
  .k-site .k-mhub__filters,
  .k-site .k-mhub__lib { display: none; }
}