/* Vuvito DuoImageText — iki görsel + metin
 *
 * Renkler global.css'teki semantik değişkenlerden (renk şeması slot'ları).
 * Tipografi JSX'te ikas className'leriyle; burada yalnızca BOYUT ezilir.
 * Breakpoint: md = 768px 768px
 */

.cc_lqof57t2_WuQC6GBVWo .vt-duo {
  width: 100%;
  background: var(--color-bg);
}

/* Mobil boşluk, detay görselinin aşağı taşan 28px'ini de karşılamalı —
   aksi halde metnin üstüne biner. */
.cc_lqof57t2_WuQC6GBVWo .vt-duo__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

@media (min-width: 768px) {
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__inner {
    flex-direction: row;
    gap: 80px;
  }

  /* Görsel sağda: sıra tersine döner, taşan detay da sol alta geçer. */
  .cc_lqof57t2_WuQC6GBVWo .vt-duo--media-right .vt-duo__inner {
    flex-direction: row-reverse;
  }
}

/* ─── Görseller ─────────────────────────────────────────── */

.cc_lqof57t2_WuQC6GBVWo .vt-duo__media {
  position: relative;
  width: 100%;
  flex: 1 1 50%;
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__main {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-soft);
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__main-img, .cc_lqof57t2_WuQC6GBVWo .vt-duo__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__placeholder {
  background: var(--color-surface-alt);
}

/* Detay görseli: ana görselin sağ alt köşesinden taşar.
 *
 * Kalın ve SAYFA ZEMİNİ renginde kenarlık, onu ana görselden "oyulmuş"
 * gibi gösteren efekti verir — bu yüzden kenarlık rengi kesinlikle
 * --color-bg olmalı, sabit beyaz değil (koyu renk şemasında da doğru çalışsın).
 *
 * Mobilde de görünür; ölçüler küçülür ve yatay taşma sayfa kenar boşluğunun
 * (--page-margin, mobilde 20px) İÇİNDE kalacak şekilde sınırlanır — aksi
 * halde tüm sayfada yana kaydırma açılır. */
.cc_lqof57t2_WuQC6GBVWo .vt-duo__detail {
  display: block;
  position: absolute;
  right: -12px;
  bottom: -28px;
  width: 38%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 8px solid var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo--media-right .vt-duo__detail {
  right: auto;
  left: -12px;
}

@media (min-width: 768px) {
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__detail {
    right: -32px;
    bottom: -48px;
    width: 256px;
    max-width: none;
    border-width: 12px;
    border-radius: var(--radius-lg);
  }

  /* Görsel sağdayken detay sol alta geçer, kompozisyon aynalanır. */
  .cc_lqof57t2_WuQC6GBVWo .vt-duo--media-right .vt-duo__detail {
    right: auto;
    left: -32px;
  }
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Metin ─────────────────────────────────────────────── */

.cc_lqof57t2_WuQC6GBVWo .vt-duo__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  flex: 1 1 50%;
}

@media (min-width: 768px) {
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__body {
    gap: 32px;
  }
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__eyebrow {
  color: var(--vt-duo-eyebrow-color, var(--color-accent));
  font-size: var(--vt-duo-eyebrow-m, 11px);
  text-transform: uppercase;
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__title {
  margin: 0;
  max-width: 20ch;
  color: var(--color-text-primary);
  font-size: var(--vt-duo-title-m, 28px);
  text-wrap: balance;
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__description {
  margin: 0;
  max-width: 58ch;
  color: var(--color-text-secondary);
  font-size: var(--vt-duo-desc-m, 16px);
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--color-accent);
  font-size: var(--vt-duo-link-m, 11px);
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 300ms ease;
}

/* Stitch'teki detay: hover'da metin ile ok arasındaki boşluk açılır. */
.cc_lqof57t2_WuQC6GBVWo .vt-duo__link:hover, .cc_lqof57t2_WuQC6GBVWo .vt-duo__link:focus-visible {
  gap: 24px;
  outline: none;
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cc_lqof57t2_WuQC6GBVWo .vt-duo__link-icon {
  font-size: 1.5em;
}

@media (min-width: 768px) {
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__eyebrow { font-size: var(--vt-duo-eyebrow-d, 12px); }
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__title { font-size: var(--vt-duo-title-d, 36px); }
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__description { font-size: var(--vt-duo-desc-d, 18px); }
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__link { font-size: var(--vt-duo-link-d, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc_lqof57t2_WuQC6GBVWo .vt-duo__link {
    transition: none;
  }

  .cc_lqof57t2_WuQC6GBVWo .vt-duo__link:hover, .cc_lqof57t2_WuQC6GBVWo .vt-duo__link:focus-visible {
    gap: 16px;
  }
}