/* tahmin ligi (modules/tahmin/bloklar/tahmin.php): şerit "bugün şeridi"nin ölçüsünde (blok/bugun.css: 40px+, aynı kenar ve köşe);
   pencere giriş penceresinin dili (app.css .lg-panel / .lg-perde): üstte altın ışıltı, panel gradyanı, ince kenar, bulanık perde.
   Renkler yalnız token. app.css'teki genel button kuralı (altın dolgu, :hover) her düğmede açıkça ezilir. */

/* ── şerit ── */
.ts { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 5px 5px 5px 12px; overflow: hidden;
      background: radial-gradient(130% 160% at 0% 0%, rgba(var(--bb-gold-rgb), .13), transparent 52%), var(--bb-surface-3);
      border: 1px solid var(--bb-border-2); border-radius: var(--bb-radius); color: var(--bb-text-dim); font: 400 12px/1.4 var(--bb-font-mono); text-align: left;
      cursor: pointer; container-type: inline-size; transition: border-color .15s, box-shadow .15s; }
.ts:hover { background: radial-gradient(130% 160% at 0% 0%, rgba(var(--bb-gold-rgb), .13), transparent 52%), var(--bb-surface-3);
            color: var(--bb-text-dim); border-color: rgba(var(--bb-gold-rgb), .55); box-shadow: 0 0 0 3px var(--bb-accent-tint); }
