/* ============================================================
   TVRESTREAM — broadcast / control-room theme
   Near-black surfaces, hot "LIVE" accent, condensed display type.
   Vanilla CSS, no build step.
   ============================================================ */

:root {
  /* surfaces */
  --bg: #07080a;
  --bg-1: #0d0f13;
  --bg-2: #14171d;
  --bg-3: #1c2027;
  --line: #262b34;
  --line-soft: #1a1e25;

  /* text */
  --fg: #eef1f5;
  --fg-dim: #9aa3b0;
  --fg-mute: #5e6672;

  /* accent — hot broadcast red/orange */
  --accent: #ff3b2f;
  --accent-2: #ff7a18;
  --live: #ff3b2f;
  --ok: #3ddc84;

  --r: 10px;
  --r-sm: 7px;
  --maxw: 1100px;
  --rail-w: 200px;
  --gap: 18px;

  --font-display: "Oswald", system-ui, sans-serif;
  --font-body: "Barlow Semi Condensed", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #11151c 0%, transparent 60%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* subtle grain via repeating gradient */
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================ TICKER ============================ */
.ticker {
  display: flex;
  align-items: stretch;
  height: 38px;
  background: linear-gradient(90deg, #0a0b0e, #101319);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.ticker__label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 12px;
  color: #fff;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  padding-right: 22px;
  white-space: nowrap;
}
.ticker__viewport {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker__track {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  letter-spacing: .3px;
  padding-left: 100%;
  animation: marquee 38s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.ticker__social {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  border-left: 1px solid var(--line);
}
.soc {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--fg-dim);
  font-size: 13px;
  transition: background .15s, color .15s, transform .15s;
}
.soc:hover { background: var(--bg-3); color: var(--accent); transform: translateY(-1px); }

/* Live "online now" badge — subtle pill with a pulsing green dot. Neutral
   class names so it cannot be targeted by content/ad blockers. */
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--bg-3, rgba(255, 255, 255, .06));
  border: 1px solid var(--line, rgba(255, 255, 255, .1));
  color: var(--fg-dim, #b6bcc6);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.online-badge[hidden] { display: none; }
.online-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: online-pulse 1.8s ease-out infinite;
}
@keyframes online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .online-badge__dot { animation: none; }
}

/* ============================ PAGE GRID ============================ */
.page {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
  /* center a constrained layout: rails + middle(maxw) + gaps + padding */
  max-width: calc(var(--maxw) + var(--rail-w) * 2 + var(--gap) * 4);
  margin: 0 auto;
}
.media-rail { position: sticky; top: calc(38px + var(--gap)); height: calc(100vh - 38px - var(--gap) * 2); }
.media-slot {
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,.012) 10px 20px),
    var(--bg-1);
  color: var(--fg-mute);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 13px;
  display: grid;
  place-items: center;
  text-align: center;
}
.media-slot--vertical { height: 100%; writing-mode: vertical-rl; transform: rotate(180deg); padding: 18px 0; }

/* ============================ CENTER COLUMN ============================ */
/* Explicit placement: center always occupies the middle track, even if a
   side rail is removed (e.g. hidden by an ad blocker) — otherwise the grid
   would auto-place center into the narrow first column and collapse. */
