/*
 * demo.livescorejson.com — özel ince katman
 * Alchemists koyu tema üstüne marka + livescore bileşenleri.
 * Palet temadan alındı: accent #38a9ff (mavi), canlı/kırmızı #f34141,
 * kart zemini #292c31 / #1e2024, yeşil #9fe900.
 */

:root {
    --ls-accent: #38a9ff;
    --ls-live:   #f34141;
    --ls-line:   rgba(255,255,255,.07);
    --ls-line-soft: rgba(255,255,255,.05);
}

/* ---------- Marka ---------- */
.ls-brand {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .3px;
    color: #fff;
    text-transform: uppercase;
}
.ls-brand__tld { color: var(--ls-accent); }
.header-mobile__logo .ls-brand { font-size: 18px; }

/* ---------- Canlı rozet ---------- */
.ls-live-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
    color: #fff;
    background: var(--ls-live);
    border-radius: 3px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ls-live-badge::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #fff;
    animation: ls-blink 1s steps(1) infinite;
    vertical-align: middle;
}
@keyframes ls-blink { 50% { opacity: .25; } }

/* ---------- Sayfa başlığı ---------- */
.ls-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 24px 0 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.ls-page-head__title { margin: 0; font-size: 26px; line-height: 1.1; }
.ls-page-head__date  { opacity: .6; font-size: 14px; margin-top: 4px; }
.ls-page-head__meta  { display: flex; align-items: center; gap: 12px; }
.ls-updated { opacity: .5; font-size: 12px; }

/* ---------- Filtre sekmeleri ---------- */
.ls-filters { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.ls-filters__btn {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #cfd3d8;
    padding: 7px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.ls-filters__btn:hover { background: rgba(255,255,255,.09); }
.ls-filters__btn.is-active { background: var(--ls-accent); color: #08243b; border-color: transparent; }
.ls-filters__n { opacity: .55; margin-left: 5px; font-weight: 700; }
.ls-filters__btn.is-active .ls-filters__n { opacity: .8; }

/* ---------- Lig grubu ---------- */
.ls-league {
    margin-bottom: 18px;
    border: 1px solid var(--ls-line);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,.015);
}
.ls-league__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #292c31;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ls-league__country {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .55;
}
.ls-league__name { font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; }
.ls-league__name:hover { color: var(--ls-accent); }

/* ---------- Maç satırı ---------- */
.ls-match {
    display: grid;
    grid-template-columns: 64px 1fr 78px 1fr 50px;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--ls-line-soft);
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}
.ls-match:last-child { border-bottom: 0; }
.ls-match:hover { background: rgba(255,255,255,.045); color: inherit; }

.ls-match__status { font-size: 12px; opacity: .65; text-align: center; line-height: 1.2; }
.ls-match.is-live .ls-match__status { color: var(--ls-live); font-weight: 700; opacity: 1; }

.ls-match__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ls-match__team--home { justify-content: flex-end; text-align: right; }
.ls-match__team--away { justify-content: flex-start; }
.ls-match__name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 14px; font-weight: 500;
}
.ls-match__logo {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: #fff;
}

