/* MediaLinkGrid — editorial media grid section with padded container. */

.cc_maoskxr0_bXyx4xcFpV .media-link-grid {
  width: 100%;
  /* Yedek deger #FAF8F5'ti, sablonun krem rengi. Palet artik beyaz. */
  background-color: var(--color-bg, #FFFFFF);
  padding: var(--space-md, 24px) 0;
}

@media (min-width: 768px) {
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid {
    padding: var(--space-lg, 40px) 0;
  }
}

/* Izgara ile basligi AYNI kapsayiciya aliyoruz. Onceden baslik
   --container-max icindeydi, izgara ise bolumun kendi dolgusuyla ekran
   genisligine yayilyordu. 1920 pikselde baslik metni 340'tan, ilk kart
   40'tan basliyordu, arada 300 piksel kayma vardi. */
.cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid {
  display: grid;
  gap: var(--space-xs, 8px);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

/* ─── Mobile (base, < 768px) ─────────────────────────────────────
 * Duzenlerin cogu tek sutuna iner, kart 4/3 oraninda.
 */
.cc_maoskxr0_bXyx4xcFpV .media-link-grid__cell {
  aspect-ratio: 4 / 3;
}

/* grid-6 mobilde iki sutun. Simge kartlari tek sutunda kocaman
   duruyordu, alti birden alt alta cok uzun bir blok yapiyordu. */
.cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-6 {
  grid-template-columns: repeat(2, 1fr);
}

/* Kart artik kendi yuksekligini belirliyor (4/3 gorsel + yazi seridi),
   bu yuzden hucreye oran dayatilmiyor. Oran dayatilsaydi gorsel ezilir ya da
   yazi seridi hucreden tasardi. */
.cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-6 .media-link-grid__cell {
  aspect-ratio: auto;
}

/* ─── Tablet (≥ 768px) ───────────────────────────────────────── */
@media (min-width: 768px) {
  /* bento-6 (6 cards): 2 cols × 3 rows on tablet */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(260px, 1fr);
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell {
    aspect-ratio: auto;
  }

  /* grid-6: tablette 3 sutun. Kartlar simge tasiyor, fotograf degil,
     bu yuzden 260 piksellik satir gereksiz yer kapliyordu. */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-6 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(150px, auto);
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-6 .media-link-grid__cell {
    aspect-ratio: auto;
  }

  /* grid-4: stays 2 × 2 */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(280px, 1fr));
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-4 .media-link-grid__cell {
    aspect-ratio: auto;
  }

  /* featured-3 tablet: large on top spanning 2 cols, 2 small side-by-side below */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(240px, 1fr));
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell {
    aspect-ratio: auto;
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell--1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell--2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell--3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

/* ─── Desktop (≥ 1024px) ─────────────────────────────────────── */
@media (min-width: 1024px) {
  /* ── bento-6: 6 cards in 4 cols × 2 rows, asymmetric ──
   *   Row 1: [large (cols 1-2)] [small col 3] [small col 4]
   *   Row 2: [small col 1] [small col 2] [large (cols 3-4)]
   */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(320px, 1fr));
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--3 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--4 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--5 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--6 {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }

  /* ── grid-4: uniform 2×2 ── */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(320px, 1fr));
  }

  /* ── grid-6: masaustunde alti yan yana, tek satir ──
     Kartlar simge gosteriyor, 320 piksellik yukseklik bos alan birakiyordu.
     Alti birden yan yana durunca seri bir bakista goruluyor. */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--grid-6 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(165px, auto);
  }

  /* ── featured-3: 4 cols × 1 row — 1 large + 2 narrow ── */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: minmax(440px, 1fr);
  }

  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell--1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell--2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell--3 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  /* ── Larger title font on wide cells (bento large + featured-3 large) ── */
  .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--1 .media-link-card__title, .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--bento-6 .media-link-grid__cell--6 .media-link-card__title, .cc_maoskxr0_bXyx4xcFpV .media-link-grid__grid--featured-3 .media-link-grid__cell--1 .media-link-card__title {
    font-size: var(--text-h2, clamp(28px, 3.5vw, 44px));
  }
}

/* MediaLinkCard bicimleri BU DOSYADA DEGIL.
 * Daha once buraya kopyalanmislardi, cunku build'in alt bilesen CSS'ini
 * paketlemedigi varsayiliyordu. 5 Ekim 2026'da derlenmis cikti uzerinden
 * dogrulandi: src/sub-components/MediaLinkCard/styles.css kendi basina
 * dist'e giriyor. Kopya hem gereksizdi hem de kart duzeni degisince eski
 * mutlak konumlama kurallariyla catisiyordu. Tek kaynak alt bilesen dosyasi. */

