/*
 * LiveTV.eu - premium laag (Golden Master fase 2 + 3).
 *
 * Deze stylesheet bouwt voort op de tokens uit style.css en voegt de nieuwe
 * chrome (header, hero-carousel, control center, wereldkaart, guide, sport,
 * command palette, mini-speler) toe. Er wordt niets uit style.css of home.css
 * verwijderd; beide blijven gewoon werken.
 *
 * Alle maten zijn logisch (inline-start/end) zodat de Arabische RTL-variant
 * zonder extra regels klopt. Beweging is subtiel en respecteert
 * prefers-reduced-motion.
 */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui-ic{width:18px;height:18px;flex:0 0 auto}
kbd{font:inherit;font-size:.68rem;font-weight:700;background:rgba(255,255,255,.08);border:1px solid var(--line-2);
  border-radius:6px;padding:1px 5px;color:#cfe2ff}

/* ------------------------------------------------------------- topbar (compact) */

.topbar{transition:padding .2s ease,background .2s ease,box-shadow .2s ease}
.topbar-inner{row-gap:10px}
body.is-scrolled .topbar{background:rgba(4,8,16,.94);box-shadow:0 10px 30px rgba(0,0,0,.45)}
body.is-scrolled .topbar-inner{padding-top:8px;padding-bottom:8px}
body.is-scrolled .mainnav a{padding-top:9px;padding-bottom:9px}

/* --------------------------------------------- merk: Golden Master-logo ===
 * Het echte masterbestand (brand/golden-master/LIVETV-EU-GOLDEN-LOGO-MASTER.png
 * in de leveringsmap) wordt hier getoond als niet-destructief web-derivaat uit
 * assets/img/brand/. Geen SVG-nabouw, geen tekstlogo, geen crop.
 *
 * Het derivaat is exact 3:1 (2172x724 -> 543x181). Omdat alleen de breedte
 * wordt gezet en de hoogte automatisch volgt, kan de verhouding nooit
 * vervormen en blijft de tagline "WATCH TV FROM AROUND THE WORLD" altijd
 * volledig in beeld - ook op mobiel.
 */

.brand{position:relative}
.brand-lockup{display:block;line-height:0}
.brand-img{display:block;width:150px;height:auto;max-width:100%;
  transition:width .2s ease,filter .2s ease}
.brand:hover .brand-img,.brand:focus-visible .brand-img{filter:brightness(1.07)}
body.is-scrolled .brand-img{width:134px}
@media (min-width:760px){.brand-img{width:164px}}
@media (min-width:760px){body.is-scrolled .brand-img{width:148px}}
@media (min-width:1024px){.brand-img{width:180px}}
@media (min-width:1024px){body.is-scrolled .brand-img{width:156px}}

.topsearch{padding:5px 5px 5px 42px}
.cmdk-hint{display:none;align-items:center;gap:3px;background:transparent;border:0;cursor:pointer;padding:6px}
.cmdk-hint:hover kbd{border-color:var(--accent);color:#fff}
@media (min-width:900px){.cmdk-hint{display:inline-flex}}

.langpick{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:0 6px 0 10px}
.langpick:hover{border-color:var(--line-2)}
.langpick .globeico{display:inline-flex;color:var(--muted)}
.langpick select{appearance:none;background:transparent;border:0;color:var(--text);font:inherit;font-size:.82rem;
  padding:8px 2px;cursor:pointer;max-width:132px}
.langpick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langpick option{background:#0b1526;color:#eaf2ff}
.langgo{border:0;background:var(--accent);color:#04121a;border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer}

.actiontext{white-space:nowrap}
.actionlink.icononly{padding:8px 10px}
.livetick{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 4px rgba(255,61,113,.18);
  animation:ltvpulse 2s infinite;margin-inline-start:-4px}
.actionlink.newsletter{border-color:rgba(0,224,198,.35);color:#9ff5e9}
.actionlink.newsletter:hover{border-color:var(--accent-2);color:#fff}
@media (max-width:899px){
  .actiontext{display:none}
  .favlink .actiontext,.newsletter .actiontext{display:none}
  .langpick select{max-width:96px}
}

/* --------------------------------------------------------- hoofdnavigatie */

.mainnav-inner{justify-content:space-between}
.mainnav a{display:inline-flex;align-items:center;gap:9px;padding:12px 15px;border-radius:12px 12px 0 0}
.mainnav a .nav-ic{width:17px;height:17px;opacity:.85}
.mainnav a:hover .nav-ic{opacity:1}
.mainnav a[aria-current="page"]{background:linear-gradient(180deg,rgba(47,157,255,.22),rgba(47,157,255,.04));
  border-bottom-color:var(--accent);border-radius:12px 12px 0 0}
.navrandom{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);
  color:#d6e7ff;border-radius:999px;padding:7px 14px;font-size:.85rem;cursor:pointer;white-space:nowrap}
.navrandom:hover{border-color:var(--accent);color:var(--accent)}
.navrandom .nav-ic{width:16px;height:16px}
@media (max-width:899px){.navrandom{display:none}}

/* ------------------------------------------------------------- trending */

.trendbar{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(9,18,32,.82),rgba(6,12,22,.6))}
.trendbar-inner{display:flex;align-items:center;gap:14px;padding:9px 18px;overflow-x:auto;scrollbar-width:none}
.trendbar-inner::-webkit-scrollbar{display:none}
.trendbar-label{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.trendbar-label .trend-ic{width:15px;height:15px;color:var(--warn)}
.trendbar-list{list-style:none;display:flex;gap:8px;margin:0;padding:0;white-space:nowrap}
.trendbar-list a{display:block;padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  font-size:.82rem;color:#cfe0f8;background:rgba(12,24,42,.6)}
.trendbar-list a:hover{border-color:var(--accent);color:#fff;background:rgba(47,157,255,.14)}
.trendbar-live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:#ffd9e3;white-space:nowrap}
.trendbar-live i{width:8px;height:8px;border-radius:50%;background:var(--hot);animation:ltvpulse 2s infinite}

.globalnote{background:rgba(47,157,255,.08);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-top:12px}

/* ======================================================= hero-carousel ==== */

.hero-carousel{position:relative;margin:22px 0 8px}
.hero-carousel-frame{position:relative;border:1px solid var(--line);border-radius:28px;overflow:hidden;
  background:linear-gradient(160deg,rgba(16,30,52,.94),rgba(5,10,20,.98));box-shadow:var(--shadow)}
.hc-track{display:flex;transition:transform .62s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hc-slide{position:relative;flex:0 0 100%;min-width:100%;display:grid;gap:26px;padding:34px 28px 88px;
  background:radial-gradient(900px 460px at 10% -12%,rgba(47,157,255,.30),transparent 62%),
             radial-gradient(760px 420px at 92% 6%,rgba(0,224,198,.16),transparent 60%)}
.hc-slide::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(620px 340px at 76% 32%,#000 18%,transparent 78%);
  mask-image:radial-gradient(620px 340px at 76% 32%,#000 18%,transparent 78%)}
.hc-media{position:absolute;inset:0;pointer-events:none}
.hc-glow{position:absolute;inset:0;background:var(--hc-glow,radial-gradient(760px 420px at 78% 22%,rgba(47,157,255,.32),transparent 66%))}
.hc-globe{position:absolute;inset-inline-end:-6%;top:-18%;width:min(720px,72%);aspect-ratio:1;border-radius:50%;
  background:url("/assets/img/world.svg") center/contain no-repeat;opacity:.3;
  filter:drop-shadow(0 0 34px rgba(47,157,255,.35));animation:hcdrift 26s ease-in-out infinite alternate}
@keyframes hcdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-14px,10px,0) scale(1.03)}}
.hc-copy{position:relative;z-index:1;max-width:680px;align-self:center}
.hc-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(255,61,113,.12);border:1px solid rgba(255,61,113,.4);
  color:#ffd6e1;border-radius:999px;padding:6px 14px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.hc-showreel{display:inline-flex;align-items:center;gap:8px;margin-inline-start:10px;color:var(--muted);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.hc-copy h1,.hc-copy h2{font-size:clamp(2rem,1.35rem + 3.2vw,3.9rem);font-weight:800;letter-spacing:-.035em;
  margin:16px 0 14px;line-height:1.04}
.hc-title-accent{display:block;background:linear-gradient(100deg,var(--accent) 5%,var(--accent-2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hc-lead{font-size:clamp(1rem,.95rem + .28vw,1.16rem);color:#c9daf4;max-width:56ch;margin:0 0 22px}
.hc-cta{display:flex;flex-wrap:wrap;gap:12px}
.hc-cta .btn{border-radius:999px;padding:13px 24px;display:inline-flex;align-items:center;gap:9px}
.hc-stats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:24px 0 0;
  padding:18px 0 0;border-top:1px solid var(--line)}
.hc-stats li{display:flex;align-items:center;gap:10px;min-width:0}
.hc-stats .st-ic{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:11px;
  background:rgba(47,157,255,.14);border:1px solid var(--line);color:#bfe0ff}
.hc-stats b{display:block;font-size:1.16rem;font-weight:800;letter-spacing:-.02em}
.hc-stats span{display:block;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.hc-livebadge{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:.12em;
  color:#ffd6e1;background:rgba(255,61,113,.16);border:1px solid rgba(255,61,113,.42);border-radius:6px;padding:2px 7px}
.hc-livebadge i{width:6px;height:6px;border-radius:50%;background:var(--hot);animation:ltvpulse 2s infinite}

.hc-controls{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:center;gap:14px;padding:14px 22px;
  background:linear-gradient(0deg,rgba(4,9,18,.92),transparent);z-index:2}
.hc-progress{position:absolute;inset-inline:0;top:0;height:2px;background:rgba(255,255,255,.08)}
.hc-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.hc-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:rgba(9,18,32,.9);
  color:var(--text);cursor:pointer;display:grid;place-items:center}
.hc-arrow:hover{border-color:var(--accent);color:var(--accent)}
.hc-dots{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.hc-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.16);cursor:pointer}
.hc-dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent);width:26px;border-radius:99px}
.hc-pause{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:rgba(9,18,32,.9);
  color:var(--text);cursor:pointer;display:grid;place-items:center}
.hc-pause:hover{border-color:var(--accent);color:var(--accent)}

.hc-aside{position:relative;z-index:1;display:grid;gap:12px;align-self:stretch}
.hc-feature{position:relative;display:grid;gap:6px;padding:16px;border-radius:20px;border:1px solid var(--line-2);
  background:linear-gradient(140deg,rgba(14,28,48,.92),rgba(7,14,26,.9));overflow:hidden}
.hc-feature::before{content:"";position:absolute;inset:0;opacity:.9;
  background:var(--hc-glow,radial-gradient(320px 160px at 80% 0%,rgba(47,157,255,.35),transparent 70%))}
.hc-feature>*{position:relative}
.hc-feature .hc-tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#7ff0e2}
.hc-feature b{font-size:1.02rem}
.hc-feature span{font-size:.84rem;color:var(--muted)}
.hc-rail{display:grid;gap:10px}
.hc-side{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;border:1px solid var(--line);
  background:rgba(11,22,38,.72);transition:border-color .16s ease,transform .16s ease}
.hc-side:hover{border-color:var(--line-2);transform:translateY(-2px);color:var(--text)}
.hc-side-logo{width:46px;height:46px;flex:0 0 46px;border-radius:13px;overflow:hidden;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line)}
.hc-side-logo img{width:100%;height:100%;object-fit:contain;padding:4px}
.hc-side-logo .ini{background:linear-gradient(135deg,var(--accent),var(--accent-2));width:100%;height:100%;
  display:grid;place-items:center;font-weight:800;color:#04121a;font-size:.9rem}
.hc-side-meta{min-width:0;flex:1}
.hc-side-meta b{display:block;font-size:.92rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-side-meta span{display:block;font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-side-play{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(47,157,255,.18);border:1px solid var(--line-2);color:#cfe6ff}

@media (min-width:900px){
  .hero-carousel-frame{border-radius:30px}
  .hc-slide{grid-template-columns:1.08fr .92fr;gap:34px;padding:46px 44px 92px;align-items:center}
  .hc-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:899px){
  .hc-slide{padding:26px 18px 84px}
  .hc-globe{inset-inline-end:-18%;top:-8%;width:112%}
  .hc-rail{grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .hc-side{scroll-snap-align:start}
  .hc-showreel{display:none}
}

/* ============================================================ live pulse == */

.pulse{margin:26px 0}
.pulse-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.pulse-region{position:relative;display:block;padding:16px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(16,30,52,.78),rgba(8,15,28,.86));overflow:hidden}
.pulse-region:hover{border-color:var(--line-2);color:var(--text);transform:translateY(-3px)}
.pulse-region .pr-ic{width:30px;height:30px;color:var(--accent)}
.pulse-region b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-top:10px}
.pulse-region span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pulse-region i{position:absolute;inset-inline-end:14px;top:14px;width:9px;height:9px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 5px rgba(53,208,127,.16);animation:ltvpulse 2.4s infinite}
.pulse-region::after{content:"";position:absolute;inset:auto -20% -60% auto;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(47,157,255,.22),transparent)}

/* ========================================================= control center = */

.cc{margin:26px 0}
.cc-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cc-tile{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(17,31,54,.72),rgba(8,15,28,.8));transition:transform .16s ease,border-color .16s ease}
.cc-tile:hover{transform:translateY(-3px);border-color:var(--line-2);color:var(--text)}
.cc-tile .cc-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(47,157,255,.14);border:1px solid var(--line);color:#bfe0ff}
.cc-tile .cc-ic.is-hot{background:rgba(255,61,113,.14);border-color:rgba(255,61,113,.4);color:#ffc9d8}
.cc-tile .cc-ic.is-ok{background:rgba(53,208,127,.14);border-color:rgba(53,208,127,.38);color:#b6f2d3}
.cc-tile b{display:block;font-size:.95rem;line-height:1.25}
.cc-tile span{display:block;font-size:.78rem;color:var(--muted)}
@media (min-width:760px){.cc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1366px){.cc-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:759px){.cc-tile{padding:12px}.cc-tile .cc-ic{width:34px;height:34px;flex-basis:34px}}

/* ======================================================= premium cards ==== */

.chnl-card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(12,22,38,.92),rgba(6,12,22,.97));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.chnl-card:hover{transform:translateY(-4px);border-color:rgba(47,157,255,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(47,157,255,.16);color:var(--text)}
/* 16:9 media met eigen sfeerbeeld; het echte zenderlogo blijft het middelpunt */
.chnl-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#05090f}
.chnl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
  transition:transform .55s cubic-bezier(.2,.6,.2,1),opacity .25s ease}
.chnl-card:hover .chnl-bg{transform:scale(1.03);opacity:.72}
.chnl-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,9,18,.24) 12%,rgba(4,9,18,.58) 62%,rgba(4,9,18,.88) 100%)}
.chnl-logo{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:15px;
  overflow:hidden;display:grid;place-items:center;background:#fff;border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 26px rgba(0,0,0,.55)}
.chnl-logo img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff}
.chnl-logo .ini{width:100%;height:100%;display:grid;place-items:center;font-weight:800;color:#05121f;font-size:.95rem}
/* badges liggen op de media maar buiten de decoratieve link (toegankelijk) */
.chnl-flags{position:absolute;top:10px;inset-inline-end:10px;display:flex;flex-wrap:wrap;gap:5px;
  justify-content:flex-end;max-width:78%;z-index:2}
.chnl-body{display:flex;flex-direction:column;gap:5px;padding:11px 13px 13px}
.chnl-body h3{margin:0;font-size:.97rem;line-height:1.28;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.chnl-sub{display:flex;align-items:center;gap:7px;font-size:.79rem;color:var(--muted);min-width:0}
.chnl-sub .flag{width:20px;height:14px;border-radius:4px;flex:0 0 20px}
.chnl-sub .flag-fallback{width:20px;height:14px;border-radius:4px;font-size:.55rem}
.chnl-sub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chnl-badge{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;border-radius:999px;padding:3px 8px;border:1px solid rgba(255,255,255,.16);color:#dbe9ff;
  background:rgba(5,12,22,.62);backdrop-filter:blur(6px)}
.chnl-badge.is-live{color:#ffd6e1;background:rgba(255,61,113,.22);border-color:rgba(255,61,113,.45)}
.chnl-badge.is-live i{width:6px;height:6px;border-radius:50%;background:var(--hot);animation:ltvpulse 2s infinite}
.chnl-badge.is-ok{color:#b6f2d3;background:rgba(53,208,127,.18);border-color:rgba(53,208,127,.4)}
.chnl-badge.is-warn{color:#ffdca8;background:rgba(255,176,32,.18);border-color:rgba(255,176,32,.4)}
.chnl-badge.is-dim{color:#dbe9ff;background:rgba(120,166,224,.14);border-color:rgba(120,166,224,.28)}
.chnl-foot{display:flex;align-items:center;gap:8px;margin-top:5px}
.chnl-watch{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#04121a;background:linear-gradient(135deg,var(--accent),#1c7de0);
  border-radius:999px;padding:8px 14px;transition:filter .16s ease,transform .16s ease}
.chnl-card:hover .chnl-watch{filter:brightness(1.09)}
.heart-btn{margin-inline-start:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:rgba(9,18,32,.7);color:#cfe0f8;cursor:pointer;display:grid;place-items:center;transition:color .16s ease,border-color .16s ease,transform .16s ease}
.heart-btn:hover{border-color:var(--hot);color:var(--hot);transform:scale(1.06)}
.heart-btn.on{color:var(--hot);border-color:rgba(255,61,113,.55);background:rgba(255,61,113,.14)}
.heart-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
.heart-btn.on svg{fill:currentColor;stroke:currentColor}

/* ============================================ cinematische kaarten (fase 4)
 * Collecties, categorieen en landen delen één kaart: 16:9 eigen sfeerbeeld,
 * donkere onderkant, klein icoon, titel, echte aantallen en een rustige CTA.
 * Geen felle HSL-vlakken meer; de afbeelding draagt de kleur, het palet blijft
 * diep marineblauw met één accent.
 */

.cine-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.cine-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.cine-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.cine-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  aspect-ratio:16/9;padding:12px 13px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:#060b14;color:#fff;isolation:isolate;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.cine-card:hover,.cine-card:focus-visible{transform:translateY(-4px);border-color:rgba(47,157,255,.55);color:#fff;
  box-shadow:0 20px 44px rgba(0,0,0,.5),0 0 0 1px rgba(47,157,255,.2)}
.cine-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.cine-card:hover .cine-img{transform:scale(1.03)}
.cine-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(3,8,16,0) 34%,rgba(3,8,16,.5) 66%,rgba(3,8,16,.92) 100%),
  radial-gradient(120% 90% at 100% 0%,rgba(47,157,255,.14),transparent 62%)}
.cine-top{position:relative;z-index:2;margin-bottom:auto;display:flex;align-items:center;gap:8px}
.cine-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#eaf3ff;
  background:rgba(5,12,22,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.cine-ic svg{width:18px;height:18px}
.cine-flag{display:inline-flex;line-height:0}
.cine-flag .flag,.cine-flag .flag-fallback{width:28px;height:19px;border-radius:5px;
  box-shadow:0 5px 14px rgba(0,0,0,.55)}
.cine-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:1px;min-width:0}
.cine-title{display:block;font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cine-meta{display:block;font-size:.77rem;color:#b9cbe4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-inline-end:84px}
.cine-cta{position:absolute;bottom:11px;inset-inline-end:11px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;color:#dceaff;background:rgba(6,14,26,.7);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 10px;backdrop-filter:blur(6px);
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.cine-arrow{width:13px;height:13px;flex:0 0 13px;transition:transform .18s ease}
.cine-card:hover .cine-cta{background:linear-gradient(135deg,var(--accent),#1c7de0);color:#04121a;
  border-color:transparent}
.cine-card:hover .cine-cta .cine-arrow{transform:translateX(2px)}
[dir="rtl"] .cine-arrow{transform:scaleX(-1)}
[dir="rtl"] .cine-card:hover .cine-cta .cine-arrow{transform:translateX(-2px) scaleX(-1)}
.cine-bar{position:absolute;inset:auto 0 0 0;z-index:3;height:3px;background:rgba(255,255,255,.10)}
.cine-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.cine-card--country{padding-bottom:15px}
@media (max-width:560px){
  .cine-card{padding:10px 11px}
  .cine-title{font-size:.92rem}
  .cine-cta{padding:6px;border-radius:50%}
  .cine-cta .cine-label{display:none}
  .cine-meta{padding-inline-end:40px}
  .cine-ic{width:30px;height:30px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .cine-card:hover{transform:none}
  .cine-card:hover .cine-img{transform:none}
}

.tile-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* ==================================================== world discovery ===== */

.discovery{position:relative;margin:34px 0;padding:26px 20px;border-radius:28px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(900px 460px at 78% 8%,rgba(47,157,255,.18),transparent 62%),
             linear-gradient(155deg,rgba(13,26,46,.94),rgba(5,10,20,.98))}
.discovery-inner{display:grid;gap:24px;align-items:center}
.discovery-copy h2{margin:0 0 10px;font-size:clamp(1.4rem,1.15rem + 1.2vw,2.2rem)}
.discovery-copy p{color:#c6d8f2;max-width:52ch}
.map-wrap{position:relative;overflow:hidden}
.map-wrap img{width:100%;opacity:.55;filter:drop-shadow(0 0 26px rgba(47,157,255,.3))}
.map-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;
  background:rgba(6,14,26,.86);border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;
  font-size:.76rem;color:#dceaff;white-space:nowrap;backdrop-filter:var(--glass)}
.map-pin b{font-weight:800}
.map-pin:hover{border-color:var(--accent);color:#fff;background:rgba(47,157,255,.24)}
.map-pin i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(47,157,255,.18)}
.map-pin.is-hot i{background:var(--hot);box-shadow:0 0 0 4px rgba(255,61,113,.18)}
.region-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.region-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;
  border-radius:13px;border:1px solid var(--line);background:rgba(12,24,42,.6)}
.region-list a{display:flex;align-items:baseline;gap:10px;width:100%;justify-content:space-between}
.region-list span{font-size:.9rem}
.region-list i{display:block;font-size:.72rem;color:var(--muted);font-style:normal}
.region-list b{font-size:.95rem}
@media (min-width:900px){
  .discovery{padding:34px 32px}
  .discovery-inner{grid-template-columns:1.02fr .98fr;gap:32px}
}

/* ======================================================= live tv radar ==== */

.radar{position:relative;margin:34px 0;padding:22px;border-radius:26px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(760px 380px at 50% 120%,rgba(0,224,198,.14),transparent 66%),
             linear-gradient(180deg,rgba(8,17,31,.9),rgba(5,10,20,.96))}
.radar-stage{position:relative;overflow:hidden}
.radar-stage img{width:100%;opacity:.34}
.radar-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(47,157,255,.5);animation:radarping 3.2s ease-out infinite;transform:translate(-50%,-50%)}
.radar-dot.is-ok{background:var(--ok);box-shadow:0 0 0 0 rgba(53,208,127,.5)}
.radar-dot.is-hot{background:var(--hot);box-shadow:0 0 0 0 rgba(255,61,113,.5)}
.radar-dot span{position:absolute;inset-inline-start:14px;top:-4px;font-size:.7rem;color:#cfe0f8;white-space:nowrap;opacity:0;transition:opacity .16s ease}
.radar-dot:hover span,.radar-dot:focus-visible span{opacity:1}
@keyframes radarping{0%{box-shadow:0 0 0 0 rgba(47,157,255,.4)}70%{box-shadow:0 0 0 14px rgba(47,157,255,0)}100%{box-shadow:0 0 0 0 rgba(47,157,255,0)}}
.radar figcaption{margin-top:12px;font-size:.82rem;color:var(--muted)}

/* ============================================================ tv guide ==== */

.guide{margin:34px 0}
.guide-tabs{display:inline-flex;gap:6px;padding:5px;border-radius:999px;border:1px solid var(--line);
  background:rgba(10,20,36,.7)}
.guide-tabs button{border:0;background:transparent;color:#c7d8f2;font:inherit;font-size:.86rem;font-weight:600;
  border-radius:999px;padding:7px 18px;cursor:pointer}
.guide-tabs button[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),#1c7de0);color:#04121a}
.guide-panel[hidden]{display:none}
.guide-table{width:100%;border-collapse:collapse;font-size:.9rem}
.guide-table th{display:none}
.guide-table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.guide-table tr:last-child td{border-bottom:0}
.guide-time{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;width:64px}
.guide-prog{color:#eaf2ff}
.guide-chnl{display:flex;align-items:center;gap:9px;min-width:0}
.guide-chnl .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px}
.guide-empty{padding:14px;border:1px dashed var(--line-2);border-radius:14px;color:var(--muted);font-size:.88rem}

/* ============================================================ sports ====== */

.sports{margin:34px 0}
.sport-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(19,33,56,.72),rgba(9,17,30,.82))}
.sport-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.sport-card .sc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sport-card .sc-comp{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#7ff0e2}
.sport-card .sc-match{font-size:.98rem;font-weight:650;line-height:1.35}
.sport-card .sc-meta{font-size:.78rem;color:var(--muted)}
.sport-card .sc-result{font-size:.82rem;color:#cfe0f8}

/* ======================================================= language chips ==== */

.lang-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0}
.lang-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(12,24,42,.7);font-size:.86rem;color:#d6e7ff}
.lang-chip:hover{border-color:var(--accent);color:#fff;background:rgba(47,157,255,.16)}
.lang-chip b{font-weight:800}
.lang-chip span{font-size:.76rem;color:var(--muted)}

/* ======================================================= command palette === */

/* De skip-link stond 9999px buiten het kader; in RTL gaf dat horizontale
   scroll (scrollWidth ~ 10.000px). Hier blijft het toegankelijk en onzichtbaar. */
.skip{left:0;top:-100vh}
.skip:focus{left:8px;top:8px}

.cmdk{position:fixed;inset:0;z-index:120;display:grid;place-items:start center;padding:10vh 16px 16px}
.cmdk[hidden]{display:none}
.cmdk-backdrop{position:fixed;inset:0;background:rgba(3,7,14,.72);backdrop-filter:blur(6px)}
.cmdk-panel{position:relative;width:min(720px,100%);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(12,24,44,.98),rgba(6,12,22,.98));box-shadow:var(--shadow)}
.cmdk-field{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-field span{color:var(--muted);display:inline-flex}
.cmdk-field input{flex:1;min-width:0;background:transparent;border:0;color:var(--text);font:inherit;font-size:1.02rem;outline:none}
.cmdk-close{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:9px;cursor:pointer;
  display:grid;place-items:center;padding:5px}
.cmdk-close:hover{color:#fff;border-color:var(--line-2)}
.cmdk-body{max-height:min(56vh,460px);overflow:auto;padding:8px}
.cmdk-group{padding:10px 12px 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text)}
.cmdk-item .ci-ic{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(47,157,255,.14);border:1px solid var(--line);color:#bfe0ff;font-size:.72rem;font-weight:800}
.cmdk-item b{display:block;font-size:.94rem;font-weight:600}
.cmdk-item span{display:block;font-size:.78rem;color:var(--muted)}
.cmdk-item.is-active,.cmdk-item:hover{background:rgba(47,157,255,.16);color:#fff}
.cmdk-empty{padding:18px 14px;color:var(--muted);font-size:.9rem}
.cmdk-foot{display:flex;flex-wrap:wrap;gap:14px;padding:10px 16px;border-top:1px solid var(--line);
  font-size:.76rem;color:var(--muted)}
.cmdk-foot span{display:inline-flex;align-items:center;gap:6px}

/* ============================================ mini player / resume bar ==== */

.resumebar{position:fixed;inset-inline-end:18px;bottom:18px;z-index:100;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:16px;border:1px solid var(--line-2);background:rgba(7,15,28,.96);
  box-shadow:var(--shadow-soft);backdrop-filter:var(--glass);max-width:min(360px,86vw)}
.resumebar[hidden]{display:none}
.resumebar-link{display:flex;flex-direction:column;gap:2px;min-width:0}
.resumebar-live{display:inline-flex;align-items:center;gap:6px;font-size:.64rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#ffd6e1}
.resumebar-live i{width:6px;height:6px;border-radius:50%;background:var(--hot);animation:ltvpulse 2s infinite}
.resumebar-link b{font-size:.9rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resumebar-sub{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resumebar-close{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px;display:grid;place-items:center}
.resumebar-close:hover{color:#fff}

/* De kanaalspeler klapt vast aan de onderkant zodra je voorbij de speler scrolt. */
.playerdock{position:relative}
.player-anchor{display:block;height:0}
.playerdock.is-docked .player{position:fixed;inset-inline-end:18px;bottom:18px;width:min(360px,68vw);z-index:105;
  aspect-ratio:16/9;box-shadow:0 22px 50px rgba(0,0,0,.6);border-radius:16px}
.playerdock.is-docked .player .notice{padding:12px}
.playerdock.is-docked .player .notice h3{font-size:.95rem}
.playerdock.is-docked .player .notice p,.playerdock.is-docked .player .notice .btnrow{display:none}
.dockbar{position:fixed;inset-inline-end:18px;bottom:18px;z-index:104;display:flex;gap:6px;padding:6px;
  border-radius:12px;border:1px solid var(--line-2);background:rgba(7,15,28,.94)}
.dockbar[hidden]{display:none}
.dockbar button{border:1px solid var(--line);background:transparent;color:#cfe0f8;border-radius:9px;cursor:pointer;
  padding:6px 9px;display:grid;place-items:center}
.dockbar button:hover{border-color:var(--accent);color:#fff}
@media (max-width:899px){
  .playerdock.is-docked .player{inset-inline-end:10px;bottom:10px;width:min(320px,84vw)}
  .resumebar{inset-inline-end:10px;bottom:10px}
}

/* =========================================================== motion ======= */

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:12px;min-height:88px}
.skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  transform:translateX(-100%);animation:sweep 1.4s infinite}
@keyframes sweep{to{transform:translateX(100%)}}

.section-head h2{display:inline-flex;align-items:center;gap:10px}
.section-head h2 .ui-ic{width:20px;height:20px;color:var(--accent)}
.btn .ui-ic{width:17px;height:17px}
.hc-side-play .ui-ic{width:15px;height:15px}
.dockbar .ui-ic{width:16px;height:16px}
[dir="rtl"] .hc-arrow .ui-ic{transform:scaleX(-1)}
[dir="rtl"] .chnl-watch .ui-ic,[dir="rtl"] .dockbar a .ui-ic{transform:scaleX(-1)}
.stat-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px;color:var(--muted);font-size:.84rem}
.stat-line .pill{text-transform:none;letter-spacing:0;font-size:.8rem;padding:5px 12px}
.rail-wrap.has-nav .rail{padding-inline-end:8px}
.rail>.chnl-card,.rail>.tile,.rail>.sport-card{height:100%}

@media (max-width:520px){
  .hero-carousel-frame{border-radius:22px}
  .cc-grid,.pulse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pulse-region b{font-size:1.25rem}
  .cmdk{padding-top:6vh}
}

/* RTL: logische eigenschappen dekken het meeste af; deze regels corrigeren de rest. */
[dir="rtl"] .map-pin,[dir="rtl"] .radar-dot{transform:translate(50%,-50%)}

@media print{
  .topbar,.trendbar,.cmdk,.resumebar,.hc-controls,.rail-nav{display:none!important}
  body{background:#fff;color:#111}
}

/* ====================================================== fase 3: typografie ==
 * Rustiger ritme en een duidelijker hiërarchie: secties krijgen meer lucht,
 * koppen iets groter, metadata kleiner. Niets aan de tokens zelf veranderd,
 * zodat alle bestaande pagina's meelopen zonder hun eigen regels te breken.
 */

.section{margin:44px 0}
.section-head{margin-bottom:20px;gap:16px}
.section-head h2{font-size:clamp(1.34rem,1.1rem + .85vw,1.95rem);letter-spacing:-.028em}
.section-head .link-more{font-weight:600}
.eyebrow{letter-spacing:.2em;font-size:.72rem}
.stat-line{margin-bottom:18px}
.stat-line .pill{background:rgba(47,157,255,.10)}
.pulse{margin:44px 0}
.pulse .section-head{margin-bottom:16px}
.discovery{margin:44px 0}
.radar{margin:44px 0;padding:24px}

/* ==================================================== fase 3: header/merk ==
 * De tagline van het Golden Master-logo ("WATCH TV FROM AROUND THE WORLD")
 * werd afgekapt omdat de zoekkolom de merkbreedte opat. Hier krijgt het merk
 * zijn natuurlijke breedte en blijft het zoekveld gecentreerd met een plafond.
 */

@media (min-width:760px){
  .topbar-inner{grid-template-columns:auto minmax(220px,1fr) auto}
  .topsearch{max-width:620px;justify-self:center;width:100%}
}
@media (max-width:1439px){
  .newsletter .actiontext,.favlink .actiontext{display:none}
  .langpick select{max-width:112px}
}
.btn .ui-ic{width:16px;height:16px}
/* Het Golden Master-logo staat als afbeelding in de header, dus er is geen
   tracking-truc meer nodig om de tagline heel te houden. In de footer staat
   hetzelfde derivaat op een bewuste donkere "brand chip". */
.foot-lockup{display:inline-block;background:#000a14;border:1px solid var(--line);
  border-radius:16px;padding:10px 12px;box-shadow:var(--shadow-soft)}
.foot-lockup img{display:block;width:138px;height:auto}
.foot-lockup:hover{border-color:var(--line-2)}
@media (max-width:759px){.foot-lockup img{width:132px}}

/* ================================================= fase 3: featured live == */

.section-live .feature-live{position:relative;display:grid;gap:16px;align-items:center;padding:20px;
  border-radius:22px;border:1px solid var(--line-2);overflow:hidden;
  background:
    radial-gradient(680px 320px at 6% -40%,rgba(255,61,113,.16),transparent 62%),
    radial-gradient(720px 340px at 94% -10%,rgba(47,157,255,.22),transparent 62%),
    linear-gradient(150deg,rgba(18,32,54,.92),rgba(6,12,22,.96));
  box-shadow:var(--shadow-soft)}
.section-live .feature-live::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(420px 240px at 18% 0%,#000 12%,transparent 76%);
  mask-image:radial-gradient(420px 240px at 18% 0%,#000 12%,transparent 76%)}
.section-live .feature-live>*{position:relative;z-index:1}
.fl-visual{position:relative;width:104px;height:104px;flex:0 0 auto}
.fl-logo{display:grid;place-items:center;width:100%;height:100%;border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.42)}
.fl-logo img{width:100%;height:100%;object-fit:contain;padding:12px}
.fl-logo .ini{width:100%;height:100%;display:grid;place-items:center;font-weight:800;font-size:1.5rem;color:#05121f}
.fl-live{position:absolute;inset-inline-end:-10px;bottom:-10px;display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#ffd6e1;background:rgba(12,20,34,.94);border:1px solid rgba(255,61,113,.45);backdrop-filter:var(--glass)}
.fl-live i{width:6px;height:6px;border-radius:50%;background:var(--hot);animation:ltvpulse 2s infinite}
.fl-copy{min-width:0}
.fl-copy .eyebrow{margin-bottom:4px}
.fl-copy h3{margin:0 0 6px;font-size:clamp(1.2rem,1rem + .8vw,1.8rem);letter-spacing:-.024em}
.fl-copy h3 a{color:var(--text)}
.fl-copy h3 a:hover{color:var(--accent)}
.fl-meta{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:.86rem;color:var(--muted)}
.fl-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-meta .flag,.fl-meta .flag-fallback{width:24px;height:17px;border-radius:5px}
.fl-note{margin:0;color:#b9cbe4;font-size:.9rem;max-width:54ch}
.fl-actions{display:flex;align-items:center;gap:10px}
.fl-actions .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px}
.fl-actions .heart-btn{margin-inline-start:0;width:44px;height:44px}
@media (min-width:900px){
  .section-live .feature-live{grid-template-columns:auto minmax(0,1fr) auto;gap:28px;padding:26px 28px}
}
@media (max-width:899px){
  .section-live .feature-live{grid-template-columns:auto minmax(0,1fr)}
  .fl-visual{width:80px;height:80px}
  .fl-logo{border-radius:16px}
  .fl-actions{grid-column:1 / -1}
  .fl-actions .btn{width:100%;justify-content:center}
}

/* ============================ fase 4: kanaal- en sportkaarten (afwerking) == */

/* kanaalkaart: alleen de details die op de nieuwe opbouw aansluiten */
.chnl-watch.is-quiet{background:transparent;border:1px solid var(--line-2);color:#cfe0f8;font-weight:700;
  text-transform:none;letter-spacing:0;gap:6px}
.chnl-watch.is-quiet:hover{border-color:var(--accent);color:var(--accent)}
.chnl-watch.is-quiet .ui-ic{width:14px;height:14px;transition:transform .16s ease}
.chnl-card:hover .chnl-watch.is-quiet .ui-ic{transform:translateX(3px)}
[dir="rtl"] .chnl-card:hover .chnl-watch.is-quiet .ui-ic{transform:translateX(-3px) scaleX(-1)}

/* sport: één cinematische band boven de rails en de uitslagen */
.sports-hero{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line);
  padding:20px 18px 14px;margin-bottom:16px;background:#060b14}
.sports-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.sports-hero-scrim{position:absolute;inset:0;background:
  linear-gradient(115deg,rgba(3,8,16,.94) 10%,rgba(3,8,16,.55) 58%,rgba(3,8,16,.86)),
  radial-gradient(90% 70% at 82% 8%,rgba(0,224,198,.16),transparent 62%)}
.sports-hero-in{position:relative;z-index:2}
.sports-hero .section-head{margin-bottom:6px}
@media (min-width:900px){.sports-hero{padding:28px 28px 20px}}

/* uitslagenkaart: donker glas met een vleugje arena-atmosfeer */
.sport-card{position:relative;overflow:hidden;isolation:isolate}
.sport-card .sc-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.16}
.sport-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,10,20,.55),rgba(4,10,20,.86))}
.sport-card>*{position:relative;z-index:2}

/* De oude gradient-tegels (.tile) en .country-card zijn vervangen door
   .cine-card; die regels staan hierboven onder "cinematische kaarten". */

/* ==================================================== fase 3: world map === */

.discovery-copy .hero-cta{margin:22px 0 0}
.map-wrap{border:1px solid var(--line);border-radius:20px;background:
  radial-gradient(70% 60% at 62% 32%,rgba(47,157,255,.12),transparent 72%)}
.map-wrap img{opacity:.6}
.region-list{gap:10px;margin-top:20px}
.region-list li{padding:12px 14px;background:rgba(12,24,42,.55)}
.region-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot name count" "bar bar bar";
  align-items:center;gap:7px 12px}
.region-list .rl-dot{grid-area:dot;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(47,157,255,.15);animation:ltvpulse 2.6s infinite}
.region-list .rl-name{grid-area:name;font-size:.94rem;color:#dce9fb}
.region-list .rl-name i{font-size:.72rem}
.region-list b{grid-area:count;font-size:1rem;font-variant-numeric:tabular-nums}
.region-list .rl-bar{grid-area:bar;display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.region-list .rl-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.region-list li:hover{border-color:var(--line-2);background:rgba(47,157,255,.10)}

/* ======================================================== fase 3: radar === */

.radar-lead{margin:0;max-width:54ch;color:var(--muted);font-size:.86rem}
.radar-body{display:grid;gap:18px;align-items:center}
.radar-legend{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.radar-legend li{border:1px solid var(--line);border-radius:14px;background:rgba(12,24,42,.55)}
.radar-legend li:hover{border-color:var(--line-2);background:rgba(47,157,255,.10)}
.radar-legend a{display:flex;align-items:center;gap:11px;padding:11px 13px}
.radar-legend span{flex:1;min-width:0;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radar-legend b{font-size:1rem;font-variant-numeric:tabular-nums}
.radar-ping{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(47,157,255,.45);animation:radarping 3.2s ease-out infinite}
.radar-ping.is-ok{background:var(--ok);box-shadow:0 0 0 0 rgba(53,208,127,.45)}
.radar-ping.is-hot{background:var(--hot);box-shadow:0 0 0 0 rgba(255,61,113,.45)}
.radar-stage{border:1px solid var(--line);border-radius:20px;background:
  radial-gradient(60% 70% at 50% 40%,rgba(47,157,255,.10),transparent 72%),
  linear-gradient(180deg,rgba(8,17,31,.7),rgba(5,10,20,.9))}
.radar-stage img{opacity:.42}
@media (min-width:900px){
  .radar-body{grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);gap:24px}
}

/* =========================================== fase 3: rails en sportkaarten */

.rail{scrollbar-color:rgba(120,166,224,.32) transparent}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:rgba(120,166,224,.24);border-radius:99px}
.rail:hover::-webkit-scrollbar-thumb{background:rgba(120,166,224,.42)}
.tile-row.sport-results{margin-top:18px}
.sport-card{padding:15px}
.sport-card .sc-match{font-size:1rem}

/* ============================================= fase 5: finale wow-pass ====
 * Laatste visuele afwerking: rustiger sectieritme, rijkere cinematische
 * kaarten, een echt premium ogende mini-speler en nette focus-states. Alles is
 * additief: bestaande regels blijven staan zodat andere pagina's meelopen.
 * De meeste regels zijn op de homepage gescoped via body.home.
 */

/* ---- focus, selectie ---- */
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cine-card:focus-visible,.lang-chip:focus-visible,.region-list a:focus-visible{outline-offset:5px}
::selection{background:rgba(47,157,255,.34)}

/* ---- sectieritme en koppen ---- */
.home .section{margin:52px 0}
.home .section-head{margin-bottom:22px}
.home .section-head h2{letter-spacing:-.032em}
.home .eyebrow{display:inline-flex;align-items:center;gap:8px}
.home .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),rgba(47,157,255,0))}
.home .stat-line{color:#a9bdd8}
.home .link-more{display:inline-flex;align-items:center;gap:6px}
.home .link-more:hover{color:#fff}

/* ---- cinematische kaarten (collecties, categorieen, landen) ---- */
.cine-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.cine-card:hover,.cine-card:focus-visible{box-shadow:0 26px 60px rgba(0,0,0,.55)}
.cine-card .cine-scrim{background:linear-gradient(180deg,rgba(3,8,16,.02) 0%,rgba(3,8,16,.52) 52%,rgba(3,8,16,.94) 100%)}
.cine-card .cine-title{letter-spacing:-.015em}
.cine-card .cine-top{transition:transform .22s ease}
.cine-card:hover .cine-top{transform:translateY(-2px)}

/* ---- rails ---- */
.rail{gap:14px;scroll-snap-type:x proximity}
.rail>*{scroll-snap-align:start}
.shelf-card,.chnl-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.shelf-card:hover,.chnl-card:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 20px 44px rgba(0,0,0,.5)}
.rail:hover::-webkit-scrollbar-thumb{background:rgba(120,166,224,.42)}

/* ---- wereldkaart, regio's, taalchips ---- */
.home .map-pin{transition:transform .18s ease,background .18s ease,border-color .18s ease}
.home .map-pin:hover{transform:translate(-50%,-50%) scale(1.05)}
[dir="rtl"] .home .map-pin:hover{transform:translate(50%,-50%) scale(1.05)}
.home .region-list li{transition:border-color .18s ease,background .18s ease}
.home .region-list li:hover{border-color:rgba(47,157,255,.5)}
.home .lang-chip{transition:transform .18s ease,border-color .18s ease,background .18s ease}
.home .lang-chip:hover{transform:translateY(-2px)}
.home .cc-tile{transition:transform .18s ease,border-color .18s ease,background .18s ease}
.home .cc-tile:hover{transform:translateY(-2px)}
.home .guide-table tbody tr:hover{background:rgba(47,157,255,.07)}

/* ---- mini-speler: "ga verder kijken" als echt premium dockje ---- */
.resumebar{position:fixed;gap:12px;padding:11px 12px 11px 15px;border-radius:18px;overflow:hidden;
  border-color:rgba(47,157,255,.34);
  background:linear-gradient(150deg,rgba(13,26,46,.97),rgba(5,10,20,.98));
  box-shadow:0 22px 48px rgba(0,0,0,.55);animation:ltvslide .38s ease both}
.resumebar::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--hot))}
.resumebar:hover{border-color:rgba(47,157,255,.6)}
.resumebar-link b{font-size:.92rem;font-weight:700;color:#fff}
.resumebar-sub{font-size:.75rem}
.resumebar-close{border-radius:8px;transition:background .16s ease,color .16s ease}
.resumebar-close:hover{background:rgba(255,255,255,.08)}
@keyframes ltvslide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .resumebar{padding:9px 10px 9px 12px;max-width:min(300px,92vw)}
  .resumebar-live{display:none}
}

@media (prefers-reduced-motion:reduce){
  .resumebar{animation:none}
  .cine-card:hover,.shelf-card:hover,.chnl-card:hover,.lang-chip:hover,.home .cc-tile:hover,
  .home .map-pin:hover{transform:none}
}


/* ============================== fase 6 (Golden Master 3): compacte header ==
 * - Het masterlogo heeft een donker plateau (#000a14); de topbar krijgt exact
 *   die kleur, zodat logo en balk naadloos één vlak vormen.
 * - Mobiel: één rij van ~60px (logo, zoeken, menu). Zoekveld, taal, favorieten
 *   en nieuwsbrief verschijnen pas als het menu open is.
 * - De trendingstrip staat buiten de sticky header (header.php) en is op
 *   mobiel verborgen.
 */
.topbar{background:#000a14;backdrop-filter:none;-webkit-backdrop-filter:none}
body.is-scrolled .topbar{background:#000a14}
.searchtoggle{display:none}
@media (max-width:759px){
  .topbar-inner{grid-template-columns:1fr auto auto;gap:8px;padding:8px 16px}
  .searchtoggle{order:1;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;cursor:pointer;
    border:1px solid var(--line);background:var(--panel);color:var(--text)}
  .searchtoggle .ui-ic{width:20px;height:20px}
  .navtoggle{order:2;min-height:44px}
  .topsearch,.topbar-actions{display:none}
  .nav-open .topsearch{display:flex}
  .nav-open .topbar-actions{display:flex}
  .trendbar{display:none}
  body.is-scrolled .brand-img{width:128px}
}

/* ========================= fase 7 (Golden Master verfijning): header =======
 * - Logo = uitsnede van het master-bestand (icoon + woordmerk, zonder
 *   tagline), op hoogte gezet zodat het op elk scherm scherp en groot genoeg is.
 * - Desktop: twee rijen met de presentie van de oorspronkelijke Golden Master
 *   (merk + zoeken + taal/favorieten; daaronder de navigatie met Surprise me).
 * - Geen mail-knop en geen losse bel meer; mobiel blijft één compacte rij.
 */
.brand-img{width:auto;height:36px;max-width:none}
body.is-scrolled .brand-img{width:auto;height:32px}
@media (min-width:760px){.brand-img{width:auto;height:42px}body.is-scrolled .brand-img{width:auto;height:38px}}
@media (min-width:1024px){.brand-img{width:auto;height:50px}body.is-scrolled .brand-img{width:auto;height:42px}}
@media (min-width:760px){
  .topbar-inner{padding-top:16px;padding-bottom:16px;column-gap:28px}
  .topsearch{max-width:640px}
  .mainnav a{font-size:.95rem;padding:13px 16px}
  .mainnav a[aria-current="page"]{background:linear-gradient(180deg,rgba(47,157,255,.2),rgba(47,157,255,.03))}
  .navrandom{padding:8px 16px;font-size:.9rem;border-color:rgba(127,233,247,.35);color:#c9f6fb}
  .navrandom:hover{border-color:#7fe9f7;color:#fff}
}
@media (min-width:1100px){.topbar-actions .favlink .actiontext{display:inline}}
.topbar-actions{gap:10px}
.topbar-actions .favlink{padding:9px 14px;border-radius:12px}
.langpick{border-radius:12px;padding:0 8px 0 12px;min-height:40px}
@media (max-width:759px){
  .brand-img,body.is-scrolled .brand-img{height:34px;width:auto}
}

/* ====================== fase 8 (Golden Master final polish): header =========
 * - Catalogusgrootte als rustig label naast de acties (echte telling).
 * - Music TV in de navigatie; op middelgrote schermen gaan TV Guide,
 *   Favorites en Music TV naar een "Meer"-menu in plaats van te knellen.
 */
.catalogcount{display:none;align-items:center;gap:8px;padding:0 4px;margin-inline-end:6px;white-space:nowrap;
  font-size:.86rem;font-weight:600;color:#b8cbe6;letter-spacing:.01em}
.catalogcount i{width:7px;height:7px;border-radius:50%;background:#7fe9f7;box-shadow:0 0 0 3px rgba(127,233,247,.16)}
.catalogcount:hover{color:#fff}
@media (min-width:1100px){.catalogcount{display:inline-flex}}

.navmore{display:none;position:relative}
.navmore details{position:relative}
.navmore summary{display:inline-flex;align-items:center;gap:7px;padding:13px 14px;font-size:.95rem;color:#c7d8f2;
  cursor:pointer;list-style:none;border-radius:12px 12px 0 0}
.navmore summary::-webkit-details-marker{display:none}
.navmore summary:hover,.navmore details[open] summary{color:#fff;background:rgba(47,157,255,.08)}
.navmore summary .nav-ic{width:16px;height:16px;transition:transform .2s ease}
.navmore details[open] summary .nav-ic{transform:rotate(180deg)}
.navmore-list{position:absolute;top:100%;inset-inline-end:0;z-index:60;min-width:220px;margin:6px 0 0;padding:8px;
  list-style:none;display:grid;gap:2px;border-radius:14px;border:1px solid var(--line-2);
  background:rgba(4,10,20,.97);box-shadow:0 22px 48px rgba(0,0,0,.55)}
.navmore-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border-bottom:0;color:#d6e4f7}
.navmore-list a:hover{background:rgba(47,157,255,.12);color:#fff}
@media (min-width:760px) and (max-width:1279px){
  .mainnav-inner{overflow:visible}
  .mainnav li.nav-low{display:none}
  .navmore{display:block}
}
@media (min-width:760px) and (max-width:1023px){
  .mainnav a,.navmore summary{padding:12px 11px;font-size:.9rem}
  .mainnav > .mainnav-inner > ul > li > a .nav-ic{display:none}
}