/* ===== Xomage Image Duo — iki görsellik full-bleed yaşam tarzı bandı =====
 * Tasarım (Web ana sayfa 1:101): y 2234-3279 (h 1046). İki görsel 960px genişlikte,
 * x=960'ta BOŞLUKSUZ bitişiyor (ölçüldü: sol 0-959, sağ 960-1919).
 * Oran 960/1046 ≈ 0.918.
 *
 * Aynı bileşen Ürünlerimiz (11:279) sayfasında da kullanılıyor: 961×1046, aynı
 * geometri.
 *
 * ## Hover
 * İki sayfada da görseller birer component set ve `Default` varyantı
 * "While hovering → Variant2" (Smart animate / Ease out / 300 ms) ile perdeyi
 * açıyor. Perde iki biçimde ölçüldü — `overlayStyle` prop'u bunu seçer:
 *
 * | | `Band` — ana sayfa `Rectangle 49/50` | `Full` — Ürünlerimiz `Rectangle 158/159` |
 * | --- | --- | --- |
 * | Perde | alt bant 960×144 (`Rectangle 148`) | tam panel 961×1046 (`Rectangle 156/157`) |
 * | Renk | `#63C1C2` %50 | `#000000` %60 |
 * | Etiket | Poppins 500 20px | Poppins 600 56/96 |
 *
 * Etiket ikisinde de UPPERCASE, `#FFFFFF` ve ortalı.
 */

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo {
  display: block;
  width: 100%;
}

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__row {
  display: grid;
  /* Mobilde alt alta: 1046px yüksekliğinde iki kare yan yana okunmaz olurdu. */
  grid-template-columns: 1fr;
  /* Tasarımda iki görsel arasında boşluk yok. */
  gap: 0;
}

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__pane {
  position: relative;
  overflow: hidden;
}

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__link {
  display: block;
}

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__img {
  display: block;
  width: 100%;
  height: auto;
  /* Tasarım oranı: 960 / 1046 */
  aspect-ratio: 960 / 1046;
  object-fit: cover;
}

/* --- Hover perdesi --- */
/*
 * `Band` yüksekliği panelin kendi yüksekliğine oranlandı: 144 / 1046 = %13.767.
 * Sabit bir rem değeri 1920'nin altında bandı orantısız büyütürdü; oran her
 * genişlikte tasarımın görünümünü veriyor.
 */
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 13.767%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Figma: Ease out, 300 ms */
  transition: opacity 300ms ease-out;
}

/* `Full`: perde panelin tamamını kaplar. */
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay--full {
  top: 0;
  height: auto;
}

/*
 * Tonlama ayrı katman: `overlayColor` prop'tan geldiği için dolgu JSX'te inline
 * verilir, opaklık burada. Opaklık perdeye değil bu katmana yazılır ki üstündeki
 * etiket tam opak kalsın.
 */
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay-tint {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay--full .xomage-image-duo__overlay-tint {
  opacity: 0.6;
}

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay-label {
  position: relative;
  z-index: 1;
  padding: 0 1.5rem;
  text-align: center;
  text-transform: uppercase;
}

/*
 * `Full` etiketi tasarımda iki satır ("ZISHEL XOMAGE / PLANT"): metin kutusu
 * 624px, panel 961px. Oranı koru (624/961 = %65) ki sarma yeri tasarımdaki gibi
 * kalsın.
 */
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay--full .xomage-image-duo__overlay-label {
  max-width: 65%;
}

.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__pane:hover .xomage-image-duo__overlay, .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__pane:focus-within .xomage-image-duo__overlay {
  opacity: 1;
}

/*
 * Dokunmatikte hover yok — perde kalıcı görünür (kullanıcı kararı, 09.09.2026).
 * Tasarımın mobil frame'i perdeyi hiç çizmiyor; ürün ailesi adının mobilde de
 * okunması bilinçli sapmadır.
 */
@media (hover: none) {
  .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__overlay {
    transition: none;
  }
}

@media (min-width: 768px) {
  .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__row {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo--categories { background: var(--kombos-white); }
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__categories { width: 87%; max-width: none; margin: auto; padding: 5.375rem 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__category { position: relative; overflow: hidden; display: block; border-radius: .625rem; aspect-ratio: 1.6; color: var(--kombos-white); text-decoration: none; }
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__category img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--xomage-science-ease); }
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__category > span { position: absolute; inset: auto 0 0; padding: 3.4375rem 1.875rem 1.5625rem; display: flex; justify-content: space-between; background: linear-gradient(transparent,rgba(0,0,0,.6)); }
.cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__category i { font-style: normal; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__category:hover img { transform: scale(1.045); } }
@media(max-width:760px) { .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__categories { width: 86%; padding-block: 3rem; grid-template-columns: minmax(0,1fr); gap: 1.125rem; } .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__category { aspect-ratio: 1.7; } }
@media(prefers-reduced-motion:reduce) { .cc_mfkw8zzp_A5aCDVh7Ax .xomage-image-duo__category img { transition: none; } }