/* ==========================================================================
   Netflix-style TYPOGRAPHY layer
   --------------------------------------------------------------------------
   Loaded AFTER netflix-theme.css, so it wins the cascade against both the
   legacy template (style.css / plugins.css) and the theme overlay.

   Why these two families:
     * Netflix Sans is a bespoke Dalton Maag typeface — it cannot be licensed
       or bundled. Montserrat is the accepted closest free stand-in for its
       geometric, cinematic display feel, so it drives headings / nav / CTAs.
     * Inter is the best free *screen-UI* grotesque (open apertures, tall
       x-height) and takes over everything you actually read at small sizes:
       synopses, card titles, metadata, footnotes.

   "Netflix Sans" still sits first in both stacks, so a machine that happens
   to have it installed renders with it and nothing else changes.

   ⚠ SIZES ARE IN px ON PURPOSE. The legacy template sets html{font-size:10px}
   (Bootstrap 3-era), so rem units resolve to 62% of their face value — a
   "1rem" body would have rendered at 10px. px keeps this file readable next
   to style.css, which is px throughout.

   Scale (desktop → mobile):
     hero      42px → 28px     h2 (row)   26px → 21px
     h1        34px → 26px     body       16px
     h3        22px → 19px     ui         15px
     meta      13px            micro      12px (never smaller)
   ========================================================================== */

:root{
	--nf-font-display:"Netflix Sans", "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* --nf-font is the variable the theme's global sweep already applies */
	--nf-font:"Netflix Sans", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--nf-fs-hero:clamp(28px, 2.9vw, 42px);
	--nf-fs-h1:clamp(26px, 2.4vw, 34px);
	--nf-fs-h2:clamp(21px, 1.6vw, 26px);
	--nf-fs-h3:clamp(18px, 1.25vw, 22px);
	--nf-fs-body:16px;
	--nf-fs-lead:17px;
	--nf-fs-ui:15px;
	--nf-fs-small:14px;
	--nf-fs-meta:13px;
	--nf-fs-micro:12px;

	--nf-lh-tight:1.1;
	--nf-lh-heading:1.25;
	--nf-lh-body:1.6;

	--nf-ls-display:-0.015em;
	--nf-ls-heading:-0.008em;
	--nf-ls-body:0;
	--nf-ls-micro:0.04em;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                   */
/* ---------------------------------------------------------------------- */
html{
	letter-spacing:var(--nf-ls-body);
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}
body{
	font-family:var(--nf-font) !important;
	font-size:var(--nf-fs-body);
	line-height:var(--nf-lh-body);
	letter-spacing:var(--nf-ls-body);
	font-weight:400;
	text-rendering:optimizeLegibility;
}

/* style.css pins `p{line-height:24px !important}`, so paragraph leading has to
   be overridden with !important or a 17px synopsis keeps 24px of leading. */
p, li, label{
	font-size:var(--nf-fs-body);
	line-height:var(--nf-lh-body) !important;
	font-weight:400;
}

/* Long drama titles must never blow out a grid column */
h1, h2, h3, h4, h5, h6{
	line-height:var(--nf-lh-heading);
	overflow-wrap:break-word;
}

/* Display family for everything decorative or navigational */
h1, h2, h3, h4,
.nf-nav a,
.nf-page-head h1,
.title-hd h2, .title-hd h3, .title-hd-sm h4,
.hero.nf-hero .nf-hero-content h1,
.nf-watch-title,
.nf-episodes-head h3,
.nf-btn-play, .nf-btn-info,
.redbtn,
.nf-logo,
button, .button, .btn{
	font-family:var(--nf-font-display) !important;
}

h1{ font-size:var(--nf-fs-h1); font-weight:800; letter-spacing:var(--nf-ls-display); }
h2{ font-size:var(--nf-fs-h2); font-weight:700; letter-spacing:var(--nf-ls-heading); }
h3{ font-size:var(--nf-fs-h3); font-weight:700; letter-spacing:var(--nf-ls-heading); }
h5, h6{ font-weight:600; letter-spacing:var(--nf-ls-heading); }

/* ---------------------------------------------------------------------- */
/* Header                                                                 */
/* ---------------------------------------------------------------------- */
.nf-logo{ font-weight:800; letter-spacing:var(--nf-ls-display); }
.nf-nav a{
	font-size:var(--nf-fs-ui);
	font-weight:500;
	letter-spacing:0.005em;
}
.nf-search-input{
	/* .nf-header + !important: di kolom pencarian ada aturan lama lain yang
	   menang atas `.nf-search-input` saja (terukur 14px). Dipatok eksplisit. */
	font-size:15px !important;
	font-weight:400;
}
.nf-search-input::placeholder{ font-weight:400; }
.nf-profile-dropdown a{ font-size:var(--nf-fs-small); font-weight:500; letter-spacing:0; }
.nf-search-menu .nf-search-title{ font-size:var(--nf-fs-small); font-weight:500; }
.nf-search-menu .nf-search-cat,
.nf-search-cat{
	font-size:var(--nf-fs-micro);
	font-weight:600;
	letter-spacing:var(--nf-ls-micro);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */
.hero.nf-hero .nf-hero-content h1{
	font-size:var(--nf-fs-hero);
	font-weight:800;
	line-height:var(--nf-lh-tight);
	letter-spacing:var(--nf-ls-display);
	margin-bottom:16px;
}
.hero.nf-hero .nf-hero-meta{
	font-size:var(--nf-fs-small);
	font-weight:500;
	line-height:1.4;
	letter-spacing:0.005em;
	gap:16px;
}
.hero.nf-hero .nf-hero-meta .nf-badge{
	font-size:var(--nf-fs-micro);
	font-weight:700;
	letter-spacing:var(--nf-ls-micro);
}
.hero.nf-hero .nf-hero-desc{
	font-size:var(--nf-fs-lead);
	line-height:1.65 !important;
	font-weight:400;
	max-width:60ch;
	color:#e8e8e8;
}
.hero.nf-hero .nf-hero-actions a{
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-ui);
	font-weight:600;
	letter-spacing:0.01em;
	padding:12px 26px;
}
.nf-page-head h1{ font-weight:800; letter-spacing:var(--nf-ls-display); }
.nf-page-head p{ font-size:var(--nf-fs-small); }

/* ---------------------------------------------------------------------- */
/* Rows, cards, metadata (desktop)                                        */
/* ---------------------------------------------------------------------- */
.movie-items .title-hd{ margin-bottom:18px; }
.title-hd h2{
	font-size:var(--nf-fs-h2);
	font-weight:700;
	letter-spacing:var(--nf-ls-heading);
}
.title-hd a.viewall{
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-meta);
	font-weight:600;
	letter-spacing:var(--nf-ls-micro);
	text-transform:uppercase;
}

