/* Espor merkezi (espor.html). Öne çıkan final sahnesi (espor-*) dt.css içinde, ana sayfayla ortak. */

/* ---------------------------------------------------------------- sayfa başı ve sıradaki turnuva */
.es-sb .sb-ic { align-items: center; }
.es-sira { display: grid; gap: 8px; width: min(100%, 360px); padding: 18px 20px; color: inherit; background: rgba(21, 18, 15, .86); backdrop-filter: blur(6px); transition: border-color .15s, transform .15s; }
a.es-sira:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }
.es-sira .ust-baslik { display: inline-flex; align-items: center; gap: 8px; }
.es-sira > b { font: 700 24px/1.05 var(--f-baslik); text-transform: uppercase; }
.es-sira small { color: var(--krem-3); font-size: 13px; }
.es-sira-alt { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--f-arayuz); color: var(--krem-2); }
.es-sira-alt em { margin-left: auto; font-style: normal; color: var(--altin); }
.es-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kirmizi); box-shadow: 0 0 0 0 rgba(255, 90, 78, .6); }
html.hareket .es-nokta { animation: es-nabiz 1.6s ease-out infinite; }
@keyframes es-nabiz { 70% { box-shadow: 0 0 0 7px rgba(255, 90, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 78, 0); } }

/* Liquipedia seviyesi: S A B C D */
.es-sv { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; font: 800 14px/1 var(--f-baslik); color: #0b0b0b;
  background: var(--krem-3); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.es-sv.s1 { background: var(--tS); } .es-sv.s2 { background: var(--tA); } .es-sv.s3 { background: var(--tB); } .es-sv.s4 { background: var(--tC); } .es-sv.s5 { background: var(--tD); }
.es-sv small { margin-left: 5px; font: 700 11px/1 var(--f-arayuz); text-transform: uppercase; letter-spacing: .06em; }
.es-sv:has(small) { display: inline-flex; gap: 0; }

/* ---------------------------------------------------------------- sayaçlar */
.es-nabiz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.es-nb { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.es-nb-ikon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--nr);
  background: color-mix(in srgb, var(--nr) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nr) 30%, transparent); }
