/* ==========================================================================
   ubc Video Player Page – Global Styles
   Version: 8.2
   NOTE: Only standard, error-free CSS. No vendor hacks required.
   ========================================================================== */

/* ---------------------------
   Reset & Base
---------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Accessible default focus */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Links */
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Utilities */
.is-hidden { display: none !important; }
.hidden-xs { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md,
.hidden-lg { display: initial; }
.visuallyhidden {
  position: absolute !important; height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Flex helper */
.row--flex { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* Containers */
.container__outer { width: 100%; }
.container__inner { width: 100%; max-width: 1200px; margin-inline: auto; padding: 0 16px; }

/* ---------------------------
   Theme Tokens
---------------------------- */
:root {
  --ubc-blue: #2938C4;
  --ubc-blue-600: #1f2ea3;
  --ubc-blue-700: #17257f;
  --ubc-mid: #475569;
  --ubc-surface: #f6f8ff;

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-soft: #334155;
  --color-border: #e2e8f0;
  --color-focus: #8b5cf6;
  --color-link: #1d4ed8;

  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --shadow-2: 0 6px 20px rgba(0,0,0,.12);
}

/* Optional dark theme via body.dark-theme */
body.dark-theme {
  --color-bg: #0b1220;
  --color-surface: #0f172a;
  --color-text: #e5e7eb;
  --color-text-soft: #cbd5e1;
  --color-border: #1f2937;
  --color-link: #93c5fd;
  --ubc-surface: #0f1530;
}

/* ---------------------------
   Header / Navbar
---------------------------- */
.page-header__outer { background: var(--ubc-blue); }
.page-header {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  min-height: 64px;
  color: #fff;
}
.page-header__buttons { display: flex; gap: 8px; margin-right: 8px; }
.page-header__buttons button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
}
.page-header__buttons button:hover { background: rgba(255,255,255,.18); }

.page-header__brand { display: inline-flex; align-items: center; margin-right: 8px; }
.page-header__brand svg { display: block; height: 32px; width: auto; }

.page-header__nav-items--wrapper { flex: 1; }
.page-header__nav-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-item { position: relative; }
.nav-item__link { color: #fff; padding: 10px 8px; display: inline-flex; align-items: center; gap: 6px; }
.nav-section-title { color: rgba(255,255,255,.75); padding: 10px 4px; }

.nav-item--search .header-search {
  background: #fff; color: #111827; border: 0; border-radius: 10px;
  padding: 10px 12px; width: 220px;
}
.nav-item--search .btn--search {
  background: #fff; border: 0; border-radius: 10px; margin-left: 6px; padding: 10px 12px; cursor: pointer;
}

/* Dropdowns */
.dropdown-trigger { cursor: pointer; }
.dropdown {
  position: absolute; top: 100%; left: 0; z-index: 30;
  min-width: 260px; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); padding: 16px; display: none;
}
.nav-item:hover > .dropdown { display: block; }

/* Shop megamenu */
.shop-megamenu {
  width: min(100vw - 32px, 980px);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px;
}
.shop-megamenu__section .shop-megamenu__list { list-style: none; margin: 0; padding: 0; }
.shop-megamenu__list__item { margin: 6px 0; }
.shop-megamenu__list__item-link { color: var(--color-link); }
.shop-megamenu__image { border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }

/* User dropdown */
.user-dropdown { position: absolute; right: 0; top: 100%; width: 280px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 12px; }
.user-dropdown__items { list-style: none; margin: 0; padding: 0; }
.user-dropdown__item { padding: 8px 6px; }
.user-dropdown__item a, .user-dropdown__items__sign-out { color: var(--color-text); }
.user-dropdown__profile__link { display: flex; align-items: center; gap: 8px; }

/* Choose Station button */
.choose-station {
  margin-left: auto;
  background: rgba(255,255,255,.14);
  color: #fff; border: 1px solid rgba(255,255,255,.25);
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
}
.choose-station:hover { background: rgba(255,255,255,.22); }

/* ---------------------------
   Buttons
---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Filled */
.btn--fill--blue { background: var(--ubc-blue); border-color: var(--ubc-blue); color: #fff; }
.btn--fill--blue:hover { filter: brightness(1.05); }

.btn--fill--medium-blue { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn--fill--medium-blue:hover { filter: brightness(1.05); }

.btn--fill--white { background: #fff; color: #111827; border-color: #e5e7eb; }
.btn--ghost--blue { background: transparent; color: var(--ubc-blue); border-color: var(--ubc-blue); }

.btn--close {
  border: 0; background: transparent; cursor: pointer; padding: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* MyList placeholders */
.btn--mylist--placeholder,
.btn--watch-related-placeholder { min-height: 44px; }

/* ---------------------------
   Video Player
---------------------------- */
.video-player {
  margin-top: 24px;
  background: linear-gradient(180deg, var(--ubc-surface), transparent 30%);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.video-player__inner {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: 24px;
  padding: 24px;
}

.video-player__iframe-wrapper {
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-2);
}

.video-player__iframe {
  display: block; width: 100%; aspect-ratio: 16/9; border: 0;
}

/* Floating player controls */
.floating-player { position: relative; }
.floating-player__control {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
}
.floating-player__video-up { right: 52px; }
.floating-player__control svg { width: 20px; height: 20px; }

.video-player__info { display: flex; flex-direction: column; gap: 10px; }

.over-title a { color: var(--color-link); font-weight: 600; }
.video-player__title {
  margin: 0; font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.2; color: var(--color-text);
}
.video-player__summary { color: var(--color-text-soft); display: flex; align-items: center; gap: 8px; }
.video-player__summary__cc svg { display: inline-block; width: 20px; height: 20px; }

.video-player__info__watch-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.video-player__description {
  margin-top: 8px; color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 12px; box-shadow: var(--shadow-1);
}

.video-player__metrics { display: flex; gap: 16px; flex-wrap: wrap; color: var(--color-text-soft); }

/* Shop links (Buy Now) */
.video-player__shop__title { margin: 16px 0 8px; }
.video-player__shop-links {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap;
}
.video-player__shop-links__option__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface); color: var(--color-text);
}

/* Continuous play + Share */
.video-player__management { margin-top: 12px; display: flex; align-items: start; justify-content: space-between; gap: 12px; }

.video-player__continuous-play-control__toggle {
  display: inline-block; width: 36px; height: 20px; border-radius: 999px;
  background: #e5e7eb; position: relative; cursor: pointer;
}
.video-player__continuous-play-control__toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.social-share__wrapper { display: flex; align-items: center; gap: 10px; }
.social-share__title { color: var(--color-text-soft); }
.social-share__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.social-share__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
}
.social-share__link:hover { background: #f3f4f6; }
.social-share__link svg { width: 20px; height: 20px; }

/* Video problems link */
.video-player__problems { margin-top: 8px; color: var(--color-text-soft); }

/* Progress bar */
.progress { width: 100%; height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.progress-bar { width: 40%; height: 100%; background: var(--ubc-blue); }

/* ---------------------------
   Related Content
---------------------------- */
.theme-light-dark__outer { background: linear-gradient(180deg, var(--color-surface), transparent 50%); }
.theme-light-dark { padding: 24px 0; }

.content-section-title { font-size: 1.25rem; margin: 0 0 12px; color: var(--color-text); }

.related-content__learn-more__items {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 768px) {
  .related-content__learn-more__items { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.related-content__learn-more__item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.related-content__learn-more__item__image-link { position: relative; display: block; }
.related-content__learn-more__item__image-link span[aria-hidden="true"] {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,.6); color:#fff; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}

.related-content__learn-more__text { padding: 12px; display: grid; gap: 6px; }
.related-content__learn-more__text__title { margin: 0; font-size: 1rem; }
.related-content__learn-more__text__description { margin: 0; color: var(--color-text-soft); }

.related-content__mobile-toggle { margin-top: 12px; }

.related-content__mobile-hidden { display: none; }
@media (min-width: 768px) { .related-content__mobile-hidden { display: flex; } }

/* ---------------------------
   Web Promo
---------------------------- */
.web-promo {
  display: grid; gap: 20px; align-items: center;
  grid-template-columns: 1.6fr 1fr;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-1);
  padding: 16px; margin: 24px 0;
}
.web-promo__picture img,
.web-promo__image { border-radius: var(--radius-lg); }
.web-promo__over-title { color: var(--color-text-soft); margin: 0; }
.web-promo__title { margin: 0 0 6px; }
.web-promo__description { margin: 8px 0 12px; color: var(--color-text-soft); }
.web-promo__link { align-self: start; }

/* ---------------------------
   Modals (Embed, Report, Sign-in)
---------------------------- */
.modal-window { display: none; }
.modal-window.is-open { display: block; }

.modal-window__dialog--scrollable {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(2,6,23,.6);
}

.modal-window__dialog {
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
}

.modal-window__body { position: relative; padding: 16px; }
.modal-window__topbar__title { margin: 0 0 12px; }

.embed-modal__image { border-radius: var(--radius-lg); }
.embed-modal__info { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.embed-modal__input-button { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0 12px; }
.embed-modal__text-for-copying {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--color-border); background: #fafafa; color: #111827;
}
.embed-dimension { width: 96px; padding: 8px; border: 1px solid var(--color-border); border-radius: 10px; }

/* Sign-in modal specifics */
.sign-in__options-container { display: grid; gap: 12px; }
.sign-in__service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sign-in__link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
}
.sign-in__link:hover { background: #f8fafc; }

/* Report problem form */
.report-problem__form { display: grid; gap: 8px; }
.report-problem__form-select,
.report-problem__form-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff;
  color: #111827; font: inherit;
}

/* ---------------------------
   Footer
---------------------------- */
.footer--outer { background: #0b1536; color: #cbd5e1; margin-top: 32px; }
.footer--inner {
  display: grid; gap: 24px; grid-template-columns: 1fr;
  max-width: 1200px; margin: 0 auto; padding: 24px 16px;
}
@media (min-width: 900px) {
  .footer--inner { grid-template-columns: 220px 1fr 1fr 1fr; align-items: start; }
}

.footer__brand-link { display: inline-flex; align-items: center; }
.footer__section-title { color: #e2e8f0; margin: 0 0 8px; font-size: 1.05rem; }
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__link-item { margin: 6px 0; }
.footer__link { color: #cbd5e1; }
.footer__link:hover { color: #fff; text-decoration: underline; }

.footer__social-media { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06);
  margin-right: 8px; }
.footer__social-media:hover { background: rgba(255,255,255,.12); }
.footer__social-media svg { width: 20px; height: 20px; fill: currentColor; }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 12px 16px; color: #94a3b8; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.footer__legal-links { display: flex; align-items: center; gap: 12px; }
.footer__legal-link { color: #cbd5e1; }

/* ---------------------------
   Images with theme variants
---------------------------- */
.image-appearance--system,
.image-appearance--light,
.image-appearance--dark { display: none; }
@media (prefers-color-scheme: dark) {
  .image-appearance--dark { display: inline; }
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  .image-appearance--light { display: inline; }
}

/* ---------------------------
   Fallback image container
---------------------------- */
.fallback-image__container {
  position: relative; background: #e5e7eb; overflow: hidden;
  border-radius: var(--radius-lg);
}
.fallback-image__container--gray { background: #f1f5f9; }
.image--needs-fallback { object-fit: cover; width: 100%; height: auto; }

/* ---------------------------
   Appearance toggle block
---------------------------- */
.appearance-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px; box-shadow: var(--shadow-1);
}
.appearance-toggle__title { margin: 0 0 6px; }
.appearance-toggle__explanation { margin: 0 0 10px; color: var(--color-text-soft); }
.appearance-toggle__control { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.appearance-toggle__radio { width: 18px; height: 18px; }

/* ---------------------------
   Search form (desktop dropdown)
---------------------------- */
.nav-item--search__form {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 10px; display: none; position: absolute; top: 100%; left: 0; z-index: 25;
  box-shadow: var(--shadow-2);
}
.nav-item.nav-item--search:hover > .nav-item--search__form { display: block; }

/* ---------------------------
   Content strip data (invisible script element)
---------------------------- */
#content-strip-data { display: none; }

/* ---------------------------
   Responsive
---------------------------- */
@media (max-width: 1024px) {
  .video-player__inner { grid-template-columns: 1fr; }
  .web-promo { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .hidden-md { display: none !important; }
  .hidden-lg { display: none !important; }

  .page-header__nav-items {
    gap: 8px;
  }
  .nav-item--search .header-search { width: 180px; }

  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------
   Print
---------------------------- */
@media print {
  .page-header__outer,
  .page-header,
  .dropdown,
  .modal-window__dialog--scrollable,
  .choose-station,
  .social-share,
  .btn,
  .video-player__shop,
  .video-player__management { display: none !important; }
  a { color: #000; text-decoration: underline; }
  body { background: #fff; color: #000; }
}

/* ====== FIX: dropdown text terlihat & rapih ====== */

/* panel dropdown hasil portal */
nav.page-header .dropdown.dropdown-portal{
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  border-radius:12px;
}

/* Hapus bullet & padding default list */
nav.page-header .dropdown.dropdown-portal ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* Paksa semua teks di dalam dropdown jadi gelap (bukan putih) */
nav.page-header .dropdown.dropdown-portal,
nav.page-header .dropdown.dropdown-portal *,
nav.page-header .dropdown.dropdown-portal a,
nav.page-header .dropdown.dropdown-portal a:link,
nav.page-header .dropdown.dropdown-portal a:visited,
nav.page-header .dropdown.dropdown-portal a:active{
  color:#0f172a !important;             /* slate-900 */
  -webkit-text-fill-color:#0f172a !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;                  /* kalau ada rule opacity rendah */
}

/* Item link tampak sebagai baris clickable */
nav.page-header .dropdown.dropdown-portal a{
  display:block;
  padding:8px 12px;
  border-radius:8px;
}

/* Hover/Focus state */
nav.page-header .dropdown.dropdown-portal a:hover,
nav.page-header .dropdown.dropdown-portal a:focus{
  background:rgba(17,24,39,.06);         /* subtle highlight */
  text-decoration:none;
}

/* Judul/section label dalam mega menu */
nav.page-header .dropdown.dropdown-portal 
.shows-dropdown__section-title,
nav.page-header .dropdown.dropdown-portal 
.explore-dropdown__section-title,
nav.page-header .dropdown.dropdown-portal 
.shop-megamenu__section-heading{
  color:#475467 !important;              /* muted label */
  font-weight:600;
  padding:8px 12px;
}

/* Ikon mengikuti warna teks */
nav.page-header .dropdown.dropdown-portal svg{
  fill:currentColor;
}

/* ====== Search bar: versi pendek + responsif ====== */
@media (min-width:1024px){

  /* tetap 1 baris */
  .page-header__nav-items{
    display:flex !important;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
  }

  /* BUAT PENDEK: jangan fill sisa ruang, pakai lebar clamp */
  .nav-item--search.nav-item--desktop{
    flex:0 0 auto;                           /* stop growing */
    width:clamp(320px, 34vw, 520px);         /* min 320, responsif, max 520 */
  }

  /* form & input tetap full terhadap container-nya (yang sudah pendek) */
  .nav-item--search.nav-item--desktop .nav-item--search__form{
    position:relative !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    z-index:5;
  }
  .nav-item--search.nav-item--desktop .header-search{
    width:100% !important;
    height:44px;
    border-radius:9999px;
    border:0;
    outline:none;
    background:#fff;
    color:#0b2a4a;
    padding:0 3.25rem 0 1rem;                /* ruang untuk ikon kanan */
    box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.12);
  }
  .nav-item--search.nav-item--desktop .header-search::placeholder{
    color:#6b7280; opacity:1;
  }

  /* ikon kaca pembesar di kanan */
  .nav-item--search.nav-item--desktop .btn--search{
    position:absolute !important;
    right:.6rem; top:50%;
    transform:translateY(-50%);
    width:32px; height:32px;
    border:0; background:transparent;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .nav-item--search.nav-item--desktop .btn--search svg{
    width:20px; height:20px; opacity:.7; transition:opacity .15s;
  }
  .nav-item--search.nav-item--desktop .btn--search:hover svg,
  .nav-item--search.nav-item--desktop .header-search:focus + .btn--search svg{
    opacity:1;
  }

  /* sembunyikan trigger dropdown search lama (biar nggak dobel) */
  .nav-item--search.nav-item--desktop .dropdown-trigger{ display:none !important; }
}

/* Mobile tetap bawaan (ikon ➜ dropdown). Kalau mau, naikkan min width sedikit */
@media (max-width:1023.98px){
  .nav-item--search--mobile .header-search{ min-width: 260px; }
}

/* === Program Sponsorship (no markup changes) === */
.production-and-funding{
  padding-block: 8px 20px;
}

.production-and-funding .sponsor-info-link{
  box-sizing: border-box;
  /* sejajarkan ke area konten: max 1200px dan ada gutter kiri-kanan */
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;           /* center */
  padding-inline: 24px;          /* gutter */
  line-height: 1.5;
}

.production-and-funding .sponsor-info-link a{
  display: inline;               /* jangan full baris */
  text-decoration: underline;
  color: var(--link-color, #0b5bd3);
  transition: color .15s ease;
}
.production-and-funding .sponsor-info-link a:hover{
  color: #073f9c;
}

/* Dark mode kontras aman */
@media (prefers-color-scheme: dark){
  .production-and-funding .sponsor-info-link a{ color:#7fb2ff; }
  .production-and-funding .sponsor-info-link a:hover{ color:#cfe2ff; }
}

/* Responsif kecil: kurangi gutter */
@media (max-width: 480px){
  .production-and-funding .sponsor-info-link{
    width: calc(100% - 32px);
    padding-inline: 16px;
  }
}

/* ===== Web Promo – layout & style fix ===== */
.web-promo{
  /* sejajarkan ke lebar konten & beri bingkai */
  width: min(1200px, calc(100% - 48px));
  margin: 16px auto 32px;
  padding: 16px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1.35fr 1fr;   /* gambar kiri, detail kanan */
  gap: 20px;

  background: var(--surface, #fff);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(16,24,40,.08);
}

/* kolom gambar */
.web-promo__image-section{
  border-radius: 10px;
  overflow: hidden;
  background: #0b2540;                 /* fallback warna bila img gagal */
  min-height: 260px;                   /* tinggi minimum agar stabil */
}
.web-promo__image-link,
.web-promo__picture,
.web-promo__image{
  display: block;
  width: 100%;
  height: 100%;
}
.web-promo__image{
  object-fit: cover;
  aspect-ratio: 16 / 9;                /* proporsi rapi */
}

/* kolom detail (kartu) */
.web-promo__details{
  background: #071a2d;                 /* kartu gelap */
  color: #e6eef8;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.web-promo__over-title{
  margin: 0 0 2px;
  font-size: 12px;
  opacity: .8;
}
.web-promo__title{
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.web-promo__title-link{
  color: #e6eef8;
  text-decoration: none;
}
.web-promo__title-link:hover{ text-decoration: underline; }

.web-promo__description{
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #cfe0f4;
}

.web-promo__link.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ffffff;
  color: #0b2540;
  border: 1px solid rgba(16,24,40,.1);
}
.web-promo__link.btn:hover{ filter: brightness(0.95); }

/* ===== Dark mode polish ===== */
@media (prefers-color-scheme: dark){
  .web-promo{
    background: #0c1e33;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
  .web-promo__details{ background:#08182b; }
  .web-promo__title-link{ color:#f2f6ff; }
  .web-promo__description{ color:#d7e6ff; }
  .web-promo__link.btn{
    background:#e8f0ff; color:#08182b; border-color:rgba(255,255,255,.08);
  }
}

/* ===== Responsif ===== */
@media (max-width: 960px){
  .web-promo{
    grid-template-columns: 1fr;        /* tumpuk di tablet & HP */
    gap: 14px;
  }
  .web-promo__image-section{ min-height: 220px; }
}
@media (max-width: 480px){
  .web-promo{
    width: calc(100% - 24px);
    padding: 12px;
    border-radius: 10px;
  }
  .web-promo__details{ padding: 14px; }
}

/* ===== Footer – layout & warna rapih ===== */

/* Wrapper & palet default (dark, kontras tinggi) */
.footer--outer{
  background:#0b2540;            /* navy gelap */
  color:#e6eef8;
}
.footer--inner{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
  padding:32px 0 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr)); /* 3 kolom */
  gap:28px 40px;
  align-items:flex-start;
}

/* Logo bar */
.footer__brand{
  grid-column:1 / -1;            /* penuh satu baris */
  display:flex;
  align-items:center;
  margin-bottom:4px;
  gap:12px;
}
.footer__brand .blue-logo{ display:none; }   /* di dark, pakai logo putih */
.footer__brand .white-logo{ display:block; height:40px; width:auto; }

/* Section titles & link list */
.footer__section-title{
  margin:0 0 8px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  color:#cfe0f4;
}
.footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;                       /* jarak antar item */
}
.footer__link{
  color:#e6eef8;
  text-decoration:none;
}
.footer__link:hover{
  color:#ffffff;
  text-decoration:underline;
}

/* Sosmed icons (Facebook, Twitter, Instagram) */
.footer__social-media{
  display:inline-flex;
  align-items:center;
  margin-right:12px;
}
.footer__social-media svg{
  width:22px; height:22px;
  fill:#e6eef8;
  opacity:.9;
}
.footer__social-media:hover svg{ opacity:1; }

/* ===== Bar legal di bawah ===== */
.footer__legal{
  background:#0b2540;
  color:#b9c9df;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer__legal,
.footer__legal .footer__legal-links{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
}
.footer__legal-text{ margin:14px 0; font-size:12px; }
.footer__legal-links{ display:inline-block; }
.footer__legal-link{
  color:#e6eef8;
  text-decoration:none;
  margin:0 8px;
}
.footer__legal-link:hover{ text-decoration:underline; }

/* ===== Responsif ===== */
@media (max-width: 900px){
  .footer--inner{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 600px){
  .footer--inner{ grid-template-columns: 1fr; }
  .footer__brand{ margin-bottom:8px; }
}

/* ===== Mode terang opsional (jika ingin footer terang) ===== */
/* Tambahkan class .is-light pada .footer--outer untuk mengaktifkan. */
.footer--outer.is-light{
  background:#f5f8fd;
  color:#0b2540;
}
.footer--outer.is-light .footer__brand .white-logo{ display:none; }
.footer--outer.is-light .footer__brand .blue-logo{ display:block; height:40px; width:auto; }
.footer--outer.is-light .footer__section-title{ color:#23364d; }
.footer--outer.is-light .footer__link{ color:#0b2540; }
.footer--outer.is-light .footer__social-media svg{ fill:#0b2540; }
.footer--outer.is-light .footer__legal{
  background:#f5f8fd;
  color:#46596f;
  border-top:1px solid rgba(0,0,0,.12);
}
.footer--outer.is-light .footer__legal-link{ color:#0b2540; }

/* ===== Related to This Episode – FIX ===== */

/* Grid rapi + hilangkan bullet */
.related-content__learn-more__items{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

/* Kartu */
.related-content__learn-more__item{
  background:#fff;
  border:1px solid rgba(15,35,65,.12);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(15,35,65,.06);
  overflow:hidden;
  display:flex;               /* biar isi bisa stretch */
  flex-direction:column;
  height:100%;                /* semua kartu sama tinggi */
}

/* Gambar */
.related-content__learn-more__item__image-link{
  display:block;
  position:relative;
  overflow:hidden;
}
.related-content__learn-more__item__image-link img{
  display:block;
  width:100%;
  height:180px;               /* konsisten */
  object-fit:cover;
}

/* Ikon "external link" – pindahkan ke kanan-atas, bukan kanan-bawah */
.related-content__learn-more__item__image-link > span[aria-hidden="true"]{
  position:absolute;
  top:8px;
  right:8px;
  left:auto;
  bottom:auto;
  width:28px;
  height:28px;
  border-radius:6px;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;        /* ikon tidak menghalangi klik */
}
.related-content__learn-more__item__image-link > span[aria-hidden="true"] svg{
  width:16px; height:16px; fill:#fff;
}

/* Teks */
.related-content__learn-more__text{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.related-content__learn-more__text__title{
  margin:0;
  font-size:14px;
  line-height:1.25;
}
.related-content__learn-more__text__title a{
  color:#163d6b;
  text-decoration:none;
}
.related-content__learn-more__text__title a:hover{ text-decoration:underline; }
.related-content__learn-more__text__description{
  margin:0;
  font-size:12px;
  color:#4a5670;
}

/* Item yang disembunyikan di mobile (tetap tampil di desktop) */
@media (max-width: 767px){
  .related-content__mobile-hidden{ display:none; }
}

/* Tombol “Show More” – rata tengah */
.related-content__mobile-toggle.btn{
  display:block;
  margin:12px auto 0;
}

/* Aksesibilitas fokus (optional) */
.related-content__learn-more__item a:focus-visible{
  outline:2px solid #3b82f6;
  outline-offset:2px;
  border-radius:6px;
}

/* ===== VIDEO PLAYER — layout & alignment fix ===== */

/* Lebar konten pusat */
.container__outer .container__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
}

/* Dua kolom, rata atas */
.video-player__inner{
  display: grid;
  grid-template-columns: minmax(320px,1fr) minmax(420px,1.1fr);
  gap: 24px;
  align-items: start;
}

/* Player: pakai aspect-ratio 16:9 + radius */
.floating-player{ position: relative; width: 100%; }
.floating-player::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
.video-player__iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; border-radius:12px;
  background:#e9eef3; /* fallback saat thumbnail gagal */
}

/* Kolom info: spasi seragam */
.video-player__info{ display:flex; flex-direction:column; gap:12px; }
.video-player__title{ margin:0; line-height:1.2; font-size:28px; }
.video-player__summary{ margin:-6px 0 0; color:#6a7484; font-size:13px; }

.video-player__description{
  background:rgba(15,35,65,.05);
  color:#2c3445;
  padding:10px 12px;
  border-radius:8px;
}
.video-player__metrics{
  display:flex; gap:16px;
  color:#6a7484; font-size:12px;
}
.video-player__shop__title{ margin:0 0 8px; font-size:18px; }

/* Bar manajemen (toggle + share) sejajar kanan-kiri */
.video-player__management{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(15,35,65,.12);
}
.video-player__continuous-play-control{
  display:flex; align-items:center; gap:10px;
}

/* Share icons rapi & konsisten */
.social-share__wrapper{ display:flex; align-items:center; gap:10px; }
.social-share__title{ color:#6a7484; font-size:12px; }
.social-share__links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:10px;
}
.social-share__link{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(15,35,65,.12);
  box-shadow:0 1px 1px rgba(15,35,65,.06);
}
.social-share__link svg{ width:18px; height:18px; }

/* Paragraf problem spacing */
.video-player__problems{ margin-top:10px; font-size:13px; color:#6a7484; }

/* Responsif: tumpuk 1 kolom */
@media (max-width:1024px){
  .video-player__inner{ grid-template-columns:1fr; }
}

/* ====== HEADER / NAV (ubcorg) — FIX & POLISH ====== */
.page-header--ubcorg {
  --header-bg: #052845;          /* navy header */
  --link-on-dark: #ffffff;       /* nav link color */
  --link-on-dark-muted: #d6e3ff; /* hover/focus/secondary */
  --dropdown-bg: #ffffff;
  --dropdown-text: #1f2a37;
  --dropdown-muted: #6b7280;
  background: var(--header-bg);
  color: var(--link-on-dark);
  position: relative;
  z-index: 1000;
}

/* layout wrapper */
.page-header--ubcorg .page-header__nav-items--wrapper{
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}

/* daftar nav horizontal, vertikal center */
.page-header--ubcorg .page-header__nav-items{
  display:flex;
  align-items:center;
  gap:14px;
}

/* link di bar atas: putih + state */
.page-header--ubcorg .nav-item__link,
.page-header--ubcorg .nav-item.nav-item--home > a,
.page-header--ubcorg .nav-section-title,
.page-header--ubcorg .dropdown-trigger {
  color: var(--link-on-dark);
  text-decoration: none;
}
.page-header--ubcorg .nav-item__link:hover,
.page-header--ubcorg .dropdown-trigger:hover,
.page-header--ubcorg .nav-item__link:focus-visible{
  color: var(--link-on-dark-muted);
}

/* DONATE (biar nggak mepet) */
.page-header--ubcorg .nav-item--donate--disabled .donate--disabled-btn{
  margin: 0 8px 0 2px;
}

/* ===== Search (desktop) ===== */
.page-header--ubcorg .nav-item--search__form{
  position: relative;
  width: clamp(260px, 32vw, 520px); /* tidak kepanjangan, responsif */
}
.page-header--ubcorg .nav-item--search__form .header-search{
  width: 100%;
  height: 38px;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.18);
  background: #fff;
  color: #0f172a;
  padding: 0 40px 0 14px;
  outline: none;
}
.page-header--ubcorg .nav-item--search__form .header-search::placeholder{
  color:#94a3b8;
}
.page-header--ubcorg .nav-item--search__form__icon,
.page-header--ubcorg .nav-item--search__form .btn--search{
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color:#0f172a;
}

/* ===== Dropdowns (Shows / Explore / Shop / Search) ===== */
.page-header--ubcorg .dropdown{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--dropdown-bg);
  color: var(--dropdown-text);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(2,14,30,.25), 0 2px 8px rgba(2,14,30,.18);
  border: 1px solid rgba(2,14,30,.08);
  min-width: 300px;
  max-width: min(92vw, 980px);
  padding: 14px;
  z-index: 2000;            /* supaya tidak kepotong konten */
}
.page-header--ubcorg .dropdown p,
.page-header--ubcorg .dropdown a,
.page-header--ubcorg .dropdown li{
  color: var(--dropdown-text);
}
.page-header--ubcorg .dropdown a:hover{
  color:#0b5bd3;
}

/* “megamenu” shop ukuran wajar */
.page-header--ubcorg .shop-megamenu{
  width: min(960px, 92vw);
}

/* section title dalam dropdown */
.page-header--ubcorg .shows-dropdown__section-title,
.page-header--ubcorg .explore-dropdown__section-title,
.page-header--ubcorg .shop-megamenu__section-heading{
  color:#111827;
  font-weight:600;
  margin: 6px 0 8px;
}

/* list link di dropdown */
.page-header--ubcorg .shows-dropdown__popular-shows a,
.page-header--ubcorg .shop-megamenu__list__item-link,
.page-header--ubcorg .explore-dropdown__topic__title{
  color: var(--dropdown-text);
}

/* perapihan caret/hover container */
.page-header--ubcorg .hover-arrow{ position: relative; }

/* ===== “Choose Station” tombol kanan tidak numpuk ===== */
.page-header--ubcorg .choose-station{
  margin-left: auto;
}

/* ===== Fokus ring aksesibilitas ===== */
.page-header--ubcorg a:focus-visible,
.page-header--ubcorg button:focus-visible,
.page-header--ubcorg input:focus-visible{
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  border-color:#93c5fd;
}

/* ===== Responsif kecil ===== */
@media (max-width: 1024px){
  .page-header--ubcorg .nav-item--search__form{
    order: 99; /* dorong ke kanan/bawah bila sempit */
    width: clamp(220px, 60vw, 420px);
  }
}