/* Card titles: sentence case (uppercase at 14px read as noise) and a 2-line
   min-height so every poster in a row ends on the same baseline. */
.movie-items .movie-item .title-in h6,
.movie-items .movie-item .title-in h6 a,
.title-in h6 a{
	font-family:var(--nf-font) !important;
	font-size:var(--nf-fs-ui);
	font-weight:500;
	line-height:1.35;
	letter-spacing:0;
	text-transform:none !important;
	color:var(--nf-white) !important;
}
.movie-items .movie-item .title-in h6{ min-height:2.7em; }
.title-in h6 a:hover{ color:var(--nf-gray-light) !important; }

/* View counts: the template rendered them at 18px — louder than the title
   they annotate. Metadata belongs *under* the title, not above it. */
.movie-items .movie-item .title-in p,
.title-in p, .title-in .rate{
	font-size:var(--nf-fs-meta);
	font-weight:500;
	line-height:1.4 !important;
	font-variant-numeric:tabular-nums;
	color:var(--nf-gray-light) !important;
}
.movie-items .movie-item .title-in p span{ font-size:var(--nf-fs-meta); font-weight:500; }
.movie-items .movie-item .title-in p i{ font-size:var(--nf-fs-small); }
.title-in .rate i, .title-in p i{ font-size:var(--nf-fs-small) !important; }

.cate span{ border-radius:3px !important; }
.cate span a{
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-micro);
	font-weight:600;
	letter-spacing:var(--nf-ls-micro);
	text-transform:uppercase;
}
.movie-items .movie-item .hvr-inner a{
	font-size:var(--nf-fs-small);
	font-weight:600;
	letter-spacing:0.01em;
}

.nf-cat-tabs a{ font-size:var(--nf-fs-meta); font-weight:500; }

