/* 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);
}

/* ⚠ Agirlik ozgul seciciyle sabitleniyor: legacy.css'teki genel
   `body.page:not(.home) main h1` (0,2,3) bilesenin (0,2,0) kuralini ezip
   600 yapiyordu. Source Serif 4'un 600 yuzu yok -> sahte kalin ciziliyordu.
   Bu secici (0,3,1) ile kazanir. */
body.page.k-site .k-mhub__h1 { font-weight: var(--weight-regular); }

.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-mhub__grid` ARTIK IZGARA DEGIL, gruplarin kabi. Hucre izgarasi
   `.k-mhub__cells`'e tasindi; `data-kvl-grid` adi betik hucreleri oradan
   topladigi icin degismedi. */
.k-site .k-mhub__grid { margin-top: var(--space-6); }
.k-site .k-mhub__cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: var(--space-4) var(--space-3);
}

.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__cells { 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; }
}

/* ── r182: Yapiskan olan artik DURUM SATIRI, filtre cubugu degil ──────────
   Kullanici: "malzeme kartela moodboard seçimi mobil deneyim zayıf".

   ⚠⚠ Olculdu: `.k-mhub__filters` mobilde 365 px (844 px ekranin %43'u),
      masaustunde 293 px (900 px'in %33'u) ve yapiskandi. Altindaki izgara
      mobilde 51.527 px, masaustunde 19.874 px. Devasa bir izgara ekranin
      ucte biriyle geziliyordu.

   ⚠⚠ Durum satiri DOM'da filtre cubugunun disina alindi (page-malzeme-hub.php):
      sticky cocuk yalnizca EBEVEYNI ekrandayken yapisir; icerde kalsaydi
      365 px sonra kayip giderdi. */
.k-site .k-mhub__filters {
  position: static;
  border-bottom: 0;
}

.k-site .k-mhub__frow--status {
  position: sticky;
  top: var(--header-h);
  z-index: 3;
  margin-inline: calc(var(--gutter) * -1);
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--gutter);
  /* ⚠ backdrop-filter YOK -- sayfada fixed alt cubuk (.kvlbar) ve teklif
     diyalogu var; backdrop-filter iceren ata, fixed torunlar icin kapsayici
     blok yaratip onlari kaydiriyor (bkz. filtre cubugundaki ayni not). */
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-hairline);
}

/* Cekmece/diyalog acikken yapiskan kalmasin -- kural filtre cubugundan
   durum satirina tasindi. */
.k-site.kvl-noscroll .k-mhub__frow--status,
.k-site.k-drawer-open .k-mhub__frow--status { position: static; }

/* Panoya donus: 67x22 idi, dokunma hedefi 44 px'in altinda. Kartela secince
   sayi BURADA artiyor -- geri bildirim artik basparmak hizasinda. */
.k-site .k-mhub__jump {
  min-height: 36px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-chip);
  box-shadow: inset 0 0 0 var(--border-width) var(--border-hairline);
}

@media (max-width: 767px) {
  .k-site .k-mhub__jump { min-height: 40px; }

  /* Yatay kayan seritlerin kenarinda SOLMA: kirpilmis kart "bozuk" degil
     "devami var" okunuyor. Moodboard seridinde son kart panelin kenarinda
     duz kesiliyordu. */
  .k-site .k-mhub__btray,
  .k-site .k-mhub__chips,
  .k-site .k-mhub__prow {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 30px), transparent 100%);
    scroll-padding-inline: var(--gutter);
  }

  /* Etiket seridin ustunde tam satir kapliyordu -> uc filtre satiri iki
     katina cikiyordu. 600 px'te zaten satir ici; mobilde de oyle. */
  .k-site .k-mhub__flabel { width: auto; min-width: 0; flex: none; }
  .k-site .k-mhub__chips { flex: 1 1 0; }
}


/* --------------------------------------------------------------------------
   Teklif listesi urun satiri (v3)
   ⚠ Yeni bir gorsel dil UYDURULMADI: cipler filtre cipleriyle ayni
     `.k-mhub__chip` sinifini kullaniyor, yalnizca secili hali daha guclu
     cunku secim burada bir MOD acip izgaranin anlamini degistiriyor.
   -------------------------------------------------------------------------- */
.k-mhub__frow--urun { align-items: flex-start; }
.k-mhub__chip--urun { max-width: 22rem; }
.k-mhub__chip--urun > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.k-mhub__chip--urun[aria-pressed="true"] {
  background: var(--surface-brand); border-color: var(--surface-brand); color: #fff;
}
.k-mhub__chip--urun[aria-pressed="true"] .k-mhub__n { color: #fff; opacity: .8; }
.k-mhub__chip--urun[disabled] { opacity: .45; cursor: not-allowed; }


/* Urun modunda izgara "atama yapiliyor" hissi versin: pano halkasi yerine
   marka rengi. Ayni halka iki anlama gelmesin diye renk ayrisiyor. */
[data-kvl-mhub][data-urun-modu] .k-mhub__sw[aria-pressed="true"] {
  outline: 2px solid var(--surface-brand); outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Tip / koleksiyon gruplari (v3)
   ⚠ 1.106 hucre tek yiginda 40+ ekranlik bir duvardi. Yapinin isi uzunlugu
     kirpmak degil, NEREDE oldugunu soylemek: tip basligi + koleksiyon
     basligi + sayilar. Katlama bunun yan urunu.
   -------------------------------------------------------------------------- */
.k-site .k-mhub__tip { margin-top: var(--space-9); }
.k-site .k-mhub__tip:first-child { margin-top: var(--space-6); }

.k-site .k-mhub__tiph {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--size-body-lg); line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-tight); font-weight: 600; color: var(--text-heading);
}

.k-site .k-mhub__grp { margin-top: var(--space-6); }

/* Koleksiyon ozeti: ad + sayi + 6 mini kare. Kendi basina duran bir eylem
   satiri -> ALT CIZGI YOK; acilir oldugu ucgen isaret ve hover rengiyle
   anlasiliyor. */
.k-site .k-mhub__grpsum {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer; list-style: none;
  border-top: 1px solid var(--border-subtle);
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-site .k-mhub__grpsum::-webkit-details-marker { display: none; }
.k-site .k-mhub__grpsum::before {
  content: ''; flex: none; width: 0; height: 0;
  border-inline: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.k-site .k-mhub__grpd[open] > .k-mhub__grpsum::before { transform: rotate(-180deg); }
.k-site .k-mhub__grpsum:hover { color: var(--text-link-hover); }
.k-site .k-mhub__grpname {
  font-size: var(--size-body-sm); line-height: var(--lh-body-sm); font-weight: 500;
}
.k-site .k-mhub__grpteaser { display: inline-flex; gap: 4px; margin-inline-start: auto; }
.k-site .k-mhub__grpteaser img {
  width: 28px; height: 28px; border-radius: 4px; object-fit: cover;
  background: var(--surface-subtle);
}
.k-site .k-mhub__grpd[open] > .k-mhub__grpsum > .k-mhub__grpteaser { display: none; }
.k-site .k-mhub__grpd[open] > .k-mhub__cells { margin-block: var(--space-3) var(--space-6); }

@media (max-width: 600px) {
  /* Dar ekranda 6 kare adi ezer -> 3'e in. */
  .k-site .k-mhub__grpteaser img:nth-child(n + 4) { display: none; }
}

/* Katlanmis kalan. `summary` tek basina duran bir eylem satiri -> ALT CIZGI
   YOK (kalici kural); tiklanabilirlik ucgen isaret + hover rengiyle. */
.k-site .k-mhub__more { margin-top: var(--space-3); }
.k-site .k-mhub__moresum {
  display: inline-flex; align-items: center; gap: var(--space-2);
  cursor: pointer; list-style: none;
  font-size: var(--size-spec); line-height: var(--lh-spec);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}
.k-site .k-mhub__moresum::-webkit-details-marker { display: none; }
.k-site .k-mhub__moresum::before {
  content: ''; width: 0; height: 0;
  border-inline: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.k-site .k-mhub__more[open] > .k-mhub__moresum::before { transform: rotate(-180deg); }
.k-site .k-mhub__moresum:hover { color: var(--text-link-hover); }
.k-site .k-mhub__more[open] > .k-mhub__cells { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Teklif listesi urun kartlari (v3)
   ⚠ Once yalnizca urun ADI yazan cipti ve "hangi urune renk seciyorum"
     belli olmuyordu. Kart artik urunun GORSELINI tasiyor; secili urun
     ayrica yapisik durum satirindaki barda duruyor, yani kaydirinca da
     ekranda kaliyor.
   -------------------------------------------------------------------------- */
.k-site .k-mhub__ucard {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface);
  cursor: pointer; text-align: left;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.k-site .k-mhub__ucard:hover:not([disabled]) { border-color: var(--surface-brand); }
.k-site .k-mhub__ucard[aria-pressed="true"] {
  background: var(--surface-brand); border-color: var(--surface-brand); color: #fff;
}
.k-site .k-mhub__ucard[disabled] { opacity: .5; cursor: not-allowed; }

.k-site .k-mhub__uimg {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; background: var(--surface-subtle); flex: none;
}
.k-site .k-mhub__utext { display: flex; flex-direction: column; line-height: 1.2; }
.k-site .k-mhub__utext > b {
  font-size: var(--size-body-sm); font-weight: 600;
  max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.k-site .k-mhub__utext > i {
  font-style: normal; font-size: var(--size-spec); opacity: .7;
  max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Aktif urun bari -- yapisik durum satirinin icinde. */
.k-site .k-mhub__ubar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 4px 4px 4px 4px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-brand); color: #fff;
}
.k-site .k-mhub__ubarimg {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  background: rgba(255, 255, 255, .2);
}
.k-site .k-mhub__ubartxt { display: flex; flex-direction: column; line-height: 1.2; }
.k-site .k-mhub__ubartxt > b { font-size: var(--size-spec); font-weight: 600; }
.k-site .k-mhub__ubartxt > i { font-style: normal; font-size: var(--size-spec); opacity: .8; }
.k-site .k-mhub__ubar .k-mhub__clear { color: #fff; padding-inline: var(--space-3); }

@media (max-width: 600px) {
  .k-site .k-mhub__utext > b { max-width: 10ch; }
  .k-site .k-mhub__utext > i { max-width: 12ch; }
}


/* ⚠⚠ [hidden] TEK BASINA YETMEZ: bu ogelerin hepsi display:flex tasiyor ve
   sonra gelen display, [hidden]'in varsayilan display:none'ini EZIYOR.
   Olculdu (2026-08-29): sepeti bos ziyaretcide "Teklif listeniz" satiri ve
   bos aktif bar EKRANDA duruyordu. Temada ayni tuzak icin zaten
   .k-mhub__sw[hidden] / .k-mhub__btn[hidden] kurallari var -- ayni desen. */
.k-site .k-mhub__frow--urun[hidden],
.k-site .k-mhub__ubar[hidden],
.k-site .k-mhub__ucard[hidden] { display: none; }