/* öğeler önem sırasıyla (ad · kapanış · tahmin · puan/sıra · oynanıyor); sığmayan sağda soluklaşarak kesilir, çağrının altına girmez */
.ts-ic { display: flex; flex: 1; align-items: center; min-width: 0; overflow: hidden;
         -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
.ts-ic > * { display: inline-flex; flex: none; align-items: center; gap: 6px; white-space: nowrap; }
.ts-ic > * + *::before { content: ''; flex: none; width: 1px; height: 12px; margin: 0 10px 0 0; background: var(--bb-border-2); }
.ts-ic > * + * { margin-left: 10px; }
.ts-ad { color: var(--bb-text-strong); font: 600 12px var(--bb-font-sans); letter-spacing: .05em; text-transform: uppercase; }
.ts-ad .bb-nokta { --renk: var(--bb-gold); }
.ts.acil .ts-ad .bb-nokta { animation: ts-nabiz 2s ease-in-out infinite; }
@keyframes ts-nabiz { 50% { box-shadow: 0 0 12px 2px rgba(var(--bb-gold-rgb), .7); } }
.ts-oge b { color: var(--bb-text-strong); font-weight: 600; }
.ts-oge .altin { color: var(--bb-gold-text); }
.ts-cagri { flex: none; margin-left: 10px; padding: 7px 12px; border-radius: 6px; background: rgba(var(--bb-gold-rgb), .13); color: var(--bb-gold-text);
            font: 600 12px var(--bb-font-mono); white-space: nowrap; transition: background-color .15s; }
.ts:hover .ts-cagri { background: rgba(var(--bb-gold-rgb), .22); }
.ts-cizgi { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: linear-gradient(90deg, rgba(var(--bb-gold-rgb), .15), var(--bb-gold-text)); transition: width .6s ease-out; }
@container (max-width: 540px) { .ts-gizle { display: none !important; } }
@container (max-width: 460px) { .ts-gizle2 { display: none !important; } }   /* telefonda: ad · süre · çağrı */

/* ── öne açılan pencere ── */
html.tp-acik { overflow: hidden; }
.tp-perde { position: fixed; inset: 0; z-index: 70; background: var(--bb-scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; animation: tp-sol .18s ease-out; }
@keyframes tp-sol { from { opacity: 0; } }
.tp-kap { position: fixed; inset: 0; z-index: 71; display: grid; place-items: center; pointer-events: none;
          padding: max(14px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.tp-kap[hidden], .tp-perde[hidden] { display: none; }
.tp { display: flex; flex-direction: column; width: min(560px, 100%); max-height: 100%; overflow: hidden; pointer-events: auto; container-type: inline-size;
      border: 1px solid var(--bb-panel-edge); border-radius: 16px; font-size: 14px; line-height: 1.5;
      background: radial-gradient(120% 58% at 50% -8%, rgba(var(--bb-gold-rgb), .11), transparent 64%), linear-gradient(180deg, var(--bb-panel-1) 0%, var(--bb-surface-3) 100%);
      box-shadow: inset 0 1px 0 var(--bb-white-tint), var(--bb-shadow-panel); animation: tp-giris .2s cubic-bezier(.4, 0, .2, 1); }
@keyframes tp-giris { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.tp-ust { display: flex; align-items: center; gap: 10px; padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--bb-border); }
.tp-marka { display: inline-flex; align-items: center; gap: 9px; min-width: 0; margin: 0; color: var(--bb-text-strong); font: 600 15px var(--bb-font-mono); letter-spacing: .02em; }
.tp-marka .bb-nokta { --renk: var(--bb-gold); }
.tp-marka > span { flex: none; white-space: nowrap; }
.tp-marka small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-gold-text); font: 400 12px var(--bb-font-mono); }
.tp-kapat { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; background: transparent; border: 0; border-radius: 50%;
            color: var(--bb-text-dim); font: 400 22px/1 var(--bb-font-sans); cursor: pointer; transition: background-color .15s, color .15s; }
.tp-kapat:hover { background: var(--bb-accent-tint); color: var(--bb-gold-text); }
.tp-sekme { display: flex; align-items: center; gap: 3px; min-height: 46px; padding: 0 12px; border-bottom: 1px solid var(--bb-border); overflow-x: auto; scrollbar-width: none; }
.tp-sekme::-webkit-scrollbar { display: none; }
.tp-sekme button { flex: none; min-height: 32px; padding: 4px 10px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--bb-text-dim);
                   font: 500 12px var(--bb-font-mono); cursor: pointer; }
.tp-sekme button:hover { color: var(--bb-text-strong); background: var(--bb-surface); }
.tp-sekme button[aria-selected="true"] { color: var(--bb-gold-text); border-color: var(--bb-gold-text); background: rgba(var(--bb-gold-rgb), .08); }
.tp-sekme .ayrac { flex: none; width: 1px; height: 16px; margin: 0 4px; background: var(--bb-border-2); }
.tp-renk { display: block; flex: none; height: 2px; background: linear-gradient(90deg, transparent, var(--renk, var(--bb-gold)), transparent); opacity: .7; }
.tp-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tp-bos { margin: 0; padding: 28px 18px; color: var(--bb-text-subtle); font: 12px var(--bb-font-mono); text-align: center; }
.tp-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 10px 18px; border-top: 1px solid var(--bb-border); }
.tp-durum { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-text); font-size: 13px; }
.tp-durum .on { margin-right: 6px; color: var(--bb-gold-text); font-family: var(--bb-font-mono); }
.tp-durum .on.tamam { color: var(--bb-ok); }
.tp-durum b { color: var(--bb-gold-text); font-weight: 600; }
.tp-durum.uyari, .tp-durum.uyari .on { color: var(--bb-bad); }
.tp-ek { flex: none; color: var(--bb-text-subtle); font: 11px var(--bb-font-mono); white-space: nowrap; }
a.tp-katil { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 9px 16px; border-radius: 8px;
             background: var(--bb-gold-fill); color: var(--bb-on-gold); font: 600 14px var(--bb-font-sans); text-decoration: none; }
a.tp-katil:hover { background: var(--bb-gold-hover); color: var(--bb-on-gold); }

/* maç satırı: saat · ev · [1][0][2] · deplasman · joker (dar pencerede iki satır: takımlar üstte, üç düğme altta) */
.tp .fazla { display: none; }
.tp-maclar { list-style: none; margin: 0; padding: 0; }
.tp-gun { display: flex; justify-content: space-between; align-items: center; min-height: 28px; padding: 0 18px; border-bottom: 1px solid var(--bb-border);
          background: color-mix(in srgb, var(--bb-surface) 50%, transparent); color: var(--bb-text-subtle); font: 11px var(--bb-font-mono); }
.tp-mac { display: grid; grid-template-columns: 44px minmax(0, 1fr) 140px minmax(0, 1fr) 34px; grid-template-areas: "saat ev sec dep son"; align-items: center; gap: 8px;
          min-height: 56px; padding: 7px 10px 7px 18px; border-bottom: 1px solid var(--bb-border); }
