/* nd-base.css — fondasi dokumen untuk UI baru.
   Hanya menyentuh elemen yang di-scope `body.nd-ui`, supaya tidak ada yang bocor ke
   halaman/komponen yang belum dimigrasi. */

/* Root font-size dalam persen supaya SELURUH skala rem ikut membesar di layar besar.
   Ini yang membuat TV tidak terasa seperti desktop yang diregangkan: kita tidak
   melebarkan kartu, kita menaikkan basis ukuran dan menambah kolom. */
:root { font-size: 100%; }
body { font-size: 1rem; }   /* eksplisit — jangan andalkan warisan dari UA */

@media (min-width: 1920px) { :root { font-size: 106.25%; } }  /* 17px */
@media (min-width: 2560px) { :root { font-size: 112.5%; } }   /* 18px */
@media (min-width: 3400px) { :root { font-size: 125%; } }     /* 20px */

/* Webfont dipasang di body.nd-ui, BUKAN body.
   Alasan: `body` polos juga diwarisi oleh video player, yang fontnya tidak boleh berubah.
   Lihat nd-player-guard.css. */
body.nd-ui {
  font-family: var(--nd-font-text);
  letter-spacing: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.nd-ui h1,
body.nd-ui h2 { font-family: var(--nd-font-display); }

/* Fokus keyboard: cincin dua-nada supaya selalu terlihat di atas latar apa pun,
   termasuk di atas poster dan di atas tombol beraksen. Hanya :focus-visible supaya
   klik mouse tidak memunculkan cincin. */
body.nd-ui :focus-visible {
  outline: 2px solid var(--nd-focus, #FFFFFF);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--nd-focus-halo, rgba(0, 0, 0, .75));
  border-radius: var(--nd-r-1, 6px);
}

/* Lewati-ke-konten untuk pengguna keyboard & pembaca layar.
   Tersembunyi sampai difokuskan supaya tidak mengubah tampilan. */
body.nd-ui .nd-skip {
  position: absolute;
  inset-inline-start: var(--nd-sp-2, .5rem);
  inset-block-start: -100%;
  z-index: 300;
  padding: var(--nd-sp-2, .5rem) var(--nd-sp-4, 1rem);
  background: var(--nd-s2);
  color: var(--nd-t1);
  box-shadow: 0 0 0 2px var(--nd-line); /* skip-link: tetap punya batas visual, tapi lewat shadow (bukan border) */
  border-radius: var(--nd-r-2, 10px);
  font-weight: 700;
  text-decoration: none;
}
body.nd-ui .nd-skip:focus { inset-block-start: var(--nd-sp-2, .5rem); }

/* Gambar tidak boleh melebihi kolomnya di layar sempit. */
body.nd-ui img { max-width: 100%; }