.yk {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; container-type: inline-size;
  border: 1px solid var(--ucuz-border); border-radius: var(--r-xl); background: var(--ucuz-panel);
  color: var(--ucuz-metin);
}
.yk > .gorsel, .yk > .yk-resim, .yk > .yk-bos {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  aspect-ratio: auto; border: 0; border-radius: 0;
}
.yk > .yk-resim { display: block; object-fit: cover; transition: transform .5s ease; }
a:hover > .yk > .yk-resim { transform: scale(1.03); }
.yk > .yk-bos {
  display: block; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 15%, rgba(var(--vurgu-rgb), .3), transparent 60%), var(--ucuz-panel);
}
.yk > .yk-bos img { position: absolute; top: 50%; right: -6%; width: auto; height: 118%; opacity: .14; filter: grayscale(1) brightness(2.2); transform: translateY(-50%); }
.yk::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 15, 15, .55) 0%, rgba(15, 15, 15, 0) 28%), var(--perde-kart);
}

.yk-yazi {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 max(12px, 5cqw) max(12px, 4.6cqw); pointer-events: none;
}
.yk-et {
  position: absolute; top: max(10px, 4.2cqw); left: max(10px, 4.6cqw);
  max-width: calc(100% - 2 * max(10px, 4.6cqw)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .32em .78em; border: 1px solid var(--ucuz-gold-cizgi); border-radius: var(--r-tam);
  background: rgba(15, 15, 15, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ucuz-gold-yazi);
  font: 700 clamp(calc(var(--px) * 10), 2.6cqw, calc(var(--px) * 13))/1.25 var(--yt-metin); letter-spacing: .06em; text-transform: uppercase;
}
.yk-baslik {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font: 800 clamp(calc(var(--px) * 15), 6.4cqw, calc(var(--px) * 34))/1.1 var(--yt-baslik);
  letter-spacing: -.02em; text-wrap: balance; color: var(--ucuz-metin);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.yk.is-ust::after { background: linear-gradient(180deg, rgba(15, 15, 15, .82) 0%, rgba(15, 15, 15, .4) 42%, rgba(15, 15, 15, 0) 68%); }
.yk.is-ust .yk-yazi { justify-content: flex-start; align-items: flex-start; gap: max(8px, 2.2cqw); padding: max(12px, 4.4cqw) max(12px, 5cqw) 0; }
.yk.is-ust .yk-et { position: static; max-width: 100%; }
.yk.is-ust .yk-baslik { font-size: clamp(calc(var(--px) * 18), 6.8cqw, calc(var(--px) * 40)); }

@media (prefers-reduced-motion: reduce) {
  .yk > .yk-resim, .yk > .gorsel > img { transition: none; }
  a:hover > .yk > .yk-resim, a:hover > .yk > .gorsel > img { transform: none; }
}