.tp-maclar > li:last-child { border-bottom: 0; }
.tp-mac.joker { background: rgba(var(--bb-gold-rgb), .05); }
.tp-mac .saat { grid-area: saat; color: var(--bb-text-subtle); font: 11px var(--bb-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-mac .saat.skor { color: var(--bb-text-strong); font: 600 13px var(--bb-font-mono); }
.tp-mac .ev, .tp-mac .dep { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-text); font-size: 13.5px; }
.tp-mac .ev { grid-area: ev; text-align: right; }
.tp-mac .dep { grid-area: dep; }
.tp-mac .tire { grid-area: tire; display: none; color: var(--bb-text-faint); text-align: center; }
.tp-mac .benim { color: var(--bb-gold-text); }
.tp-mac .kazandi { color: var(--bb-text-strong); font-weight: 600; }
.tp-mac .son { grid-area: son; justify-self: center; }
.tp-secim { grid-area: sec; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.tp-sec { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 42px; padding: 0; overflow: hidden;
          background: var(--bb-surface); border: 1px solid var(--bb-border-2); border-radius: 8px; color: var(--bb-text); font: inherit; cursor: pointer;
          transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s; }
.tp-sec:hover { background: var(--bb-surface); color: var(--bb-text-strong); border-color: rgba(var(--bb-gold-rgb), .6); }
.tp-sec .dolgu { position: absolute; inset: auto 0 0; height: 0; background: color-mix(in srgb, var(--renk) 15%, transparent); transition: height .6s cubic-bezier(.2, .7, .2, 1); }
.tp-sec.hemen .dolgu { transition: none; }
.tp-sec b { position: relative; font: 600 15px/1 var(--bb-font-mono); }
.tp-sec small { position: relative; color: var(--bb-text-subtle); font: 10px/1 var(--bb-font-mono); }
.tp-sec.secili, .tp-sec.secili:hover { border-color: var(--bb-gold-text); background: rgba(var(--bb-gold-rgb), .1); color: var(--bb-gold-text); box-shadow: 0 0 0 3px var(--bb-accent-tint); }
.tp-sec.secili small { color: var(--bb-gold-text); }
.tp-sec:disabled { opacity: 1; cursor: default; }
.tp-sec:disabled:hover { border-color: var(--bb-border-2); color: var(--bb-text-dim); }
.tp-sec:disabled:not(.secili):not(.dogru) { color: var(--bb-text-dim); }
.tp-sec.dogru, .tp-sec.dogru:hover { border-color: var(--bb-ok); color: var(--bb-ok); }
.tp-sec.dogru small { color: var(--bb-ok); }
.tp-sec.secili.dogru { background: var(--bb-ok-soft); box-shadow: 0 0 0 3px var(--bb-ok-soft); }
.tp-sec.yanlis, .tp-sec.yanlis:hover { border-color: color-mix(in srgb, var(--bb-bad) 60%, transparent); background: var(--bb-bad-soft); color: var(--bb-bad); box-shadow: none; }
.tp-sec.yanlis small { color: var(--bb-bad); }
.tp-sec.secili:disabled:hover { border-color: var(--bb-gold-text); color: var(--bb-gold-text); }
.tp-mac.kaydedildi .secili { animation: tp-kayit .7s ease-out; }
@keyframes tp-kayit { from { box-shadow: 0 0 0 0 rgba(var(--bb-gold-rgb), .55); } to { box-shadow: 0 0 0 8px rgba(var(--bb-gold-rgb), 0); } }
.tp-canli { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--bb-ok); vertical-align: 1px; animation: tp-nabiz 1.6s ease-in-out infinite; }
@keyframes tp-nabiz { 50% { opacity: .3; } }
.tp-yildiz { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.tp-yildiz.dolu, .tp-joker[aria-pressed="true"] .tp-yildiz { fill: currentColor; }
.tp-yildiz.mini { width: 10px; height: 10px; stroke-width: 2; }
.tp-joker { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--bb-text-faint); cursor: pointer;
            transition: color .15s, background-color .15s; }
.tp-joker:hover { color: var(--bb-gold-text); background: var(--bb-accent-tint); }
.tp-joker[aria-pressed="true"] { color: var(--bb-gold-text); filter: drop-shadow(0 0 5px rgba(var(--bb-gold-rgb), .55)); }
.tp-puan { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--bb-text-faint); font: 600 12px var(--bb-font-mono); }
.tp-puan.var, .tp-puan .tp-yildiz { color: var(--bb-gold-text); }
.tp-tum { display: flex; align-items: center; min-height: 38px; padding: 0 18px; border-top: 1px solid var(--bb-border); }
.tp-tum button { min-height: 38px; padding: 0; background: none; border: 0; border-radius: 0; color: var(--bb-text-dim); font: 500 11px var(--bb-font-mono); cursor: pointer; }
.tp-tum button:hover { background: none; color: var(--bb-gold-text); }

