/* nd-fullbleed.css — konten memenuhi lebar layar, bukan kotak di tengah.

   Permintaan owner: "netflix itu gak pakai container di body utama website nya,
   gak seperti UI saya sekarang yang pakai container bootstrap, jadi content nya
   kecil ketengah".

   Pola Netflix: tidak ada max-width. Konten memakai seluruh lebar viewport dengan
   padding tepi proporsional (mereka memakai ~4%), sehingga di layar lebar yang
   bertambah adalah JUMLAH KARTU, bukan ruang kosong di kiri-kanan.

   Nilai padding memakai clamp() supaya:
   - HP: 16px (tidak boros ruang di layar sempit)
   - Desktop: ~4vw (sebanding dengan Netflix)
   - TV/4K: dibatasi 96px supaya baris kartu tidak menempel ke tepi fisik layar.

   Dimuat SESUDAH file lain supaya menang atas `max-width: 1360px` yang tersebar
   di CSS lama hasil ekstraksi. */

:root {
  --nd-gutter-x: clamp(1rem, 4vw, 6rem);
}

/* ============================================================
   1. SHELL HALAMAN
   ============================================================ */

body.nd-ui .topbar-inner,
body.nd-ui main,
body.nd-ui main.container,
body.nd-ui .player-page,
body.nd-ui .nd-me-wrap, /* nd-allow-ns: class SUDAH ADA di frontend/me.blade.php — hanya dilepas dari container */
body.nd-ui .nd-legal,
body.nd-ui .not-found-shell,
body.nd-ui .site-footer,
body.nd-ui .adsense-wrap > .adsense-box {
  max-inline-size: none;
  inline-size: 100%;
  margin-inline: 0;
  padding-inline: var(--nd-gutter-x);
}

/* main sering sudah punya padding sendiri dari CSS lama; samakan. */
body.nd-ui main { padding-inline: var(--nd-gutter-x); }

/* ============================================================
   2. BLOK KONTEN DI DALAM HALAMAN
   Section-section ini dulu ikut terkurung container; sekarang mereka
   mengisi lebar penuh dan hanya mengandalkan gutter dari induknya.
   ============================================================ */

body.nd-ui .grid,
body.nd-ui .provider-home-explorer,
body.nd-ui .provider-home-sections,
body.nd-ui .provider-home-section,
body.nd-ui .watch-history-rail,
body.nd-ui .site-footer-top,
body.nd-ui .site-footer-bottom,
body.nd-ui .site-footer-lead {
  max-inline-size: none;
  inline-size: auto;
  margin-inline: 0;
}

/* Halaman teks (legal, 404) TETAP dibatasi lebar bacanya: baris sepanjang 2000px
   tidak terbaca. Ini bukan "container bootstrap", ini batas panjang baris. */
body.nd-ui .nd-legal > * {
  max-inline-size: 72ch;
}
body.nd-ui .nd-legal > h1,
body.nd-ui .nd-legal > h2 { max-inline-size: none; }

/* ============================================================
   3. RAIL FULL-BLEED
   Rail kartu mengalir sampai tepi layar — kartu terakhir "terpotong" di tepi,
   persis pola Netflix, yang sekaligus memberi tahu bahwa deretnya bisa digeser.
   ============================================================ */

body.nd-ui .provider-home-rail-wrap { margin-inline: calc(var(--nd-gutter-x) * -1); }
body.nd-ui .provider-home-rail {
  padding-inline: var(--nd-gutter-x);
  scroll-padding-inline: var(--nd-gutter-x);
}

/* Judul section tetap sejajar dengan gutter. */
body.nd-ui .provider-home-section-head { padding-inline: 0; }

/* ============================================================
   4. LAYAR SANGAT LEBAR
   Yang bertambah adalah jumlah kolom, bukan lebar kartu.
   (Tangga kolom didefinisikan di nd-card.css.)
   ============================================================ */

@media (min-width: 2560px) {
  :root { --nd-gutter-x: 5rem; }
}
@media (min-width: 3360px) {
  :root { --nd-gutter-x: 6rem; }
}