/* =================================================================
   CADDEBET — Canlı TV ve Maçlar
   Skor merkezi: solda turnuva listesi, sağda maç tablosu.
   TV: solda oynatıcı, sağda maç/kanal sekmeleri.
   ================================================================= */

/* =================================================================
   ORTAK
   ================================================================= */
.yayin-duzen{
  display:grid;grid-template-columns:264px minmax(0,1fr);gap:18px;align-items:start;
}

.yan-panel{
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);
  overflow:hidden;position:sticky;top:86px;
}
.yan-baslik{
  padding:14px 16px 11px;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);border-bottom:1px solid var(--line);
}
.yan-liste{max-height:min(74vh,720px);overflow:auto;padding:6px}
.yan-liste::-webkit-scrollbar{width:6px}
.yan-liste::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}

.yan-oge{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:11px;
  text-align:left;transition:.18s;cursor:pointer;border:1px solid transparent;background:none;
}
.yan-oge:hover{background:rgba(255,255,255,.05)}
.yan-oge.on{
  background:linear-gradient(135deg,rgba(238,4,57,.16),rgba(238,4,57,.05));
  border-color:rgba(238,4,57,.32);
}
.yan-oge img,.yan-oge .harf{
  width:26px;height:26px;border-radius:7px;object-fit:contain;flex:none;background:rgba(255,255,255,.06);
}
.yan-oge .harf{display:grid;place-items:center;font-size:10px;font-weight:800}
.yan-oge > span{flex:1;min-width:0}
.yan-oge b{
  display:block;font-size:13px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.yan-oge.on b{color:#ff9db2}
.yan-oge em{display:block;font-style:normal;font-size:11px;color:var(--muted-2)}
.yan-oge .adet{
  font-size:11px;font-weight:800;color:var(--muted-2);padding:1px 7px;border-radius:99px;
  background:rgba(255,255,255,.06);flex:none;
}

/* Arama kutusu */
.yayin-ara{
  display:flex;align-items:center;gap:11px;padding:13px 17px;margin-bottom:14px;
  border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:.2s;
}
.yayin-ara:focus-within{border-color:rgba(238,4,57,.42);box-shadow:0 0 0 4px rgba(238,4,57,.08)}
.yayin-ara .ic{font-size:17px;color:var(--muted-2)}
.yayin-ara input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  font-size:14.5px;font-family:inherit;
}
.yayin-ara input::placeholder{color:var(--muted-2)}

/* Sekmeler */
.yayin-sekme{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
.yayin-sekme::-webkit-scrollbar{display:none}
.ys{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-size:13.5px;font-weight:600;white-space:nowrap;transition:.2s;cursor:pointer;
}
.ys:hover{color:var(--text);border-color:rgba(255,255,255,.18)}
.ys.on{
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;border-color:transparent;
  box-shadow:0 12px 26px -14px rgba(238,4,57,.9);
}
.ys .say{
  min-width:20px;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:800;
  background:rgba(255,255,255,.16);
}
.ys.on .say{background:rgba(0,0,0,.24)}
.ys.canli .say{background:var(--err);color:#fff}

/* =================================================================
   MAÇ TABLOSU
   ================================================================= */
.lig-blok{margin-bottom:16px}
.lig-bas{
  display:flex;align-items:center;gap:10px;padding:0 4px 9px;
}
.lig-bas img,.lig-bas .harf{width:22px;height:22px;border-radius:6px;object-fit:contain;flex:none}
.lig-bas .harf{display:grid;place-items:center;font-size:9px;font-weight:800;background:rgba(255,255,255,.07)}
.lig-bas b{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.lig-bas span{font-size:11.5px;color:var(--muted-2)}

.mac-liste{
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);overflow:hidden;
}
.mac-sat{
  display:grid;grid-template-columns:62px minmax(0,1fr) 74px minmax(0,1fr) 92px;
  gap:10px;align-items:center;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);transition:.18s;
}
.mac-liste .mac-sat:last-child{border-bottom:0}
.mac-sat:hover{background:rgba(255,255,255,.035)}
.mac-sat.canli{background:linear-gradient(90deg,rgba(238,4,57,.07),transparent 42%)}

.mac-saat{text-align:center;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mac-saat b{display:block;font-size:13px;color:var(--text);font-weight:600}
.mac-dk{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:#ff9db2;
}
.mac-dk i{width:6px;height:6px;border-radius:50%;background:var(--err);animation:pulse 1.4s infinite;flex:none}

.mac-ev,.mac-dep{display:flex;align-items:center;gap:9px;min-width:0}
.mac-ev{justify-content:flex-end;text-align:right}
.mac-ev span,.mac-dep span{
  font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mac-arma{width:24px;height:24px;border-radius:6px;object-fit:contain;flex:none;background:rgba(255,255,255,.06)}
.mac-arma.harf{display:grid;place-items:center;font-size:9.5px;font-weight:800}

.mac-skor{
  text-align:center;font-family:var(--font-display);font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.mac-skor.bos{font-size:12px;font-weight:600;color:var(--muted-2);letter-spacing:.06em}
.mac-sat.canli .mac-skor{color:#ff8fa6}
.mac-skor small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--muted-2)}

.mac-izle{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border-radius:9px;
  font-size:12px;font-weight:700;transition:.2s;white-space:nowrap;
  background:rgba(238,4,57,.14);border:1px solid rgba(238,4,57,.3);color:#ff9db2;
}
.mac-izle:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.mac-durum{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);text-align:center;
}
.mac-sag{display:flex;justify-content:flex-end}

.gun-ayrac{
  display:flex;align-items:center;gap:12px;margin:22px 0 13px;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
}
.gun-ayrac::after{content:"";flex:1;height:1px;background:var(--line)}
.gun-ayrac:first-child{margin-top:0}

.yayin-bos{
  padding:44px 22px;text-align:center;border-radius:var(--r-xl);
  border:1px dashed var(--line);color:var(--muted);
}
.yayin-bos .ic{font-size:34px;color:var(--muted-2);display:block;margin-bottom:10px}

/* =================================================================
   CANLI TV
   ================================================================= */
.tv-duzen{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:18px;align-items:start}

.tv-ekran{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:#05060a;
  box-shadow:0 30px 70px -40px #000;
}
.tv-cerceve{position:relative;aspect-ratio:16/9;background:#000}
.tv-cerceve iframe,.tv-cerceve video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.tv-bosluk{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;
  padding:24px;background:radial-gradient(circle at 50% 40%,rgba(238,4,57,.14),transparent 62%);
}
.tv-bosluk b{font-family:var(--font-display);font-size:18px}
.tv-bosluk span{font-size:13px;color:var(--muted);max-width:340px}
.tv-bosluk .mark{width:56px;height:56px;opacity:.9}

.tv-alt{
  display:flex;align-items:center;gap:12px;padding:13px 16px;flex-wrap:wrap;
  border-top:1px solid var(--line);background:var(--surface);
}
.tv-alt-ad{flex:1;min-width:0}
.tv-alt-ad b{display:block;font-size:15px;font-weight:600}
.tv-alt-ad span{display:block;font-size:12px;color:var(--muted-2)}
.tv-rozet{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.1em;
  background:rgba(238,4,57,.14);border:1px solid rgba(238,4,57,.3);color:#ff9db2;
}
.tv-rozet i{width:6px;height:6px;border-radius:50%;background:var(--err);animation:pulse 1.4s infinite}
.tv-kalite{
  padding:5px 10px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.06em;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted);
}

/* Sağ sütun: sekmeli liste */
.tv-yan{
  border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);overflow:hidden;
}
.tv-yan-sekme{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.tvs{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;
  font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  cursor:pointer;transition:.2s;position:relative;
}
.tvs:hover{color:var(--text)}
.tvs.on{color:#fff;background:rgba(238,4,57,.08)}
.tvs.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand)}
.tvs i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);display:block}
.tvs.on i{background:var(--err);animation:pulse 1.4s infinite}