/* ---------------------------------------------------------------------- */
/* Sidebar ("Populer Sepanjang Masa")                                     */
/* ---------------------------------------------------------------------- */
.sidebar .sb-title{
	font-size:var(--nf-fs-h3);
	font-weight:700;
	letter-spacing:var(--nf-ls-heading);
}
.sidebar .celeb-item h6{ font-size:var(--nf-fs-small); font-weight:500; line-height:1.35; }
.sidebar .celeb-item p{
	font-size:var(--nf-fs-meta);
	font-weight:400;
	line-height:1.4 !important;
	font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* Detail / watch / episode list                                          */
/* ---------------------------------------------------------------------- */
.nf-watch-title{ font-weight:800; letter-spacing:var(--nf-ls-display); }
.nf-watch-meta{ font-size:var(--nf-fs-small); font-weight:500; line-height:1.4; }
.nf-watch-meta .nf-badge{ font-size:var(--nf-fs-micro); font-weight:700; letter-spacing:var(--nf-ls-micro); }
.nf-watch-desc,
.nf-detail-desc p{
	font-size:var(--nf-fs-lead);
	line-height:1.7 !important;
	font-weight:400;
	max-width:72ch;
}
.nf-detail-tags{ font-size:var(--nf-fs-small); line-height:1.4; }
.nf-tag-box{
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-micro);
	font-weight:600;
	letter-spacing:var(--nf-ls-micro);
	text-transform:uppercase;
}
.nf-detail-meta p{ font-size:var(--nf-fs-small); line-height:1.6 !important; }
.nf-meta-label{ font-weight:500; }
.nf-episodes-head h3{ font-size:var(--nf-fs-h3); font-weight:700; }
.nf-episodes-count{ font-size:var(--nf-fs-meta); font-variant-numeric:tabular-nums; }
.nf-episode-num{ font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.nf-episode-title{ font-size:var(--nf-fs-ui); font-weight:500; line-height:1.4; }
.nf-episode-desc{ font-size:var(--nf-fs-small); line-height:1.55 !important; }
.nf-server-pill{ font-size:var(--nf-fs-meta); font-weight:500; }
.nf-servers-label{ font-size:var(--nf-fs-meta); }
.nf-now-playing{ font-size:var(--nf-fs-micro); font-weight:600; letter-spacing:var(--nf-ls-micro); }
.nf-player-gate p{ font-size:var(--nf-fs-body); line-height:1.6 !important; }

/* ---------------------------------------------------------------------- */
/* Buttons, pills, tabs, pagination, alerts                               */
/* ---------------------------------------------------------------------- */
.nf-icon-btn{ font-size:18px !important; }
.pagination .page-link{
	font-size:var(--nf-fs-meta);
	font-weight:500;
	font-variant-numeric:tabular-nums;
}
.topbar-filter .pagination2 a,
.topbar-filter .pagination2 span{ font-size:var(--nf-fs-meta); font-weight:500; }
.tabs ul.tab-links li a, .tabs ul.tab-links-2 li a, .tabs ul.tab-links-3 li a{
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-small);
	font-weight:600;
	letter-spacing:var(--nf-ls-micro);
	text-transform:uppercase;
}
.movie-items .alert-danger{ font-size:var(--nf-fs-small); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.nf-footer-col a{ font-size:var(--nf-fs-small); line-height:1.35; font-weight:400; }
.nf-footer-code{ font-size:var(--nf-fs-small); }
.nf-footer-copyright{ font-size:var(--nf-fs-meta); line-height:1.5 !important; font-weight:400; }

/* ---------------------------------------------------------------------- */
/* Mobile app shell                                                       */
/* ---------------------------------------------------------------------- */
.mobile-app-header .logo{
	font-family:var(--nf-font-display) !important;
	font-size:20px;
	font-weight:800;
	letter-spacing:var(--nf-ls-display);
}
.mobile-search-box input{ font-family:var(--nf-font) !important; font-size:var(--nf-fs-ui); }
.app-section-title h3{
	font-family:var(--nf-font-display) !important;
	font-size:19px;
	font-weight:700;
	letter-spacing:var(--nf-ls-heading);
}
.nf-cat-tabs-mobile a{ font-size:var(--nf-fs-meta); }

.app-movie-card .card-title{
	font-size:14px;           /* 13px was below a comfortable thumb-read */
	font-weight:500;
	line-height:1.35;
	letter-spacing:0;
	min-height:2.7em;         /* keeps a row of cards on one baseline */
}
.app-episode-card .card-title{ font-size:14px; }
.app-movie-card .card-meta{
	font-size:var(--nf-fs-micro);
	font-weight:500;
	line-height:1.3;
	font-variant-numeric:tabular-nums;
}
.app-episode-card .card-meta{ font-size:var(--nf-fs-micro); }
.app-movie-card .card-badge{
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-micro);
	font-weight:700;
	letter-spacing:var(--nf-ls-micro);
	font-variant-numeric:tabular-nums;
}
.app-section-title .view-all{ font-size:var(--nf-fs-small); font-weight:500; }
.app-empty-state p{ font-size:var(--nf-fs-small); line-height:1.5 !important; }
.mobile-bottom-nav .nav-item span{
	font-size:11px;           /* up from 10px */
	font-weight:600;
	letter-spacing:0.02em;
}
.mobile-side-menu .menu-item{ font-size:16px; font-weight:500; letter-spacing:0.005em; }

/* ---------------------------------------------------------------------- */
/* Auth / modal                                                           */
/* ---------------------------------------------------------------------- */
.login-header h1, .register-header h1{ font-weight:800; letter-spacing:var(--nf-ls-display); }
.login-header p, .register-header p{ font-size:var(--nf-fs-small); line-height:1.6 !important; }
.login-form-input, .register-form-input{ font-size:var(--nf-fs-ui); }
.login-submit-btn, .register-submit-btn{
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-ui);
	font-weight:600;
	letter-spacing:0.01em;
}
.login-footer a, .register-footer a{ font-size:var(--nf-fs-small); }

/* ---------------------------------------------------------------------- */
/* Small screens                                                          */
/* ---------------------------------------------------------------------- */
@media (max-width: 767px){
	.hero.nf-hero .nf-hero-content h1{ font-size:28px; }
	.hero.nf-hero .nf-hero-desc{ font-size:var(--nf-fs-ui); }
	.title-hd h2{ font-size:21px; }
	.nf-watch-title{ font-size:26px; }
	.nf-detail-desc p, .nf-watch-desc{ font-size:var(--nf-fs-body); }
	.nf-episode-desc{ -webkit-line-clamp:3; }
}