.media-rail--left { grid-column: 1; }
.center { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.media-rail--right { grid-column: 3; }

/* HEADER / TOPBAR */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 70%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
}
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand__live { color: var(--live); font-size: 11px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .5px;
  line-height: 1;
}
.brand__accent { color: var(--accent); }
.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  color: var(--fg-dim);
  transition: color .15s, background .15s;
  position: relative;
}
.menu__item:hover { color: var(--fg); background: var(--bg-2); }
.menu__item.is-active { color: #fff; }
.menu__item.is-active::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
/* Menu items can be <button> (category filters) — match the <a> look. */
button.menu__item { background: none; border: 0; cursor: pointer; }
/* Item with an image: picture above the label. */
.menu__item.has-img {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 4px 10px; line-height: 1.05;
}
.menu__img { height: 22px; width: auto; max-width: 72px; object-fit: contain; display: block; }
.menu__item.has-img .menu__label { font-size: 11px; }
.topbar__search { flex-shrink: 0; }
.topbar__search input {
  width: 180px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 14px;
  outline: none;
  transition: border-color .15s, width .2s;
}
.topbar__search input:focus { border-color: var(--accent); width: 220px; }
.topbar__search input::placeholder { color: var(--fg-mute); }

/* CAROUSEL */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
}
.carousel__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  padding: 2px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item {
  flex: 0 0 auto;
  width: 92px; height: 64px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  padding: 8px;
  position: relative;
  transition: border-color .15s, transform .15s;
  overflow: hidden;
}
.carousel__item:hover { border-color: var(--accent); transform: translateY(-2px); }
.carousel__item img { max-height: 100%; max-width: 100%; object-fit: contain; }
.carousel__item .fallback {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: var(--fg-dim); text-align: center; letter-spacing: .3px;
  padding: 0 4px; line-height: 1.1;
}
.carousel__skeleton { color: var(--fg-mute); font-family: var(--font-mono); font-size: 12px; padding: 20px; }
.carousel__nav {
  flex-shrink: 0;
  width: 32px; height: 64px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.carousel__nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.carousel__nav:active { transform: translateY(1px); }

/* ============================ STAGE (player + side) ============================ */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--gap);
  align-items: start;
}

/* PLAYER */
.player { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.player__frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.player__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(600px 300px at 50% 40%, #15191f 0%, #000 70%);
  text-align: center;
  color: var(--fg-dim);
}
.player__placeholder.is-hidden { display: none; }
.player__big-live {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 64px);
  letter-spacing: 4px;
  color: var(--bg-3);
  text-shadow: 0 0 40px rgba(255,59,47,.15);
}
.player__placeholder p { margin: 8px 0 0; font-size: 14px; color: var(--fg-mute); }

/* SCORE TICKER overlay along bottom of player */
.scoreticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78) 40%);
  backdrop-filter: blur(2px);
  z-index: 5;
  pointer-events: none;
}
.scoreticker__tag {
  display: flex; align-items: center;
  padding: 0 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  padding-right: 18px;
}
.scoreticker__viewport {
  flex: 1; overflow: hidden; display: flex; align-items: center;
}
.scoreticker__track {
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: #e7ebf0;
  padding-left: 100%;
  animation: marquee 30s linear infinite;
}

/* now playing strip */
.player__nowplaying {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 13px;
}
.np__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-mute); flex-shrink: 0; }
.player__nowplaying.is-live .np__dot { background: var(--live); box-shadow: 0 0 0 0 rgba(255,59,47,.6); animation: live-ring 1.8s infinite; }
@keyframes live-ring {
  0% { box-shadow: 0 0 0 0 rgba(255,59,47,.55); }
  70% { box-shadow: 0 0 0 7px rgba(255,59,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,47,0); }
}
.np__name { font-family: var(--font-display); font-weight: 500; letter-spacing: .4px; font-size: 15px; }

/* ============================ SIDE PANEL ============================ */
.side {
  display: flex; flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  align-self: stretch;
}
.side__tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--fg-mute);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .8px;
  padding: 12px 6px;
  transition: color .15s, background .15s;
  position: relative;
}
.tab:hover { color: var(--fg-dim); }
.tab.is-active { color: #fff; background: var(--bg-2); }
.tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
}

.side__body { display: flex; min-height: 0; }

/* middle column holds the match panes between the two rails */
.side__panes { flex: 1; min-width: 0; }

/* vertical rails (sport on the left, country/flag on the right) */
.sportrail,
.flagrail {
  width: 46px;
  flex-shrink: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  overflow-y: auto;
  max-height: 420px;
}
.sportrail { border-right: 1px solid var(--line); }
.flagrail  { border-left: 1px solid var(--line); }

/* CSS used to win over the [hidden] attribute (display:flex) so the rails
   couldn't be hidden when empty — restore the intended behaviour. */
.sportrail[hidden],
.flagrail[hidden] { display: none; }

.flag,
.sport {
  width: 34px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  display: grid; place-items: center;
  transition: background .12s, border-color .12s, transform .12s;
  position: relative;
}
.flag small {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0;
}
.flag__img { width: 26px; height: auto; border-radius: 3px; display: block; }
.flag:hover,
.sport:hover { background: var(--bg-3); transform: scale(1.08); }
.flag.is-active,
.sport.is-active { border-color: var(--accent); background: var(--bg-3); }