.ls-match__score { text-align: center; font-weight: 800; font-size: 16px; white-space: nowrap; }
.ls-match__score i { font-style: normal; opacity: .45; margin: 0 3px; }
.ls-match.is-scheduled .ls-match__score { font-weight: 600; font-size: 14px; opacity: .8; }
.ls-match.is-live .ls-match__score { color: #fff; }

.ls-match__minute { text-align: center; }
.ls-min { color: var(--ls-live); font-weight: 700; font-size: 12px; }

/* Skor/olay değişiminde kısa vurgu */
@keyframes ls-flash-kf { 0% { background: rgba(243,65,65,.28); } 100% { background: transparent; } }
.ls-match.ls-flash { animation: ls-flash-kf 1.5s ease-out; }

.ls-empty-filter { opacity: .6; padding: 16px 2px; }

/* ---------- Faz 1 doğrulama kutusu (hâlâ kullanılabilir) ---------- */
.ls-diag { margin: 24px 0; padding: 20px 22px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.ls-diag h4 { margin: 0 0 8px; }
.ls-diag__ok   { color: #2ecc71; font-weight: 700; }
.ls-diag__fail { color: var(--ls-live); font-weight: 700; }

/* ========================================================================
 * MAÇ DETAY (Faz 3)
 * ===================================================================== */
.ls-muted { opacity: .6; padding: 18px 2px; }

/* Maç başlığı / scoreboard */
.ls-mh {
    margin: 22px 0 18px;
    border: 1px solid var(--ls-line);
    border-radius: 8px;
    background: linear-gradient(180deg, #292c31, #1e2024);
    padding: 18px 16px 20px;
}
.ls-mh__comp { text-align: center; font-size: 12px; opacity: .7; margin-bottom: 16px; }
.ls-mh__comp a { color: inherit; }
.ls-mh__comp a:hover { color: var(--ls-accent); }
.ls-mh__round { margin-left: 8px; opacity: .7; }
.ls-mh__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.ls-mh__team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.ls-mh__logo { width: 46px; height: 46px; font-size: 15px; }
.ls-mh__name { font-size: 15px; font-weight: 600; text-align: center; }
.ls-mh__team:hover .ls-mh__name { color: var(--ls-accent); }
.ls-mh__center { text-align: center; min-width: 110px; }
.ls-mh__score { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: 1px; }
.ls-mh__score i { font-style: normal; opacity: .4; margin: 0 6px; }
.ls-mh__score.is-live { color: #fff; }
.ls-mh__vs { font-size: 26px; font-weight: 700; }
.ls-mh__state { margin-top: 8px; font-size: 12px; opacity: .8; }
.ls-mh__ht { display: block; margin-top: 4px; opacity: .6; }

/* Sekmeler */
.ls-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ls-line); margin-bottom: 18px; flex-wrap: wrap; }
.ls-tabs__btn {
    background: transparent; border: 0; color: #cfd3d8;
    padding: 11px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ls-tabs__btn:hover { color: #fff; }
.ls-tabs__btn.is-active { color: #fff; border-bottom-color: var(--ls-accent); }
.ls-tab { display: none; }
.ls-tab.is-active { display: block; }

/* Olay akışı */
.ls-timeline { max-width: 720px; margin: 0 auto; }
.ls-tl-row { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--ls-line-soft); }
.ls-tl-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ls-tl-side--home { justify-content: flex-end; text-align: right; }
.ls-tl-side--away { justify-content: flex-start; }
.ls-tl-min { text-align: center; font-size: 12px; font-weight: 700; opacity: .6; }
.ls-tl-txt { display: flex; flex-direction: column; min-width: 0; }
.ls-tl-row--home .ls-tl-txt { align-items: flex-end; }
.ls-tl-player { font-size: 14px; font-weight: 500; }
.ls-tl-extra { font-size: 11px; opacity: .55; }

/* Olay ikonları */
.ls-ev { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.ls-ev--goal { font-size: 15px; }
.ls-ev--goal sup { font-size: 8px; }
.ls-ev--og { font-size: 15px; filter: grayscale(1) brightness(1.6); }
.ls-ev--yc, .ls-ev--rc { width: 11px; height: 15px; border-radius: 2px; }
.ls-ev--yc { background: #ffcf33; }
.ls-ev--rc { background: var(--ls-live); }
.ls-ev--assist { width: 16px; height: 16px; border-radius: 50%; background: rgba(56,169,255,.25); color: var(--ls-accent); font-size: 9px; font-weight: 700; font-style: normal; }
.ls-ev--in { color: #9fe900; font-style: normal; }
.ls-ev--out { color: var(--ls-live); font-style: normal; }

/* İstatistik barları */
.ls-stats { max-width: 640px; margin: 0 auto; }
.ls-stat { margin-bottom: 14px; }
.ls-stat__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 5px; }
.ls-stat__val { font-weight: 700; min-width: 44px; }
.ls-stat__row .ls-stat__val:last-child { text-align: right; }
.ls-stat__label { opacity: .7; font-size: 12px; }
.ls-stat__bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.06); }
.ls-stat__fill--a { background: var(--ls-accent); }
.ls-stat__fill--b { background: #6b7480; }

/* Saha / diziliş */
.ls-pitch {
    position: relative; display: flex;
    max-width: 760px; margin: 0 auto 18px; aspect-ratio: 16 / 9;
    background: #1f6b34; border: 2px solid rgba(255,255,255,.15); border-radius: 6px;
    background-image: linear-gradient(90deg, rgba(255,255,255,.12) 50%, transparent 50%);
    background-size: 2px 100%; background-repeat: no-repeat; background-position: center;
    overflow: hidden;
}
.ls-pitch__half { position: relative; flex: 1; }
.ls-pp { position: absolute; transform: translate(-50%, -50%); text-align: center; width: 60px; }
.ls-pitch__half--away .ls-pp { transform: translate(50%, -50%); }
.ls-pp__num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #111; font-size: 12px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ls-pp__name { display: block; font-size: 9px; color: #fff; margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kadro listeleri */
.ls-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 760px; margin: 0 auto; }
.ls-lineup__team { margin: 0 0 10px; font-size: 15px; color: var(--ls-accent); }
.ls-lineup__row { padding: 5px 0; border-bottom: 1px solid var(--ls-line-soft); font-size: 14px; }
.ls-lineup__row a { color: inherit; }
.ls-lineup__row a:hover { color: var(--ls-accent); }
.ls-lineup__sh { display: inline-block; width: 24px; opacity: .5; font-weight: 700; }
.ls-lineup__bench { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; opacity: .5; }
.ls-lineup__row--bench { opacity: .75; }

/* Yorum */
.ls-comm { max-width: 720px; margin: 0 auto; }
.ls-comm__row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ls-line-soft); }
.ls-comm__min { flex: 0 0 40px; font-weight: 700; opacity: .6; font-size: 13px; }
.ls-comm__txt { font-size: 14px; line-height: 1.5; }
.ls-comm__row.is-goal { background: rgba(159,233,0,.06); }
.ls-comm__row.is-goal .ls-comm__txt { font-weight: 600; }
.ls-comm__row.is-imp .ls-comm__txt { color: #fff; }

/* H2H */
.ls-h2h-sum { max-width: 640px; margin: 0 auto 20px; }
.ls-h2h-sum__head, .ls-h2h-sum__legend { display: flex; justify-content: space-between; font-size: 12px; opacity: .7; margin: 6px 0; }
.ls-h2h-sum__head span:nth-child(2) { opacity: .8; }
.ls-h2h-sum__bar { display: flex; height: 26px; border-radius: 4px; overflow: hidden; font-size: 12px; font-weight: 700; color: #08243b; }
.ls-h2h-sum__bar span { display: flex; align-items: center; justify-content: center; min-width: 22px; }
.ls-h2h-sum__w { background: var(--ls-accent); }
.ls-h2h-sum__d { background: #6b7480; color: #fff; }
.ls-h2h-sum__l { background: var(--ls-live); color: #fff; }
.ls-h2h-list { max-width: 640px; margin: 0 auto; }
.ls-h2h-row { display: grid; grid-template-columns: 60px 1fr 60px 1fr; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--ls-line-soft); color: inherit; text-decoration: none; font-size: 13px; }
.ls-h2h-row:hover { background: rgba(255,255,255,.04); }
.ls-h2h-row__date { opacity: .55; font-size: 12px; }
.ls-h2h-row__home { text-align: right; }
.ls-h2h-row__score { text-align: center; font-weight: 800; }

/* ---------- Duyarlı (mobil) ---------- */
@media (max-width: 560px) {
    .ls-match { grid-template-columns: 52px 1fr 64px 1fr 40px; padding: 8px 10px; }
    .ls-match__name { font-size: 13px; }
    .ls-match__logo { display: none; }
    .ls-page-head__title { font-size: 22px; }
}

/* ========================================================================
 * MAÇ DETAY — şablon bileşenlerine köprü (Faz 3 revizyon)
 * alc-event-header / content-filter / game-result / alc-table-stats
 * şablonun kendi CSS'iyle stillenir; burada yalnız logosuz-rozet ve
 * olay/yorum tablosu ince ayarları.
 * ===================================================================== */

/* Logo yerine harf rozeti (alc-event-team__logo figürü içinde) */
.alc-event-team__logo .ls-logo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 50%;
    color: #fff; font-weight: 700; font-size: 18px;
}

/* Özet olay tablosu */
.ls-events td { vertical-align: middle; }
.ls-events__home { text-align: right; }
.ls-events__away { text-align: left; }
.ls-events__min { text-align: center; width: 64px; opacity: .55; font-weight: 700; }
.ls-events small { opacity: .55; }

/* Anlatım (yorum) tablosu */
.ls-comm-tbl__min { width: 52px; font-weight: 700; opacity: .55; }
.ls-comm-goal { background: rgba(159,233,0,.06); }
.ls-comm-goal td { font-weight: 600; }

/* ========================================================================
 * ANA SAYFA — şablon widget-results köprüsü (Faz 2 revizyon)
 * ===================================================================== */
.ls-logo-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; }
.ls-logo-badge--sm { width: 34px; height: 34px; font-size: 12px; }
.ls-league-w { margin-bottom: 16px; }
.ls-league-w__country { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .55; font-weight: 600; margin-right: 5px; }
.ls-mrow { cursor: pointer; }
.ls-head-live { color: var(--ls-live) !important; font-weight: 700; }
.ls-flash { animation: ls-flash-kf 1.5s ease-out; }