/* ─── Bolum basligi ──────────────────────────────────────────────────
 * Sablonun hazir hali yalnizca kart izgarasiydi, baslik alani yoktu.
 * Ana sayfada baslıksız bir izgara ne oldugunu anlatmiyor, iki izgara
 * alt alta gelince (urun serileri / uygulama alanlari) ayirt bile
 * edilmiyor. Baslik bos birakilirsa hic cizilmiyor.
 */
.cc_maoskxr0_bXyx4xcFpV .media-link-grid__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-md);
  padding: 0 var(--container-pad);
}

.cc_maoskxr0_bXyx4xcFpV .media-link-grid__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.cc_maoskxr0_bXyx4xcFpV .media-link-grid__subtitle {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin: var(--space-xs) 0 0;
}

/* MediaLinkCard — kategori kartı.
 *
 * TEK KAYNAK. Bu dosya derlemede MediaLinkGrid paketine kendisi giriyor,
 * derlenmiş çıktı üzerinden doğrulandı. Kuralların bir kopyası eskiden
 * MediaLinkGrid/styles.css içine de gömülüydü, 5 Ekim 2026'da kaldırıldı.
 *
 * Düzen kararı: metin fotoğrafın ÜSTÜNE BİNMİYOR. Elimizdeki görseller
 * açık gri zeminli ürün katalog çekimleri, üzerlerine beyaz yazı konunca
 * ne yazı ne de ürün okunuyordu. Katalog fotoğrafının doğru kalıbı
 * fotoğrafı üstte kendi zemininde göstermek, başlığı ve teknik satırı
 * altında ayrı bir şeritte vermek. Bindirme ve beyaz metin kaldırıldı.
 */

.cc_maoskxr0_bXyx4xcFpV .media-link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  text-decoration: none;
  color: var(--color-text-primary);
  width: 100%;
  height: 100%;
  isolation: isolate;
  opacity: 0;
  transform: translateY(24px);
  animation: cc_maoskxr0_bXyx4xcFpV_media-link-card-reveal 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--media-link-card-delay, 0ms);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card:hover {
  border-color: var(--color-text-primary);
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Görsel alanı ─────────────────────────────────────────
 * Sabit oranlı: altı kart yan yana dururken görseller aynı yükseklikte
 * başlasın, başlıklar aynı hizaya otursun. Zemin fotoğrafın kendi açık
 * gri zeminiyle aynı tonda, ürünün çevresindeki boşluk kartta kaybolsun.
 */
.cc_maoskxr0_bXyx4xcFpV .media-link-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  overflow: hidden;
  flex: none;
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 400ms ease;
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card:hover .media-link-card__image, .cc_maoskxr0_bXyx4xcFpV .media-link-card:focus-visible .media-link-card__image {
  transform: scale(1.04);
}

/* ─── Metin şeridi ─────────────────────────────────────────
 * Şerit ÜSTE yaslanıyor. Alta yaslandığında teknik satırı kısa olan
 * kartlarda (örneğin tork değeri olmayan su altı iticilerde yalnız
 * "3 model" yazıyor) başlık aşağı kayıyor ve altı kart yan yana
 * dururken başlıklar farklı hizalara düşüyordu.
 */
.cc_maoskxr0_bXyx4xcFpV .media-link-card__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  flex: 1 1 auto;
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}

/* Teknik satır mono ve tabular: alt alta duran kartlarda rakamlar hizalı */
.cc_maoskxr0_bXyx4xcFpV .media-link-card__meta {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-label);
  line-height: 1.4;
  color: var(--color-text-secondary);
}

@keyframes cc_maoskxr0_bXyx4xcFpV_media-link-card-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Görselsiz kart ───────────────────────────────────────
 * Fotoğrafı yüklenmemiş kategoride görsel alanı hiç çizilmiyor, kart
 * yalnızca kategori adı ve teknik satırdan oluşuyor. Önceki kurguda
 * burada kategori çizimi vardı, çizimler tek renkli siluet olduğu için
 * 5 Ekim 2026'da kaldırıldı.
 */
.cc_maoskxr0_bXyx4xcFpV .media-link-card--text {
  background: var(--color-surface-alt);
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card--text:hover {
  background: var(--color-surface);
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card--text .media-link-card__content {
  padding: var(--space-md);
}

.cc_maoskxr0_bXyx4xcFpV .media-link-card--text .media-link-card__title {
  font-size: var(--text-body-lg);
}

@media (prefers-reduced-motion: reduce) {
  .cc_maoskxr0_bXyx4xcFpV .media-link-card {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-card__image {
    transition: none;
  }
  .cc_maoskxr0_bXyx4xcFpV .media-link-card:hover .media-link-card__image, .cc_maoskxr0_bXyx4xcFpV .media-link-card:focus-visible .media-link-card__image {
    transform: none;
  }
}