/* "TÜMÜ" all-box: a labelled tile (not an emoji icon) at the top of the rail */
.sport--all {
  width: 40px; height: auto;
  padding: 5px 2px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--fg-dim);
  border-color: var(--line);
}
.sport--all.is-active { color: #fff; border-color: var(--accent); background: var(--bg-3); }

/* Red "N MAÇ" count badge at the top of the sport rail (filtered total) */
.sportcount {
  display: block;
  width: 40px;
  text-align: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.2;
  padding: 4px 2px;
  border-radius: 6px;
  margin-bottom: 2px;
}
.sportcount[hidden] { display: none; }

/* Match-panel search box (between the tabs and the rails) */
.side__search { padding: 8px; border-bottom: 1px solid var(--line); }
.side__search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-family: var(--font-body, inherit);
  font-size: 12.5px;
  padding: 7px 10px;
  transition: border-color .15s;
}
.side__search input::placeholder { color: var(--fg-mute); }
.side__search input:focus { outline: none; border-color: var(--accent); }

/* panes */
.side__pane { display: none; flex: 1; min-width: 0; }
.side__pane.is-active { display: block; }

/* playlist */
.playlist {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}
.playlist__msg { color: var(--fg-mute); font-family: var(--font-mono); font-size: 12px; padding: 16px; text-align: center; }
.pl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.pl-item:hover { background: var(--bg-2); }
.pl-item.is-playing { background: var(--bg-2); border-color: var(--accent); }
.pl-item__logo {
  width: 38px; height: 30px; flex-shrink: 0;
  background: var(--bg-3); border-radius: 5px;
  display: grid; place-items: center; overflow: hidden;
}
.pl-item__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pl-item__logo .ph { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--fg-mute); }
.pl-item__meta { min-width: 0; flex: 1; }
.pl-item__name {
  font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-item__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); letter-spacing: .3px; }
.pl-item__fav {
  flex-shrink: 0; background: transparent; border: 0; color: var(--fg-mute);
  font-size: 15px; padding: 2px 4px; transition: color .12s, transform .12s;
}
.pl-item__fav:hover { transform: scale(1.2); }
.pl-item__fav.is-fav { color: var(--accent-2); }

/* empty state (VOD) */
.emptystate {
  display: grid; place-items: center; gap: 8px;
  min-height: 220px; text-align: center; color: var(--fg-mute);
  padding: 30px;
}
.emptystate__icon { font-size: 34px; opacity: .6; }
.emptystate p { margin: 0; font-family: var(--font-mono); font-size: 12.5px; }

/* EPG / description */
.epg {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  background: var(--bg);
}
.epg__title {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 1.5px; color: var(--accent); margin-bottom: 6px;
}
.epg__text { margin: 0; font-size: 13px; color: var(--fg-dim); line-height: 1.5; }

/* match (program) info inside the EPG panel */
.match { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--fg); }
.match__logo { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.match__name { font-weight: 500; }
.match__vs { color: var(--fg-dim); }

/* ============================ AD STRIP ============================ */
.media-strip .media-slot { min-height: 110px; }

/* Top promo strip is hidden until admin content is injected. */
.media-strip--top { margin-top: var(--gap); }
.media-strip--top #slotTop:empty { min-height: 0; }
.media-strip--top:has(#slotTop:empty) { display: none; }

/* ============================ NEWS ============================ */
.section-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: 1.5px; color: var(--fg); margin: 4px 0;
}
.section-title span { white-space: nowrap; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.newscard {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  transition: border-color .15s, transform .15s;
}
.newscard:hover { border-color: var(--bg-3); transform: translateY(-2px); }
.newscard__tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
  padding: 2px 6px; margin-bottom: 9px;
}
.newscard h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 15.5px; line-height: 1.25; }
.newscard p { margin: 0; font-size: 13px; color: var(--fg-dim); }

/* FOOTER */
.foot {
  text-align: center; color: var(--fg-mute);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .3px;
  padding: 20px 0 8px;
}
.foot span:first-child { color: var(--fg-dim); font-weight: 700; }
.foot__muted { opacity: .7; }