/* ── F1 podyum ── */
.tp .t-orange { --t: var(--bb-cat-orange); } .tp .t-blue { --t: var(--bb-cat-blue); } .tp .t-cyan { --t: var(--bb-cat-cyan); }
.tp .t-red { --t: var(--bb-bad); } .tp .t-green { --t: var(--bb-cat-green); } .tp .t-dim { --t: var(--bb-text-faint); }
.tp-f1 { padding: 20px 18px 8px; }
.tp-podyum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; max-width: 400px; margin: 0 auto; border-bottom: 1px solid var(--bb-border-2); }
.tp-basamak { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; text-align: center; }
button.tp-basamak { cursor: pointer; }
button.tp-basamak:hover { background: none; color: inherit; }
.tp-basamak .pilot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; padding: 5px 4px 4px;
                     border: 1px dashed var(--bb-border-2); border-radius: 8px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.tp-basamak .pilot b { color: var(--bb-text-strong); font: 600 16px/1.1 var(--bb-font-mono); letter-spacing: .06em; }
.tp-basamak .pilot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-text-subtle); font: 11px/1.35 var(--bb-font-sans); }
.tp-basamak.dolu .pilot { border-style: solid; background: var(--bb-surface); }
.tp-basamak.dolu .pilot::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--t, var(--bb-text-faint)); }
button.tp-basamak:hover .pilot { border-color: rgba(var(--bb-gold-rgb), .6); }
.tp-basamak.etkin .pilot { border: 1px solid var(--bb-gold-text); box-shadow: 0 0 0 3px var(--bb-accent-tint); }
.tp-basamak.etkin .pilot small { color: var(--bb-gold-text); }
.tp-basamak .blok { display: grid; place-items: start center; padding-top: 6px; border: 1px solid var(--bb-border-2); border-bottom: 0; border-radius: 6px 6px 0 0;
                    background: linear-gradient(180deg, color-mix(in srgb, var(--renk) 18%, var(--bb-surface)), transparent); color: var(--bb-text-dim); font: 600 16px var(--bb-font-mono); }
.tp-basamak[data-p="1"] .blok { height: 60px; color: var(--bb-gold-text); font-size: 20px; }
.tp-basamak[data-p="2"] .blok { height: 44px; }
.tp-basamak[data-p="3"] .blok { height: 32px; }
.tp-sen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-text-subtle); font: 11px var(--bb-font-mono); }
.tp-sen.tam { color: var(--bb-gold-text); }
.tp-f1-dag { margin: 10px 0 0; color: var(--bb-text-subtle); font: 11px var(--bb-font-mono); text-align: center; }
.tp-f1-dag b { color: var(--bb-text); font-weight: 600; }
.tp-pilotlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; padding: 16px 0 10px; }
.tp-pilot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 40px; padding: 0 7px 0 12px;
            background: var(--bb-surface); border: 1px solid var(--bb-border-2); border-radius: 6px; color: var(--bb-text); font: 600 12.5px var(--bb-font-mono); letter-spacing: .05em;
            cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.tp-pilot::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: var(--t); }
.tp-pilot:hover { background: var(--bb-surface); border-color: rgba(var(--bb-gold-rgb), .55); color: var(--bb-text-strong); }
.tp-pilot[aria-pressed="true"], .tp-pilot[aria-pressed="true"]:hover { border-color: var(--bb-gold-text); background: rgba(var(--bb-gold-rgb), .1); color: var(--bb-gold-text); }
.tp-pilot i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--bb-gold-fill); color: var(--bb-on-gold);
              font: 600 10px var(--bb-font-mono); font-style: normal; letter-spacing: 0; }
