/* Herkese açık sayfalara özgü stiller (app.css'teki sınıfları tamamlar; renkler CSS değişkenlerinden). */

/* ---------------------------------------------------------------- genel */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
h2.section-h, h3.section-h { line-height: 1.3; }
.section-h > a:not(.acc) { color: var(--text); }
.section-h > a:not(.acc):hover { color: var(--acc); }
.section-h .acc, .more-link { font-weight: 600; font-size: .8rem; min-height: 32px; display: inline-flex; align-items: center; }
.acc:hover { text-decoration: underline; text-underline-offset: 3px; }
.neg-t { color: var(--bad); }
.pos-t { color: var(--good); }
abbr[title] { text-decoration: none; cursor: help; }
.tabbar a[aria-current="page"] { color: var(--acc); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.1; }
.stack > [hidden], section[hidden] { display: none; }

/* ---------------------------------------------------------------- Bugün */
.ready-h { margin: 0; font-size: 1.02rem; }
.ready .rrow a:hover b { color: var(--acc); }
h2.day-label { margin: 0; }
.teams-h { margin: 0; font-size: inherit; font-weight: inherit; }
.ready-note a { white-space: nowrap; }

/* ---------------------------------------------------------------- sayfa yolu (breadcrumb) */
.crumbs ol { list-style: none; margin: 0 2px 6px; padding: 0; display: flex; flex-wrap: wrap; align-items: center;
             font-size: .78rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "›"; margin: 0 6px; opacity: .7; }
.crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: var(--acc); font-weight: 550; }
.crumbs li[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------------------------------------------------------------- maç detayı */
.mhead { margin: 0 2px 12px; }
.mhead h1 { font-size: 1.4rem; line-height: 1.22; margin: 0 0 4px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mhead h1 .h1-sub { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.mhead .meta { font-size: .82rem; }
.mhead .meta a { color: var(--acc); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.mhero { margin-bottom: 10px; padding: 14px 12px 12px; }
.mhero .hero .mid b { font-size: 1.15rem; }
.mhero .score-big { font-size: 1.6rem !important; }
.prose { margin-bottom: 10px; }
.prose p { margin: 0 0 10px; font-size: .94rem; line-height: 1.55; }
.prose p:last-child { margin-bottom: 0; }
.prose .table-wrap { margin: 4px 0 10px; box-shadow: none; }
.prose ul.why { margin: 0 0 10px; }
.prose-h { font-size: 1.02rem; margin: 0 0 8px; line-height: 1.3; }
.mkt-h { margin: 0; font-size: inherit; font-weight: inherit; }
details.mkt > summary { -webkit-user-select: none; user-select: none; }
details.mkt > summary:focus-visible { outline: 2px solid var(--acc-line); outline-offset: -2px; border-radius: var(--radius); }
ol.scores { list-style: none; margin: 0; padding: 0; }
.kv th[scope="row"] { text-align: left; color: var(--muted); font-size: .82rem; font-weight: 500; padding: 8px 4px;
                      border-top: 1px solid var(--line); width: 30%; }
.kv thead th { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tablolar */
table.st tbody th { font-size: .88rem; color: var(--text); font-weight: 500; padding: 9px 6px; border-bottom: 1px solid var(--line);
                    white-space: nowrap; }
table.st tbody tr:last-child th { border-bottom: 0; }
table.st tr.up th.team { font-weight: 650; }
table.st th.team { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
table.st th.team .upd { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); margin-left: 6px; vertical-align: 2px; }
@media (max-width: 400px) { table.st th.team { max-width: 118px; } }
@media (min-width: 560px) { table.st th.team { max-width: 220px; } }
/* UEFA tablolarında satır başlıkları (th) yapışkan sütun gibi davranır */
table.wt tbody th, table.wt tfoot th { background: var(--card); font-weight: 500; text-align: left; }
table.wt tr.up th { background: color-mix(in srgb, var(--acc) 8%, var(--card)); }
table.wt tfoot th { border-top: 1px solid var(--line-2); border-bottom: 0; color: var(--muted); font-size: .8rem; padding: 8px 9px; }
@media (hover: hover) { table.wt tr.click:hover th { background: color-mix(in srgb, var(--acc) 6%, var(--card)); } }
table.wt tr.click:focus-visible th { outline: 2px solid var(--acc-line); outline-offset: -2px; }
table.wt tr.click td, table.wt tr.click th { height: 44px; }
table.wt tr.detail[hidden] { display: none; }

/* ---------------------------------------------------------------- lig ve puan sayfaları */
.jump { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.jump .chip { display: inline-flex; align-items: center; }
a.chip { display: inline-flex; align-items: center; color: var(--text); }
a.chip.on { color: var(--bg); }
.day-h { font-size: .9rem; font-weight: 700; margin: 14px 4px 8px; }
.day-h .muted { font-weight: 500; }
.linkgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.linkgrid a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 12px; background: var(--card);
              border: 1px solid var(--line); border-radius: 12px; }
.linkgrid a span { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkgrid a small { color: var(--muted); font-size: .72rem; }
@media (hover: hover) { .linkgrid a:hover { border-color: var(--acc-line); } }
@media (min-width: 560px) { .linkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- UEFA */
@media (min-width: 900px) { #app:has(.uefa-page) { max-width: 1060px; } }
.uefa-page .card.sum { margin: 0 0 4px; line-height: 1.5; }
.uefa-page .filters select { width: 100%; }

/* ---------------------------------------------------------------- performans */
.community { display: grid; gap: 10px; }
.community p { margin: 0; }
.community .big-line { font-size: 1.02rem; line-height: 1.45; }
.community .loss b { font-size: 1.9rem; line-height: 1.1; letter-spacing: -.01em; }
.community .agg { padding-top: 10px; border-top: 1px solid var(--line); }
.note.honest { margin-top: 12px; line-height: 1.5; color: var(--text); }
.note.honest b:first-child { display: block; color: var(--acc); margin-bottom: 2px; }
.note.honest a { color: var(--acc); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- sorumlu oyun */
.helpcard { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; border-color: var(--acc-line); background: var(--acc-soft); }
.helpcard .hc-num { flex: none; width: 64px; height: 64px; border-radius: 16px; background: var(--acc); color: var(--acc-ink);
                    display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800;
                    font-variant-numeric: tabular-nums; }
.helpcard .hc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.helpcard .hc-txt span { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.prose-wrap { display: grid; gap: 10px; }
.prose-wrap .prose { margin: 0; }
.prose-wrap table.st td, .prose-wrap table.st th { white-space: nowrap; }

/* UEFA: son tam hesaptan bu yana eklenen maçlar */
.uefa-live { margin-bottom: 14px; }
.uefa-live-h { font-size: 1rem; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.uefa-live-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.uefa-live-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; }
table.st .dlt { display: block; font-size: .68rem; font-weight: 600; line-height: 1.1; }
table.st .dlt.up, table.st .mv.up { color: var(--good); }
table.st .dlt.dn, table.st .mv.dn { color: var(--bad); }
table.st .mv { font-size: .6rem; margin-left: 3px; vertical-align: 1px; }