/* ============================ BOTTOM NAV (mobile) ============================ */
.bottomnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bnav {
  flex: 1; background: transparent; border: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--fg-mute);
  font-family: var(--font-display); font-size: 11px; letter-spacing: .5px;
}
.bnav span { font-size: 18px; line-height: 1; }
.bnav.is-active { color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* hide side ad rails earlier when they get cramped */
@media (max-width: 1180px) {
  /* single flexible column (1fr fills; minmax(0,maxw) would collapse to content) */
  .page { grid-template-columns: minmax(0, 1fr); }
  .center { grid-column: 1; }
  .media-rail { display: none; }
}

/* tablet / mobile: <= 768px */
@media (max-width: 768px) {
  body { padding-bottom: 64px; } /* room for bottom nav */
  .page { padding: 12px; gap: 12px; }
  .center { gap: 12px; }

  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .menu { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .topbar__search { flex: 1; }
  .topbar__search input { width: 100%; }
  .topbar__search input:focus { width: 100%; }

  /* player + side stack: side BELOW player */
  .stage { grid-template-columns: 1fr; }
  .side { align-self: auto; }
  .playlist, .flagrail, .sportrail { max-height: 320px; }

  /* news single column */
  .news__grid { grid-template-columns: 1fr; }

  /* mobile bottom nav */
  .bottomnav { display: flex; }

  /* carousel arrows smaller */
  .carousel__nav { width: 28px; }
}

@media (max-width: 480px) {
  .ticker__label { font-size: 11px; padding: 0 10px 0 10px; padding-right: 18px; }
  .brand__name { font-size: 19px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Kayan bant + skor bandı temel içerik — reduced-motion'da bile aksın. */
  .brand__live, .player__nowplaying.is-live .np__dot { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ===================== Maçlar (match broadcasts) ===================== */
.matches { margin-top: 26px; }
.matches__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.matches__tabs { display: flex; gap: 6px; }
.mtab {
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  padding: 7px 14px; border-radius: 999px; color: var(--fg-dim);
  background: var(--bg-2); border: 1px solid var(--line); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.mtab:hover { color: var(--fg); }
.mtab.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.matches__league {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
.matches__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.matches__empty { color: var(--fg-dim); padding: 18px 4px; }
@media (max-width: 680px) {
  .matches__grid { grid-template-columns: 1fr; }
}

/* Promo slot image (Media URL girilince) — alana sığsın */
.slot-img { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm, 6px); }

/* ===================== Compact one-line match rows ===================== */
/* Reference sports-site style: many matches per screen. One row =
   [home logo] [time/sport · league · team names] [away logo]. */
.sidematches { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto; }
.matchrow {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  border-radius: var(--r-sm, 7px);
}
.matchrow:last-child { border-bottom: 0; }
.matchrow:hover,
.matchrow:focus-visible { background: var(--bg-2); outline: none; }
.matchrow:focus-visible { box-shadow: inset 0 0 0 1px var(--line); }

.matchrow__logo {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); font-size: 15px; flex: 0 0 28px;
}
.matchrow__logo img { width: 100%; height: 100%; object-fit: contain; }

.matchrow__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.matchrow__top {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-dim); white-space: nowrap;
}
.matchrow__lead { font-family: var(--font-display); font-weight: 600; }
.matchrow__lead.matchrow__live { color: var(--live); }
.matchrow__pin { font-size: 11px; }
.matchrow__play { margin-left: auto; color: var(--accent); font-size: 11px; }

.matchrow__league {
  font-size: 11px; color: var(--fg-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.matchrow__teams {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 12.5px; color: var(--fg); font-weight: 500;
}
.matchrow__team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matchrow__team--away { text-align: right; }

/* ===================== Modal (kanal bulunamadı vb.) ===================== */
.tvmodal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(2px);
  padding: 20px;
}
.tvmodal[hidden] { display: none; }
.tvmodal__box {
  position: relative;
  width: min(420px, 100%);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 22px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.tvmodal__close {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: 0; color: var(--fg-mute);
  font-size: 24px; line-height: 1; padding: 4px 8px; border-radius: 6px;
  transition: color .12s, background .12s;
}
.tvmodal__close:hover { color: var(--fg); background: var(--bg-3); }
.tvmodal__title {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: .4px; color: #fff; margin: 0 24px 10px 0;
}
.tvmodal__body { color: var(--fg-dim); font-size: 14px; line-height: 1.5; }