.tp-pilot:disabled, .tp-pilot:disabled:hover { opacity: .55; cursor: default; border-color: var(--bb-border-2); color: var(--bb-text); }

/* ── sıralama ── */
.tp-sbas { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 18px; border-bottom: 1px solid var(--bb-border);
           color: var(--bb-text-subtle); font: 11px var(--bb-font-mono); }
.tp-ssec { display: inline-flex; flex: none; gap: 2px; }
.tp-ssec button { min-height: 28px; padding: 2px 10px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--bb-text-dim); font: 400 11px var(--bb-font-mono); cursor: pointer; }
.tp-ssec button:hover { background: transparent; color: var(--bb-gold-text); }
.tp-ssec button[aria-pressed="true"] { color: var(--bb-gold-text); border-color: var(--bb-gold-text); background: rgba(var(--bb-gold-rgb), .08); }
.tp-tablo { width: 100%; border-collapse: collapse; font: 12px var(--bb-font-mono); font-variant-numeric: tabular-nums; }
.tp-tablo td { height: 34px; padding: 0 4px; border-bottom: 1px solid var(--bb-border); }
.tp-tablo tr:last-child td { border-bottom: 0; }
.tp-tablo .sira { width: 60px; padding-left: 18px; color: var(--bb-text-dim); white-space: nowrap; }
.tp-tablo .ad { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bb-text-strong); font: 13px var(--bb-font-sans); }
.tp-tablo .ad .tp-yildiz { margin-left: 4px; vertical-align: -1px; color: var(--bb-gold-text); }
.tp-tablo .ek { color: var(--bb-text-subtle); font-size: 11px; text-align: right; white-space: nowrap; }
.tp-tablo .p { width: 50px; padding-right: 18px; text-align: right; color: var(--bb-text-strong); font-weight: 600; }
.tp-tablo tr.lider .sira { color: var(--bb-gold-text); font-weight: 600; }
.tp-tablo tr.benim td { background: var(--bb-accent-tint); }
.tp-tablo tr.benim .ad, .tp-tablo tr.benim .p { color: var(--bb-gold-text); }
.tp-tablo .yon { display: inline-block; min-width: 18px; margin-left: 3px; font-size: 10px; }
.tp-tablo .yon.yuk { color: var(--bb-ok); }
.tp-tablo .yon.dus { color: var(--bb-bad); }
.tp-tablo tr.ara td { height: 14px; padding: 0; color: var(--bb-text-faint); font-size: 10px; line-height: 1; letter-spacing: 2px; text-align: center; }
.tp-kurallar { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--bb-border); list-style: none;
               color: var(--bb-text-subtle); font: 11px/1.6 var(--bb-font-mono); }
.tp-kurallar b { color: var(--bb-gold-text); font-weight: 600; }

@container (max-width: 470px) {
  .tp-ust { padding: 12px 8px 10px 14px; }
  .tp-sekme { padding: 0 8px; }
  .tp-gun, .tp-sbas, .tp-tum { padding: 0 12px; }
  .tp-mac { grid-template-columns: 40px minmax(0, 1fr) 14px minmax(0, 1fr) 30px; grid-template-areas: "saat ev tire dep son" "sec sec sec sec sec";
            row-gap: 8px; column-gap: 4px; padding: 10px 8px 12px 12px; }
  .tp-mac .tire { display: block; }
  .tp-mac .ev, .tp-mac .dep { font-size: 13px; }
  .tp-sec { flex-direction: row; gap: 7px; }
  .tp-alt { padding: 10px 14px; }
  .tp-ek { display: none; }
  .tp-tablo .sira { padding-left: 12px; }
  .tp-tablo .p { padding-right: 12px; }
  .tp-kurallar { padding: 12px 12px 14px; }
  .tp-f1 { padding: 18px 12px 8px; }
}
@media (prefers-reduced-motion: reduce) { .ts.acil .ts-ad .bb-nokta, .tp-canli { animation: none; } }