.tv-govde{max-height:min(66vh,620px);overflow:auto;padding:8px}
.tv-govde::-webkit-scrollbar{width:6px}
.tv-govde::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}

.kanal-sat{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:12px;
  cursor:pointer;transition:.18s;border:1px solid transparent;text-align:left;background:none;
}
.kanal-sat:hover{background:rgba(255,255,255,.05)}
.kanal-sat.on{
  background:linear-gradient(135deg,rgba(238,4,57,.18),rgba(238,4,57,.05));
  border-color:rgba(238,4,57,.34);
}
.kanal-sat img,.kanal-sat .harf{
  width:38px;height:38px;border-radius:10px;object-fit:cover;flex:none;background:rgba(255,255,255,.06);
}
.kanal-sat .harf{display:grid;place-items:center;font-size:12px;font-weight:800}
.kanal-sat > span{flex:1;min-width:0}
.kanal-sat b{
  display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kanal-sat em{display:block;font-style:normal;font-size:11.5px;color:var(--muted-2)}
.kanal-sat .kilit{font-size:10px;font-weight:800;color:#ffcf80}

.tv-mac{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:12px;
  transition:.18s;text-align:left;
}
.tv-mac:hover{background:rgba(255,255,255,.05)}
.tv-mac .sol{flex:1;min-width:0}
.tv-mac .lig{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.tv-mac .takim{
  display:flex;align-items:center;gap:7px;margin-top:3px;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tv-mac .takim img{width:18px;height:18px;border-radius:5px;object-fit:contain;flex:none}
.tv-mac .sag{text-align:right;flex:none}
.tv-mac .sag b{display:block;font-size:13px;font-variant-numeric:tabular-nums}

/* Kategori süzgeci */
.tv-katlar{display:flex;gap:7px;padding:10px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tv-katlar::-webkit-scrollbar{display:none}
.tk{
  padding:6px 13px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.18s;
}
.tk:hover{color:var(--text)}
.tk.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* =================================================================
   MOBİL
   ================================================================= */
@media(max-width:1080px){
  .tv-duzen{grid-template-columns:minmax(0,1fr)}
  .tv-yan{order:2}
}
@media(max-width:900px){
  .yayin-duzen{grid-template-columns:minmax(0,1fr)}
  .yan-panel{position:static}
  .yan-liste{
    display:flex;gap:8px;overflow-x:auto;max-height:none;padding:10px;
  }
  .yan-liste::-webkit-scrollbar{display:none}
  .yan-oge{width:auto;flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:99px}
  .yan-oge em,.yan-oge .adet{display:none}
  .yan-oge b{font-size:12.5px}
}
@media(max-width:760px){
  .mac-sat{grid-template-columns:48px minmax(0,1fr) 60px minmax(0,1fr);gap:7px;padding:11px 10px}
  .mac-sag{display:none}
  .mac-sat.izlenir{grid-template-columns:48px minmax(0,1fr) 60px minmax(0,1fr);position:relative}
  .mac-ev span,.mac-dep span{font-size:12.5px}
  .mac-arma{width:20px;height:20px}
  .mac-skor{font-size:14.5px}
  .tv-alt{padding:11px 13px}
  .tv-alt-ad b{font-size:13.5px}
  .ys{padding:9px 14px;font-size:12.5px}
  .yayin-ara{padding:11px 14px}
  .yayin-ara input{font-size:13.5px}
}
@media(max-width:420px){
  .mac-sat{grid-template-columns:42px minmax(0,1fr) 54px minmax(0,1fr);gap:5px}
  .mac-ev span,.mac-dep span{font-size:11.5px}
  .mac-arma{display:none}
}

/* Maç listesi kendi kutusunda kayar — sayfa aşağı doğru uzamaz */
.mac-kutu{
  max-height:min(72vh,760px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:6px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.mac-kutu::-webkit-scrollbar{width:7px}
.mac-kutu::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:9px}
.mac-kutu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px}
.mac-kutu::-webkit-scrollbar-thumb:hover{background:rgba(238,4,57,.5)}

/* Gün ve lig başlıkları kayarken üstte kalsın */
.mac-kutu .gun-ayrac{
  position:sticky;top:0;z-index:3;margin:0 0 12px;padding:9px 2px;
  background:linear-gradient(180deg,var(--bg) 62%,transparent);
}
.mac-kutu .gun-grup + .gun-grup .gun-ayrac{margin-top:18px}
.mac-kutu .lig-bas{
  position:sticky;top:38px;z-index:2;padding:7px 4px;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);
}

@media(max-width:900px){
  .mac-kutu{max-height:min(64vh,560px)}
}