.es-nb-ikon svg { width: 22px; height: 22px; }
.es-nb > div { display: grid; min-width: 0; }
.es-nb b { font: 700 30px/1 var(--f-baslik); font-variant-numeric: tabular-nums; }
.es-nb span { font: 600 13.5px/1.3 var(--f-arayuz); color: var(--krem-2); margin-top: 4px; }
.es-nb small { font: 500 12px/1.3 var(--f-arayuz); color: var(--krem-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- bölümler */
.es-bolum { margin-top: 64px; scroll-margin-top: 90px; }
.es-bolum .bolum-bas { margin-bottom: 18px; }
.es-bolum .etiket + h2 { margin-top: 14px; }
.es-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
/* Yan yana iki sütun aynı yerde biter: kartlar sütunu doldurur, alt öğeler (duyuru, "daha göster") dibe oturur.
   Son maçların satır sayısı takvimin boyuna göre espor.js'te ayarlanır (sonucSigdir). */
.es-iki > div { display: flex; flex-direction: column; min-width: 0; }
.es-iki > div > .kart { flex: 1; }
.es-daha { display: block; width: 100%; margin-top: 6px; padding: 11px; border: 0; border-radius: 8px; background: rgba(247, 233, 213, .04); color: var(--krem-2);
  font: 600 13.5px/1 var(--f-arayuz); transition: background .15s, color .15s; }
.es-daha:hover { background: rgba(247, 233, 213, .08); color: var(--krem); }
.es-ok { width: 16px; height: 16px; color: var(--krem-3); transition: transform .2s, color .15s; }
.es-kaynak { margin: 48px 0 0; font-size: 12.5px; color: var(--krem-3); }
.es-kaynak a { text-decoration: underline; }

/* ---------------------------------------------------------------- takvim */
.es-takvim { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.es-takvim > .es-tk:last-of-type, .es-takvim > .bos-durum { margin-bottom: 6px; }
.es-tk { display: grid; grid-template-columns: 50px minmax(0, 1fr) 26px 64px 92px; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 8px; color: inherit; transition: background .15s; }
.es-tk:hover { background: rgba(247, 233, 213, .05); }
.es-tk-gun { display: grid; justify-items: center; gap: 3px; padding: 7px 0 6px; border-radius: 8px; background: rgba(247, 233, 213, .06); }
.es-tk-gun b { font: 700 22px/1 var(--f-baslik); }
.es-tk-gun small { font: 600 10.5px/1 var(--f-arayuz); letter-spacing: .08em; text-transform: uppercase; color: var(--krem-3); }
.es-tk-ad { display: grid; gap: 4px; min-width: 0; }
.es-tk-ad b { font: 700 16px/1.1 var(--f-baslik); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tk-ad small { color: var(--krem-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tk-odul { font: 600 13.5px/1 var(--f-arayuz); text-align: right; font-variant-numeric: tabular-nums; color: var(--krem-2); }
.es-tk em { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font: 600 12.5px/1 var(--f-arayuz); font-style: normal; color: var(--altin); text-align: right; }
.es-tk em.canli { color: var(--kirmizi); }
.es-tk-maclar { display: grid; gap: 4px; margin: 6px 4px 0; padding: 12px 8px 4px; border-top: 1px solid var(--cizgi); }
.es-tk-mac { display: grid; grid-template-columns: 100px auto 18px auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 4px; font: 600 13px/1 var(--f-arayuz); }
.es-tk-mac span { color: var(--krem-3); font-variant-numeric: tabular-nums; }
.es-tk-mac b { font-family: var(--f-baslik); text-transform: uppercase; }
.es-tk-mac i { font-style: normal; color: var(--krem-3); text-align: center; }
.es-tk-mac small { color: var(--krem-3); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tk-dip { display: flex; align-items: center; gap: 12px; margin: auto 4px 4px; padding: 12px 14px; border-radius: 8px; font-size: 13.5px; color: var(--krem-2);
  background: linear-gradient(110deg, rgba(227, 10, 23, .16), rgba(227, 10, 23, .03)); border: 1px solid rgba(227, 10, 23, .22); transition: border-color .15s; }
.es-tk-dip:hover { border-color: rgba(227, 10, 23, .5); color: var(--krem); }
.es-tk-dip svg { width: 18px; height: 18px; flex: none; color: var(--tr-kirmizi-2); }
.es-tk-dip span { flex: 1; }

/* ---------------------------------------------------------------- son maçlar */
.es-sonuclar { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.es-sonuclar .es-sn:last-of-type { margin-bottom: 4px; }
.es-sonuclar .es-daha { margin-top: auto; }
.es-sn { display: grid; grid-template-columns: 50px minmax(0, 1fr) 58px minmax(0, 1fr) minmax(0, 1.25fr) 26px; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--krem-3); transition: background .15s; }
.es-sn:hover { background: rgba(247, 233, 213, .05); }
html.hareket .es-sonuclar .es-sn { animation: belir .4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.es-sn-t { font: 600 12px/1 var(--f-arayuz); font-variant-numeric: tabular-nums; }
.es-sn-a, .es-sn-b { font: 700 14.5px/1.1 var(--f-baslik); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-sn-a { text-align: right; }
.es-sn .kazandi { color: var(--krem); }
.es-sn-skor, .es-mc-skor { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 5px 0; border-radius: 6px; background: rgba(0, 0, 0, .35); font: 700 16px/1 var(--f-baslik); font-variant-numeric: tabular-nums; }
.es-sn-skor b, .es-mc-skor b { color: var(--krem-3); } .es-sn-skor b.k, .es-mc-skor b.k { color: var(--krem); }
.es-sn-skor i, .es-mc-skor i { font-style: normal; color: var(--krem-3); }
.es-sn-tur { display: block; min-width: 0; font: 500 12.5px/1.2 var(--f-arayuz); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-sn-tur small { margin-left: 6px; color: var(--krem-3); opacity: .8; }
.es-sn-vod, .es-mc-vod span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(247, 233, 213, .07); color: var(--krem-2); cursor: pointer; transition: background .15s, color .15s; }
.es-sn-vod svg, .es-mc-vod svg { width: 12px; height: 12px; fill: currentColor; }
.es-sn-vod:hover, .es-mc-vod span:hover { background: var(--turuncu); color: var(--murekkep); }
.es-sn-vod.bos { visibility: hidden; }

/* ---------------------------------------------------------------- tablo kalıbı (turnuvalar, takımlar) */
.es-tablo { padding: 6px 8px 8px; }
.es-tr-bas, .es-tm-bas, .es-mt-bas { display: grid; gap: 14px; align-items: center; padding: 10px 12px 8px; font: 600 11px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.es-tr-bas, .es-tr-s { grid-template-columns: 34px minmax(0, 2.2fr) 128px 84px 52px minmax(0, 1.7fr) 64px 16px; }
.es-tr-bas span:nth-child(4), .es-tr-bas span:nth-child(5), .es-tr-bas span:nth-child(7) { text-align: right; }
.es-tr-s { display: grid; gap: 14px; align-items: center; padding: 11px 12px; border-radius: 8px; color: inherit; transition: background .15s; }
.es-tr-s + .es-tr-s { border-top: 1px solid var(--cizgi); }
.es-tr-s:hover { background: rgba(247, 233, 213, .05); }
.es-tr-s:hover .es-ok { color: var(--turuncu); transform: translateX(2px); }
html.hareket .es-turnuvalar.gorundu .es-tr-s { animation: belir .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.es-tr-ad { display: grid; gap: 4px; min-width: 0; }
.es-tr-ad b { font: 700 16px/1.1 var(--f-baslik); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tr-ad small { font-size: 12.5px; color: var(--krem-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tr-tarih { font: 500 13.5px/1.2 var(--f-arayuz); color: var(--krem-2); }
.es-tr-odul, .es-tr-sayi { font: 600 14px/1 var(--f-arayuz); text-align: right; font-variant-numeric: tabular-nums; color: var(--krem-2); }
.es-tr-sayi { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; }
.es-draftli svg { width: 13px; height: 13px; color: var(--yesil); }
.es-tr-sampiyon { display: flex; align-items: center; gap: 10px; min-width: 0; }
.es-tr-sampiyon > svg { width: 18px; height: 18px; flex: none; color: var(--altin); }
.es-tr-sampiyon > span { display: grid; gap: 3px; min-width: 0; }
.es-tr-sampiyon b { font: 700 15px/1.1 var(--f-baslik); text-transform: uppercase; color: var(--altin); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tr-sampiyon small { font-size: 12px; color: var(--krem-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- pro draft */
.es-meta { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: stretch; }
.es-mt { display: flex; flex-direction: column; }
.es-mt .es-daha { margin-top: auto; }
.es-mt { padding: 6px 8px 8px; }
.es-mt-bas, .es-mt-s { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) 56px 56px 74px; }
.es-mt-bas span:nth-child(n+3) { text-align: right; }
.es-mt-s { display: grid; gap: 14px; align-items: center; padding: 6px 12px; border-radius: 8px; color: inherit; transition: background .15s; }
.es-mt-s:nth-of-type(odd) { background: rgba(247, 233, 213, .02); }
.es-mt-s:hover { background: rgba(247, 233, 213, .06); }
html.hareket .es-meta.gorundu .es-mt-s { animation: belir .4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.es-mt-k { display: flex; align-items: center; gap: 10px; min-width: 0; }
.es-mt-k em { width: 18px; font: 600 12px/1 var(--f-arayuz); font-style: normal; color: var(--krem-3); text-align: right; font-variant-numeric: tabular-nums; }
.es-mt-k img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; object-position: 50% 10%; background: var(--kart-3); flex: none; }
.es-mt-k b { font: 600 14.5px/1.1 var(--f-arayuz); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-mt-v { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; align-items: center; }
.es-mt-v .cubuk, .es-tm-seri .cubuk { height: 8px; border-radius: 4px; background: rgba(247, 233, 213, .07); overflow: hidden; }
.es-mt-v .cubuk i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--turuncu-k), var(--turuncu-2)); transform-origin: left; }
html.hareket .es-meta.gorundu .es-mt-v .cubuk i { animation: uzan .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.1s + var(--i, 0) * 25ms); }
.es-mt-v b { font: 700 14px/1 var(--f-arayuz); text-align: right; font-variant-numeric: tabular-nums; }
.es-mt-n { font: 600 14px/1 var(--f-arayuz); text-align: right; font-variant-numeric: tabular-nums; color: var(--yesil); }
.es-mt-n.ban { color: var(--kirmizi); }
.es-mt-w { font: 700 14px/1 var(--f-arayuz); text-align: right; font-variant-numeric: tabular-nums; color: var(--krem-2); }
.es-mt-w.iyi { color: var(--yesil); } .es-mt-w.kotu { color: var(--kirmizi); }
.es-mt-yan { display: grid; gap: 12px; grid-template-rows: auto 1fr; }
.es-mt-taraf { display: grid; gap: 14px; padding: 18px; }
.es-mt-taraf .espor-taraf-ad b { font-size: 40px; }
.es-mt-taraf small { color: var(--krem-3); font-size: 12.5px; }
.es-mt-ozet { display: grid; gap: 18px; padding: 18px; }
.es-mt-mini { display: grid; gap: 6px; }
.es-mt-mini > small { margin-top: -2px; color: var(--krem-3); font-size: 12px; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-mt-mini a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 6px; color: inherit; transition: background .15s; }
.es-mt-mini a:hover { background: rgba(247, 233, 213, .05); }
.es-mt-mini img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; object-position: 50% 10%; background: var(--kart-3); }
.es-mt-mini b { font: 600 13.5px/1.1 var(--f-arayuz); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-mt-mini em { font: 700 13px/1 var(--f-arayuz); font-style: normal; color: var(--krem-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- takımlar */
.es-tm-bas, .es-tm-s { grid-template-columns: 22px minmax(0, 2fr) 120px 64px 132px 96px 16px; }
.es-tm-bas span:nth-child(4) { text-align: right; }
.es-tm + .es-tm { border-top: 1px solid var(--cizgi); }
.es-tm-s { display: grid; gap: 14px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; font: inherit; transition: background .15s; }
.es-tm-s:hover { background: rgba(247, 233, 213, .05); }
.es-tm.acik .es-tm-s { background: rgba(247, 233, 213, .05); }
.es-tm.acik .es-ok { transform: rotate(180deg); color: var(--turuncu); }
html.hareket .es-takimlar.gorundu .es-tm { animation: belir .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 30ms); }
.es-tm-s > em { font: 600 12.5px/1 var(--f-arayuz); font-style: normal; color: var(--krem-3); font-variant-numeric: tabular-nums; }
.es-tm-ad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.es-tm-ad > span:last-child { display: grid; gap: 4px; min-width: 0; }
.es-tm-ad b { font: 700 16px/1.1 var(--f-baslik); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tm-ad small { font-size: 12px; color: var(--krem-3); }
.es-logo { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px; font: 800 12px/1 var(--f-baslik); letter-spacing: .02em; color: hsl(var(--h) 80% 86%);
  background: linear-gradient(145deg, hsl(var(--h) 45% 32%), hsl(var(--h) 50% 18%)); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 50% / .35); overflow: hidden; }
.es-tm-seri { display: grid; gap: 6px; }
.es-tm-seri b { font: 700 15px/1 var(--f-baslik); font-variant-numeric: tabular-nums; }
.es-tm-seri .cubuk i { display: block; height: 100%; border-radius: 4px; background: var(--yesil); }
.es-tm-harita { font: 600 14px/1 var(--f-arayuz); text-align: right; color: var(--krem-2); font-variant-numeric: tabular-nums; }
.es-form { display: flex; gap: 4px; }
.es-form i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; font: 800 11px/1 var(--f-arayuz); font-style: normal; color: #0b0b0b; background: var(--krem-3); }
.es-form i.g { background: var(--yesil); } .es-form i.m { background: var(--kirmizi); }
.es-tm-k { display: flex; gap: 4px; }
.es-tm-k img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; object-position: 50% 10%; background: var(--kart-3); }
.es-tm-ay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 14px 14px 18px 48px; }
html.hareket .es-tm-ay { animation: belir .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.es-tm-ay > div { display: grid; gap: 10px; align-content: start; min-width: 0; }
.es-kadro { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.es-kadro li { display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--f-arayuz); }
.es-kadro small { color: var(--krem-3); font-weight: 500; font-size: 12px; }
.es-bayrak { display: inline-grid; place-items: center; min-width: 24px; height: 17px; padding: 0 3px; border-radius: 3px; font: 700 9.5px/1 var(--f-arayuz); letter-spacing: .04em; background: rgba(247, 233, 213, .1); color: var(--krem-2); }
.es-bayrak.tr { background: var(--tr-kirmizi); color: #fff; }
.es-tm-maclar { display: grid; gap: 4px; }
.es-tm-maclar a { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 46px; gap: 10px; align-items: center; padding: 5px 6px; border-radius: 6px; color: inherit; font-size: 13px; transition: background .15s; }
.es-tm-maclar a:hover { background: rgba(247, 233, 213, .05); }
.es-tm-maclar i { display: grid; place-items: center; height: 20px; border-radius: 4px; font: 700 12px/1 var(--f-arayuz); font-style: normal; color: #0b0b0b; background: var(--krem-3); }
.es-tm-maclar i.g { background: var(--yesil); } .es-tm-maclar i.m { background: var(--kirmizi); }
.es-tm-maclar span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tm-maclar small { color: var(--krem-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tm-maclar small:last-child { text-align: right; }
.es-tm-kahraman { display: grid; gap: 6px; }
.es-tm-kahraman a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; color: inherit; }
.es-tm-kahraman img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; object-position: 50% 10%; background: var(--kart-3); }
.es-tm-kahraman b { font: 600 13.5px/1.1 var(--f-arayuz); }
.es-tm-kahraman small { color: var(--krem-3); font-size: 12px; }

/* ---------------------------------------------------------------- Türk sahnesi */
.es-tr-bant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 30px 34px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(227, 10, 23, .26), transparent 55%), linear-gradient(180deg, var(--kart-2), var(--kart)); border-color: rgba(227, 10, 23, .25); }
.es-tr-sol { display: grid; gap: 12px; justify-items: start; }
.es-tr-sol h2 { margin: 4px 0 0; font-size: clamp(24px, 3vw, 34px); }
.es-tr-sol p { margin: 0; max-width: 680px; color: var(--krem-2); }
.es-tr-sag { display: grid; gap: 10px; }

/* ---------------------------------------------------------------- turnuva sayfası */
.es-geri { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--f-arayuz); color: var(--krem-2); }
.es-geri:hover { color: var(--krem); }
.es-geri svg { width: 16px; height: 16px; }
.es-ust-cipler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.es-sb-t .sb-metin h1 { font-size: clamp(30px, 4vw, 54px); }
.es-sampiyon { display: flex; align-items: center; gap: 16px; width: min(100%, 360px); padding: 18px 22px; background: linear-gradient(120deg, rgba(255, 172, 17, .2), rgba(21, 18, 15, .9) 70%); border-color: rgba(255, 172, 17, .3); backdrop-filter: blur(6px); }
.es-sampiyon > svg { width: 38px; height: 38px; flex: none; color: var(--altin); }
html.hareket .es-sampiyon > svg { animation: tac 2.4s ease-in-out 1s infinite; }
.es-sampiyon > span { display: grid; gap: 5px; min-width: 0; }
.es-sampiyon b { font: 700 26px/1.05 var(--f-baslik); text-transform: uppercase; color: var(--altin); overflow-wrap: anywhere; }
.es-sampiyon small { color: var(--krem-2); font-size: 13px; }
.es-sampiyon.bekliyor { background: rgba(21, 18, 15, .88); border-color: var(--cizgi-2); }
.es-sampiyon.bekliyor > svg { color: var(--camgobegi); animation: none; }
.es-sampiyon.bekliyor b { color: var(--krem); }
.es-t-bant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.es-t-bant .baglanti { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 600 14px/1 var(--f-arayuz); color: var(--krem-2); }
.es-t-bant .baglanti:hover { color: var(--krem); }
.es-t-bant .baglanti svg { width: 15px; height: 15px; }
.es-yayinlar { display: flex; flex-wrap: wrap; gap: 8px; }
.es-asama { margin-top: 22px; }
.es-asama h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 20px; }
.es-asama h3 small { font: 500 13px/1 var(--f-arayuz); text-transform: none; color: var(--krem-3); }
.es-maclar { padding: 6px; }
.es-mc-kap + .es-mc-kap { border-top: 1px solid var(--cizgi); }
.es-mc { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px minmax(0, 1fr) 62px 28px 16px; gap: 14px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--krem-3); text-align: left; font: inherit; transition: background .15s; }
button.es-mc:hover, .es-mc-kap.acik .es-mc { background: rgba(247, 233, 213, .05); }
.es-mc-kap.acik .es-ok { transform: rotate(180deg); color: var(--turuncu); }
.es-ok.bos { display: block; }
.es-mc-t { display: grid; gap: 3px; font: 600 13px/1 var(--f-arayuz); color: var(--krem-2); font-variant-numeric: tabular-nums; }
.es-mc-t small { font-size: 11.5px; color: var(--krem-3); }
.es-mc-a, .es-mc-b { font: 700 16px/1.1 var(--f-baslik); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-mc-a { text-align: right; }
.es-mc .kazandi { color: var(--krem); }
.es-mc .kisa { display: none; }
.es-mc-skor.bos { font: 600 13px/1 var(--f-arayuz); color: var(--krem-3); background: none; }
.es-mc-bo { display: grid; gap: 3px; font: 600 12.5px/1 var(--f-arayuz); text-align: right; color: var(--krem-3); }
.es-mc-bo small { color: var(--altin); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.es-mc.planli { cursor: default; }
.es-mc.planli em { grid-column: 5 / -1; display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; font: 600 12.5px/1 var(--f-arayuz); font-style: normal; color: var(--altin); white-space: nowrap; }
.es-mc.planli em span { color: var(--krem-3); }
.es-hr-liste { display: grid; gap: 8px; padding: 6px 8px 14px; }
.es-hr { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .22); }
html.hareket .es-hr { animation: belir .35s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.es-hr-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 500 12.5px/1 var(--f-arayuz); color: var(--krem-3); }
.es-hr-bas b { font: 700 14px/1 var(--f-baslik); text-transform: uppercase; color: var(--krem-2); }
.es-hr-bas > span { display: inline-flex; align-items: center; gap: 5px; }
.es-hr-bas svg { width: 13px; height: 13px; }
.es-hr-mac { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--camgobegi); }
.es-hr-mac:hover { text-decoration: underline; }
.es-hr-t { display: grid; grid-template-columns: 6px 64px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; opacity: .6; }
.es-hr-t.kazandi { opacity: 1; }
.es-hr-t .taraf { width: 6px; height: 30px; border-radius: 2px; background: var(--krem-3); }
.es-hr-t .taraf.kehribar { background: var(--kehribar); } .es-hr-t .taraf.safir { background: var(--safir); }
.es-hr-t > b { font: 700 13.5px/1 var(--f-baslik); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-hr-secim, .es-hr-ban { display: flex; gap: 4px; flex-wrap: wrap; }
.es-hr-secim img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; object-position: 50% 10%; background: var(--kart-3); }
.es-hr-ban img { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; object-position: 50% 10%; filter: grayscale(1) brightness(.7); box-shadow: inset 0 0 0 1px rgba(255, 90, 78, .6); position: relative; }
.es-hr-ban { position: relative; padding-left: 10px; border-left: 1px solid var(--cizgi); }
.es-hr-kz svg { width: 16px; height: 16px; color: var(--yesil); }
.es-kadrolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } /* espor.js kadroDuzen: satırlar dengeli dolar, son satırda yetim kart kalmaz */
.es-kd { display: grid; gap: 12px; align-content: start; padding: 16px; }
.es-kd.sampiyon { border-color: rgba(255, 172, 17, .35); background: linear-gradient(160deg, rgba(255, 172, 17, .1), var(--kart) 60%); }
.es-kd-bas { display: flex; align-items: center; gap: 12px; }
.es-kd-bas > span:not(.es-logo) { display: grid; gap: 4px; min-width: 0; flex: 1; }
.es-kd-bas b { font: 700 16px/1.1 var(--f-baslik); text-transform: uppercase; overflow-wrap: anywhere; }
.es-kd-bas small { font-size: 12px; color: var(--krem-3); }
.es-kd-bas > svg { width: 20px; height: 20px; color: var(--altin); flex: none; }

/* ---------------------------------------------------------------- dar ekranlar */
@media (max-width: 1180px) {
  .es-meta { grid-template-columns: 1fr; }
  /* Tablo tam genişlikte; yan sütunun dört listesi altta yan yana (eski iki sütunlu düzende taraf kartının altı 500 px boş kalıyordu) */
  .es-mt-yan { grid-template-columns: 1fr; grid-template-rows: none; }
  .es-mt-ozet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; }
  .es-iki { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .es-nabiz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-tr-bas, .es-tr-s { grid-template-columns: 30px minmax(0, 1.6fr) minmax(0, 1.3fr) 16px; }
  .es-tr-bas span:nth-child(3), .es-tr-bas span:nth-child(4), .es-tr-bas span:nth-child(5), .es-tr-bas span:nth-child(7),
  .es-tr-s .es-tr-tarih, .es-tr-s .es-tr-odul, .es-tr-s .es-tr-sayi { display: none; }
  .es-tm-bas, .es-tm-s { grid-template-columns: 22px minmax(0, 1.6fr) 100px 132px 16px; }
  .es-tm-bas span:nth-child(4), .es-tm-bas span:nth-child(6), .es-tm-s .es-tm-harita, .es-tm-s .es-tm-k { display: none; }
  .es-tm-ay { grid-template-columns: 1fr 1fr; padding-left: 14px; }
  .es-tm-ay > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .es-mt-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-tr-bant { grid-template-columns: 1fr; padding: 24px; }
  .es-tr-sag { grid-auto-flow: column; justify-content: start; }
}
@media (max-width: 640px) {
  .es-sira, .es-sampiyon { width: 100%; }
  .es-nb { padding: 14px; gap: 12px; }
  .es-nb-ikon { width: 38px; height: 38px; }
  .es-nb b { font-size: 24px; }
  .es-nb small { white-space: normal; }
  .es-tk { grid-template-columns: 46px minmax(0, 1fr) 26px; gap: 10px; }
  .es-tk-odul { display: none; }
  .es-tk em { grid-column: 2 / -1; justify-content: flex-start; margin-top: -4px; }
  .es-tk-mac { grid-template-columns: 82px auto 16px auto; }
  .es-tk-mac small { display: none; }
  .es-sn { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 26px; gap: 8px; }
  .es-sn-t, .es-sn-tur { display: none; }
  .es-mt-bas, .es-mt-s { grid-template-columns: minmax(0, 1fr) 40px 34px 32px 42px; gap: 8px; padding-inline: 6px; }
  .es-mt-bas { letter-spacing: .03em; }
  .es-mt-bas span:nth-child(5) { font-size: 0; } .es-mt-bas span:nth-child(5)::after { content: "Kaz."; font-size: 11px; }
  .es-mt-ozet { grid-template-columns: 1fr; }
  .es-mt-bas span:nth-child(2) { font-size: 0; } .es-mt-bas span:nth-child(2)::after { content: "%"; font-size: 11px; }
  .es-mt-bas span:nth-child(2) { text-align: right; }
  .es-mt-v { grid-template-columns: 1fr; }
  .es-mt-v .cubuk { display: none; }
  .es-mt-k em { display: none; }
  .es-mt-k img { width: 28px; height: 28px; }
  .es-tm-bas, .es-tm-s { grid-template-columns: minmax(0, 1fr) 64px 16px; gap: 10px; }
  .es-tm-bas span:nth-child(1), .es-tm-bas span:nth-child(5), .es-tm-s > em, .es-tm-s .es-form { display: none; }
  .es-tm-ay { grid-template-columns: 1fr; gap: 18px; }
  .es-tm-ay > div:nth-child(2) { grid-row: auto; }
  .es-logo { width: 32px; height: 32px; font-size: 10.5px; }
  .es-tr-sag { grid-auto-flow: row; }
  .es-mc { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) 16px; gap: 8px; }
  .es-mc-t, .es-mc-bo, .es-mc-vod { display: none; }
  .es-mc.planli em { display: none; }
  .es-mc-a, .es-mc-b { font-size: 14px; }
  .es-mc .tam { display: none; } .es-mc .kisa { display: inline; }
  .es-tr-bas, .es-tr-s { grid-template-columns: 30px minmax(0, 1fr) 16px; row-gap: 8px; }
  .es-tr-bas span:nth-child(6) { display: none; }
  .es-tr-s .es-tr-sampiyon { grid-column: 2; grid-row: 2; }
  .es-tr-s .es-ok { grid-column: 3; grid-row: 1 / span 2; }
  .es-tr-s .es-sv { grid-row: 1 / span 2; align-self: start; }
  .es-hr-t { grid-template-columns: 6px minmax(0, 1fr) 18px; row-gap: 6px; }
  .es-hr-t > b { grid-column: 2; }
  .es-hr-secim { grid-column: 2; grid-row: 2; }
  .es-hr-ban { grid-column: 2; grid-row: 3; padding-left: 0; border-left: 0; }
  .es-hr-kz { grid-column: 3; grid-row: 1; }
  .es-hr-t .taraf { grid-row: 1 / span 3; height: 100%; }
  .es-hr-secim img { width: 30px; height: 30px; }
}