/* Tier List */
.tl-pano { display: grid; gap: 10px; }
.tl-satir { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: stretch; overflow: hidden; border-left: 4px solid var(--tc); }
.tl-satir::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 14%, transparent), transparent 35%); }
.tl-harf { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-right: 1px solid var(--cizgi); }
.tl-harf .tpill { width: 52px; height: 52px; font-size: 32px; box-shadow: 0 0 22px color-mix(in srgb, var(--tc) 40%, transparent); }
.tl-harf b { display: block; font: 700 17px/1 var(--f-baslik); text-transform: uppercase; }
.tl-harf small { display: block; margin-top: 5px; font: 500 12px/1.3 var(--f-arayuz); color: var(--krem-3); }
.tl-harf em { font: 700 13px/1 var(--f-arayuz); font-style: normal; color: var(--krem-3); }
.tl-portreler { position: relative; display: flex; flex-wrap: wrap; gap: 10px 8px; align-content: center; padding: 14px 16px; }
.tl-kh { display: grid; justify-items: center; gap: 4px; width: 72px; text-align: center; }
.tl-resim { position: relative; display: block; width: 62px; height: 62px; border-radius: 9px; overflow: visible; }
.tl-resim img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; object-position: 50% 12%; background: var(--kart-3); box-shadow: 0 0 0 1px var(--cizgi);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s; }
.tl-kh:hover .tl-resim img, .tl-kh:focus-visible .tl-resim img { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 2px var(--tc), 0 12px 20px rgba(0, 0, 0, .5); }
.tl-kh b { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.1 var(--f-arayuz); color: var(--krem-2); }
.tl-kh small { font: 700 11.5px/1 var(--f-arayuz); color: var(--krem-3); font-variant-numeric: tabular-nums; }
.tl-ok { position: absolute; right: -6px; top: -6px; padding: 2px 4px; border-radius: 4px; font: 700 10px/1 var(--f-arayuz); font-style: normal; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.tl-ok.yukari { background: var(--yesil); color: var(--murekkep); }
.tl-ok.asagi { background: var(--kirmizi); color: #fff; }
.tl-bos { margin: 0; color: var(--krem-3); font-size: 14px; }
html.hareket .tl-pano.gorundu .tl-kh { animation: pat .45s cubic-bezier(.2, .8, .2, 1.3) backwards; animation-delay: calc(.1s + var(--i, 0) * 16ms); }
html.hareket .tl-pano.gorundu .tl-harf .tpill { animation: pat .5s cubic-bezier(.2, .8, .2, 1.4) backwards; }

/* yamanın etkisi: halter grafiği */
.tl-etki-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.tl-etki-kol { padding: 18px; border-top: 3px solid var(--yr); }
.tl-etki-kol .kart-bas h3 { display: flex; align-items: center; gap: 8px; }
.tl-etki-kol .kart-bas h3 svg { width: 18px; height: 18px; color: var(--yr); }
.tl-halter { display: grid; grid-template-columns: 32px 110px minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 6px; border-radius: 8px; transition: background .15s; }
.tl-halter:hover { background: rgba(247, 233, 213, .05); }
.tl-halter img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; object-position: 50% 12%; }
.tl-halter b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.1 var(--f-arayuz); }
.tl-halter em { text-align: right; font-style: normal; }
.tl-halter-cizgi { position: relative; height: 18px; }
.tl-halter-cizgi::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--cizgi); }
.tl-halter-cizgi .cubuk { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; transform-origin: left; }
.tl-halter-cizgi .cubuk.arti { background: linear-gradient(90deg, rgba(151, 218, 121, .25), var(--yesil)); }
.tl-halter-cizgi .cubuk.eksi { background: linear-gradient(90deg, var(--kirmizi), rgba(255, 90, 78, .25)); }
.tl-halter-cizgi .nokta { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.tl-halter-cizgi .nokta.eski { background: #6d655c; box-shadow: 0 0 0 2px #15120f; }
.tl-halter-cizgi .nokta.yeni { background: var(--yr); box-shadow: 0 0 0 2px #15120f, 0 0 10px var(--yr); }
html.hareket .tl-etki-izgara.gorundu .tl-halter .cubuk { animation: uzan .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.2s + var(--i, 0) * 60ms); }
html.hareket .tl-etki-izgara.gorundu .tl-halter .nokta.yeni { animation: pat .45s cubic-bezier(.2, .8, .2, 1.4) backwards; animation-delay: calc(.5s + var(--i, 0) * 60ms); }

.t-alt { display: block; margin-top: 3px; font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); }
#tl-tablo td b { font-weight: 700; }

@media (max-width: 900px) {
  .tl-satir { grid-template-columns: 1fr; }
  .tl-harf { border-right: 0; border-bottom: 1px solid var(--cizgi); padding: 12px 14px; }
  .tl-harf .tpill { width: 42px; height: 42px; font-size: 26px; }
  .tl-etki-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tl-kh { width: 60px; }
  .tl-resim { width: 52px; height: 52px; }
  .tl-halter { grid-template-columns: 28px 84px minmax(0, 1fr) 58px; gap: 8px; }
}