/* ── Malzeme kütüphanesi görsel kartı (.k-matcard) ────────────────────────
   r183'te açıldı, r190'da YENİDEN KURULDU.

   Kullanıcı: "kartela kartındaki kanepe görseli desktopta cropped tablet ve
   mobildede yamuk ortala ve texti üstüne bas rengini ona göre ayarlarsın."

   ⚠⚠ r183'te görsel `transform: scale(1.45)` + `object-position: 100% 62%`
      ile SAĞA yaslanıyordu ("bir tarafta kanepe bir tarafta metin" isteği).
      Bedeli: kanepenin sol kolu kırpılıyordu ve ölçek sabit olduğu için dar
      ekranlarda kadraj kayıyordu -- "yamuk" görünen buydu. Ölçek ve yaslama
      KALDIRILDI: `object-position: center`, kanepe her genişlikte ortada.

   ⚠ Oranlar kaynağa göre seçildi: fotoğraf 2.33:1 ve kanepe genişliğin
     %23-%76'sını kaplıyor. `cover` ile görünür genişlik = kart oranı / 2.33.
       masaüstü 7/3  = 2.333 -> %100 görünür, HİÇ kırpılmıyor
       tablet   2/1  = 2.0   -> %86  görünür (iki yandan %7)
       mobil    10/7 = 1.429 -> %61  görünür (x %19.5-%80.5)
     Üçünde de kanepe (%23-%76) tam kadraj içinde kalıyor.

   ⚠ Metin fotoğrafın ÜSTÜNDE, üst-orta -- eski hero düzeninin aynısı.
     Renkler oradan birebir taşındı (kumaş gradyanlı başlık + grey-700 alt
     metin); o tonlar bu fotoğraf üzerinde ölçülerek seçilmişti. */

.k-site .k-matcard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  background: var(--surface-sunken);
  aspect-ratio: 10 / 7;
}

.k-site .k-matcard__media {
  position: absolute;
  inset: 0;
}

.k-site .k-matcard__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

.k-site .k-matcard__body {
  position: absolute;
  z-index: 1;
  top: clamp(16px, 4vw, 44px);
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
}

.k-site .k-matcard__t {
  display: block;
  font-size: clamp(24px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: var(--ls-tight);
  font-weight: var(--weight-semibold);
  /* Kumaş geçişi -- eski hero ile aynı duraklar. TÜM duraklar KOYU:
     fotoğraf açık tonlu, krem bir durak metni okunmaz yapardı. */
  background-image: linear-gradient(100deg,
    #3B322B 0%, #7E2B2B 26%, #8A4A2A 50%, #45503E 74%, #2E2B27 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not (background-clip: text) {
  .k-site .k-matcard__t { background-image: none; color: var(--ink); }
}

@media (forced-colors: active) {
  .k-site .k-matcard__t { background-image: none; color: CanvasText; }
}

.k-site .k-matcard__b {
  display: block;
  font-size: var(--size-body-lg);
  line-height: var(--lh-body-lg);
  /* ⚠ --text-secondary bu fotoğraf üzerinde 3.46 ölçülmüştü (AA altı);
     eski hero ile aynı sebeple grey-700. */
  color: var(--grey-700);
}

.k-site .k-matcard__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: var(--space-2);
  padding-inline: var(--space-5);
  border-radius: var(--radius-chip);
  background: var(--ink);
  color: var(--surface-page);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-medium);
}

.k-site .k-matcard:hover .k-matcard__cta { background: var(--brand-burgundy); }

@media (max-width: 767px) {
  .k-site .k-matcard__b { font-size: var(--size-body-sm); }
}

@media (min-width: 768px) {
  .k-site .k-matcard { aspect-ratio: 2 / 1; }
}

@media (min-width: 1024px) {
  .k-site .k-matcard { aspect-ratio: 7 / 3; }
}