/* ── Kategori arsivinin ONE CIKAN URUNU (.k-one) — r181 ───────────────────
   Kullanici: "kategori seçildiğinde gelen ürün galerisinin en üstünde 1 tane
   seçilen öne çıkan ürün olsun büyük featured image galerinin bir kısmı ismi
   ve açıklaması olsun".

   Ayri dosya: theme.css / v13-fixes.css / responsive.css baska islerde acik ve
   paralel yazma onlari daha once iki kez ezdi. Kapsam yalnizca `.k-one*`.

   ⚠ Ayirac cizgisi, altcizgi ve kutu kenarligi YOK -- bolum kendini
     bosluk ve olcek farkiyla ayirir (site dili boyle).
   ⚠ Tek tema: `prefers-color-scheme` blogu YOK. */

.k-one {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-9) var(--space-11);
  margin-top: var(--space-8);
}

/* Buyuk kupur. 4/3 -- KARE degil: kare kutu 1440 px'de ~640 px yukseklige
   cikiyor ve tek urun ilk ekrani komple yiyordu (olculdu). Gorsel `contain`
   oldugu icin kirpilmaz, yanlarda bosluk kalir. */
/* ⚠⚠ Gorsel MUTLAK konumlu. `aspect-ratio` blok kutuda ICERIK tarafindan
   EZILIR: akista duran kare gorsel kutuyu 615x615'e cikariyordu (olculdu,
   4/3 kural dosyada duruyor olmasina ragmen). Mutlak konumlu cocuk kutunun
   yuksekligini belirleyemez, oran korunur. */
.k-one__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  /* ⚠ Zemin/yaricap YOK. Sitenin urun dili kupurun BEYAZDA durmasi
     (.k-arch-card__media da oyle); gri bir tabla burada tek basina
     "kutu" hissi veriyordu ve izgarayla celisiyordu. */
  overflow: hidden;
}

.k-one__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ⚠ `--focus-ring` bir BOX-SHADOW degeri (0 0 0 3px rgba(...)).
   `outline: var(--focus-ring)` gecersiz -> sessizce duser. base.css zaten
   global `:focus-visible` box-shadow'u veriyor; burada yalnizca kupurun
   kendi yaricapiyla otursun diye tekrarlaniyor. */
.k-one__media:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-md);
}

.k-one__body { min-width: 0; }

.k-one__eyebrow {
  margin: 0;
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-tertiary);
}

.k-one__name {
  margin: var(--space-3) 0 0;
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.k-one__name a { color: inherit; text-decoration: none; }
.k-one__name a:hover { color: var(--text-link-hover); }

.k-one__cat {
  margin: var(--space-2) 0 0;
  font-size: var(--size-body-sm);
  color: var(--text-secondary);
}

.k-one__lead {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  color: var(--text-secondary);
}

/* Galeriden birkac kare. Kart DEGIL, PDP'ye giden kucuk kupurler. */
.k-one__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  max-width: 340px;
}

.k-one__strip a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.k-one__strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.k-one__go { margin: var(--space-6) 0 0; }

@media (max-width: 1023px) {
  .k-one { gap: var(--space-7) var(--space-8); }
  .k-one__name { font-size: var(--size-h2); line-height: var(--lh-h2); }
}

@media (max-width: 767px) {
  .k-one { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-7); }
  .k-one__strip { max-width: none; }
}