/* Bütün kahramanlar */
.kl-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.kl-kart { position: relative; display: grid; overflow: hidden; padding: 0; transition: transform .3s cubic-bezier(.2, .8, .2, 1.2), border-color .2s, box-shadow .3s; }
.kl-kart:hover, .kl-kart:focus-visible { transform: translateY(-5px); border-color: color-mix(in srgb, var(--kr) 70%, transparent); box-shadow: 0 22px 40px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, var(--kr) 40%, transparent); }
.kl-resim { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--kart-3); }
.kl-resim img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.kl-kart:hover .kl-resim img { transform: scale(1.07); }
.kl-kart::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10, 8, 6, .96) 18%, rgba(10, 8, 6, .35) 45%, transparent 62%), linear-gradient(0deg, color-mix(in srgb, var(--kr) 30%, transparent), transparent 35%); }
.kl-kademe { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 20px; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.kl-bilgi { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 12px; }
.kl-bilgi b { font: 700 19px/1 var(--f-baslik); text-transform: uppercase; }
.kl-bilgi small { font: 500 12px/1.2 var(--f-arayuz); color: var(--krem-2); }
.kl-ist { display: flex; gap: 10px; margin-top: 4px; font: 700 12.5px/1 var(--f-arayuz); font-variant-numeric: tabular-nums; }
.kl-ist em { font-style: normal; font-weight: 500; color: var(--krem-3); }
html.hareket .kl-kart { animation: belir .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 14ms); }
html.hareket .kl-izgara.sessiz .kl-kart { animation: none; }
html.hareket .kl-izgara.sessiz .kl-kademe { animation: hafifBelir .3s ease-out backwards; }
@media (max-width: 560px) { .kl-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kl-bilgi b { font-size: 16px; } }