/* Kahraman kombinasyonları */
.km-bolum { margin-top: 64px; }
.km-bolum-ic { margin-top: 56px; }

/* seçim yokken: hızlı seçim şeridi */
.km-sec { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; }
.km-sec h3 { margin: 8px 0 6px; font-size: 22px; }
.km-sec p { margin: 0; font-size: 14.5px; }
.km-sec-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.km-sec-liste button { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--krem-3); font: 600 11px/1.1 var(--f-arayuz); text-align: center; transition: background .15s, color .15s, border-color .15s; }
.km-sec-liste img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; object-position: 50% 12%; background: var(--kart-3); transition: transform .2s cubic-bezier(.2, .8, .2, 1.3); }
.km-sec-liste button:hover { color: var(--krem); background: rgba(247, 233, 213, .06); border-color: var(--cizgi-2); }
.km-sec-liste button:hover img { transform: translateY(-3px) scale(1.06); }
html.hareket .km-sec.gorundu .km-sec-liste button { animation: hafifBelir .35s ease-out backwards; animation-delay: calc(var(--i, 0) * 12ms); }

/* seçili kahraman bandı */
.km-kh { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--kr) 26%, var(--kart-2)), var(--kart) 60%); border: 1px solid color-mix(in srgb, var(--kr) 35%, transparent); }
.km-kh::after { content: ""; position: absolute; inset: 0; background-image: var(--kum-doku); opacity: .05; pointer-events: none; }
.km-kh-resim { width: 132px; aspect-ratio: 280 / 380; border-radius: 8px; overflow: hidden; box-shadow: var(--golge-k); transform: rotate(-2deg); background: var(--kart-3); }
.km-kh-resim img { width: 100%; height: 100%; object-fit: cover; }
.km-kh-metin { display: grid; gap: 8px; justify-items: start; position: relative; z-index: 1; }
.km-kh-metin h2 { font-size: clamp(26px, 3.4vw, 42px); }
.km-kh-metin p { margin: 0; max-width: 680px; }
.km-kh-metin p b { color: var(--krem); }
.km-kh-dug { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* en iyi / en zor ortaklar: iki eşit sütun */
.km-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch; }
.km-liste { padding: 18px 18px 12px; }
.km-liste .kart-bas h3 { display: inline-flex; align-items: center; gap: 8px; }
.km-liste .kart-bas h3 svg { width: 19px; height: 19px; color: var(--kr); }
.km-satir { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(50px, 120px) 62px 54px 52px; gap: 10px; align-items: center; min-height: 48px; padding: 4px 0; border-top: 1px solid var(--cizgi); }
.km-satir-bas { min-height: 26px; border-top: 0; font: 600 10.5px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.km-satir-bas em, .km-satir-bas small { font: inherit !important; color: inherit !important; }
.km-satir-bas > span:last-child { text-align: right; }
.km-satir-ad { display: grid; gap: 3px; min-width: 0; }
.km-satir-ad b { font: 600 14px/1.1 var(--f-arayuz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-satir-ad small { font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); }
.km-cubuk { height: 7px; border-radius: 4px; background: rgba(247, 233, 213, .07); overflow: hidden; }
.km-cubuk i { display: block; height: 100%; border-radius: 4px; transform-origin: left; }
html.hareket .gorundu .km-cubuk i { animation: uzan .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.1s + var(--i, 0) * 45ms); }
.km-satir em { font: 700 14.5px/1 var(--f-arayuz); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.km-satir > small { font: 500 12px/1 var(--f-arayuz); color: var(--krem-3); text-align: right; font-variant-numeric: tabular-nums; }
.km-satir .km-uyum { justify-self: end; }
html.hareket .gorundu > .km-satir:not(.km-satir-bas) { animation: hafifBelir .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 40ms); }

.km-portre { display: block; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: var(--kart-3); box-shadow: 0 0 0 1px var(--cizgi-2); transition: transform .2s cubic-bezier(.2, .8, .2, 1.3), box-shadow .15s; }
.km-portre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.km-portre:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 2px var(--krem-3); }
.km-portre.kucuk { width: 38px; height: 38px; border-radius: 8px; }

.km-uyum { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 24px; padding: 0 7px; border-radius: 5px; background: rgba(247, 233, 213, .06);
  font: 700 12.5px/1 var(--f-arayuz); color: var(--krem-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.km-uyum.arti { background: rgba(151, 218, 121, .13); color: var(--yesil); }
.km-uyum.eksi { background: rgba(255, 90, 78, .13); color: var(--kirmizi); }

/* ikili kartları: iki sütun, beşer satır */
.km-cift-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.km-cift { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto 52px; gap: 14px; align-items: center; padding: 12px 16px; transition: border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1.2); }
.km-cift:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }
.km-sira { font: 700 20px/1 var(--f-baslik); color: var(--krem-3); text-align: center; }
.km-cift:nth-child(-n+2) .km-sira { color: var(--altin); }
.km-portreler { display: flex; }
.km-portreler .km-portre + .km-portre { margin-left: -10px; }
.km-adlar { display: grid; gap: 3px; min-width: 0; }
.km-adlar b { font: 700 15px/1.1 var(--f-baslik); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-adlar small { order: 3; font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-deger { display: grid; gap: 3px; justify-items: end; }
.km-deger b { font: 700 18px/1 var(--f-arayuz); font-variant-numeric: tabular-nums; }
.km-deger small { font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); white-space: nowrap; }
html.hareket .km-bolum .km-cift { animation: hafifBelir .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 35ms); }

/* üçlüler */
.km-uclu-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.km-uclu { display: grid; gap: 12px; padding: 16px; align-content: start; transition: border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1.2); }
.km-uclu:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }
.km-uclu-portreler { display: flex; gap: 6px; }
.km-uclu-portreler .km-portre { width: 54px; height: 54px; }
.km-uclu-adlar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-height: 36px; }
.km-uclu-adlar b { font: 700 14px/1.15 var(--f-baslik); text-transform: uppercase; }
.km-uclu-adlar i { font-style: normal; color: var(--krem-3); }
.km-uclu-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.km-uclu-alt .km-deger { justify-items: start; }
html.hareket .km-bolum .km-uclu { animation: hafifBelir .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 40ms); }

@media (max-width: 1020px) {
  .km-iki, .km-cift-izgara { grid-template-columns: minmax(0, 1fr); }
  .km-uclu-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-sec { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .km-kh { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .km-kh-resim { width: 84px; }
  .km-satir { grid-template-columns: 38px minmax(0, 1fr) 58px 48px; gap: 8px; }
  .km-satir .km-cubuk, .km-satir > small, .km-satir-bas > span:nth-child(3), .km-satir-bas small { display: none; }
  .km-cift { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px; }
  .km-cift .km-sira { display: none; }
  .km-cift .km-portreler, .km-cift .km-adlar { grid-row: 1 / span 2; }
  .km-cift .km-deger { grid-column: 3; grid-row: 1; }
  .km-cift .km-uyum { grid-column: 3; grid-row: 2; justify-self: end; }
  .km-uclu-izgara { grid-template-columns: minmax(0, 1fr); }
}