/* ===== Urun Karosu ===== */
.cc_y9syk6wl_sEGJL7XAbH .tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cc_y9syk6wl_sEGJL7XAbH .tile-fig {
  box-sizing: border-box;
  aspect-ratio: var(--tile-ratio, 3 / 4);
  overflow: hidden;
  position: relative;
}

/* Gorsel mutlak konumlu, ama olcu MUTLAKA acik yazilmali.
   Iki tuzak var, ikisine de bu kural denk geliyor:
   1) Yuzde olcu (max-height:%100), yuksekligi aspect-ratio'dan gelen bir
      ebeveyne karsi cozumlenirken dongusel bagimlilik olusturur ve none
      sayilir. Mutlak konum bu zinciri kirar: kapsayici blok kesin olcudur.
   2) inset tek basina yetmez. img bir "replaced element"tir; left/right
      verilse bile genisligi kendi dogal boyutundan gelir, kutuya GERILMEZ.
      Olcu yazilmazsa gorsel 600x900 dogal boyutta cizilir, kutudan tasar ve
      overflow:hidden onu keser — cantanin kirpilmasinin sebebi buydu.
   Kenar boslugu padding + border-box ile veriliyor; inset:0 padding kutusuna
   dayandigi icin .tile-fig'e yazilacak padding gorsele yansimaz. */
.cc_y9syk6wl_sEGJL7XAbH .tile-fig img {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: clamp(8px, 1.4vw, 20px);
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Urun dosyalari beyaz zeminli; multiply beyazi eritir, canta bej karoya oturur */
.cc_y9syk6wl_sEGJL7XAbH .tile-blend {
  mix-blend-mode: multiply;
}

.cc_y9syk6wl_sEGJL7XAbH .tile:hover .tile-fig img {
  transform: scale(1.04);
}

.cc_y9syk6wl_sEGJL7XAbH .tile-nm {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 2px 0;
}

.cc_y9syk6wl_sEGJL7XAbH .tile-nm h3 {
  margin: 0;
  font-family: Didot, "Times New Roman", Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 2.3vw, 28px);
  letter-spacing: -0.01em;
}

.cc_y9syk6wl_sEGJL7XAbH .tile-arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--tile-muted, #6e6960);
  transition: transform 0.3s ease, color 0.3s ease;
}

.cc_y9syk6wl_sEGJL7XAbH .tile:hover .tile-arrow {
  transform: translateX(4px);
  color: var(--tile-accent, #9c7c3f);
}

/* SEO kuyrugu: DOM'da gercek metin, gorsel olarak ikinci planda */
.cc_y9syk6wl_sEGJL7XAbH .tile-seo {
  margin: 0;
  padding: 5px 2px 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tile-muted, #6e6960);
  max-width: 38ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .cc_y9syk6wl_sEGJL7XAbH .tile-fig img, .cc_y9syk6wl_sEGJL7XAbH .tile-arrow {
    transition: none;
  }
}