/* ==========================================================================
   NETFLIX-PREMIUM — lapisan visual teratas (dimuat PALING AKHIR)
   --------------------------------------------------------------------------
   Tujuan: mengangkat tampilan dari "template gelap biasa" jadi sinematik,
   mewah, dan modern tanpa mengubah struktur markup maupun tata letak dasar.

   Prinsip desain yang dipakai (biar konsisten, bukan tambal-sulam):
     • Kedalaman, bukan warna terang  → latar berlapis + permukaan glass
     • Geometri lembut                → radius 12–20px, kartu ring border tipis
     • Satu aksen                     → merah brand, sisanya netral
     • Ruang napas                    → jarak section 28–44px, gutter konsisten
     • Gerak halus                    → 180–420ms, cubic-bezier(.2,.8,.2,1)
     • Aksesibilitas                  → focus-visible ring, prefers-reduced-motion

   Semua aturan di sini menang atas netflix-theme.css / netflix-type.css /
   style.css (dimuat terakhir, dan memakai !important untuk properti visual
   yang di tema lama juga dipatok !important).
   ========================================================================== */

:root{
	/* permukaan + garis */
	--pf-bg:#07080b;
	--pf-bg-soft:#0b0d12;
	--pf-surface:rgba(255,255,255,.035);
	--pf-surface-2:rgba(255,255,255,.06);
	--pf-line:rgba(255,255,255,.07);
	--pf-line-strong:rgba(255,255,255,.14);

	/* aksen */
	--pf-red:#e50914;
	--pf-red-2:#ff3b46;
	--pf-glow:rgba(229,9,20,.42);
	--pf-cool:rgba(94,84,255,.16);

	/* teks */
	--pf-text:#f4f5f7;
	--pf-text-dim:#a7abb6;
	--pf-text-mute:#7d818c;

	/* geometri */
	--pf-r-sm:10px;
	--pf-r:14px;
	--pf-r-lg:20px;
	--pf-r-pill:999px;

	/* bayangan */
	--pf-sh-1:0 2px 10px rgba(0,0,0,.5);
	--pf-sh-2:0 18px 40px rgba(0,0,0,.55);
	--pf-sh-3:0 30px 70px rgba(0,0,0,.65);

	--pf-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------------------------------------------------------------------- */
/* Latar: kedalaman sinematik (dua sumber cahaya + vignette)              */
/* ---------------------------------------------------------------------- */
html{ background:var(--pf-bg); }
body{
	background:
		radial-gradient(1200px 620px at 12% -8%, rgba(229,9,20,.13), transparent 62%),
		radial-gradient(1000px 560px at 102% 4%, var(--pf-cool), transparent 58%),
		linear-gradient(180deg, var(--pf-bg-soft) 0%, var(--pf-bg) 42%, #05060a 100%) !important;
	background-attachment:fixed !important;
	color:var(--pf-text);
}
.movie-items, .movie_single, .page-single, .page-single-2, .ht-main,
.drama-poster-section, .mobile-app-content, .nf-player-page{
	background:transparent !important;
}
::selection{ background:rgba(229,9,20,.35); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{
	background:linear-gradient(180deg,#2b2f39,#1b1f27) !important;
	border:2px solid transparent;
	background-clip:padding-box;
	border-radius:var(--pf-r-pill);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#3a3f4c,#242832) !important; background-clip:padding-box; }
:focus-visible{ outline:2px solid rgba(255,255,255,.55); outline-offset:2px; border-radius:6px; }

/* ---------------------------------------------------------------------- */
/* Header: kaca (glass) dengan garis bawah halus                          */
/* ---------------------------------------------------------------------- */
.nf-header{
	background:linear-gradient(180deg, rgba(7,8,11,.86) 0%, rgba(7,8,11,.62) 70%, rgba(7,8,11,.28) 100%) !important;
	-webkit-backdrop-filter:blur(18px) saturate(150%);
	backdrop-filter:blur(18px) saturate(150%);
	border-bottom:1px solid rgba(255,255,255,.05) !important;
}
.nf-header.is-scrolled{
	background:rgba(6,7,10,.88) !important;
	border-bottom-color:var(--pf-line) !important;
	box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.nf-logo img{ filter:drop-shadow(0 4px 14px rgba(229,9,20,.35)); }

.nf-nav a{
	color:var(--pf-text-dim) !important;
	padding:9px 14px !important;
	border-radius:var(--pf-r-pill);
	transition:color .18s var(--pf-ease), background .18s var(--pf-ease);
}
.nf-nav a::after{ display:none !important; }   /* garis bawah lama → ganti pill */
.nf-nav a:hover, .nf-nav a:focus{
	color:#fff !important;
	background:var(--pf-surface-2);
}

/* Pencarian: input kapsul + fokus bercahaya */
.nf-search-toggle{
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line) !important;
	backdrop-filter:blur(8px);
}
.nf-search-toggle:hover{ background:var(--pf-surface-2) !important; border-color:var(--pf-line-strong) !important; }
.nf-search.active .nf-search-input{
	background:rgba(12,13,18,.92) !important;
	border:1px solid var(--pf-line-strong) !important;
	border-radius:var(--pf-r-pill) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--pf-sh-1);
}
.nf-search.active .nf-search-input:focus{
	border-color:rgba(255,255,255,.4) !important;
	box-shadow:0 0 0 4px rgba(229,9,20,.22), var(--pf-sh-1) !important;
}

.nf-avatar{
	background:linear-gradient(135deg, var(--pf-red) 0%, #8e0a12 100%) !important;
	border-radius:var(--pf-r-pill) !important;
	box-shadow:0 0 0 2px rgba(255,255,255,.12), 0 6px 18px rgba(229,9,20,.35);
}
.nf-profile-dropdown{
	background:rgba(11,13,18,.9) !important;
	-webkit-backdrop-filter:blur(18px) saturate(140%);
	backdrop-filter:blur(18px) saturate(140%);
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r) !important;
	box-shadow:var(--pf-sh-3) !important;
	padding:10px !important;
	overflow:hidden;
}
.nf-profile-dropdown a{
	border-radius:var(--pf-r-sm);
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease), padding-left .18s var(--pf-ease);
}
.nf-profile-dropdown a:hover{ background:var(--pf-surface-2); padding-left:22px; }
.nf-dropdown-divider{ background:var(--pf-line) !important; }

/* Menu hasil pencarian: kaca, sudut lembut, baris dengan aksen kiri */
.nf-search-menu{
	background:rgba(11,13,18,.92) !important;
	-webkit-backdrop-filter:blur(20px) saturate(150%);
	backdrop-filter:blur(20px) saturate(150%);
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r) !important;
	box-shadow:var(--pf-sh-3) !important;
	padding:6px !important;
}
.nf-search-menu .ui-menu-item-wrapper,
.nf-search-menu a{
	border-radius:var(--pf-r-sm) !important;
	border:0 !important;
	transition:background .16s var(--pf-ease), padding-left .16s var(--pf-ease);
}
.nf-search-menu .ui-menu-item-wrapper:hover,
.nf-search-menu .ui-menu-item-wrapper.ui-state-active,
.nf-search-menu a:hover{
	background:var(--pf-surface-2) !important;
	padding-left:20px !important;
}
.nf-search-menu .nf-search-cat{
	background:linear-gradient(135deg, rgba(229,9,20,.9), rgba(142,10,18,.9)) !important;
	color:#fff !important;
	letter-spacing:.06em;
	box-shadow:0 4px 12px rgba(229,9,20,.3);
}

/* ---------------------------------------------------------------------- */
/* Tombol                                                                 */
/* ---------------------------------------------------------------------- */
.hero.nf-hero .nf-hero-actions a,
.nf-btn-play, .nf-btn-info, .nf-player-gate .nf-btn-play, .redbtn{
	border-radius:var(--pf-r-pill) !important;
	letter-spacing:.02em;
	transition:transform .2s var(--pf-ease), box-shadow .2s var(--pf-ease), background .2s var(--pf-ease);
}
.hero.nf-hero .nf-btn-play, .nf-player-gate .nf-btn-play{
	background:#fff !important;
	color:#08090c !important;
	box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.hero.nf-hero .nf-btn-play:hover, .nf-player-gate .nf-btn-play:hover{
	transform:translateY(-2px);
	box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.hero.nf-hero .nf-btn-info{
	background:rgba(255,255,255,.1) !important;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	border:1px solid rgba(255,255,255,.16);
}
.hero.nf-hero .nf-btn-info:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.18) !important;
}
.redbtn{
	background:linear-gradient(135deg, var(--pf-red) 0%, #a80c14 100%) !important;
	border:0 !important;
	box-shadow:0 10px 26px var(--pf-glow);
}
.redbtn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px var(--pf-glow); }

/* ---------------------------------------------------------------------- */
/* Hero sinematik                                                         */
/* ---------------------------------------------------------------------- */
.hero.nf-hero{ min-height:64vh !important; }
.hero.nf-hero::after{
	content:'';
	position:absolute;
	left:0; right:0; bottom:0;
	height:42%;
	background:linear-gradient(180deg, transparent 0%, rgba(7,8,11,.55) 55%, var(--pf-bg) 100%);
	pointer-events:none;
	z-index:1;
}
.hero.nf-hero .nf-hero-content{ padding:88px 0 64px; z-index:3; }
.hero.nf-hero .nf-hero-content h1{
	max-width:18ch;
	text-shadow:0 3px 26px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
}
.hero.nf-hero .nf-hero-meta{
	color:var(--pf-text-dim);
}
.hero.nf-hero .nf-hero-meta .nf-badge{
	background:linear-gradient(135deg, var(--pf-red) 0%, #a80c14 100%) !important;
	border-radius:var(--pf-r-pill) !important;
	padding:4px 12px !important;
	box-shadow:0 6px 18px var(--pf-glow);
}
.hero.nf-hero .nf-hero-meta > span{
	background:rgba(255,255,255,.05);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	padding:4px 12px;
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	white-space:nowrap;
}
.hero.nf-hero .nf-hero-meta > span.nf-badge{ border:0; }
.hero.nf-hero .nf-hero-desc{ color:#dcdde3 !important; }
.nf-hero-dots{ bottom:30px; }
.nf-hero-dots button{
	width:26px !important;
	height:4px !important;
	border-radius:var(--pf-r-pill) !important;
	background:rgba(255,255,255,.28) !important;
	transition:background .2s var(--pf-ease), width .2s var(--pf-ease);
}
.nf-hero-dots button.is-active{
	width:40px !important;
	background:linear-gradient(90deg, var(--pf-red), var(--pf-red-2)) !important;
	box-shadow:0 0 16px var(--pf-glow);
	transform:none !important;
}

/* ---------------------------------------------------------------------- */
/* Judul section: batang aksen + spacing lega                             */
/* ---------------------------------------------------------------------- */
.movie-items{ padding-top:26px !important; margin-bottom:6px; }
.title-hd{
	align-items:center !important;
	margin-bottom:20px !important;
}
.title-hd h2{
	display:flex;
	align-items:center;
	gap:12px;
	color:var(--pf-text) !important;
	letter-spacing:-.01em;
}
.title-hd h2::before{
	content:'';
	flex:0 0 auto;
	width:4px;
	height:1.05em;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(180deg, var(--pf-red), #7d0a11);
	box-shadow:0 0 18px var(--pf-glow);
}
.title-hd a.viewall{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	padding:8px 16px !important;
	color:var(--pf-text-dim) !important;
	text-transform:none !important;
	letter-spacing:.01em !important;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease), border-color .18s var(--pf-ease);
}
.title-hd a.viewall i{ transition:transform .2s var(--pf-ease); }
.title-hd a.viewall:hover{
	background:var(--pf-surface-2) !important;
	border-color:var(--pf-line-strong);
	color:#fff !important;
}
.title-hd a.viewall:hover i{ transform:translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Kartu poster                                                           */
/* ---------------------------------------------------------------------- */
.movie-items .movie-item, .movie-item-style-1, .movie-item-style-2{
	border-radius:var(--pf-r) !important;
	box-shadow:var(--pf-sh-1);
	outline:1px solid var(--pf-line);
	outline-offset:-1px;
	transition:transform .32s var(--pf-ease), box-shadow .32s var(--pf-ease), outline-color .32s var(--pf-ease);
}
.movie-items .movie-item:hover, .movie-item-style-1:hover, .movie-item-style-2:hover{
	transform:translateY(-8px) scale(1.03) !important;
	outline-color:var(--pf-line-strong);
	box-shadow:var(--pf-sh-3), 0 0 0 1px rgba(255,255,255,.06), 0 18px 50px rgba(229,9,20,.18);
	z-index:6;
}
.movie-items .movie-item .mv-img img,
.movie-item .mv-img img{ transition:transform .55s var(--pf-ease); }
.movie-items .movie-item:hover .mv-img img{ transform:scale(1.07); }
.movie-items .movie-item .mv-img{ position:relative; }
.movie-items .movie-item .mv-img::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, transparent 45%, rgba(5,6,10,.72) 100%);
	opacity:0;
	transition:opacity .32s var(--pf-ease);
	pointer-events:none;
}
.movie-items .movie-item:hover .mv-img::after{ opacity:1; }

.movie-items .movie-item .title-in{ padding-top:12px; }
.movie-items .movie-item .hvr-inner{
	background:linear-gradient(0deg, rgba(5,6,10,.94) 0%, rgba(5,6,10,.25) 55%, transparent 100%) !important;
}
.movie-items .movie-item .hvr-inner a{
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.18);
	border-radius:var(--pf-r-pill);
	padding:8px 16px;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}

/* Label status jadi pil lembut, bukan blok warna penuh */
.cate span{
	border-radius:var(--pf-r-pill) !important;
	padding:3px 10px !important;
	background:rgba(255,255,255,.07) !important;
	border:1px solid var(--pf-line);
	box-shadow:none !important;
}
.cate span a{ letter-spacing:.06em; color:var(--pf-text) !important; }
.cate .blue{ background:linear-gradient(135deg, rgba(229,9,20,.85), rgba(142,10,18,.85)) !important; border-color:transparent !important; }
.cate .green{ background:rgba(47,143,70,.22) !important; border-color:rgba(47,143,70,.4) !important; }
.cate .orange{ background:rgba(255,255,255,.08) !important; }
.cate .yell{ background:rgba(184,134,11,.25) !important; border-color:rgba(184,134,11,.4) !important; }

/* Panah geser baris */
.nf-row{ gap:18px !important; padding:10px 2px 28px !important; }
.nf-row-arrow{
	width:52px !important;
	background:linear-gradient(90deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,0) 100%) !important;
}
.nf-row-arrow-next{ background:linear-gradient(270deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,0) 100%) !important; }
.nf-row-arrow i{
	background:rgba(255,255,255,.09);
	border:1px solid var(--pf-line-strong);
	border-radius:var(--pf-r-pill);
	width:40px; height:40px;
	display:flex; align-items:center; justify-content:center;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	transition:background .2s var(--pf-ease), transform .2s var(--pf-ease);
}
.nf-row-arrow:hover i{ background:var(--pf-red); transform:scale(1.06); }

/* ---------------------------------------------------------------------- */
/* Sidebar populer: daftar bernomor (counter CSS, tanpa ubah markup)       */
/* ---------------------------------------------------------------------- */
.sidebar{ position:sticky; top:96px; }
.sidebar .celebrities{
	counter-reset:pfpop;
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-lg);
	padding:22px 20px;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}
.sidebar .sb-title{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:16px !important;
}
.sidebar .sb-title::before{
	content:'';
	width:4px; height:1.05em;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(180deg, var(--pf-red), #7d0a11);
	box-shadow:0 0 16px var(--pf-glow);
}
.sidebar .celeb-item{
	counter-increment:pfpop;
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	padding:10px 10px 10px 44px !important;
	border:0 !important;
	border-radius:var(--pf-r-sm);
	transition:background .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.sidebar .celeb-item::before{
	content:counter(pfpop,decimal-leading-zero);
	position:absolute;
	left:12px;
	font-family:var(--nf-font-display) !important;
	font-size:15px;
	font-weight:800;
	color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,.28);
}
.sidebar .celeb-item:hover{ background:var(--pf-surface-2); transform:translateX(3px); }
.sidebar .celeb-item img{
	border-radius:var(--pf-r-sm) !important;
	outline:1px solid var(--pf-line);
}
.sidebar .celeb-item h6{ font-weight:600; }

/* ---------------------------------------------------------------------- */
/* Halaman detail / tonton                                                */
/* ---------------------------------------------------------------------- */
.nf-page-head{ padding:120px 0 28px; }
.nf-page-head h1{ letter-spacing:-.02em; }
.nf-detail-desc{
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-lg);
	padding:22px 24px;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}
.nf-episode-row{
	border:1px solid transparent !important;
	border-radius:var(--pf-r) !important;
	transition:background .2s var(--pf-ease), border-color .2s var(--pf-ease), transform .2s var(--pf-ease);
}
.nf-episode-row:hover{
	background:var(--pf-surface) !important;
	border-color:var(--pf-line) !important;
	transform:translateX(4px);
}
.nf-episode-row.is-current{
	background:linear-gradient(90deg, rgba(229,9,20,.16) 0%, rgba(229,9,20,.02) 100%) !important;
	border-color:rgba(229,9,20,.35) !important;
}
.nf-episode-thumb{ border-radius:var(--pf-r-sm) !important; outline:1px solid var(--pf-line); }
.nf-episode-num{
	color:var(--pf-text-mute) !important;
	font-family:var(--nf-font-display) !important;
}
.nf-server-pill{
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r-pill) !important;
	padding:9px 18px !important;
	transition:background .18s var(--pf-ease), border-color .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.nf-server-pill:hover{
	background:linear-gradient(135deg, var(--pf-red), #a80c14) !important;
	border-color:transparent !important;
	transform:translateY(-2px);
}
.nf-icon-btn{
	background:rgba(255,255,255,.06) !important;
	border:1px solid var(--pf-line-strong) !important;
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
}
.nf-player-stage{ box-shadow:0 30px 80px rgba(0,0,0,.6); }

/* ---------------------------------------------------------------------- */
/* Footer — panel kaca: brand + kolom berjudul + bar bawah                */
/* ---------------------------------------------------------------------- */
.nf-footer{
	position:relative;
	background:
		radial-gradient(800px 340px at 50% 0%, rgba(229,9,20,.10), transparent 68%),
		linear-gradient(180deg, transparent 0%, rgba(4,5,8,.55) 100%) !important;
	border-top:0 !important;
	padding:72px 0 44px !important;
	margin-top:64px !important;
}
.nf-footer::before{
	content:'';
	position:absolute;
	top:0; left:50%;
	transform:translateX(-50%);
	width:100%;
	height:1px;
	background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 18%, rgba(229,9,20,.55) 50%, rgba(255,255,255,.14) 82%, transparent 100%);
}
/* Full width seperti baris film: gutter 4% kiri-kanan, bukan kolom 1120px.
   Sebelumnya konten footer 160px lebih sempit dari konten halaman. */
.nf-footer-inner{
	width:100% !important;
	max-width:100% !important;
	padding-left:4% !important;
	padding-right:4% !important;
	box-sizing:border-box;
}

.nf-footer-panel{
	display:grid;
	grid-template-columns:minmax(280px, 1fr) minmax(0, 2.6fr);
	gap:44px 64px;
	padding:34px 36px 32px;
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:24px;
	-webkit-backdrop-filter:blur(14px) saturate(140%);
	backdrop-filter:blur(14px) saturate(140%);
	box-shadow:var(--pf-sh-2);
}

.nf-footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:460px; }
.nf-footer-logo img{
	height:46px; width:46px;
	display:block;
	object-fit:contain;
	border-radius:14px;
	filter:drop-shadow(0 6px 20px rgba(229,9,20,.35));
}
.nf-footer-tagline{
	margin:0 !important;
	max-width:32ch;
	color:var(--pf-text-dim) !important;
	font-size:14.5px;
	line-height:1.65;
}
.nf-footer-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.nf-footer-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:11.5px;
	font-weight:600;
	letter-spacing:.07em;
	text-transform:uppercase;
	color:var(--pf-text-dim);
	background:rgba(255,255,255,.045);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	padding:6px 13px;
}
.nf-footer-chip i{ color:var(--pf-red-2); font-size:13px; }
.nf-footer-cta{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-top:2px;
	padding:12px 22px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red) 0%, #a80c14 100%) !important;
	color:#fff !important;
	font-weight:600;
	font-size:14px;
	letter-spacing:.01em;
	box-shadow:0 14px 34px var(--pf-glow);
	transition:transform .2s var(--pf-ease), box-shadow .2s var(--pf-ease);
}
.nf-footer-cta:hover{ transform:translateY(-2px); box-shadow:0 20px 44px var(--pf-glow); }

.nf-footer-cols{ display:grid; grid-template-columns:repeat(4, minmax(140px, 1fr)); gap:30px 28px; }
.nf-footer-head{
	margin:0 0 15px !important;
	font-family:var(--nf-font-display) !important;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#fff !important;
	opacity:.92;
}
.nf-footer-head::after{
	content:'';
	display:block;
	width:22px;
	height:2px;
	margin-top:9px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(90deg, var(--pf-red), rgba(229,9,20,0));
}
.nf-footer-col{ display:flex; flex-direction:column; gap:11px; }
.nf-footer-col a{
	position:relative;
	color:var(--pf-text-mute) !important;
	transition:color .18s var(--pf-ease), padding-left .18s var(--pf-ease);
}
.nf-footer-col a::before{
	content:'';
	position:absolute;
	left:0; top:50%;
	width:5px; height:5px;
	margin-top:-2.5px;
	border-radius:50%;
	background:var(--pf-red);
	opacity:0;
	transition:opacity .18s var(--pf-ease);
}
.nf-footer-col a:hover{ color:#fff !important; padding-left:13px; text-decoration:none !important; }
.nf-footer-col a:hover::before{ opacity:1; }

.nf-footer-bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:22px;
	flex-wrap:wrap;
	margin-top:30px;
	padding-top:24px;
	border-top:1px solid var(--pf-line);
}
.nf-footer-copyright{ margin:0 !important; color:var(--pf-text-mute) !important; font-size:13px; letter-spacing:.02em; }
.nf-footer-social{ display:flex; gap:10px; }
.nf-footer-social a{
	width:40px; height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	color:var(--pf-text-dim) !important;
	font-size:17px !important;
	transition:background .2s var(--pf-ease), color .2s var(--pf-ease), transform .2s var(--pf-ease), border-color .2s var(--pf-ease);
}
.nf-footer-social a:hover{
	background:var(--pf-surface-2) !important;
	border-color:var(--pf-line-strong);
	color:#fff !important;
	transform:translateY(-3px);
}
@media (max-width: 991px){
	.nf-footer-panel{ grid-template-columns:1fr; gap:34px; padding:26px 22px 24px; border-radius:20px; }
	.nf-footer-cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.nf-footer{ padding:52px 0 36px !important; margin-top:44px !important; }
}
@media (max-width: 575px){
	.nf-footer-bottom{ flex-direction:column; align-items:flex-start; }
}
.nf-footer-code{ display:none !important; }   /* tombol "Kode Layanan" lama, sudah tidak dipakai */

/* ---------------------------------------------------------------------- */
/* Kerangka app mobile                                                    */
/* ---------------------------------------------------------------------- */
.mobile-app-header{
	background:rgba(7,8,11,.86) !important;
	-webkit-backdrop-filter:blur(16px) saturate(150%);
	backdrop-filter:blur(16px) saturate(150%);
	border-bottom:1px solid var(--pf-line) !important;
	box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.mobile-search-box{
	background:rgba(7,8,11,.86) !important;
	-webkit-backdrop-filter:blur(16px);
	backdrop-filter:blur(16px);
	border-bottom:1px solid var(--pf-line) !important;
}
.mobile-search-box input{
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r-pill) !important;
}
.mobile-search-box input:focus{
	border-color:rgba(255,255,255,.35) !important;
	box-shadow:0 0 0 4px rgba(229,9,20,.2);
}
.mobile-app-content{ background:transparent !important; }
.app-section-title{ padding:22px 14px 12px !important; }
.app-section-title h3{
	display:flex;
	align-items:center;
	gap:10px;
	letter-spacing:-.01em;
}
.app-section-title h3::before{
	content:'';
	width:4px; height:1.05em;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(180deg, var(--pf-red), #7d0a11);
	box-shadow:0 0 14px var(--pf-glow);
}
.app-section-title .view-all{ color:var(--pf-text-dim) !important; }
.app-horizontal-list{ gap:14px !important; padding:0 14px 20px !important; }
.app-movie-card{
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r) !important;
	box-shadow:var(--pf-sh-1);
	overflow:hidden;
}
.app-movie-card .card-info{ padding:12px 12px 14px !important; }
.app-movie-card .card-badge{
	border-radius:var(--pf-r-pill) !important;
	padding:3px 9px !important;
	background:linear-gradient(135deg, var(--pf-red), #a80c14) !important;
	box-shadow:0 6px 16px var(--pf-glow);
}
.app-hero-banner{
	border-radius:var(--pf-r-lg) !important;
	box-shadow:var(--pf-sh-2);
	outline:1px solid var(--pf-line);
}
.mobile-bottom-nav{
	background:rgba(7,8,11,.9) !important;
	-webkit-backdrop-filter:blur(18px) saturate(150%);
	backdrop-filter:blur(18px) saturate(150%);
	border-top:1px solid var(--pf-line) !important;
	box-shadow:0 -12px 34px rgba(0,0,0,.5) !important;
}
.mobile-bottom-nav .nav-item{ border-radius:var(--pf-r) !important; }
.mobile-bottom-nav .nav-item.active{
	background:linear-gradient(180deg, rgba(229,9,20,.22), rgba(229,9,20,.06)) !important;
	color:#fff !important;
}
.mobile-bottom-nav .nav-item.active i{ color:var(--pf-red-2); }
.mobile-side-menu{
	background:rgba(9,10,14,.94) !important;
	-webkit-backdrop-filter:blur(20px);
	backdrop-filter:blur(20px);
	border-right:1px solid var(--pf-line) !important;
}
.mobile-side-menu .menu-item{
	border-radius:var(--pf-r-sm) !important;
	margin:6px 12px !important;
	border-bottom:0 !important;
}
.mobile-side-menu .menu-item::before{
	background:linear-gradient(180deg, var(--pf-red), #7d0a11) !important;
	border-radius:var(--pf-r-pill);
	left:2px !important;
	width:3px !important;
}

/* ---------------------------------------------------------------------- */
/* Login / register / modal                                               */
/* ---------------------------------------------------------------------- */
.login-card, .register-card{
	background:rgba(12,14,19,.72) !important;
	-webkit-backdrop-filter:blur(18px) saturate(140%);
	backdrop-filter:blur(18px) saturate(140%);
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r-lg) !important;
	box-shadow:var(--pf-sh-3) !important;
}
.login-form-input, .register-form-input{
	border-radius:var(--pf-r-sm) !important;
	border:1px solid var(--pf-line) !important;
}
.login-submit-btn, .register-submit-btn{
	border-radius:var(--pf-r-pill) !important;
	background:linear-gradient(135deg, var(--pf-red) 0%, #a80c14 100%) !important;
	box-shadow:0 14px 34px var(--pf-glow) !important;
}
.ui-autocomplete.ui-widget.ui-widget-content{
	background:rgba(11,13,18,.94) !important;
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r) !important;
	box-shadow:var(--pf-sh-3) !important;
	overflow:hidden;
}
.ui-autocomplete .nf-search-cat{
	background:linear-gradient(135deg, rgba(229,9,20,.85), rgba(142,10,18,.85)) !important;
	color:#fff !important;
	border-color:transparent !important;
}

/* Pagination & tab */
.pagination .page-link{
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line) !important;
	border-radius:var(--pf-r-sm) !important;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease);
}
.pagination .page-link:hover{ background:var(--pf-surface-2) !important; }
.pagination .page-item.active .page-link{
	background:linear-gradient(135deg, var(--pf-red), #a80c14) !important;
	border-color:transparent !important;
	box-shadow:0 8px 20px var(--pf-glow);
}
.tabs ul.tab-links li a, .tabs ul.tab-links-2 li a, .tabs ul.tab-links-3 li a{
	border-radius:var(--pf-r-pill);
	padding:8px 16px;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease);
}
.tabs ul.tab-links li a:hover, .tabs ul.tab-links-2 li a:hover, .tabs ul.tab-links-3 li a:hover{
	background:var(--pf-surface-2);
}
.nf-cat-tabs a{
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line) !important;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.nf-cat-tabs a:hover{ transform:translateY(-2px); background:var(--pf-surface-2) !important; }
.nf-cat-tabs a.is-active{
	background:linear-gradient(135deg, var(--pf-red) 0%, #a80c14 100%) !important;
	box-shadow:0 10px 26px var(--pf-glow);
}

/* ---------------------------------------------------------------------- */
/* Preloader & gerak                                                      */
/* ---------------------------------------------------------------------- */
#preloader{ background:var(--pf-bg) !important; }
#preloader .logo{ filter:drop-shadow(0 0 24px rgba(229,9,20,.5)); }

@media (max-width: 991px){
	.hero.nf-hero{ min-height:0 !important; }
	.sidebar{ position:static; }
}
@media (max-width: 767px){
	.hero.nf-hero .nf-hero-content{ padding:64px 0 44px; }
	.movie-items{ padding-top:18px !important; }
	.title-hd{ margin-bottom:14px !important; }
}
@media (prefers-reduced-motion: reduce){
	*{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------- */
/* Navbar & pencarian — naik kelas (lapisan paling akhir)                  */
/* ---------------------------------------------------------------------- */

/* Garis aksen merah tipis di bawah header, muncul saat halaman digulir */
.nf-header{ position:sticky; }
.nf-header::after{
	content:'';
	position:absolute;
	left:0; right:0; bottom:-1px;
	height:1px;
	background:linear-gradient(90deg, transparent 0%, rgba(229,9,20,.5) 32%, rgba(255,255,255,.18) 50%, rgba(229,9,20,.5) 68%, transparent 100%);
	opacity:0;
	transition:opacity .3s var(--pf-ease);
	pointer-events:none;
}
.nf-header.is-scrolled::after{ opacity:1; }

.nf-logo img{
	height:40px !important;
	width:40px !important;
	filter:drop-shadow(0 6px 18px rgba(229,9,20,.45));
	transition:transform .25s var(--pf-ease);
}
.nf-logo:hover img{ transform:scale(1.06); }

/* Menu: pil hover + penanda halaman aktif (kelas .is-current diisi JS) */
.nf-nav a{ position:relative; }
.nf-nav a.is-current{
	color:#fff !important;
	background:var(--pf-surface-2);
}
.nf-nav a.is-current::before{
	content:'';
	position:absolute;
	left:50%; bottom:2px;
	transform:translateX(-50%);
	width:16px; height:2px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(90deg, var(--pf-red), var(--pf-red-2));
	box-shadow:0 0 12px var(--pf-glow);
}

/* Bidang pencarian: satu pil kaca, ikon di dalamnya */
.nf-search{
	align-items:center;
	gap:0;
	height:46px;
	padding:0 5px;
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
	transition:background .25s var(--pf-ease), border-color .25s var(--pf-ease), box-shadow .25s var(--pf-ease);
}
.nf-search:hover{ background:var(--pf-surface-2); border-color:var(--pf-line-strong); }
.nf-search.active{
	background:rgba(11,13,18,.94) !important;
	border-color:rgba(255,255,255,.22) !important;
	box-shadow:0 0 0 4px rgba(229,9,20,.16), 0 14px 34px rgba(0,0,0,.4);
}
.nf-search-toggle{
	width:36px !important;
	height:36px !important;
	background:transparent !important;
	border:0 !important;
	border-radius:var(--pf-r-pill) !important;
	color:var(--pf-text-dim) !important;
	font-size:18px !important;
}
.nf-search-toggle:hover{ background:var(--pf-surface-2) !important; color:#fff !important; }
.nf-search.active .nf-search-toggle{ color:#fff !important; }
.nf-search.active .nf-search-input{
	width:250px !important;
	height:36px !important;
	margin-left:0 !important;
	padding:0 12px 0 2px !important;
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
}

/* Petunjuk tombol pintas "/" */
.nf-search::after{
	content:'/';
	display:none;
	align-items:center;
	justify-content:center;
	width:22px; height:22px;
	margin-right:9px;
	font-family:var(--nf-font) !important;
	font-size:11px;
	font-weight:600;
	color:var(--pf-text-mute);
	background:rgba(255,255,255,.05);
	border:1px solid var(--pf-line);
	border-radius:6px;
}

@media (min-width: 1200px){
	/* Layar lebar: kolom pencarian selalu tampil, bukan disembunyikan di balik ikon */
	.nf-search .nf-search-input{
		width:210px !important;
		height:36px !important;
		opacity:1 !important;
		margin-left:0 !important;
		padding:0 12px 0 2px !important;
		background:transparent !important;
		border:0 !important;
		color:var(--pf-text) !important;
	}
	.nf-search .nf-search-input::placeholder{ color:var(--pf-text-mute); }
	.nf-search.active .nf-search-input{ width:290px !important; }
	.nf-search::after{ display:flex; }
	.nf-search.active::after{ display:none; }
}

/* Dropdown hasil: judul panel, sorotan kata kunci, baris lebih hidup */
.nf-search-menu::before{
	content:'Hasil pencarian';
	display:block;
	margin:0 8px 6px;
	padding:8px 16px 10px;
	font-family:var(--nf-font-display) !important;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--pf-text-mute);
	border-bottom:1px solid var(--pf-line);
}
.nf-search-menu mark{
	background:rgba(229,9,20,.24);
	color:#fff;
	border-radius:3px;
	padding:0 2px;
}
.nf-search-menu .ui-menu-item-wrapper:hover .nf-search-title{ color:#fff !important; }

/* ---------------------------------------------------------------------- */
/* Navbar lebih besar + logo lebih besar                                   */
/* ---------------------------------------------------------------------- */
.nf-header-inner{ gap:40px !important; }
.nf-header-left{ gap:44px !important; }
.nf-logo img{
	height:54px !important;
	width:54px !important;
	filter:drop-shadow(0 8px 24px rgba(229,9,20,.5));
}
.nf-logo:hover img{ transform:scale(1.05); }
.nf-nav{ gap:30px !important; }
.nf-nav a{
	font-size:16px !important;
	padding:11px 16px !important;
}
.nf-nav a.is-current::before{ bottom:4px; width:20px; }
.nf-search{ height:50px; padding:0 6px; }
.nf-search-toggle{ width:38px !important; height:38px !important; font-size:19px !important; }
.nf-search.active .nf-search-input{ height:38px !important; }
.nf-search::after{ margin-right:11px; }
.nf-avatar{ width:38px !important; height:38px !important; font-size:18px !important; }
.nf-caret{ font-size:12px; }
.nf-header-right{ gap:24px !important; }
@media (min-width: 1200px){
	.nf-search .nf-search-input{ height:38px !important; width:230px !important; }
	.nf-search.active .nf-search-input{ width:320px !important; }
}

/* ---------------------------------------------------------------------- */
/* Preloader: sinematik (logo berdenyut + cincin + bar progres)            */
/* ---------------------------------------------------------------------- */
#preloader{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:24px;
	background:
		radial-gradient(700px 380px at 50% 38%, rgba(229,9,20,.18), transparent 62%),
		linear-gradient(180deg, #0a0b10 0%, #05060a 100%) !important;
}
.nf-load-mark{
	position:relative;
	width:132px;
	height:132px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.nf-load-mark img{
	height:88px !important;
	width:88px !important;
	margin:0 !important;
	object-fit:contain;
	filter:drop-shadow(0 10px 30px rgba(229,9,20,.55));
	animation:nfLoadPulse 2.1s var(--pf-ease) infinite;
}
.nf-load-ring{
	position:absolute;
	inset:0;
	border-radius:50%;
	border:2px solid rgba(255,255,255,.07);
	border-top-color:var(--pf-red);
	border-right-color:rgba(255,255,255,.22);
	animation:nfLoadSpin 1.1s linear infinite;
}
.nf-load-mark-sm{ width:96px; height:96px; }
.nf-load-mark-sm img{ height:62px !important; width:62px !important; }
.nf-load-brand{
	font-family:var(--nf-font-display) !important;
	font-size:13px;
	font-weight:700;
	letter-spacing:.42em;
	text-transform:uppercase;
	color:#9aa0ad;
	text-indent:.42em;
}
#preloader #status{
	position:static !important;
	width:230px !important;
	height:4px !important;
	top:auto !important;
	right:auto !important;
	margin:0 !important;
	background:rgba(255,255,255,.07) !important;
	border-radius:var(--pf-r-pill);
	overflow:hidden;
}
#preloader #status span{
	position:absolute !important;
	inset:0 !important;
	width:auto !important;
	height:auto !important;
	top:0 !important;
	left:0 !important;
	margin:0 !important;
	border:0 !important;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(90deg, transparent 0%, rgba(229,9,20,.25) 35%, #ff3b46 50%, rgba(229,9,20,.25) 65%, transparent 100%);
	animation:nfLoadSweep 1.25s linear infinite;
}
#preloader #status span:nth-child(2){ animation-delay:.55s; opacity:.7; }
@keyframes nfLoadSpin{ to{ transform:rotate(360deg); } }
@keyframes nfLoadPulse{
	0%,100%{ transform:scale(1); filter:drop-shadow(0 10px 30px rgba(229,9,20,.45)); }
	50%{ transform:scale(1.07); filter:drop-shadow(0 14px 40px rgba(229,9,20,.7)); }
}
@keyframes nfLoadSweep{
	0%{ transform:translateX(-100%); }
	100%{ transform:translateX(100%); }
}

/* ---------------------------------------------------------------------- */
/* Loader perpindahan halaman — di mobile ikut muncul saat pindah tab      */
/* ---------------------------------------------------------------------- */
.nf-route{
	position:fixed;
	inset:0;
	z-index:9998;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(5,6,10,.72);
	-webkit-backdrop-filter:blur(7px);
	backdrop-filter:blur(7px);
	opacity:0;
	visibility:hidden;
	transition:opacity .22s var(--pf-ease), visibility .22s var(--pf-ease);
}
.nf-route.is-on{ opacity:1; visibility:visible; }
.nf-route-bar{
	position:absolute;
	top:0; left:0; right:0;
	height:3px;
	overflow:hidden;
	background:rgba(255,255,255,.06);
}
.nf-route-bar span{
	position:absolute;
	inset:0;
	background:linear-gradient(90deg, transparent, var(--pf-red) 45%, #ff3b46 55%, transparent);
	animation:nfRouteSweep 1s linear infinite;
}
@keyframes nfRouteSweep{
	0%{ transform:translateX(-100%); }
	100%{ transform:translateX(100%); }
}
.nf-route-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:18px;
	padding:30px 34px 26px;
	background:rgba(12,14,19,.78);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-lg);
	box-shadow:var(--pf-sh-3);
}
.nf-route-card p{
	margin:0 !important;
	font-size:13px;
	font-weight:500;
	letter-spacing:.04em;
	color:var(--pf-text-dim) !important;
}
.nf-route-card img{ animation:nfLoadPulse 1.8s var(--pf-ease) infinite; }
/* Desktop: cukup bilah tipis di atas, kartu hanya di layar kecil */
@media (min-width: 992px){
	.nf-route{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
	.nf-route-card{ display:none; }
	.nf-route-bar{ height:2px; background:transparent; }
}

/* ---------------------------------------------------------------------- */
/* Kerapian: sejajarkan tepi & tinggi kontrol di navbar/footer             */
/* ---------------------------------------------------------------------- */
.nf-header-inner, .nf-footer-bottom{ align-items:center; }
.nf-footer-bottom{ min-height:44px; }
.nf-footer-panel{ align-items:start; }
.nf-footer-col a, .nf-footer-head{ padding-left:0; }
.nf-footer-social a{ flex:0 0 auto; }
.nf-footer-cta, .nf-footer-chip, .nf-footer-social a{ line-height:1; }

/* ---------------------------------------------------------------------- */
/* Halaman detail / tonton — versi mewah (breadcrumb, poster, filter)      */
/* ---------------------------------------------------------------------- */

/* Breadcrumb di atas judul */
.nf-crumb{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:15px;
	font-size:13px;
	color:var(--pf-text-mute);
}
.nf-crumb a{ color:var(--pf-text-dim) !important; font-weight:500; }
.nf-crumb a:hover{ color:#fff !important; }
.nf-crumb i{ font-size:11px; opacity:.45; }
.nf-crumb-current{
	color:#fff;
	font-weight:600;
	max-width:48ch;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* Tombol hero berupa <button> (Bagikan) ikut tampil seperti tombol <a> */
.hero.nf-hero .nf-hero-actions button{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:12px 26px;
	border:0;
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.1);
	color:#fff;
	font-family:var(--nf-font-display) !important;
	font-size:var(--nf-fs-ui);
	font-weight:600;
	letter-spacing:.01em;
	cursor:pointer;
	transition:transform .2s var(--pf-ease), background .2s var(--pf-ease);
}
.hero.nf-hero .nf-hero-actions button.nf-btn-info{
	background:rgba(255,255,255,.1) !important;
	border:1px solid rgba(255,255,255,.16);
}
.hero.nf-hero .nf-hero-actions button:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.18) !important;
}
.hero.nf-hero .nf-hero-actions button.is-done{
	background:rgba(47,143,70,.92) !important;
	border-color:transparent !important;
}
.hero.nf-hero-detail .nf-hero-content h1{ max-width:22ch; }

/* Kolom: poster · sinopsis · informasi (poster opsional → tetap sejajar) */
.nf-detail-body{
	grid-template-columns:auto minmax(0, 2.35fr) minmax(210px, 1fr) !important;
	gap:34px 40px !important;
	align-items:start;
	padding:26px 0 44px !important;
}
.nf-detail-poster{
	grid-column:1;
	width:210px;
	border-radius:var(--pf-r) !important;
	overflow:hidden;
	background:var(--pf-surface);
	outline:1px solid var(--pf-line);
	box-shadow:var(--pf-sh-2);
}
.nf-detail-poster img{
	width:100%;
	aspect-ratio:2 / 3;
	object-fit:cover;
	display:block;
}
.nf-detail-desc{ grid-column:2; }
.nf-detail-meta{ grid-column:3; }

.nf-detail-label{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 14px !important;
	font-family:var(--nf-font-display) !important;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#fff !important;
	opacity:.92;
}
.nf-detail-label::before{
	content:'';
	flex:0 0 auto;
	width:4px;
	height:1.05em;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(180deg, var(--pf-red), #7d0a11);
	box-shadow:0 0 14px var(--pf-glow);
}
.nf-detail-tags{ margin-bottom:16px; }

/* Sinopsis panjang: dipotong + tombol buka */
.nf-clamp{
	display:-webkit-box;
	-webkit-line-clamp:6;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.nf-clamp.is-open{
	display:block;
	-webkit-line-clamp:unset;
	overflow:visible;
}
.nf-more{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:12px;
	padding:0;
	background:none;
	border:0;
	cursor:pointer;
	font-family:var(--nf-font-display) !important;
	font-size:13px;
	font-weight:600;
	letter-spacing:.02em;
	color:var(--pf-red-2);
}
.nf-more:hover{ color:#fff; }
.nf-more i{ transition:transform .2s var(--pf-ease); }
.nf-more.is-open i{ transform:rotate(180deg); }

/* Panel informasi */
.nf-detail-meta{
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-lg);
	padding:20px 22px 22px;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}
.nf-detail-meta p{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:14px;
	margin:0 0 11px !important;
}
.nf-detail-meta p > span:last-child{ color:#fff; font-weight:500; text-align:right; }
.nf-meta-label{ color:var(--pf-text-mute) !important; font-weight:500; }
.nf-meta-cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	width:100%;
	margin-top:16px;
	padding:12px 16px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red), #a80c14) !important;
	color:#fff !important;
	font-weight:600;
	font-size:13.5px;
	box-shadow:0 12px 30px var(--pf-glow);
	transition:transform .2s var(--pf-ease);
}
.nf-meta-cta:hover{ transform:translateY(-2px); }

/* Daftar episode: kepala + saringan + baris */
.nf-episodes-head{ align-items:center !important; gap:18px; flex-wrap:wrap; }
.nf-episodes-tools{ display:flex; align-items:center; gap:16px; }
.nf-ep-filter{ position:relative; display:inline-flex; align-items:center; }
.nf-ep-filter > i{
	position:absolute;
	left:14px;
	font-size:15px;
	color:var(--pf-text-mute);
	pointer-events:none;
}
.nf-ep-filter input{
	width:230px;
	height:42px;
	padding:0 16px 0 38px;
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	color:var(--pf-text);
	font-size:14px;
	font-family:var(--nf-font) !important;
	transition:border-color .2s var(--pf-ease), box-shadow .2s var(--pf-ease), background .2s var(--pf-ease);
}
.nf-ep-filter input::placeholder{ color:var(--pf-text-mute); }
.nf-ep-filter input:focus{
	outline:0;
	background:rgba(12,14,19,.92);
	border-color:rgba(255,255,255,.22);
	box-shadow:0 0 0 4px rgba(229,9,20,.16);
}
.nf-episode-row{
	grid-template-columns:64px 160px minmax(0, 1fr) auto !important;
	padding:14px 16px !important;
}
.nf-episode-go{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 16px;
	border-radius:var(--pf-r-pill);
	background:var(--pf-surface-2);
	border:1px solid var(--pf-line);
	font-family:var(--nf-font-display) !important;
	font-size:12px;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--pf-text-dim);
	white-space:nowrap;
	opacity:0;
	transform:translateX(10px);
	transition:opacity .22s var(--pf-ease), transform .22s var(--pf-ease), background .22s var(--pf-ease), color .22s var(--pf-ease);
}
.nf-episode-row:hover .nf-episode-go{
	opacity:1;
	transform:translateX(0);
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	border-color:transparent;
	color:#fff;
}
.nf-episodes-empty{ text-align:center; color:var(--pf-text-mute); font-size:14px; padding:28px 0; }

/* Tablet: informasi pindah ke bawah, tidak berdesakan */
@media (max-width: 1199px){
	.nf-detail-body{
		grid-template-columns:170px minmax(0, 1fr) !important;
		gap:24px 28px !important;
	}
	.nf-detail-poster{ width:170px; }
	.nf-detail-meta{
		grid-column:1 / -1;
		display:grid;
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:8px 24px;
	}
	.nf-detail-meta .nf-detail-label{ grid-column:1 / -1; }
	.nf-detail-meta .nf-meta-cta{ grid-column:1 / -1; }
	.nf-ep-filter input{ width:190px; }
}

/* ---------------------------------------------------------------------- */
/* Halaman detail versi mobile                                            */
/* ---------------------------------------------------------------------- */
.drama-poster-section{ position:relative; }
.drama-poster-section::after{
	content:'';
	position:absolute;
	left:0; right:0; bottom:0;
	height:42%;
	background:linear-gradient(180deg, transparent 0%, var(--pf-bg) 94%);
	pointer-events:none;
}
.drama-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.drama-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 12px;
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.05);
	border:1px solid var(--pf-line);
	font-size:12px;
	font-weight:600;
	letter-spacing:.03em;
	color:var(--pf-text-dim) !important;
}
.drama-chip i{ color:var(--pf-red-2); font-size:13px; }
.drama-chip.is-status{
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	border-color:transparent;
	color:#fff !important;
}
.drama-chip.is-status i{ color:#fff; }

.drama-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
.drama-btn-play{
	flex:1 1 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	min-height:48px;
	padding:0 20px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red), #a80c14) !important;
	color:#fff !important;
	font-weight:600;
	font-size:14.5px;
	box-shadow:0 14px 32px var(--pf-glow);
}
.drama-btn-ghost{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:48px;
	padding:0 18px;
	border-radius:var(--pf-r-pill);
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line);
	color:var(--pf-text) !important;
	font-weight:600;
	font-size:14px;
	cursor:pointer;
	transition:background .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.drama-btn-ghost:active{ transform:scale(.97); }
.drama-btn-ghost.is-done{ background:rgba(47,143,70,.92) !important; border-color:transparent !important; }

.episode-list-head{ display:flex; align-items:center; gap:12px; }
.episode-count{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:30px;
	height:24px;
	padding:0 9px;
	border-radius:var(--pf-r-pill);
	background:var(--pf-surface-2);
	border:1px solid var(--pf-line);
	font-size:12px;
	font-weight:700;
	color:var(--pf-text-dim);
	font-variant-numeric:tabular-nums;
}
.nf-ep-filter-mobile{ width:100%; margin:12px 0 16px; }
.nf-ep-filter-mobile input{ width:100%; }

.episode-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important; }
.episode-card{
	border-radius:var(--pf-r-sm) !important;
	overflow:hidden;
	background:var(--pf-surface) !important;
	border:1px solid var(--pf-line) !important;
}
.episode-image{ position:relative; aspect-ratio:16 / 9; overflow:hidden; background:var(--pf-bg-soft); }
.episode-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.episode-badge{
	position:absolute;
	top:6px; left:6px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:24px;
	height:24px;
	padding:0 7px;
	border-radius:var(--pf-r-pill);
	background:rgba(7,8,11,.74);
	border:1px solid rgba(255,255,255,.2);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	font-size:12px;
	font-weight:700;
	color:#fff;
	font-variant-numeric:tabular-nums;
}
.episode-info{ padding:8px 10px 10px; }
.episode-card .episode-title{
	margin:0;
	font-size:12.5px;
	font-weight:600;
	line-height:1.3;
	color:var(--pf-text) !important;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.episode-empty{ text-align:center; color:var(--pf-text-mute); font-size:13px; padding:18px 0; }

/* ---------------------------------------------------------------------- */
/* Pemutar video kustom (nf-player)                                        */
/* ---------------------------------------------------------------------- */
.nf-player{
	position:relative;
	width:100%;
	aspect-ratio:16 / 9;
	background:#000;
	overflow:hidden;
	color:#fff;
	-webkit-user-select:none;
	user-select:none;
}
.nf-player > .nf-player-video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	object-fit:contain;
	background:#000;
}
.nf-player-cover{
	position:absolute;
	inset:0;
	z-index:2;
	cursor:pointer;
}

/* Panggung desktop: tetap hitam penuh, tinggi dibatasi */
.nf-player-stage .nf-player{ max-height:78vh; }
.nf-player-stage .nf-player-video{ max-height:78vh; }

/* Wadah lama (mobile) memakai hack padding-top 56.25% + video absolut.
   Pemutar kita sudah punya kotak sendiri, jadi hack itu dimatikan. */
.premium-video-container{
	padding-top:0 !important;
	margin:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	overflow:visible !important;
}
.premium-video-container::before{ display:none !important; content:none !important; }
.mobile-app-content .nf-player{
	border-radius:14px;
	margin:0 0 15px;
	box-shadow:var(--pf-sh-2);
	outline:1px solid var(--pf-line);
}

/* ---------- bar atas (judul + episode + lompat episode) ---------- */
.nf-player-top{
	position:absolute;
	top:0; left:0; right:0;
	z-index:4;
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px 18px 26px;
	background:linear-gradient(180deg, rgba(2,3,6,.78) 0%, rgba(2,3,6,.35) 55%, transparent 100%);
	opacity:1;
	transition:opacity .25s var(--pf-ease);
	pointer-events:none;
}
.nf-player-top-title{
	font-family:var(--nf-font-display) !important;
	font-size:14.5px;
	font-weight:600;
	letter-spacing:-.01em;
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:58%;
}
.nf-player-top-ep{
	flex:0 0 auto;
	padding:4px 11px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	font-family:var(--nf-font-display) !important;
	font-size:11px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	box-shadow:0 6px 18px var(--pf-glow);
}
.nf-player-top-space{ flex:1 1 auto; }
.nf-player-top-btn{
	pointer-events:auto;
	width:38px; height:38px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.18);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	color:#fff !important;
	font-size:17px;
	transition:background .2s var(--pf-ease), transform .2s var(--pf-ease);
}
.nf-player-top-btn:hover{ background:rgba(255,255,255,.2); transform:scale(1.05); }

/* ---------- tombol besar di tengah ---------- */
.nf-player-big{
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%,-50%) scale(.92);
	z-index:4;
	width:78px; height:78px;
	display:flex; align-items:center; justify-content:center;
	border:1px solid rgba(255,255,255,.25);
	border-radius:50%;
	background:rgba(10,12,18,.55);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	color:#fff;
	font-size:26px;
	cursor:pointer;
	box-shadow:0 18px 48px rgba(0,0,0,.55), 0 0 0 8px rgba(229,9,20,.14);
	opacity:0;
	visibility:hidden;
	transition:opacity .22s var(--pf-ease), transform .22s var(--pf-ease), visibility .22s var(--pf-ease);
}
.nf-player.is-paused .nf-player-big{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.nf-player-big:hover{ transform:translate(-50%,-50%) scale(1.07) !important; background:rgba(10,12,18,.7); }

/* ---------- indikator lompat 10 detik ---------- */
.nf-player-flash{
	position:absolute;
	top:50%;
	z-index:5;
	width:118px; height:118px;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
	border-radius:50%;
	background:rgba(6,7,11,.55);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	color:#fff;
	font-size:26px;
	opacity:0;
	transform:translateY(-50%) scale(.9);
	transition:opacity .2s var(--pf-ease), transform .2s var(--pf-ease);
	pointer-events:none;
}
.nf-player-flash span{
	font-family:var(--nf-font-display) !important;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:rgba(255,255,255,.8);
}
.nf-player-flash.is-on{ opacity:1; transform:translateY(-50%) scale(1); }
.nf-player-flash-back{ left:12%; }
.nf-player-flash-fwd{ right:12%; }

/* ---------- pemuat ---------- */
.nf-player-spinner{
	position:absolute;
	inset:0;
	z-index:5;
	display:none;
	align-items:center;
	justify-content:center;
	pointer-events:none;
}
.nf-player.is-loading .nf-player-spinner{ display:flex; }
.nf-player-spinner .nf-load-ring{
	position:relative;
	inset:auto;
	width:56px; height:56px;
	border:3px solid rgba(255,255,255,.14);
	border-top-color:var(--pf-red);
	border-right-color:rgba(255,255,255,.35);
}

/* ---------- kartu (lanjutkan / error / episode berikutnya) ---------- */
.nf-player-card{
	position:absolute;
	z-index:7;
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:16px 18px;
	max-width:min(420px, 86%);
	background:rgba(10,12,18,.93);
	border:1px solid var(--pf-line);
	border-radius:16px;
	-webkit-backdrop-filter:blur(16px);
	backdrop-filter:blur(16px);
	box-shadow:var(--pf-sh-3);
}
.nf-player-card[hidden]{ display:none !important; }
.nf-player-card span{ font-size:13.5px; line-height:1.5; color:var(--pf-text-dim); }
.nf-player-card b{ color:#fff; }
.nf-player-card > i{ font-size:24px; color:var(--pf-red-2); }
.nf-player-resume{ left:16px; bottom:96px; }
.nf-player-autonext{ right:16px; bottom:96px; }
.nf-player-error{
	left:50%; top:50%;
	transform:translate(-50%,-50%);
	align-items:center;
	text-align:center;
}
.nf-player-error strong{ font-size:15.5px; }
.nf-player-card-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.nf-player-cta,
.nf-player-ghost{
	padding:10px 18px;
	border-radius:var(--pf-r-pill);
	font-family:var(--pf-font, var(--nf-font)) !important;
	font-size:13.5px;
	font-weight:600;
	cursor:pointer;
	transition:transform .18s var(--pf-ease), background .18s var(--pf-ease);
}
.nf-player-cta{
	border:0;
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	color:#fff;
	box-shadow:0 10px 26px var(--pf-glow);
}
.nf-player-cta:hover{ transform:translateY(-2px); }
.nf-player-ghost{
	border:1px solid var(--pf-line-strong);
	background:var(--pf-surface);
	color:#fff;
}
.nf-player-ghost:hover{ background:var(--pf-surface-2); }

/* petunjuk putar layar */
.nf-player-hint{
	position:absolute;
	left:50%; top:16px;
	transform:translateX(-50%);
	z-index:7;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 15px;
	border-radius:var(--pf-r-pill);
	background:rgba(10,12,18,.92);
	border:1px solid var(--pf-line);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	font-size:12.5px;
	color:var(--pf-text-dim);
	white-space:nowrap;
}
.nf-player-hint[hidden]{ display:none !important; }
.nf-player-hint i{ color:var(--pf-red-2); }

/* ---------- panel kontrol ---------- */
.nf-player-controls{
	position:absolute;
	left:0; right:0; bottom:0;
	z-index:6;
	padding:10px 16px 12px;
	background:linear-gradient(0deg, rgba(2,3,6,.94) 0%, rgba(2,3,6,.6) 52%, transparent 100%);
	opacity:1;
	transition:opacity .25s var(--pf-ease), transform .25s var(--pf-ease);
}
.nf-player.is-idle:not(.is-paused) .nf-player-controls{
	opacity:0;
	pointer-events:none;
	transform:translateY(10px);
}
.nf-player.is-idle:not(.is-paused) .nf-player-top{ opacity:0; }
.nf-player.is-idle{ cursor:none; }

.nf-player-progress{
	position:relative;
	height:20px;
	margin-bottom:2px;
	cursor:pointer;
	touch-action:none;
}
.nf-player-progress::before{
	content:'';
	position:absolute;
	left:0; right:0; top:50%;
	transform:translateY(-50%);
	height:5px;
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.18);
	transition:height .16s var(--pf-ease);
}
.nf-player-buffer,
.nf-player-played{
	position:absolute;
	left:0; top:50%;
	transform:translateY(-50%);
	height:5px;
	width:0;
	border-radius:var(--pf-r-pill);
	transition:height .16s var(--pf-ease);
}
.nf-player-buffer{ background:rgba(255,255,255,.3); }
.nf-player-played{
	background:linear-gradient(90deg, var(--pf-red), #ff3b46);
	box-shadow:0 0 14px var(--pf-glow);
}
.nf-player-handle{
	position:absolute;
	top:50%; left:0;
	width:14px; height:14px;
	margin-left:-7px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 2px 10px rgba(0,0,0,.6);
	transform:translateY(-50%) scale(0);
	transition:transform .16s var(--pf-ease);
}
.nf-player-progress:hover::before,
.nf-player-progress:hover .nf-player-buffer,
.nf-player-progress:hover .nf-player-played,
.nf-player-progress.is-dragging::before,
.nf-player-progress.is-dragging .nf-player-buffer,
.nf-player-progress.is-dragging .nf-player-played{ height:8px; }
.nf-player-progress:hover .nf-player-handle,
.nf-player-progress.is-dragging .nf-player-handle{ transform:translateY(-50%) scale(1); }
.nf-player-progress:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:var(--pf-r-pill); }
.nf-player-tip{
	position:absolute;
	bottom:28px;
	transform:translateX(-50%);
	padding:4px 9px;
	border-radius:6px;
	background:rgba(8,9,13,.94);
	border:1px solid var(--pf-line);
	font-size:12px;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
	opacity:0;
	transition:opacity .15s var(--pf-ease);
	pointer-events:none;
}
.nf-player-progress:hover .nf-player-tip{ opacity:1; }

.nf-player-buttons{ display:flex; align-items:center; gap:4px; }
.nf-player-btn{
	position:relative;
	width:42px; height:42px;
	display:inline-flex; align-items:center; justify-content:center;
	border:0;
	border-radius:50%;
	background:transparent;
	color:#fff;
	font-size:19px;
	cursor:pointer;
	transition:background .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.nf-player-btn:hover{ background:rgba(255,255,255,.14); transform:scale(1.06); }
.nf-player-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.nf-player-btn-num{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-38%);
	font-size:9.5px;
	font-weight:700;
	font-variant-numeric:tabular-nums;
}
.nf-player-time{
	padding:0 8px;
	font-size:13px;
	font-weight:500;
	font-variant-numeric:tabular-nums;
	color:rgba(255,255,255,.88);
	min-width:104px;
}
.nf-player-time b{ font-weight:600; color:#fff; }
.nf-player-time-sep{ opacity:.5; }
.nf-player-space{ flex:1 1 auto; }
.nf-player-volume{ display:flex; align-items:center; gap:2px; }
.nf-player-vol{
	width:0;
	opacity:0;
	height:4px;
	accent-color:var(--pf-red);
	cursor:pointer;
	transition:width .22s var(--pf-ease), opacity .22s var(--pf-ease);
}
.nf-player-volume:hover .nf-player-vol,
.nf-player-vol:focus{ width:86px; opacity:1; }
.nf-player-speed{ position:relative; }
.nf-player-rate-label{ font-size:13px; font-weight:700; }
.nf-player-menu{
	position:absolute;
	bottom:54px; right:0;
	min-width:124px;
	margin:0;
	padding:6px;
	list-style:none;
	background:rgba(11,13,18,.96);
	border:1px solid var(--pf-line);
	border-radius:12px;
	-webkit-backdrop-filter:blur(14px);
	backdrop-filter:blur(14px);
	box-shadow:var(--pf-sh-3);
}
.nf-player-menu[hidden]{ display:none !important; }
.nf-player-menu li{
	padding:9px 12px;
	border-radius:8px;
	font-size:13px;
	color:var(--pf-text-dim);
	cursor:pointer;
	transition:background .16s var(--pf-ease), color .16s var(--pf-ease);
}
.nf-player-menu li:hover{ background:var(--pf-surface-2); color:#fff; }

/* layar penuh */
.nf-player:fullscreen,
.nf-player:-webkit-full-screen{
	width:100vw;
	height:100vh;
	max-height:none;
	border-radius:0;
	aspect-ratio:auto;
}
.nf-player:fullscreen > .nf-player-video,
.nf-player:-webkit-full-screen > .nf-player-video{ max-height:none; }

/* ponsel: tombol lebih besar, kontrol dua baris, slider volume disembunyikan */
@media (max-width: 991px){
	.nf-player-big{ width:66px; height:66px; font-size:23px; }
	.nf-player-controls{ padding:8px 12px 10px; }
	.nf-player-btn{ width:44px; height:44px; font-size:20px; }
	.nf-player-time{ min-width:auto; padding:0 6px; font-size:12.5px; }
	.nf-player-volume .nf-player-vol{ display:none; }
	.nf-player-top{ padding:12px 14px 22px; }
	.nf-player-top-title{ font-size:13.5px; max-width:52%; }
	.nf-player-flash{ width:96px; height:96px; font-size:22px; }
	.nf-player-resume,.nf-player-autonext{ left:12px; right:12px; bottom:86px; max-width:none; }
	.nf-player-card{ padding:14px 15px; border-radius:14px; }
	.nf-player-menu{ bottom:50px; }
}

/* ---------------------------------------------------------------------- */
/* PENCARIAN v2 — pil pencarian & panel hasil dirombak                     */
/* (dimuat paling akhir, menimpa aturan pencarian sebelumnya)              */
/* ---------------------------------------------------------------------- */

/* Pil pencarian: ikon di kiri, input, tombol bersihkan, chip '/' */
.nf-search{
	position:relative;
	display:flex;
	align-items:center;
	gap:10px;
	height:52px;
	padding:0 12px 0 16px;
	background:rgba(255,255,255,.045);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
	transition:background .22s var(--pf-ease), border-color .22s var(--pf-ease), box-shadow .22s var(--pf-ease);
}
.nf-search:hover{ background:rgba(255,255,255,.07); border-color:var(--pf-line-strong); }
.nf-search:focus-within,
.nf-search.active{
	background:rgba(12,13,18,.94) !important;
	border-color:rgba(255,255,255,.24) !important;
	box-shadow:0 0 0 4px rgba(229,9,20,.16), 0 16px 38px rgba(0,0,0,.45);
}
/* chip "/" lama (::after) dimatikan, diganti elemen .nf-search-hint */
.nf-search::after{ display:none !important; content:none !important; }

.nf-search-icon{
	display:none;
	flex:0 0 auto;
	color:var(--pf-text-mute);
	font-size:17px;
	line-height:1;
	pointer-events:none;
}
.nf-search:focus-within .nf-search-icon{ color:#fff; }
.nf-search-toggle{
	display:flex;
	width:38px !important;
	height:38px !important;
	margin-left:-6px;
	background:transparent !important;
	border:0 !important;
	border-radius:var(--pf-r-pill) !important;
	color:var(--pf-text-dim) !important;
	font-size:19px !important;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease);
}
.nf-search-toggle:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }

.nf-search-input{
	flex:1 1 auto;
	min-width:0;
	height:48px;
	margin:0 !important;
	padding:0 !important;
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
	color:#fff !important;
	font-size:15px !important;
	text-overflow:ellipsis;
}
.nf-search-input::placeholder{ color:var(--pf-text-mute) !important; }

.nf-search-clear{
	flex:0 0 auto;
	width:30px; height:30px;
	display:inline-flex; align-items:center; justify-content:center;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:var(--pf-text-dim);
	font-size:13px;
	cursor:pointer;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.nf-search-clear:hover{ background:rgba(229,9,20,.85); color:#fff; transform:scale(1.06); }
.nf-search-clear[hidden]{ display:none !important; }

.nf-search-hint{
	flex:0 0 auto;
	display:inline-flex; align-items:center; justify-content:center;
	width:24px; height:24px;
	border:1px solid var(--pf-line);
	border-radius:7px;
	background:rgba(255,255,255,.05);
	color:var(--pf-text-mute);
	font-size:11px;
	font-weight:600;
	line-height:1;
}
.nf-search-hint[hidden]{ display:none !important; }

/* Riwayat pencarian (muncul saat kolom difokus dan masih kosong) */
.nf-search-recent{
	position:absolute;
	top:calc(100% + 12px);
	left:0;
	min-width:100%;
	max-width:420px;
	padding:16px;
	background:rgba(11,13,18,.95);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r);
	-webkit-backdrop-filter:blur(18px) saturate(150%);
	backdrop-filter:blur(18px) saturate(150%);
	box-shadow:var(--pf-sh-3);
	z-index:620;
}
.nf-search-recent[hidden]{ display:none !important; }
.nf-search-recent-title{
	margin:0 0 12px !important;
	font-family:var(--nf-font-display) !important;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--pf-text-mute);
}
.nf-search-recent-list{ display:flex; flex-wrap:wrap; gap:8px; }
.nf-search-recent-item{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 14px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.045);
	color:var(--pf-text-dim);
	font-family:var(--nf-font) !important;
	font-size:13px;
	cursor:pointer;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease), border-color .18s var(--pf-ease);
}
.nf-search-recent-item i{ font-size:13px; opacity:.7; }
.nf-search-recent-item:hover{
	background:rgba(229,9,20,.16);
	border-color:rgba(229,9,20,.4);
	color:#fff;
}

/* ---------- layar lebar: kolom selalu tampil, ikon jadi dekorasi ---------- */
@media (min-width: 1200px){
	.nf-search .nf-search-icon{ display:inline-flex; }
	.nf-search .nf-search-toggle{ display:none !important; }
	.nf-search .nf-search-input{
		width:100% !important;
		opacity:1 !important;
		margin:0 !important;
	}
	.nf-search{ width:300px; }
	.nf-search:focus-within, .nf-search.active{ width:360px; }
	.nf-search.active .nf-search-input{ width:100% !important; }
}
@media (max-width: 1199px){
	.nf-search .nf-search-hint{ display:none !important; }
}

/* ---------- panel hasil pencarian ---------- */
.nf-search-menu{
	width:420px !important;
	max-width:calc(100vw - 32px);
	max-height:min(64vh, 460px);
	padding:8px !important;
	background:rgba(11,13,18,.96) !important;
	border:1px solid var(--pf-line) !important;
	border-radius:16px !important;
	-webkit-backdrop-filter:blur(20px) saturate(150%);
	backdrop-filter:blur(20px) saturate(150%);
	box-shadow:0 26px 60px rgba(0,0,0,.7) !important;
	overflow-y:auto;
	margin-top:10px !important;
}
.nf-search-menu::before{
	content:'Hasil pencarian';
	display:block;
	margin:2px 6px 8px;
	padding:6px 10px 12px;
	font-family:var(--nf-font-display) !important;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--pf-text-mute);
	border-bottom:1px solid var(--pf-line);
}
.nf-search-menu::after{
	content:'↑↓ pilih · Enter buka · Esc tutup';
	display:block;
	margin:8px 6px 2px;
	padding:10px 10px 4px;
	border-top:1px solid var(--pf-line);
	font-size:11px;
	letter-spacing:.02em;
	color:var(--pf-text-mute);
	text-align:center;
}
.nf-search-menu li{ display:block !important; width:100% !important; }
.nf-search-menu li.ui-menu-item{ background:transparent !important; border:0 !important; }
.nf-search-menu .ui-menu-item-wrapper,
.nf-search-menu a{
	display:flex !important;
	align-items:center;
	gap:12px;
	width:100% !important;
	box-sizing:border-box !important;
	padding:11px 12px !important;
	border:0 !important;
	border-radius:12px !important;
	background:transparent !important;
	transition:background .16s var(--pf-ease);
}
.nf-search-menu .ui-menu-item-wrapper:hover,
.nf-search-menu .ui-menu-item-wrapper.ui-state-active,
.nf-search-menu a:hover{ background:rgba(255,255,255,.07) !important; }

.nf-search-mark{
	flex:0 0 auto;
	width:34px; height:34px;
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.06);
	border:1px solid var(--pf-line);
	color:var(--pf-text-dim);
	font-size:15px;
	transition:background .16s var(--pf-ease), color .16s var(--pf-ease);
}
.nf-search-menu .ui-menu-item-wrapper:hover .nf-search-mark,
.nf-search-menu .ui-menu-item-wrapper.ui-state-active .nf-search-mark{
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	border-color:transparent;
	color:#fff;
}
.nf-search-body{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	align-items:center;
	gap:10px;
}
.nf-search-title{
	flex:1 1 auto;
	min-width:0;
	font-size:14.5px;
	font-weight:500;
	color:var(--pf-text);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.nf-search-menu mark{
	background:rgba(229,9,20,.22);
	color:#fff;
	border-radius:5px;
	padding:1px 3px;
}
.nf-search-cat{
	flex:0 0 auto;
	padding:3px 9px;
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.06) !important;
	border:1px solid var(--pf-line) !important;
	color:var(--pf-text-mute) !important;
	font-family:var(--nf-font-display) !important;
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	box-shadow:none !important;
}
.nf-search-go{
	flex:0 0 auto;
	color:var(--pf-text-mute);
	font-size:16px;
	opacity:0;
	transform:translateX(-6px);
	transition:opacity .16s var(--pf-ease), transform .16s var(--pf-ease);
}
.nf-search-menu .ui-menu-item-wrapper:hover .nf-search-go,
.nf-search-menu .ui-menu-item-wrapper.ui-state-active .nf-search-go{
	opacity:1;
	transform:translateX(0);
	color:#fff;
}
.nf-search-none{
	padding:22px 16px !important;
	text-align:center;
	color:var(--pf-text-mute);
	font-size:13.5px;
}
.nf-search-none:hover{ background:transparent !important; }

/* ---------- pencarian versi mobile ---------- */
.mobile-search-box{ padding:8px 14px 12px !important; }
.mobile-search-box::before{
	content:'\f4a4';
	font-family:Ionicons;
	position:absolute;
	left:30px;
	top:50%;
	transform:translateY(-60%);
	font-size:18px;
	color:var(--pf-text-mute);
	pointer-events:none;
}
.mobile-search-box input{
	height:48px !important;
	padding:0 44px 0 46px !important;
	border-radius:14px !important;
	background:rgba(255,255,255,.045) !important;
	border:1px solid var(--pf-line) !important;
	color:#fff !important;
	font-size:15px !important;
}
.mobile-search-box input:focus{
	background:rgba(12,13,18,.94) !important;
	border-color:rgba(255,255,255,.24) !important;
	box-shadow:0 0 0 4px rgba(229,9,20,.16);
}
.mobile-search-box .clear-search{
	right:26px !important;
	color:var(--pf-text-mute) !important;
}
@media (max-width: 991px){
	.ui-autocomplete.ui-widget.ui-widget-content{
		width:calc(100% - 24px) !important;
		left:12px !important;
		right:12px !important;
		border-radius:16px !important;
		padding:6px !important;
		background:rgba(11,13,18,.96) !important;
		border:1px solid var(--pf-line) !important;
		box-shadow:0 24px 54px rgba(0,0,0,.72) !important;
	}
	.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,
	.ui-autocomplete .ui-menu-item-wrapper{
		padding:11px 12px !important;
		border-radius:12px !important;
		border-bottom:0 !important;
	}
	.ui-autocomplete .ui-menu-item-wrapper:hover,
	.ui-autocomplete .ui-menu-item-wrapper.ui-state-active{ background:rgba(255,255,255,.07) !important; }
	.ui-autocomplete .nf-search-cat{
		background:rgba(255,255,255,.06) !important;
		border:1px solid var(--pf-line) !important;
		color:var(--pf-text-mute) !important;
		border-radius:var(--pf-r-pill) !important;
	}
}

/* ---------------------------------------------------------------------- */
/* Tombol bagikan melayang + panel semua media sosial                      */
/* ---------------------------------------------------------------------- */
.nf-share{
	position:fixed;
	right:22px;
	bottom:26px;
	z-index:900;
	display:flex;
	/* column-reverse: tombol tetap menempel di dasar layar, panel tumbuh ke ATAS.
	   Dengan column biasa, panel yang terbuka mendorong tombolnya naik ke tengah
	   halaman (terukur: tombol melompat ~330px). */
	flex-direction:column-reverse;
	align-items:flex-end;
	gap:14px;
}
.nf-share-fab{
	display:inline-flex;
	align-items:center;
	gap:10px;
	height:54px;
	padding:0 22px;
	border:0;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red) 0%, #a80c14 100%);
	color:#fff;
	font-family:var(--nf-font-display) !important;
	font-size:14.5px;
	font-weight:600;
	letter-spacing:.01em;
	cursor:pointer;
	box-shadow:0 18px 40px rgba(229,9,20,.42), 0 0 0 1px rgba(255,255,255,.08);
	transition:transform .2s var(--pf-ease), box-shadow .2s var(--pf-ease);
}
.nf-share-fab:hover{ transform:translateY(-3px); box-shadow:0 24px 52px rgba(229,9,20,.55); }
.nf-share-fab i{ font-size:19px; }

.nf-share-panel{
	width:min(352px, calc(100vw - 44px));
	padding:18px;
	background:rgba(11,13,18,.96);
	border:1px solid var(--pf-line);
	border-radius:18px;
	-webkit-backdrop-filter:blur(18px) saturate(150%);
	backdrop-filter:blur(18px) saturate(150%);
	box-shadow:var(--pf-sh-3);
}
.nf-share-panel[hidden]{ display:none !important; }
.nf-share-heading{
	margin:0 0 14px !important;
	font-family:var(--nf-font-display) !important;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--pf-text-mute);
}
.nf-share-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.nf-share-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:76px;
	padding:12px 6px;
	border:1px solid var(--pf-line);
	border-radius:14px;
	background:rgba(255,255,255,.045);
	color:var(--pf-text-dim) !important;
	font-family:var(--nf-font) !important;
	font-size:11.5px;
	font-weight:600;
	line-height:1.2;
	text-align:center;
	cursor:pointer;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease), transform .18s var(--pf-ease), border-color .18s var(--pf-ease);
}
.nf-share-item i{ font-size:22px; }
.nf-share-item:hover{ transform:translateY(-3px); color:#fff !important; background:rgba(255,255,255,.1); }
.nf-share-item[hidden]{ display:none !important; }
.nf-share-item.is-wa:hover{ background:rgba(37,211,102,.2); border-color:rgba(37,211,102,.5); }
.nf-share-item.is-fb:hover{ background:rgba(24,119,242,.25); border-color:rgba(24,119,242,.55); }
.nf-share-item.is-x:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35); }
.nf-share-item.is-tg:hover{ background:rgba(41,161,224,.25); border-color:rgba(41,161,224,.55); }
.nf-share-item.is-pin:hover{ background:rgba(230,0,35,.25); border-color:rgba(230,0,35,.55); }
.nf-share-item.is-rd:hover{ background:rgba(255,69,0,.25); border-color:rgba(255,69,0,.55); }
.nf-share-item.is-mail:hover{ background:rgba(255,255,255,.14); }
.nf-share-item.is-copy:hover{ background:rgba(229,9,20,.2); border-color:rgba(229,9,20,.5); }
.nf-share-item.is-done{
	background:rgba(47,143,70,.3) !important;
	border-color:rgba(47,143,70,.6) !important;
	color:#fff !important;
}

/* Judul drama di kerangka mobile: pengganti <h1> supaya satu halaman hanya
   punya satu H1 (yang di versi desktop) — tetap tampil sama besarnya. */
.drama-info-section .drama-title{
	margin:0 0 6px;
	font-family:var(--nf-font-display) !important;
	font-size:clamp(20px, 5.4vw, 26px);
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.015em;
	color:var(--pf-text);
}

@media (max-width: 991px){
	.nf-share{ right:16px; bottom:88px; }        /* di atas bilah navigasi bawah (68px) */
	.nf-share-fab{ width:56px; height:56px; padding:0; justify-content:center; }
	.nf-share-fab span{ display:none; }          /* di HP cukup ikonnya */
	.nf-share-fab i{ font-size:22px; }
	.nf-share-panel{ width:min(340px, calc(100vw - 32px)); padding:16px; }
	.nf-share-item{ min-height:72px; font-size:11px; }
}

/* ---------------------------------------------------------------------- */
/* Penanda posisi tonton ala Netflix (dipakai nf-progress.js)             */
/* ---------------------------------------------------------------------- */
.nf-watch-bar{
	position:absolute;
	left:0; right:0; bottom:0;
	display:block;
	height:4px;
	background:rgba(255,255,255,.26);
	z-index:3;
	overflow:hidden;
}
.nf-watch-fill{
	display:block;
	height:100%;
	width:0;
	background:linear-gradient(90deg, var(--pf-red), #ff3b46);
	box-shadow:0 0 12px var(--pf-glow);
	transition:width .3s var(--pf-ease);
}
.nf-watch-chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-top:8px;
	padding:4px 11px;
	border-radius:var(--pf-r-pill);
	background:rgba(229,9,20,.14);
	border:1px solid rgba(229,9,20,.32);
	color:#ffc9cd;
	font-size:11.5px;
	font-weight:600;
	letter-spacing:.02em;
	white-space:nowrap;
}
.nf-watch-chip i{ font-size:12px; }
.nf-watch-chip.is-done{
	background:rgba(47,143,70,.16);
	border-color:rgba(47,143,70,.42);
	color:#b7e8c4;
}
/* episode yang sudah tuntas: sedikit diredupkan supaya yang belum jelas terlihat */
.is-finished .nf-episode-thumb,
.is-finished .episode-image,
.is-finished .mv-img,
.is-finished .card-image{ opacity:.7; }
.is-finished .nf-episode-title,
.is-finished .episode-title{ opacity:.85; }
.nf-episode-row.is-watched .nf-episode-num{ color:#fff !important; }
.nf-episode-row.is-finished .nf-episode-num{ color:var(--pf-text-mute) !important; }

/* ---------------------------------------------------------------------- */
/* PERBAIKAN: dropdown pencarian dulu TERTIMPA header                      */
/* ---------------------------------------------------------------------- */
/* jQuery UI menaruh menu autocomplete sebagai anak <body> dan (karena
   posisinya masih `static`) menyetelnya `position: relative` + `top/left`
   ribuan piksel (terukur: top -5265px). Akibatnya:
     1. menu ikut aliran dokumen -> menambah tinggi halaman dan posisinya
        bergeser kalau lazy-load gambar menyusul,
     2. header sticky (z-index 500) MENIMPA menu karena menu tanpa z-index
        (terukur: elemen teratas di titik pertama menu adalah DIV.nf-header-inner,
        bukan panelnya).
   Menu dipaksa `fixed` + z-index tinggi: benar-benar melayang, mengikuti
   header sticky saat halaman digulir, dan tidak mengganggu aliran dokumen. */
ul.ui-autocomplete,
ul.ui-autocomplete.nf-search-menu,
ul.ui-autocomplete.ui-front{
	position:fixed !important;
	z-index:10000 !important;
}

/* ---------------------------------------------------------------------- */
/* Perlindungan: overlay pemuat tidak boleh menelan klik                  */
/* ---------------------------------------------------------------------- */
/* #preloader legacy membentang penuh layar dengan z-index 99999 dan baru
   benar-benar hilang setelah peristiwa `load` (di halaman berat bisa
   beberapa detik). Selama itu ia menutupi halaman dan menelan SETIAP klik --
   termasuk baris hasil pencarian. Karena layar pemuat tidak perlu diklik,
   dibikin tembus klik dan dipastikan hilang total saat selesai. */
#preloader{
	pointer-events:none !important;
}
#preloader.is-done,
#preloader.nf-hidden,
#preloader[style*="display: none"]{
	pointer-events:none !important;
	visibility:hidden !important;
}
/* bilah/kartu pemuat antar halaman juga tidak boleh menghalangi klik */
.nf-route:not(.is-on){ pointer-events:none !important; }

/* ---------------------------------------------------------------------- */
/* Halaman hasil pencarian (/search)                                       */
/* ---------------------------------------------------------------------- */
.nf-search-page{ padding:34px 0 90px; }

/* bar pencarian khusus HP */
.nf-sp-bar{ display:none; }
@media (max-width: 991px){
	.nf-sp-bar{
		display:flex;
		align-items:center;
		gap:12px;
		position:sticky;
		top:0;
		z-index:60;
		padding:12px 16px;
		background:rgba(9,10,14,.94);
		-webkit-backdrop-filter:blur(14px) saturate(140%);
		backdrop-filter:blur(14px) saturate(140%);
		border-bottom:1px solid var(--pf-line);
	}
	.nf-sp-logo{
		flex:0 0 auto;
		font-family:var(--nf-font-display) !important;
		font-size:21px;
		font-weight:800;
		letter-spacing:-.02em;
		color:#fff !important;
	}
	.nf-sp-form{ position:relative; flex:1 1 auto; display:flex; align-items:center; }
	.nf-sp-form > i{
		position:absolute; left:13px; font-size:16px; color:var(--pf-text-mute); pointer-events:none;
	}
	.nf-sp-form input{
		width:100%;
		height:44px;
		padding:0 38px 0 38px;
		border:1px solid var(--pf-line);
		border-radius:var(--pf-r-pill);
		background:rgba(255,255,255,.06);
		color:var(--pf-text);
		font-family:var(--nf-font) !important;
		font-size:14px;
	}
	.nf-sp-clear{
		position:absolute; right:10px; width:26px; height:26px;
		display:flex; align-items:center; justify-content:center;
		border-radius:50%; background:rgba(255,255,255,.1); color:var(--pf-text-dim) !important;
		font-size:12px;
	}
}

.nf-crumb{ margin-bottom:16px; }
.nf-sp-head h1{
	margin:0 0 8px !important;
	font-family:var(--nf-font-display) !important;
	font-size:clamp(22px, 3.4vw, 38px);
	font-weight:800;
	line-height:1.14;
	letter-spacing:-.02em;
	color:var(--pf-text);
}
.nf-sp-head h1 span{ color:#ff5a63; }
.nf-sp-count{
	margin:0 !important;
	font-size:14px;
	color:var(--pf-text-dim) !important;
}

/* kolom pencarian besar (desktop) */
.nf-sp-bigform{ display:none; }
@media (min-width: 992px){
	.nf-sp-bigform{
		display:flex; align-items:center; gap:12px;
		position:relative;
		max-width:620px;
		margin:22px 0 0;
	}
	.nf-sp-bigform > i{
		position:absolute; left:20px; font-size:19px; color:var(--pf-text-mute); pointer-events:none;
	}
	.nf-sp-bigform input{
		flex:1 1 auto;
		height:54px;
		padding:0 22px 0 52px;
		border:1px solid var(--pf-line);
		border-radius:var(--pf-r-pill);
		background:rgba(255,255,255,.05);
		color:var(--pf-text);
		font-family:var(--nf-font) !important;
		font-size:15px;
	}
	.nf-sp-bigform input:focus{
		outline:none;
		border-color:rgba(229,9,20,.55);
		box-shadow:0 0 0 4px rgba(229,9,20,.16);
		background:rgba(255,255,255,.08);
	}
	.nf-sp-bigform button{
		flex:0 0 auto;
		height:54px;
		padding:0 30px;
		border:0;
		border-radius:var(--pf-r-pill);
		background:linear-gradient(135deg, var(--pf-red), #a80c14);
		color:#fff;
		font-family:var(--nf-font-display) !important;
		font-size:14.5px;
		font-weight:600;
		cursor:pointer;
		box-shadow:0 14px 30px rgba(229,9,20,.32);
	}
	.nf-sp-bigform button:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(229,9,20,.45); }
}

/* sapaan untuk tamu */
.nf-sp-cta{
	display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
	margin-top:20px; padding:14px 18px;
	border:1px solid rgba(229,9,20,.3);
	border-radius:14px;
	background:linear-gradient(120deg, rgba(229,9,20,.13), transparent 70%);
	font-size:13.5px;
	color:var(--pf-text-dim);
}
.nf-sp-cta span i{ color:#ff5a63; margin-right:8px; }
.nf-sp-cta a{
	display:inline-flex; align-items:center; height:38px; padding:0 22px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	color:#fff !important; font-weight:600; font-size:13.5px;
	box-shadow:0 10px 24px rgba(229,9,20,.3);
}

/* kisi hasil */
.nf-result-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:14px;
	margin-top:26px;
}
@media (min-width: 640px){ .nf-result-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; } }
@media (min-width: 992px){ .nf-result-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:22px; } }

.nf-result-card{
	display:flex;
	flex-direction:column;
	overflow:hidden;
	border:1px solid var(--pf-line);
	border-radius:14px;
	background:rgba(255,255,255,.04);
	color:var(--pf-text) !important;
	text-decoration:none !important;
	transition:transform .22s var(--pf-ease), border-color .22s var(--pf-ease), box-shadow .22s var(--pf-ease);
}
.nf-result-card:hover{
	transform:translateY(-6px);
	border-color:rgba(229,9,20,.45);
	box-shadow:0 20px 42px rgba(0,0,0,.55);
}
.nf-result-thumb{
	position:relative;
	aspect-ratio:2 / 3;
	overflow:hidden;
	background:#111319;
}
.nf-result-thumb img{
	display:block; width:100%; height:100%; object-fit:cover;
	transition:transform .45s var(--pf-ease);
}
.nf-result-card:hover .nf-result-thumb img{ transform:scale(1.06); }
.nf-result-badge{
	position:absolute; top:8px; left:8px;
	padding:3px 9px;
	border-radius:var(--pf-r-pill);
	background:rgba(229,9,20,.92);
	color:#fff;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	box-shadow:0 6px 16px rgba(0,0,0,.45);
}
.nf-result-badge.is-ongoing{ background:rgba(41,161,224,.92); }
.nf-result-body{ padding:11px 12px 13px; }
.nf-result-title{
	margin:0 0 7px !important;
	font-family:var(--nf-font-display) !important;
	font-size:13.5px;
	font-weight:600;
	line-height:1.3;
	color:var(--pf-text) !important;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.nf-result-meta{
	display:flex; align-items:center; justify-content:space-between; gap:8px;
	font-size:11px;
	color:var(--pf-text-mute);
}
.nf-result-meta i{ margin-right:4px; }
.nf-result-cat{
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	font-weight:600; letter-spacing:.02em; color:var(--pf-text-dim);
}

/* keadaan kosong + chip judul populer */
.nf-sp-empty{
	padding:56px 20px 34px;
	text-align:center;
}
.nf-sp-empty > i{
	display:block; margin-bottom:16px;
	font-size:44px; color:rgba(255,255,255,.16);
}
.nf-sp-empty h2{
	margin:0 0 10px !important;
	font-family:var(--nf-font-display) !important;
	font-size:20px; font-weight:700; color:var(--pf-text) !important;
}
.nf-sp-empty p{ margin:0 !important; font-size:14px; color:var(--pf-text-dim) !important; }
.nf-sp-topics{ margin-top:34px; }
.nf-sp-topics h2{
	margin:0 0 14px !important;
	font-family:var(--nf-font-display) !important;
	font-size:15px; font-weight:700; letter-spacing:.02em;
	color:var(--pf-text) !important;
}
.nf-sp-chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:20px; }
.nf-sp-topics .nf-sp-chips{ justify-content:flex-start; margin-top:0; }
.nf-sp-chips a{
	display:inline-flex; align-items:center;
	height:36px; padding:0 16px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.05);
	color:var(--pf-text-dim) !important;
	font-size:12.5px; font-weight:600;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.nf-sp-chips a:hover{
	background:rgba(229,9,20,.18);
	border-color:rgba(229,9,20,.45);
	color:#fff !important;
	transform:translateY(-2px);
}

/* baris "Lihat semua hasil" pada dropdown pencarian */
.nf-search-all a{
	display:flex !important;
	align-items:center;
	gap:10px;
	padding:12px 14px !important;
	border-radius:10px;
	color:#ff8a92 !important;
	font-size:13px !important;
	font-weight:600 !important;
}
.nf-search-all a i:first-child{ font-size:15px; }
.nf-search-all-go{ margin-left:auto; font-size:14px; }
.nf-search-all a:hover .nf-search-all-go{ transform:translateX(3px); }
.nf-search-all-go{ transition:transform .18s var(--pf-ease); }

/* ---------------------------------------------------------------------- */
/* Kotak cari mobile global (nf-mobile-search.js)                          */
/* ---------------------------------------------------------------------- */
/* Dipakai halaman yang belum punya kotak cari sendiri (Daftar Suka, detail,
   halaman tonton). Gaya sengaja memakai kelas .nf-msbox supaya TIDAK
   menimpa .mobile-search-box milik /home, /drama, dan /lastupdate yang
   sudah jalan. */
.mobile-search-box.nf-msbox{
	display:none;
	position:fixed;
	top:var(--nf-mh);
	left:0;
	right:0;
	z-index:999;
	padding:12px 14px;
	background:rgba(9,10,14,.96);
	-webkit-backdrop-filter:blur(16px) saturate(140%);
	backdrop-filter:blur(16px) saturate(140%);
	border-bottom:1px solid var(--pf-line);
	box-shadow:0 18px 34px rgba(0,0,0,.5);
}
.mobile-search-box.nf-msbox.active{ display:block; }
.mobile-search-box.nf-msbox input{
	width:100%;
	height:46px;
	padding:0 44px 0 16px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.06);
	color:var(--pf-text);
	font-family:var(--nf-font) !important;
	font-size:14.5px;
}
.mobile-search-box.nf-msbox input::placeholder{ color:var(--pf-text-mute); }
.mobile-search-box.nf-msbox input:focus{
	outline:none;
	border-color:rgba(229,9,20,.55);
	box-shadow:0 0 0 4px rgba(229,9,20,.16);
}
.mobile-search-box.nf-msbox .clear-search{
	position:absolute;
	right:24px;
	top:50%;
	transform:translateY(-50%);
	width:28px;
	height:28px;
	display:none;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.1);
	color:var(--pf-text-dim);
	font-size:12px;
	cursor:pointer;
}
.mobile-search-box.nf-msbox input:not(:placeholder-shown) ~ .clear-search,
.mobile-search-box.nf-msbox input[value]:not([value=""]) ~ .clear-search{ display:flex; }

/* tombol kaca pembesar di header mobile */
.nf-ms-toggle{
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	color:var(--pf-text) !important;
	font-size:20px;
	cursor:pointer;
	transition:background .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.nf-ms-toggle:hover,
.nf-ms-toggle:active{ background:rgba(255,255,255,.09); transform:scale(1.04); }

/* baris dropdown mobile */
.nf-ms-row .list_item_container{ display:block; }
.nf-ms-row .nf-ms-title{
	font-family:var(--nf-font-display) !important;
	font-size:13.5px;
	font-weight:600;
	line-height:1.3;
	color:var(--pf-text);
}
.nf-ms-row a{ display:block; padding:11px 13px !important; border-radius:10px; }
.nf-ms-row a:hover .nf-ms-title,
.nf-ms-row a:active .nf-ms-title{ color:#fff; }
.nf-search-cat{
	display:inline-block;
	margin-top:5px;
	padding:2px 9px;
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.07);
	border:1px solid var(--pf-line);
	color:var(--pf-text-mute);
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.03em;
}

/* ---------------------------------------------------------------------- */
/* Halaman masuk / daftar / reset password                                 */
/* ---------------------------------------------------------------------- */
/* Halaman ini punya gaya sendiri (cincin poster 3D + kartu kaca). Di sini
   hanya diselaraskan dengan token premium supaya seragam dengan halaman
   lain: judul Montserrat, tombol pil bergradasi, garis kartu, dan ring
   fokus yang sama. */
.nf-login-stage .login-card{
	border-color:var(--pf-line);
	border-radius:var(--pf-r-lg);
}
.nf-login-stage .login-header h1{
	font-family:var(--nf-font-display) !important;
	letter-spacing:-.02em;
}
.nf-login-stage .login-header p{
	font-size:14.5px;
	color:var(--pf-text-dim);
}
.nf-login-stage .login-form-group{ position:relative; }
.nf-login-stage .login-form-group label{
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	letter-spacing:.01em;
	color:var(--pf-text);
}
.nf-login-stage .login-form-input{
	border-radius:12px;
	border-color:var(--pf-line);
	background:rgba(255,255,255,.06);
}
.nf-login-stage .login-form-input:focus{
	border-color:rgba(229,9,20,.6);
	box-shadow:0 0 0 4px rgba(229,9,20,.18);
}
.nf-login-stage .login-submit-btn{
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	font-family:var(--nf-font-display) !important;
	box-shadow:0 16px 34px rgba(229,9,20,.34);
}
.nf-login-stage .login-submit-btn:hover{
	background:linear-gradient(135deg, #ff1622, #b80d16);
	transform:translateY(-2px);
	box-shadow:0 22px 44px rgba(229,9,20,.48);
}
.nf-login-stage .login-footer{ border-top-color:var(--pf-line); }
.nf-login-stage .login-footer p{ font-size:13px; color:var(--pf-text-dim); }

/* tautan lupa password: sejajar dengan label, ikut gaya premium */
.nf-login-stage .login-forgot{
	position:absolute;
	top:0;
	right:0;
	font-size:12.5px;
	font-weight:600;
	color:#ff8a92 !important;
	letter-spacing:.01em;
}
.nf-login-stage .login-forgot:hover{ color:#ffb3b8 !important; text-decoration:underline; }
.nf-login-stage .login-forgot-row{ margin:10px 0 0 !important; }
.nf-login-stage .login-forgot-row a{ color:#ff8a92 !important; font-weight:600; }
.nf-login-stage .login-forgot-row a:hover{ color:#ffb3b8 !important; }

/* ---------------------------------------------------------------------- */
/* Halaman error (404 / 500 / 503)                                         */
/* ---------------------------------------------------------------------- */
/* Sebelumnya tidak ada view error kustom, jadi URL salah menampilkan      */
/* halaman bawaan Laravel ("Not Found", font Nunito, lang=en) tanpa logo,  */
/* navigasi, atau jalan kembali.                                           */
.nf-err{
	display:flex;
	align-items:center;
	min-height:76vh;
	padding:70px 0 90px;
}
.nf-err-card{
	max-width:640px;
	margin:0 auto;
	padding:52px 44px 46px;
	text-align:center;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-lg);
	background:
		radial-gradient(600px 300px at 50% 0%, rgba(229,9,20,.16), transparent 70%),
		rgba(11,13,18,.72);
	-webkit-backdrop-filter:blur(18px) saturate(140%);
	backdrop-filter:blur(18px) saturate(140%);
	box-shadow:var(--pf-sh-3);
}
.nf-err-icon{
	display:block;
	margin-bottom:14px;
	font-size:40px;
	color:rgba(255,255,255,.2);
}
.nf-err-code{
	font-family:var(--nf-font-display) !important;
	font-size:clamp(64px, 13vw, 108px);
	font-weight:800;
	line-height:.92;
	letter-spacing:-.045em;
	background:linear-gradient(135deg, #ff2d38 0%, #7a0a10 78%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
}
.nf-err-code.is-warn{ background:linear-gradient(135deg, #ffb020 0%, #8a4a05 78%); -webkit-background-clip:text; background-clip:text; }
.nf-err-code.is-info{ background:linear-gradient(135deg, #29a1e0 0%, #0d4a6b 78%); -webkit-background-clip:text; background-clip:text; }
.nf-err-card h1{
	margin:16px 0 12px !important;
	font-family:var(--nf-font-display) !important;
	font-size:clamp(21px, 3.2vw, 30px);
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--pf-text) !important;
}
.nf-err-text{
	max-width:460px;
	margin:0 auto 26px !important;
	font-size:14.5px;
	line-height:1.65;
	color:var(--pf-text-dim) !important;
}
.nf-err-search{
	position:relative;
	display:flex;
	align-items:center;
	gap:10px;
	max-width:460px;
	margin:0 auto 24px;
}
.nf-err-search > i{
	position:absolute;
	left:18px;
	font-size:18px;
	color:var(--pf-text-mute);
	pointer-events:none;
}
.nf-err-search input{
	flex:1 1 auto;
	height:52px;
	padding:0 18px 0 46px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.05);
	color:var(--pf-text);
	font-family:var(--nf-font) !important;
	font-size:14.5px;
}
.nf-err-search input:focus{
	outline:none;
	border-color:rgba(229,9,20,.55);
	box-shadow:0 0 0 4px rgba(229,9,20,.16);
}
.nf-err-search button{
	flex:0 0 auto;
	height:52px;
	padding:0 26px;
	border:0;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	color:#fff;
	font-family:var(--nf-font-display) !important;
	font-size:14.5px;
	font-weight:600;
	cursor:pointer;
	box-shadow:0 14px 30px rgba(229,9,20,.32);
}
.nf-err-actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:12px;
}
.nf-err-btn{
	display:inline-flex;
	align-items:center;
	gap:9px;
	height:48px;
	padding:0 26px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.05);
	color:var(--pf-text) !important;
	font-family:var(--nf-font-display) !important;
	font-size:14px;
	font-weight:600;
	transition:transform .2s var(--pf-ease), background .2s var(--pf-ease), border-color .2s var(--pf-ease);
}
.nf-err-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.1); }
.nf-err-btn.is-primary{
	border-color:transparent;
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	box-shadow:0 14px 30px rgba(229,9,20,.34);
}
.nf-err-btn.is-primary:hover{ box-shadow:0 20px 40px rgba(229,9,20,.5); }

@media (max-width: 575px){
	.nf-err{ padding:46px 0 80px; min-height:70vh; }
	.nf-err-card{ padding:38px 22px 34px; }
	.nf-err-search{ flex-direction:column; }
	.nf-err-search input{ width:100%; }
	.nf-err-search button{ width:100%; }
	.nf-err-actions{ flex-direction:column; }
	.nf-err-btn{ width:100%; justify-content:center; }
}

/* daftar desktop (Semua Drama / Episode Terbaru / Daftar Suka) */
.nf-result-meta > span:only-child{ margin-left:auto; }
.page-single .nf-result-grid{ margin-top:8px; padding-bottom:6px; }

/* ---------------------------------------------------------------------- */
/* Pemutar trailer (fragmen di dalam modal halaman detail)                 */
/* ---------------------------------------------------------------------- */
.nf-trailer{
	position:relative;
	border-radius:14px;
	overflow:hidden;
	background:#05060a;
	box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.nf-trailer .video-js{
	width:100% !important;
	height:auto !important;
	aspect-ratio:16 / 9;
	background:#05060a;
}
.nf-trailer-close{
	position:absolute;
	top:12px;
	right:12px;
	z-index:5;
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border:1px solid rgba(255,255,255,.16);
	border-radius:50%;
	background:rgba(9,10,14,.72);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	color:#fff;
	font-size:16px;
	line-height:1;
	cursor:pointer;
	transition:background .18s var(--pf-ease), transform .18s var(--pf-ease);
}
.nf-trailer-close:hover{ background:rgba(229,9,20,.85); transform:scale(1.06); }
.nf-trailer-empty{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:12px;
	min-height:220px;
	padding:40px 24px;
	border:1px solid var(--pf-line);
	border-radius:14px;
	background:rgba(255,255,255,.03);
	text-align:center;
}
.nf-trailer-empty i{ font-size:38px; color:rgba(255,255,255,.22); }
.nf-trailer-empty p{ margin:0 !important; font-size:14px; color:var(--pf-text-dim) !important; }

/* ---------------------------------------------------------------------- */
/* Halaman lupa password (email & reset) — jalur WhatsApp jadi utama       */
/* ---------------------------------------------------------------------- */
.nf-auth-page{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:88vh;
	padding:50px 20px;
}
.nf-auth-card{
	width:100%;
	max-width:460px;
	padding:44px 38px 34px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-lg);
	background:
		radial-gradient(560px 280px at 50% 0%, rgba(37,211,102,.14), transparent 72%),
		rgba(11,13,18,.72);
	-webkit-backdrop-filter:blur(18px) saturate(140%);
	backdrop-filter:blur(18px) saturate(140%);
	box-shadow:var(--pf-sh-3);
	text-align:center;
}
.nf-auth-head{ margin-bottom:24px; }
.nf-auth-icon{
	display:block;
	margin-bottom:14px;
	font-size:44px;
	color:#25d366;
}
.nf-auth-head h1{
	margin:0 0 10px !important;
	font-family:var(--nf-font-display) !important;
	font-size:26px;
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--pf-text) !important;
}
.nf-auth-head p{
	margin:0 auto !important;
	max-width:340px;
	font-size:14px;
	line-height:1.6;
	color:var(--pf-text-dim) !important;
}
.nf-auth-wa{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	height:54px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, #25d366, #128c40);
	color:#fff !important;
	font-family:var(--nf-font-display) !important;
	font-size:15px;
	font-weight:700;
	box-shadow:0 16px 34px rgba(37,211,102,.32);
	transition:transform .2s var(--pf-ease), box-shadow .2s var(--pf-ease);
}
.nf-auth-wa i{ font-size:20px; }
.nf-auth-wa:hover{ transform:translateY(-2px); box-shadow:0 22px 44px rgba(37,211,102,.46); }
.nf-auth-nomor{
	margin:14px 0 0 !important;
	font-size:13px;
	color:var(--pf-text-mute) !important;
}
.nf-auth-nomor strong{ color:var(--pf-text); letter-spacing:.02em; }
.nf-auth-alt{
	margin-top:26px;
	padding-top:20px;
	border-top:1px solid var(--pf-line);
	text-align:left;
}
.nf-auth-alt summary{
	cursor:pointer;
	font-family:var(--nf-font-display) !important;
	font-size:13.5px;
	font-weight:600;
	color:var(--pf-text-dim);
	list-style:none;
}
.nf-auth-alt summary::-webkit-details-marker{ display:none; }
.nf-auth-alt summary::before{ content:'+ '; color:#ff5a63; font-weight:800; }
.nf-auth-alt[open] summary::before{ content:'– '; }
.nf-auth-alt-body{ margin-top:16px; }
.nf-auth-alt label{
	display:block;
	margin-bottom:7px;
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	font-weight:600;
	color:var(--pf-text);
}
.nf-auth-input{
	width:100%;
	height:50px;
	padding:0 16px;
	border:1px solid var(--pf-line);
	border-radius:12px;
	background:rgba(255,255,255,.06);
	color:var(--pf-text);
	font-family:var(--nf-font) !important;
	font-size:14.5px;
}
.nf-auth-input:focus{
	outline:none;
	border-color:rgba(229,9,20,.6);
	box-shadow:0 0 0 4px rgba(229,9,20,.18);
}
.nf-auth-input.is-invalid{ border-color:#e50914; }
.nf-auth-submit{
	width:100%;
	height:50px;
	margin-top:14px;
	border:0;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, var(--pf-red), #a80c14);
	color:#fff;
	font-family:var(--nf-font-display) !important;
	font-size:14.5px;
	font-weight:600;
	cursor:pointer;
	box-shadow:0 14px 30px rgba(229,9,20,.32);
}
.nf-auth-submit:hover{ transform:translateY(-2px); }
.nf-auth-note{
	display:block;
	margin-top:10px;
	padding:10px 13px;
	border-radius:10px;
	font-size:13px;
}
.nf-auth-note.is-ok{ background:rgba(47,143,70,.16); border:1px solid rgba(47,143,70,.45); color:#b7e8c4; }
.nf-auth-note.is-error{ background:rgba(229,9,20,.12); border:1px solid rgba(229,9,20,.5); color:#ff8a93; }
.nf-auth-back{
	margin:20px 0 0 !important;
	font-size:13px;
	color:var(--pf-text-mute) !important;
	text-align:center;
}
.nf-auth-back a{ color:#ff8a92 !important; font-weight:600; }
.nf-auth-back a:hover{ text-decoration:underline; }
.nf-auth-back i{ margin-right:6px; }

/* ikon WhatsApp di tautan lupa password pada kartu login */
.nf-login-stage .login-forgot i{ margin-right:6px; font-size:13px; }
.nf-login-stage .login-forgot-row i{ margin-right:6px; font-size:13px; }

@media (max-width: 575px){
	.nf-auth-card{ padding:34px 22px 28px; }
	.nf-auth-head h1{ font-size:22px; }
}

/* ---------------------------------------------------------------------- */
/* Halaman daftar akun (auth/register)                                     */
/* ---------------------------------------------------------------------- */
.nf-auth-card.is-wide{ max-width:600px; text-align:left; }
.nf-auth-card.is-wide .nf-auth-head{ text-align:center; }
.nf-reg-form{ text-align:left; }
.nf-field{ margin-bottom:16px; position:relative; }
.nf-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nf-field label{
	display:block;
	margin-bottom:7px;
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	font-weight:600;
	color:var(--pf-text);
}
.nf-optional{ font-weight:400; color:var(--pf-text-mute); font-size:11.5px; }
.nf-field-hint{
	display:block;
	margin-top:6px;
	font-size:11.5px;
	line-height:1.5;
	color:var(--pf-text-mute);
}
.nf-field-err{
	display:block;
	margin-top:6px;
	font-size:12px;
	font-weight:600;
	color:#ff8a93;
}
.nf-pass-wrap{ position:relative; }
.nf-pass-wrap .nf-auth-input{ padding-right:48px; }
.nf-pass-toggle{
	position:absolute;
	top:50%;
	right:8px;
	transform:translateY(-50%);
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:0;
	border-radius:50%;
	background:transparent;
	color:var(--pf-text-mute);
	font-size:17px;
	cursor:pointer;
	transition:background .18s var(--pf-ease), color .18s var(--pf-ease);
}
.nf-pass-toggle:hover{ background:rgba(255,255,255,.08); color:var(--pf-text); }
.nf-reg-note{
	display:flex;
	gap:9px;
	align-items:flex-start;
	margin:16px 0 0 !important;
	padding:12px 14px;
	border:1px solid var(--pf-line);
	border-radius:12px;
	background:rgba(255,255,255,.03);
	font-size:12.5px;
	line-height:1.6;
	color:var(--pf-text-dim) !important;
}
.nf-reg-note i{ margin-top:2px; color:#ff5a63; font-size:15px; }
.nf-reg-note strong{ color:var(--pf-text); }
.nf-auth-card.is-wide .nf-auth-alt{ text-align:center; }
.nf-auth-card.is-wide .nf-auth-back + .nf-auth-back{ margin-top:10px !important; }

@media (max-width: 575px){
	.nf-field-row{ grid-template-columns:1fr; gap:0; }
}

/* ---------------------------------------------------------------------- */
/* Halaman Aktifkan Premium (/premium)                                     */
/* ---------------------------------------------------------------------- */
.nf-prem{ padding:34px 0 90px; }
.nf-prem-head{ margin-bottom:22px; }
.nf-prem-tag{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-bottom:12px;
	padding:5px 14px;
	border-radius:var(--pf-r-pill);
	background:rgba(229,9,20,.16);
	border:1px solid rgba(229,9,20,.4);
	color:#ff8a92;
	font-family:var(--nf-font-display) !important;
	font-size:12px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
}
.nf-prem-head h1{
	margin:0 0 10px !important;
	font-family:var(--nf-font-display) !important;
	font-size:clamp(24px, 3.6vw, 40px);
	font-weight:800;
	letter-spacing:-.025em;
	color:var(--pf-text) !important;
}
.nf-prem-head p{
	max-width:640px;
	margin:0 !important;
	font-size:15px;
	line-height:1.65;
	color:var(--pf-text-dim) !important;
}
.nf-prem-head strong{ color:var(--pf-text); }

/* kartu status akun */
.nf-prem-status{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
	margin:22px 0 8px;
	padding:16px 20px;
	border:1px solid var(--pf-line);
	border-radius:16px;
	background:rgba(255,255,255,.04);
}
.nf-prem-status i{ font-size:26px; }
.nf-prem-status div{ flex:1 1 240px; }
.nf-prem-status strong{
	display:block;
	font-family:var(--nf-font-display) !important;
	font-size:15px;
	color:var(--pf-text);
}
.nf-prem-status span{ font-size:13px; color:var(--pf-text-dim); }
.nf-prem-status.is-premium{
	border-color:rgba(47,143,70,.45);
	background:linear-gradient(120deg, rgba(47,143,70,.16), transparent 70%);
}
.nf-prem-status.is-premium i{ color:#4fd07a; }
.nf-prem-status.is-gratis{
	border-color:rgba(229,9,20,.32);
	background:linear-gradient(120deg, rgba(229,9,20,.13), transparent 70%);
}
.nf-prem-status.is-gratis i{ color:#ff5a63; }
.nf-prem-status-btn{ display:flex; gap:10px; flex-wrap:wrap; }

/* langkah singkat */
.nf-prem-steps{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:12px;
	margin:22px 0 6px;
	padding:0 !important;
	list-style:none;
}
.nf-prem-steps li{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 14px;
	border:1px solid var(--pf-line);
	border-radius:12px;
	background:rgba(255,255,255,.03);
	font-size:12.5px;
	font-weight:600;
	color:var(--pf-text-dim);
}
.nf-prem-steps span{
	flex:0 0 auto;
	width:24px; height:24px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:rgba(229,9,20,.2);
	color:#ff8a92;
	font-family:var(--nf-font-display) !important;
	font-size:12px;
	font-weight:800;
}
.nf-prem-sub{
	margin:38px 0 16px !important;
	font-family:var(--nf-font-display) !important;
	font-size:18px;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--pf-text) !important;
}
.nf-prem-sub small{ font-size:12.5px; font-weight:500; color:var(--pf-text-mute); }

/* kartu paket */
.nf-paket-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:14px;
}
@media (min-width: 700px){ .nf-paket-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px){ .nf-paket-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; } }
.nf-paket-card{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:20px 18px 18px;
	border:1px solid var(--pf-line);
	border-radius:16px;
	background:rgba(255,255,255,.04);
	color:var(--pf-text);
	text-align:left;
	cursor:pointer;
	transition:transform .2s var(--pf-ease), border-color .2s var(--pf-ease), box-shadow .2s var(--pf-ease), background .2s var(--pf-ease);
}
.nf-paket-card:hover{ transform:translateY(-4px); border-color:rgba(229,9,20,.42); background:rgba(255,255,255,.06); }
.nf-paket-card.is-pilih{
	border-color:rgba(229,9,20,.75);
	background:linear-gradient(140deg, rgba(229,9,20,.18), transparent 72%);
	box-shadow:0 18px 40px rgba(229,9,20,.28);
}
.nf-paket-nama{
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--pf-text-dim);
}
.nf-paket-harga{
	font-family:var(--nf-font-display) !important;
	font-size:24px;
	font-weight:800;
	letter-spacing:-.03em;
	color:#fff;
}
.nf-paket-lama{ font-size:12px; color:var(--pf-text-mute); }
.nf-paket-cek{
	display:none;
	margin-top:8px;
	font-size:12px;
	font-weight:700;
	color:#ff8a92;
}
.nf-paket-card.is-pilih .nf-paket-cek{ display:block; }

/* kotak konfirmasi WhatsApp */
.nf-prem-konfirmasi{ margin-top:22px; }
.nf-prem-konfirmasi-in{
	max-width:560px;
	padding:20px 22px;
	border:1px solid rgba(37,211,102,.32);
	border-radius:16px;
	background:linear-gradient(130deg, rgba(37,211,102,.12), transparent 70%);
}
.nf-prem-terpilih{ margin:0 0 12px !important; font-size:13.5px; color:var(--pf-text-dim) !important; }
.nf-prem-terpilih strong{ color:var(--pf-text); }
.nf-prem-nomor{ margin:12px 0 0 !important; font-size:12.5px; color:var(--pf-text-mute) !important; }
.nf-prem-nomor strong{ color:var(--pf-text); letter-spacing:.02em; }

/* kanal pembayaran */
.nf-kanal-list{ display:flex; flex-direction:column; gap:10px; }
.nf-kanal{
	border:1px solid var(--pf-line);
	border-radius:14px;
	background:rgba(255,255,255,.03);
	overflow:hidden;
}
.nf-kanal summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:15px 18px;
	list-style:none;
	cursor:pointer;
	font-family:var(--nf-font-display) !important;
	font-size:13.5px;
	font-weight:600;
	color:var(--pf-text);
}
.nf-kanal summary::-webkit-details-marker{ display:none; }
.nf-kanal[open] summary{ background:rgba(255,255,255,.05); }
.nf-kanal-arrow{ color:var(--pf-text-mute); transition:transform .2s var(--pf-ease); }
.nf-kanal[open] .nf-kanal-arrow{ transform:rotate(180deg); }
.nf-kanal-langkah{
	margin:0 !important;
	padding:14px 20px 18px 38px !important;
	border-top:1px solid var(--pf-line);
	font-size:13px;
	line-height:1.7;
	color:var(--pf-text-dim);
}
.nf-kanal-langkah li{ margin-bottom:6px; }
.nf-kanal-langkah li:last-child{ margin-bottom:0; }

.nf-prem-catatan{
	display:flex;
	gap:9px;
	align-items:flex-start;
	margin:26px 0 0 !important;
	padding:14px 16px;
	border:1px solid var(--pf-line);
	border-radius:14px;
	background:rgba(255,255,255,.03);
	font-size:12.5px;
	line-height:1.65;
	color:var(--pf-text-dim) !important;
}
.nf-prem-catatan i{ margin-top:2px; color:#ff5a63; font-size:15px; }
.nf-prem-catatan a{ color:#ff8a92 !important; font-weight:600; }

/* gerbang premium di halaman tonton */
.nf-prem-gate{
	padding:54px 22px;
	text-align:center;
	color:var(--pf-text);
}
.nf-prem-gate-icon{ display:block; margin-bottom:14px; font-size:34px; color:rgba(255,255,255,.28); }
.nf-prem-gate-title{
	margin:0 0 8px !important;
	font-family:var(--nf-font-display) !important;
	font-size:17px;
	font-weight:700;
	color:var(--pf-text) !important;
}
.nf-prem-gate-sub{ margin:0 auto 20px !important; max-width:380px; font-size:13.5px; color:var(--pf-text-dim) !important; }

@media (max-width: 991px){
	.nf-prem-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.nf-prem{ padding-bottom:110px; }
}
@media (max-width: 575px){
	.nf-prem-steps{ gap:8px; }
	.nf-prem-steps li{ font-size:11.5px; padding:10px 11px; }
	.nf-prem-status{ padding:14px 16px; }
}

/* ---------------------------------------------------------------------- */
/* Konfirmasi pembayaran (/premium/konfirmasi)                             */
/* ---------------------------------------------------------------------- */
.nf-konf-grid{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 340px;
	gap:22px;
	align-items:start;
	margin-top:6px;
}
.nf-konf-form-wrap{ min-width:0; }
.nf-konf-form{
	padding:24px 24px 22px;
	border:1px solid var(--pf-line);
	border-radius:18px;
	background:rgba(255,255,255,.035);
}
.nf-konf-form .nf-auth-input,
.nf-konf-form select.nf-auth-input{
	width:100%;
	height:50px;
	padding:0 14px;
	border:1px solid var(--pf-line);
	border-radius:12px;
	background:rgba(255,255,255,.05);
	color:var(--pf-text);
	font-family:var(--nf-font-body) !important;
	font-size:14px;
	appearance:none;
	transition:border-color .18s var(--pf-ease), box-shadow .18s var(--pf-ease), background .18s var(--pf-ease);
}
.nf-konf-form select.nf-auth-input{
	background-image:linear-gradient(45deg, transparent 50%, var(--pf-text-mute) 50%), linear-gradient(135deg, var(--pf-text-mute) 50%, transparent 50%);
	background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
	background-size:6px 6px, 6px 6px;
	background-repeat:no-repeat;
	padding-right:40px;
}
.nf-konf-form .nf-auth-input:focus{
	outline:0;
	border-color:rgba(229,9,20,.6);
	background:rgba(255,255,255,.07);
	box-shadow:0 0 0 3px rgba(229,9,20,.16);
}
.nf-konf-form .nf-auth-input.is-invalid{ border-color:rgba(255,90,99,.65); }
.nf-konf-form option{ background:#14161a; color:#fff; }
.nf-konf-form .nf-auth-submit{ width:100%; margin-top:4px; }
.nf-konf-form .nf-auth-submit.is-loading{ opacity:.75; pointer-events:none; }

/* nominal dengan awalan Rp */
.nf-nominal-wrap{ position:relative; }
.nf-nominal-rp{
	position:absolute;
	top:50%;
	left:15px;
	transform:translateY(-50%);
	font-family:var(--nf-font-display) !important;
	font-size:14px;
	font-weight:700;
	color:var(--pf-text-mute);
	pointer-events:none;
}
.nf-nominal-wrap .nf-auth-input{ padding-left:42px; }

/* kotak unggah bukti */
.nf-unggah{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	padding:26px 18px;
	border:1.5px dashed var(--pf-line);
	border-radius:16px;
	background:rgba(255,255,255,.025);
	text-align:center;
	cursor:pointer;
	transition:border-color .2s var(--pf-ease), background .2s var(--pf-ease);
}
.nf-unggah:hover{ border-color:rgba(229,9,20,.5); background:rgba(229,9,20,.06); }
.nf-unggah.is-isi{ border-style:solid; border-color:rgba(37,211,102,.55); background:rgba(37,211,102,.08); }
.nf-unggah input[type="file"]{
	position:absolute;
	width:1px; height:1px;
	opacity:0;
	pointer-events:none;
}
.nf-unggah i{ font-size:30px; color:rgba(255,255,255,.4); }
.nf-unggah.is-isi i{ color:#4fd07a; }
.nf-unggah-teks{
	font-family:var(--nf-font-display) !important;
	font-size:13.5px;
	font-weight:700;
	color:var(--pf-text);
}
.nf-unggah-nama{ font-size:12.5px; color:#7ee2a1; word-break:break-all; }
.nf-unggah-ket{ max-width:340px; font-size:11.5px; line-height:1.5; color:var(--pf-text-mute); }

/* hasil verifikasi */
.nf-konf-hasil{
	margin:24px 0 26px;
	padding:20px 22px;
	border:1px solid var(--pf-line);
	border-radius:18px;
}
.nf-konf-hasil.is-ok{
	border-color:rgba(47,143,70,.5);
	background:linear-gradient(130deg, rgba(47,143,70,.16), transparent 72%);
}
.nf-konf-hasil.is-tunggu{
	border-color:rgba(230,160,30,.45);
	background:linear-gradient(130deg, rgba(230,160,30,.14), transparent 72%);
}
.nf-konf-hasil-head{ display:flex; gap:14px; align-items:flex-start; }
.nf-konf-hasil-head i{ font-size:26px; line-height:1; }
.nf-konf-hasil.is-ok .nf-konf-hasil-head i{ color:#4fd07a; }
.nf-konf-hasil.is-tunggu .nf-konf-hasil-head i{ color:#ffc45e; }
.nf-konf-hasil-head strong{
	display:block;
	margin-bottom:4px;
	font-family:var(--nf-font-display) !important;
	font-size:15.5px;
	color:var(--pf-text);
}
.nf-konf-hasil-head span{ font-size:13px; line-height:1.65; color:var(--pf-text-dim); }
.nf-konf-hasil-head a{ color:#ff8a92 !important; font-weight:600; }
.nf-konf-cek{
	margin:16px 0 0 !important;
	padding:0 !important;
	list-style:none;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.nf-konf-cek li{
	display:flex;
	gap:9px;
	align-items:flex-start;
	padding:10px 13px;
	border-radius:11px;
	background:rgba(0,0,0,.22);
	font-size:12.5px;
	line-height:1.6;
	color:var(--pf-text-dim);
}
.nf-konf-cek li.is-ok i{ color:#4fd07a; }
.nf-konf-cek li.is-no i{ color:#ffc45e; }
.nf-konf-cek i{ margin-top:2px; }
.nf-konf-catatan{ margin:14px 0 0 !important; font-size:12.5px; color:var(--pf-text-mute) !important; }

/* kolom kanan */
.nf-konf-aside{
	padding:20px 20px 22px;
	border:1px solid var(--pf-line);
	border-radius:18px;
	background:rgba(255,255,255,.03);
}
.nf-konf-aside-judul{
	margin:0 0 10px !important;
	font-family:var(--nf-font-display) !important;
	font-size:14.5px;
	font-weight:700;
	color:var(--pf-text) !important;
}
.nf-konf-aside-judul i{ color:#ff5a63; margin-right:6px; }
.nf-konf-aside > p{ margin:0 0 14px !important; font-size:12.5px; line-height:1.6; color:var(--pf-text-dim) !important; }
.nf-kanal-list.is-compact .nf-kanal summary{ padding:12px 14px; font-size:12.5px; }
.nf-kanal-list.is-compact .nf-kanal-langkah{ padding:12px 16px 14px 32px !important; font-size:12px; }
.nf-konf-aside .nf-auth-wa{ margin-top:16px; }

@media (max-width: 991px){
	.nf-konf-grid{ grid-template-columns:minmax(0, 1fr); }
	.nf-konf-form{ padding:20px 18px 18px; }
}
@media (max-width: 575px){
	.nf-unggah{ padding:20px 14px; }
	.nf-konf-hasil{ padding:16px; }
}

/* tautan yang dibentuk seperti tombol kirim */
a.nf-auth-submit.is-cta{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	text-decoration:none !important;
	margin-bottom:4px;
}

/* ---------------------------------------------------------------------- */
/* Header: satu navbar saja per ukuran layar                               */
/* Halaman lama mengatur ini di CSS masing-masing; halaman baru (/search,  */
/* /premium, /premium/konfirmasi) tidak, sehingga navbar desktop dan header */
/* mobile tampil bersamaan dan tampak berserak.                            */
/* ---------------------------------------------------------------------- */
@media (max-width: 991px){
	.nf-header{ display:none !important; }
	.nf-sp-bar{ display:none !important; }   /* bilah cari tambahan, tak perlu */
}
@media (min-width: 992px){
	.mobile-app-header{ display:none !important; }
}


/* ---------------------------------------------------------------------- */
/* Header mobile & kotak cari -- dipindah dari CSS halaman lama supaya      */
/* halaman baru (/search, /premium, konfirmasi) ikut rapi di HP.            */
/* ---------------------------------------------------------------------- */
	/* Mobile App Header */
	.mobile-app-header {
		display: none;
	}
	
	@media (max-width: 991px) {
		.mobile-app-header {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background: #dc3545;
			color: white;
			z-index: 1000;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			height: var(--nf-mh);
		}
		
		.mobile-app-header .header-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			height: var(--nf-mh);
		}
		
		.mobile-app-header .menu-toggle {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			font-size: 24px;
		}
		
		.mobile-app-header .logo {
			flex: 1;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			color: white;
			text-decoration: none;
		}
		
		.mobile-app-header .logo img {
			height: 32px;
			width: auto;
		}
		
		.mobile-app-header .search-toggle,
		.mobile-app-header .dark-mode-toggle {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			font-size: 20px;
		}
		
		.mobile-app-header .header-icons {
			display: flex;
			align-items: center;
			gap: 5px;
		}
		
		.mobile-search-box {
			display: none;
			position: fixed;
			top: var(--nf-mh);
			left: 0;
			right: 0;
			background: white;
			padding: 10px 15px;
			z-index: 999;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}
		
		.mobile-search-box.active {
			display: block;
		}
		
		.mobile-search-box input {
			width: 100%;
			padding: 10px 40px 10px 15px;
			border: 1px solid #ddd;
			border-radius: 25px;
			font-size: 14px;
		}
		
		.mobile-search-box .clear-search {
			position: absolute;
			right: 25px;
			top: 50%;
			transform: translateY(-50%);
			width: 24px;
			height: 24px;
			display: none;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			color: #999;
			font-size: 18px;
			z-index: 10;
		}
		
		.mobile-search-box .clear-search:hover {
			color: #333;
		}
		
		.mobile-search-box input:not(:placeholder-shown) ~ .clear-search,
		.mobile-search-box input[value]:not([value=""]) ~ .clear-search {
			display: flex;
		}
		
		/* Autocomplete Dropdown Styling - Mobile */
		.ui-autocomplete.ui-widget.ui-widget-content {
			position: fixed !important;
			top: 140px !important;
			left: 15px !important;
			right: 15px !important;
			width: calc(100% - 30px) !important;
			max-width: none !important;
			max-height: 400px !important;
			overflow-y: auto !important;
			overflow-x: hidden !important;
			z-index: 1001 !important;
			background: white !important;
			border: 1px solid #ddd !important;
			border-radius: 8px !important;
			box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
			padding: 5px 0 !important;
			margin: 0 !important;
		}
		
		.ui-autocomplete.ui-widget-content {
			background: white !important;
			border: 1px solid #ddd !important;
		}
		
		.ui-autocomplete .ui-menu {
			list-style: none !important;
			margin: 0 !important;
			padding: 0 !important;
			width: 100% !important;
		}
		
		.ui-autocomplete .ui-menu-item {
			list-style: none !important;
			margin: 0 !important;
			padding: 0 !important;
			width: 100% !important;
			height: auto !important;
			border: none !important;
		}
		
		.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,
		.ui-autocomplete .ui-menu-item-wrapper {
			padding: 12px 15px !important;
			cursor: pointer !important;
			border-bottom: 1px solid #f0f0f0 !important;
			display: block !important;
			text-decoration: none !important;
			color: #333 !important;
			background: white !important;
			width: 100% !important;
			margin: 0 !important;
		}
		
		.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover,
		.ui-autocomplete .ui-menu-item-wrapper:hover,
		.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
		.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
			background: #f5f5f5 !important;
			border-color: #ddd !important;
			margin: 0 !important;
		}
		
		.ui-autocomplete .ui-menu-item:last-child .ui-menu-item-wrapper {
			border-bottom: none !important;
		}
		
		.ui-autocomplete .list_item_container {
			display: flex !important;
			align-items: center !important;
			font-size: 14px !important;
			float: none !important;
			margin: 0 !important;
			width: 100% !important;
		}
		
		.ui-autocomplete .list_item_container div {
			flex: 1 !important;
			color: #333 !important;
		}
		
		.ui-autocomplete a {
			text-decoration: none !important;
			color: #333 !important;
			display: block !important;
			width: 100% !important;
		}
	}

/* Isi halaman baru jangan tertutup header HP yang posisinya fixed */
@media (max-width: 991px){
	.nf-search-page,
	.nf-prem{ padding-top: calc(var(--nf-mh, 72px) + 14px) !important; }
}


/* Bilah navigasi bawah di HP -- juga per-halaman di CSS halaman lama, jadi  */
/* halaman baru (/search, /premium, konfirmasi) harus diberi aturannya di sini */
	.mobile-bottom-nav {
		display: none;
	}
	
	@media (max-width: 991px) {
		.mobile-bottom-nav {
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(180deg, #dc3545 0%, #c82333 100%);
			color: white;
			z-index: 1000;
			box-shadow: 0 -4px 20px rgba(0,0,0,0.15), 0 -1px 0 rgba(255,255,255,0.1) inset;
			height: 68px;
			justify-content: space-around;
			align-items: center;
			border-top: 1px solid rgba(255,255,255,0.1);
			padding-bottom: env(safe-area-inset-bottom);
		}
		
		.mobile-bottom-nav .nav-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 8px 5px;
			color: rgba(255,255,255,0.65);
			text-decoration: none;
			font-size: 11px;
			transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
			position: relative;
			border-radius: 12px;
			margin: 0 4px;
		}
		
		.mobile-bottom-nav .nav-item::before {
			content: '';
			position: absolute;
			top: -2px;
			left: 50%;
			transform: translateX(-50%) scaleX(0);
			width: 32px;
			height: 3px;
			background: white;
			border-radius: 0 0 3px 3px;
			transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		}
		
		.mobile-bottom-nav .nav-item.active {
			color: white;
			background: rgba(255,255,255,0.12);
		}
		
		.mobile-bottom-nav .nav-item.active::before {
			transform: translateX(-50%) scaleX(1);
		}
		
		.mobile-bottom-nav .nav-item i {
			font-size: 24px;
			margin-bottom: 4px;
			transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		}
		
		.mobile-bottom-nav .nav-item.active i {
			transform: scale(1.1);
		}
		
		.mobile-bottom-nav .nav-item span {
			font-size: 10px;
			font-weight: 500;
			letter-spacing: 0.3px;
		}
	}
@media (max-width: 991px){
	body.nf-punya-barnav{ padding-bottom:74px !important; }
}

/* ---------------------------------------------------------------------- */
/* Halaman Daftar Suka (/listfavorit) -- dibuat mewah                      */
/* ---------------------------------------------------------------------- */
.nf-fav{ padding-bottom:110px; }

/* kartu profil (dipakai versi HP & desktop) */
.nf-fav-profil{
	display:flex;
	align-items:center;
	gap:14px;
	margin:16px 0 18px;
	padding:16px;
	border:1px solid var(--pf-line);
	border-radius:18px;
	background:linear-gradient(130deg, rgba(229,9,20,.14), rgba(255,255,255,.03) 62%);
	position:relative;
	overflow:hidden;
}
.nf-fav-profil::after{
	content:'';
	position:absolute;
	inset:auto -40% -70% auto;
	width:220px; height:220px;
	background:radial-gradient(circle, rgba(229,9,20,.28), transparent 68%);
	pointer-events:none;
}
.nf-fav-avatar{
	flex:0 0 auto;
	width:54px; height:54px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:linear-gradient(140deg, #e50914, #8b0009);
	color:#fff;
	font-family:var(--nf-font-display) !important;
	font-size:22px;
	font-weight:800;
	box-shadow:0 10px 24px rgba(229,9,20,.4);
}
.nf-fav-info{ flex:1 1 auto; min-width:0; }
.nf-fav-email{
	display:block;
	margin-bottom:7px;
	font-family:var(--nf-font-display) !important;
	font-size:13.5px;
	font-weight:600;
	color:var(--pf-text);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.nf-fav-baris{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.nf-fav-chip{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:4px 10px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	background:rgba(0,0,0,.28);
	font-size:11.5px;
	font-weight:600;
	color:var(--pf-text-dim);
}
.nf-fav-chip.is-premium{ border-color:rgba(47,143,70,.5); background:rgba(47,143,70,.16); color:#7ee2a1; }
.nf-fav-chip.is-gratis{ border-color:rgba(229,9,20,.42); background:rgba(229,9,20,.14); color:#ff9aa1; }
.nf-fav-detail{ display:block; margin-top:7px; font-size:11.5px; color:var(--pf-text-mute); }
.nf-fav-cta{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:10px 15px;
	border-radius:var(--pf-r-pill);
	background:linear-gradient(135deg, #e50914, #8b0009);
	color:#fff !important;
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	font-weight:700;
	text-decoration:none !important;
	box-shadow:0 10px 24px rgba(229,9,20,.34);
}
.nf-fav-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 0 12px; }
.nf-fav-head h2{
	margin:0 !important;
	font-family:var(--nf-font-display) !important;
	font-size:17px;
	font-weight:800;
	letter-spacing:-.01em;
	color:var(--pf-text) !important;
}
.nf-fav-head span{ font-size:12px; color:var(--pf-text-mute); }

/* keadaan kosong */
.nf-fav-kosong{
	margin:18px 0;
	padding:34px 22px;
	border:1px solid var(--pf-line);
	border-radius:20px;
	background:rgba(255,255,255,.03);
	text-align:center;
}
.nf-fav-kosong i{ display:block; margin-bottom:14px; font-size:40px; color:rgba(229,9,20,.75); }
.nf-fav-kosong strong{
	display:block;
	margin-bottom:8px;
	font-family:var(--nf-font-display) !important;
	font-size:16px;
	color:var(--pf-text);
}
.nf-fav-kosong p{ max-width:420px; margin:0 auto 18px !important; font-size:13px; line-height:1.65; color:var(--pf-text-dim) !important; }
.nf-fav-kosong-aksi{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* kartu favorit + tombol hapus */
.nf-fav-item{ position:relative; }
.nf-fav-hapus{
	position:absolute;
	top:9px;
	right:9px;
	z-index:3;
	width:32px; height:32px;
	display:flex; align-items:center; justify-content:center;
	border:1px solid rgba(255,255,255,.16);
	border-radius:50%;
	background:rgba(8,9,12,.72);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	color:#ff5a63;
	font-size:15px;
	cursor:pointer;
	opacity:0;
	transition:opacity .2s var(--pf-ease), transform .2s var(--pf-ease), background .2s var(--pf-ease);
}
.nf-fav-item:hover .nf-fav-hapus,
.nf-fav-item:focus-within .nf-fav-hapus{ opacity:1; }
.nf-fav-hapus:hover{ background:rgba(229,9,20,.9); color:#fff; transform:scale(1.08); }
@media (hover: none){ .nf-fav-hapus{ opacity:1; } }   /* di HP tombol selalu tampak */

/* versi HP: grid kartu */
.nf-fav-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width: 560px){ .nf-fav-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.nf-fav-grid .app-movie-card{
	display:block;
	border:1px solid var(--pf-line);
	border-radius:14px;
	overflow:hidden;
	background:rgba(255,255,255,.04);
	text-decoration:none !important;
	transition:transform .22s var(--pf-ease), border-color .22s var(--pf-ease), box-shadow .22s var(--pf-ease);
}
.nf-fav-grid .app-movie-card:active{ transform:scale(.98); }
/* Tinggi kartu dipaku 240px oleh CSS halaman lama (properti height berbeda,
   jadi aspect-ratio kalah). Diberi !important supaya rasionya benar-benar 2:3. */
.nf-fav-grid .card-image{ position:relative; aspect-ratio:2 / 3; height:auto !important; overflow:hidden !important; background:#101216 !important; }
.nf-fav-grid .card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.nf-fav-grid .card-badge{
	position:absolute;
	/* wajib: aturan lama (.app-movie-card .card-badge) menyetel top & right,
	   jadi keempat sisi harus ditentukan -- kalau tidak, labelnya melar
	   memenuhi seluruh kartu (terukur 171x224 px). */
	top:auto; right:auto;
	left:8px; bottom:8px;
	width:auto; height:auto; max-width:calc(100% - 16px);
	padding:3px 9px;
	border-radius:var(--pf-r-pill);
	background:rgba(229,9,20,.92) !important;
	color:#fff !important;
	font-family:var(--nf-font-display) !important;
	font-size:10.5px;
	font-weight:700;
}
.nf-fav-grid .card-info{ padding:10px 11px 12px; }
.nf-fav-grid .card-title{
	margin:0 0 4px !important;
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	font-weight:700;
	line-height:1.35;
	color:var(--pf-text) !important;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.nf-fav-ep{ font-size:11px; color:var(--pf-text-mute); }

/* versi desktop */
.nf-fav-desktop{ padding:34px 0 80px; }
.nf-fav-dhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.nf-fav-dhead h1{
	margin:0 0 8px !important;
	font-family:var(--nf-font-display) !important;
	font-size:clamp(24px, 3vw, 34px);
	font-weight:800;
	letter-spacing:-.025em;
	color:var(--pf-text) !important;
}
.nf-fav-dhead h1 i{ color:#e50914; margin-right:8px; }
.nf-fav-dhead p{ margin:0 !important; font-size:14px; color:var(--pf-text-dim) !important; }
.nf-fav-dcount{
	padding:8px 16px;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	background:rgba(255,255,255,.04);
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	font-weight:600;
	color:var(--pf-text-dim);
	white-space:nowrap;
}
.nf-fav-dgrid{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:22px; align-items:start; }
.nf-fav-profil.is-desktop{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	margin:0;
	padding:26px 22px;
	text-align:center;
	position:sticky;
	top:110px;
}
.nf-fav-profil.is-desktop .nf-fav-avatar{ width:74px; height:74px; font-size:28px; }
.nf-fav-profil.is-desktop .nf-fav-email{ font-size:13px; white-space:normal; word-break:break-all; }
.nf-fav-profil.is-desktop .nf-fav-baris{ justify-content:center; }
.nf-fav-rinci{
	width:100%;
	margin:6px 0 0 !important;
	padding:0 !important;
	list-style:none;
	border-top:1px solid var(--pf-line);
}
.nf-fav-rinci li{
	display:flex;
	justify-content:space-between;
	gap:10px;
	padding:10px 0;
	border-bottom:1px solid var(--pf-line);
	font-size:12.5px;
}
.nf-fav-rinci span{ color:var(--pf-text-mute); }
.nf-fav-rinci strong{ color:var(--pf-text); font-weight:600; }
.nf-fav-dorong{ margin:4px 0 2px !important; font-size:12.5px; line-height:1.6; color:var(--pf-text-dim) !important; }
.nf-fav-jelajah{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:6px;
	font-size:12.5px;
	font-weight:600;
	color:#ff8a92 !important;
	text-decoration:none !important;
}
.nf-fav-dlist{ min-width:0; }
.nf-fav-dcards{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:18px !important; }
@media (min-width: 1400px){ .nf-fav-dcards{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; } }
.nf-fav-kosong.is-desktop{ padding:56px 26px; }
.nf-fav-pag{ margin-top:26px; text-align:center; }
.nf-fav-pag .pagination{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.nf-fav-pag a, .nf-fav-pag span{
	padding:9px 14px;
	border:1px solid var(--pf-line);
	border-radius:11px;
	background:rgba(255,255,255,.04);
	color:var(--pf-text-dim) !important;
	font-size:12.5px;
	text-decoration:none !important;
}
.nf-fav-pag .active span, .nf-fav-pag a:hover{ border-color:rgba(229,9,20,.55); color:#fff !important; }

@media (max-width: 991px){
	.nf-fav-desktop{ display:none !important; }   /* versi desktop disembunyikan di HP */
}


/* ---------------------------------------------------------------------- */
/* Menu samping versi HP -- aturan tampilnya juga per-halaman di CSS lama,  */
/* jadi halaman baru (/search, /premium, konfirmasi) tidak punya.           */
/* ---------------------------------------------------------------------- */
@media (max-width: 991px){
	.mobile-side-menu {
		display: none;
		position: fixed;
		top: var(--nf-mh);
		left: -320px;
		width: 320px;
		height: calc(100vh - var(--nf-mh));
		background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
		z-index: 998;
		transition: left 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
		box-shadow: 4px 0 24px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.1);
		overflow-y: auto;
		pointer-events: none;
		border-right: 1px solid rgba(0,0,0,0.05);
	}
	.mobile-side-menu.active {
		left: 0;
		pointer-events: auto;
	}
		.mobile-side-menu-overlay {
			display: none !important;
		}
	.mobile-side-menu-overlay.active {
		display: block;
		opacity: 1;
		pointer-events: auto;
	}
	.mobile-side-menu .menu-item {
		display: flex;
		align-items: center;
		padding: 18px 24px;
		color: #1a1a1a;
		text-decoration: none;
		border-bottom: 1px solid rgba(0,0,0,0.04);
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.2px;
		transition: all 0.25s ease;
		position: relative;
		background: transparent;
	}
}
@media (min-width: 992px){
	.mobile-side-menu, .mobile-side-menu-overlay{ display:none !important; }
}

/* Menu samping: jangan pernah disembunyikan saat .active.
   Aturan dasarnya `display:none` dan aturan .active hanya menyetel `left`,
   sehingga menunya tidak pernah tampil walau kelasnya sudah aktif
   (terukur: 0x0 px di semua halaman). */
@media (max-width: 991px){
	.mobile-side-menu.active{
		display:block !important;
		left:0 !important;
		pointer-events:auto !important;
	}
	.mobile-side-menu-overlay.active{
		display:block !important;
		opacity:1 !important;
		pointer-events:auto !important;
	}
}

/* Lapisan gelap di belakang menu samping (aturannya ada per-halaman di CSS
   lama; tanpa ini lapisnya nol tinggi sehingga klik di luar tidak menutup). */
@media (max-width: 991px){
	.mobile-side-menu-overlay{
		display:none;
		position:fixed;
		top:var(--nf-mh, 72px);
		left:0;
		right:0;
		bottom:60px;
		background:rgba(0,0,0,.6);
		-webkit-backdrop-filter:blur(4px);
		backdrop-filter:blur(4px);
		z-index:997;
		opacity:0;
		transition:opacity .35s ease;
		pointer-events:none;
	}
}

/* Kode unik & blok QRIS */
.nf-paket-kode{
	display:block;
	margin-top:2px;
	font-size:10.5px;
	font-weight:600;
	color:#7ee2a1;
}
.nf-prem-kodeinfo{
	display:flex;
	gap:9px;
	align-items:flex-start;
	margin:6px 0 0 !important;
	padding:12px 15px;
	border:1px solid rgba(37,211,102,.28);
	border-radius:12px;
	background:rgba(37,211,102,.08);
	font-size:12.5px;
	line-height:1.6;
	color:var(--pf-text-dim) !important;
}
.nf-prem-kodeinfo i{ margin-top:2px; color:#4fd07a; font-size:15px; }
.nf-prem-kodeinfo strong{ color:var(--pf-text); }
.nf-qris{
	margin:6px 0 14px;
	padding:18px;
	border:1px solid rgba(37,211,102,.32);
	border-radius:16px;
	background:linear-gradient(140deg, rgba(37,211,102,.1), rgba(255,255,255,.03) 70%);
	text-align:center;
}
.nf-qris-label{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-bottom:12px;
	font-family:var(--nf-font-display) !important;
	font-size:12.5px;
	font-weight:700;
	color:#7ee2a1;
}
.nf-qris-img{
	display:block;
	width:min(280px, 78%);
	height:auto;
	margin:0 auto 12px;
	padding:10px;
	border-radius:14px;
	background:#fff;   /* QRIS wajib di atas latar putih agar terbaca pemindai */
}
.nf-qris p{ margin:0 !important; font-size:12.5px; line-height:1.6; color:var(--pf-text-dim) !important; }
.nf-qris strong{ color:var(--pf-text); }
.nf-qris .nf-qris-nominal{ font-size:15px; color:#7ee2a1 !important; }
.nf-qris-kosong{ margin:0 0 10px !important; }
.nf-qris-kosong a{ color:#ff8a92 !important; font-weight:600; }
.nf-qris-merchant{
	margin:0 0 8px !important;
	font-size:12px;
	color:var(--pf-text-mute) !important;
}

/* ---------------------------------------------------------------------- */
/* Halaman konfirmasi: langkah bernomor + QRIS paling menonjol             */
/* ---------------------------------------------------------------------- */
.nf-step{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin:22px 0 12px;
	padding-top:16px;
	border-top:1px solid var(--pf-line);
}
.nf-step:first-of-type{ margin-top:6px; padding-top:0; border-top:0; }
.nf-step-no{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:23px; height:23px;
	border-radius:50%;
	background:linear-gradient(135deg, var(--pf-red), #8f0a11);
	color:#fff;
	font-family:var(--nf-font-display) !important;
	font-size:12px;
	font-weight:800;
	box-shadow:0 4px 12px rgba(229,9,20,.35);
}
.nf-step-judul{
	font-family:var(--nf-font-display) !important;
	font-size:14.5px;
	font-weight:800;
	letter-spacing:.2px;
	color:var(--pf-text);
}
.nf-step-ket{ font-size:11.5px; color:var(--pf-text-mute); }

/* kartu pilihan cara bayar */
.nf-cara-pilih{ align-items:stretch; }
.nf-cara-kartu{ position:relative; }
.nf-cara-ribbon{
	position:absolute;
	top:-9px; right:11px;
	padding:3px 9px;
	border-radius:999px;
	background:linear-gradient(135deg, #25d366, #12874a);
	color:#04220f !important;
	font-family:var(--nf-font-display) !important;
	font-size:9.5px;
	font-weight:800;
	letter-spacing:.5px;
	text-transform:uppercase;
	box-shadow:0 5px 14px rgba(37,211,102,.4);
}
/* QRIS = pilihan utama, jadi selalu diberi aksen hijau */
.nf-cara-kartu.is-qris{
	border-color:rgba(37,211,102,.45);
	background:linear-gradient(140deg, rgba(37,211,102,.12), rgba(255,255,255,.03) 70%);
}
.nf-cara-kartu.is-qris i,
.nf-cara-kartu.is-qris strong{ color:#7ee2a1; }
.nf-cara-kartu.is-qris.is-pilih{
	border-color:#25d366;
	box-shadow:0 12px 30px rgba(37,211,102,.24);
}
.nf-cara-kartu.is-qris.is-pilih::after{
	content:"\2713";
	position:absolute;
	left:13px; bottom:11px;
	width:19px; height:19px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:#25d366;
	color:#04220f;
	font-size:11px;
	font-weight:900;
}

/* blok QR */
.nf-qris{
	margin:-2px 0 16px;
	padding:20px 18px 22px;
	border:1px solid rgba(37,211,102,.4);
	border-radius:18px;
	background:linear-gradient(160deg, rgba(37,211,102,.12), rgba(10,11,14,.6) 62%);
	box-shadow:0 18px 44px rgba(0,0,0,.42);
}
.nf-qris-img{
	width:min(300px, 82%);
	margin:10px auto 12px;
	padding:11px;
	border-radius:16px;
	background:#fff;
	box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.nf-qris-uang{
	display:flex;
	flex-direction:column;
	gap:2px;
	align-items:center;
	margin:0 0 14px;
	padding:10px;
	border-radius:12px;
	background:rgba(0,0,0,.35);
	border:1px dashed rgba(37,211,102,.45);
}
.nf-qris-uang span{
	font-size:10px;
	letter-spacing:.6px;
	text-transform:uppercase;
	color:var(--pf-text-mute) !important;
}
.nf-qris-uang strong{
	font-family:var(--nf-font-display) !important;
	font-size:24px;
	font-weight:800;
	color:#8df0b0 !important;
}
.nf-qris-langkah{
	margin:0 0 12px;
	padding:0 0 0 18px;
	font-size:12px;
	line-height:1.75;
	color:var(--pf-text-dim) !important;
	text-align:left;
}
.nf-qris-langkah li{ margin-bottom:2px; }
.nf-qris-merchant{
	margin:0 !important;
	padding-top:10px;
	border-top:1px dashed rgba(255,255,255,.12);
	font-size:11.5px;
}
.nf-qris-merchant strong{ color:#7ee2a1 !important; }

/* nominal terkunci saat QRIS */
.nf-auth-input.is-kunci{
	background:rgba(37,211,102,.08) !important;
	border-color:rgba(37,211,102,.45) !important;
	color:#8df0b0 !important;
	cursor:not-allowed;
}

@media (max-width: 620px){
	.nf-qris{ padding:18px 14px 20px; }
	.nf-qris-uang strong{ font-size:21px; }
	.nf-step{ margin:18px 0 10px; }
}

/* ---------------------------------------------------------------------- */
/* QRIS v2 -- menyatu dengan tema gelap sinematik (tanpa blok hijau besar) */
/* Emas untuk aksen "paling cepat", papan QR tetap putih agar terbaca.     */
/* ---------------------------------------------------------------------- */
.nf-step-no{
	background:rgba(229,9,20,.16);
	border:1px solid rgba(229,9,20,.45);
	color:#ff8a92;
	box-shadow:none;
}
.nf-cara-kartu.is-qris{
	border-color:var(--pf-line);
	background:linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 70%);
}
.nf-cara-kartu.is-qris i,
.nf-cara-kartu.is-qris strong{ color:var(--pf-text); }
.nf-cara-kartu.is-qris.is-pilih{
	border-color:rgba(229,9,20,.62);
	background:linear-gradient(150deg, rgba(229,9,20,.15), rgba(255,255,255,.03) 72%);
	box-shadow:0 14px 32px rgba(229,9,20,.2);
}
.nf-cara-kartu.is-qris.is-pilih i,
.nf-cara-kartu.is-qris.is-pilih strong{ color:#ff6a72; }
.nf-cara-kartu.is-qris.is-pilih::after{
	background:var(--pf-red);
	color:#fff;
}
.nf-cara-ribbon{
	background:linear-gradient(135deg, #e5c15a, #a5811c);
	color:#1c1503 !important;
	box-shadow:0 5px 14px rgba(200,160,40,.32);
}

/* kartu QR: gelap, rapi, dua kolom di layar lebar */
.nf-qris{
	border:1px solid var(--pf-line);
	background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(10,11,14,.5) 70%);
	border-radius:18px;
	box-shadow:0 18px 44px rgba(0,0,0,.35);
	padding:20px 18px 22px;
	text-align:left;
}
.nf-qris-label{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-bottom:14px;
	font-family:var(--nf-font-display) !important;
	font-size:13px;
	font-weight:800;
	color:var(--pf-text) !important;
}
.nf-qris-label i{ color:#ff6a72; font-size:16px; }
.nf-qris-kiri{ text-align:center; }
.nf-qris-img{
	width:min(250px, 74%);
	margin:0 auto 9px;
	padding:10px;
	border-radius:14px;
	background:#fff;
	box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.nf-qris-scan{
	display:block;
	font-size:10.5px;
	color:var(--pf-text-mute);
}
.nf-qris-uang-label{
	display:block;
	font-size:10.5px;
	letter-spacing:.5px;
	text-transform:uppercase;
	color:var(--pf-text-mute);
}
.nf-qris .nf-qris-nominal{
	display:block;
	margin:2px 0 3px;
	font-family:var(--nf-font-display) !important;
	font-size:30px;
	font-weight:800;
	line-height:1.1;
	color:#fff !important;
	text-shadow:0 2px 22px rgba(229,9,20,.35);
}
.nf-qris-uang-ket{
	display:block;
	margin-bottom:14px;
	font-size:11.5px;
	color:var(--pf-text-mute);
}
.nf-qris-langkah{
	margin:0 0 12px;
	padding:0;
	list-style:none;
	counter-reset:lang;
	font-size:12.5px;
	line-height:1.65;
	color:var(--pf-text-dim) !important;
}
.nf-qris-langkah li{
	position:relative;
	margin-bottom:7px;
	padding-left:27px;
}
.nf-qris-langkah li::before{
	counter-increment:lang;
	content:counter(lang);
	position:absolute;
	left:0; top:1px;
	width:18px; height:18px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.16);
	color:var(--pf-text);
	font-size:10.5px;
	font-weight:800;
}
.nf-qris-merchant{
	margin:0 !important;
	padding-top:11px;
	border-top:1px solid rgba(255,255,255,.1);
	font-size:11.5px;
	color:var(--pf-text-mute) !important;
}
.nf-qris-merchant strong{ color:var(--pf-text) !important; }

@media (min-width: 760px){
	.nf-qris{
		display:grid;
		grid-template-columns:250px 1fr;
		gap:24px;
		align-items:start;
	}
	.nf-qris-label{ grid-column:1 / -1; margin-bottom:6px; }
	.nf-qris-img{ width:250px; }
	.nf-qris-langkah{ margin-bottom:14px; }
}
@media (max-width: 620px){
	.nf-qris{ padding:18px 14px 20px; }
	.nf-qris .nf-qris-nominal{ font-size:26px; }
}

/* ---------------------------------------------------------------------- */
/* Daftar pilihan (dropdown) bawaan browser: paksa mode gelap             */
/* ---------------------------------------------------------------------- */
/* Tanpa ini, daftar <select> yang dibuka tampil putih dengan tulisan hitam
   (bawaan Chrome/Edge di Windows) sehingga bertabrakan dengan tema gelap.
   color-scheme juga membuat scrollbar, pemilih tanggal, dan kotak centang
   bawaan browser ikut gelap. */
:root{ color-scheme: dark; }
select,
select.nf-auth-input,
.nf-auth-input,
.nf-field select{
	color-scheme: dark;
}
select option,
select optgroup{
	background-color:#14161a;
	color:#f2f3f5;
}
/* tombol panah bawaan pada kolom pilihan agar tetap terlihat di latar gelap */
select.nf-auth-input,
.nf-field select{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a7abb3' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 13px center;
	background-size:11px 7px;
	padding-right:36px !important;
}

/* ---------------------------------------------------------------------- */
/* Kartu pilihan cara bayar v3 -- gaya tombol pilihan (radio)              */
/* Ikon dalam kotak, teks dua baris, bulatan centang di kanan.             */
/* ---------------------------------------------------------------------- */
.nf-cara-pilih{ gap:12px; }
.nf-cara-kartu{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:13px;
	padding:15px 16px;
	border-radius:16px;
	border:1.5px solid var(--pf-line);
	background:linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.02) 72%);
	text-align:left;
	cursor:pointer;
	transition:border-color .2s var(--pf-ease), background .2s var(--pf-ease),
	           box-shadow .25s var(--pf-ease), transform .16s var(--pf-ease);
}
.nf-cara-kartu:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.22); }
.nf-cara-kartu:active{ transform:scale(.995); }

.nf-cara-ikon{
	flex:0 0 auto;
	width:46px; height:46px;
	display:flex; align-items:center; justify-content:center;
	border-radius:13px;
	background:rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.12);
	color:var(--pf-text-dim);
}
.nf-cara-ikon i{ font-size:23px; line-height:1; }

.nf-cara-teks{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.nf-cara-nama{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:7px;
	font-family:var(--nf-font-display) !important;
	font-size:14px;
	font-weight:800;
	letter-spacing:.15px;
	color:var(--pf-text);
}
.nf-cara-ket{ font-size:11.5px; line-height:1.5; color:var(--pf-text-mute); }

.nf-cara-pill{
	padding:2px 8px;
	border-radius:999px;
	background:linear-gradient(135deg, #e5c15a, #a5811c);
	color:#1c1503 !important;
	font-family:var(--nf-font-display) !important;
	font-size:9.5px;
	font-weight:800;
	font-style:normal;
	letter-spacing:.4px;
	text-transform:uppercase;
}

/* bulatan pilihan di kanan */
.nf-cara-radio{
	flex:0 0 auto;
	width:23px; height:23px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%;
	border:2px solid rgba(255,255,255,.22);
	color:transparent;
	transition:border-color .2s var(--pf-ease), background .2s var(--pf-ease), color .2s var(--pf-ease);
}
.nf-cara-radio i{ font-size:12px; line-height:1; }

.nf-cara-kartu.is-pilih{
	border-color:rgba(229,9,20,.6);
	background:linear-gradient(150deg, rgba(229,9,20,.16), rgba(255,255,255,.03) 74%);
	box-shadow:0 14px 34px rgba(229,9,20,.22);
}
.nf-cara-kartu.is-pilih .nf-cara-ikon{
	background:rgba(229,9,20,.18);
	border-color:rgba(229,9,20,.5);
	color:#ff8a92;
}
.nf-cara-kartu.is-pilih .nf-cara-radio{
	border-color:var(--pf-red);
	background:var(--pf-red);
	color:#fff;
}
/* QRIS versi terpilih memakai aksen emas-hijau lembut agar beda dari transfer */
.nf-cara-kartu.is-qris.is-pilih{
	border-color:rgba(37,211,102,.55);
	background:linear-gradient(150deg, rgba(37,211,102,.14), rgba(255,255,255,.03) 74%);
	box-shadow:0 14px 34px rgba(37,211,102,.18);
}
.nf-cara-kartu.is-qris.is-pilih .nf-cara-ikon{
	background:rgba(37,211,102,.16);
	border-color:rgba(37,211,102,.45);
	color:#8df0b0;
}
.nf-cara-kartu.is-qris.is-pilih .nf-cara-radio{
	border-color:#25d366;
	background:#25d366;
	color:#04220f;
}
.nf-cara-kartu.is-qris.is-pilih::after{ content:none; }  /* tanda centang lama dimatikan */
.nf-cara-ribbon{ display:none; }                         /* diganti label di samping judul */

@media (max-width: 420px){
	.nf-cara-ikon{ width:42px; height:42px; }
	.nf-cara-ikon i{ font-size:21px; }
	.nf-cara-nama{ font-size:13.5px; }
	.nf-cara-ket{ font-size:11px; }
}

/* tinggi kartu pilihan disamakan supaya deretannya rata */
.nf-cara-kartu{ min-height:104px; }
@media (max-width: 420px){ .nf-cara-kartu{ min-height:100px; } }

/* kotak unggah: normalisasi tinggi baris (tema lama memaksa line-height 24px
   !important sehingga kotak teks saling menimpa) */
.nf-unggah{ row-gap:8px; }
.nf-unggah-teks{ display:block; line-height:1.35 !important; }
.nf-unggah-nama{ display:block; line-height:1.4 !important; }
.nf-unggah-ket{ display:block; line-height:1.55 !important; max-width:340px; margin:2px 0 0; }
.nf-unggah i{ line-height:1 !important; }

/* ---------------------------------------------------------------------- */
/* Normalisasi blok daftar kanal & kotak unggah                            */
/* Tema lama memaksa `line-height:24px !important` pada semua span dan <li>, */
/* sehingga kotak teks saling menimpa. Selain itu, isi <details> yang belum  */
/* dibuka harus benar-benar tersembunyi supaya tidak menimpa baris lain.     */
/* ---------------------------------------------------------------------- */
.nf-kanal-nama,
.nf-kanal-langkah,
.nf-kanal-langkah li,
.nf-konf-aside p,
.nf-konf-aside li{
	line-height:1.55 !important;
}
.nf-kanal-nama{ display:block; }
.nf-kanal-langkah li{ margin-bottom:6px; }
.nf-kanal-langkah li:last-child{ margin-bottom:0; }
/* isi <details> yang tertutup jangan menempel keluar */
.nf-kanal:not([open]) > *:not(summary){ display:none !important; }
.nf-kanal summary{ display:flex; align-items:center; gap:10px; }
.nf-kanal summary::-webkit-details-marker{ display:none; }
.nf-kanal-arrow{ flex:0 0 auto; transition:transform .25s var(--pf-ease); }
.nf-kanal[open] .nf-kanal-arrow{ transform:rotate(180deg); }

/* ---------------------------------------------------------------------- */
/* Wadah kartu pilihan cara bayar WAJIB grid supaya jaraknya berlaku       */
/* (sebelumnya hanya `gap` yang diatur tanpa `display:grid`, sehingga kedua */
/*  kartu menempel tanpa jarak)                                            */
/* ---------------------------------------------------------------------- */
.nf-cara-pilih{
	display:grid !important;
	grid-template-columns:minmax(0, 1fr) !important;
	gap:12px !important;
	align-items:stretch !important;
}
@media (min-width: 620px){
	.nf-cara-pilih{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
.nf-cara-hint{
	display:flex;
	align-items:center;
	gap:7px;
	margin-top:9px;
	font-size:11.5px;
	color:var(--pf-text-mute);
}
.nf-cara-hint[hidden]{ display:none; }
.nf-cara-hint i{ color:#ffb648; font-size:14px; }

/* ---------------------------------------------------------------------- */
/* PENTING: aturan display di media query desktop mengalahkan atribut      */
/* `hidden` bawaan browser (yang hanya display:none versi lemah).          */
/* Tanpa baris ini, blok QR tetap tampil di desktop walau belum dipilih.   */
/* ---------------------------------------------------------------------- */
.nf-qris[hidden],
.nf-cara-hint[hidden],
.nf-field[hidden]{ display:none !important; }

/* ---------------------------------------------------------------------- */
/* PLAYER: tinggi yang tetap bekerja di browser TV / mesin lama            */
/* ---------------------------------------------------------------------- */
/* `aspect-ratio` baru tersedia di Chrome 88+ (2021), sedangkan browser TV  */
/* umumnya memakai mesin lebih tua. Akibatnya aturan itu diabaikan, kotak   */
/* player menjadi 0 tinggi (anak-anaknya `position:absolute`), dan videonya */
/* TIDAK terlihat walau sudah diputar -- sementara penanda "sedang diputar" */
/* di daftar episode tetap bekerja karena JS/penyimpanannya normal.         */
/* Cadangan memakai teknik padding-top (16:9 = 56,25% dari lebar).          */
.nf-player{
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
	background:#000;
	overflow:hidden;
}
/* `inset` juga baru (Chrome 87+): tulis keempat sisi secara terpisah */
.nf-player > .nf-player-video,
.nf-player-cover,
.nf-player-spinner{
	top:0;
	right:0;
	bottom:0;
	left:0;
}
@supports (aspect-ratio: 16 / 9){
	.nf-player{
		height:auto;
		padding-top:0;
		aspect-ratio:16 / 9;
	}
}
/* layar HP tetap dibatasi tingginya */
@media (max-width: 991px){
	.nf-player{ max-height:none; }
}

/* ---------------------------------------------------------------------- */
/* Tombol besar di tengah: muncul sebagai JEDA saat video sedang diputar   */
/* (sebelumnya hanya muncul saat dijeda, jadi saat lagi jalan tombol jeda  */
/*  di tengah tidak ada -- padahal itu yang dicari pengguna).              */
/* ---------------------------------------------------------------------- */
.nf-player.is-playing:not(.is-idle) .nf-player-big{
	opacity:1;
	visibility:visible;
	transform:translate(-50%,-50%) scale(1);
}
.nf-player.is-playing.is-idle .nf-player-big{
	opacity:0;
	visibility:hidden;
}
/* di layar sentuh: saat diputar, tombol jeda tampil selama kontrol terlihat */
@media (hover: none){
	.nf-player.is-playing:not(.is-idle) .nf-player-big{ opacity:1; visibility:visible; }
}

/* ---------------------------------------------------------------------- */
/* Halaman detail drama -- bagian yang tadinya tampak "terpotong"          */
/* ---------------------------------------------------------------------- */
/* Gambar "no image" jangan ditarik melar/dipotong: tampilkan utuh di atas  */
/* latar gelap supaya terlihat disengaja (berlaku juga saat JS mengganti   */
/* sumber gambar karena gambar aslinya gagal dimuat).                      */
img[src*="noimage.jpg"],
img[src*="no-image"],
img[src$="/noimage.png"]{
	object-fit:contain !important;
	background:linear-gradient(160deg,#151821,#0e1015) !important;
	padding:16px;
}
/* Ubin rapi bila drama memang tidak punya poster */
.nf-poster-kosong{
	height:240px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	background:linear-gradient(160deg,#151821,#0e1015);
	border-bottom:1px solid rgba(255,255,255,.06);
	color:#8b93a7;
	font-size:13px;
	letter-spacing:.3px;
}
.nf-poster-kosong i{ font-size:30px; opacity:.75; }

@media (max-width: 991px){
	/* Hero detail adalah konten DESKTOP (lihat komentar di markup: "Desktop
	   Content (Hidden on Mobile)"). Tanpa aturan ini, di HP blok HP dan hero
	   desktop tampil bersamaan sehingga poster, judul, dan tombol "Tonton
	   Sekarang" muncul dua kali. */
	.hero.nf-hero-detail{ display:none !important; }
}

/* ---------------------------------------------------------------------- */
/* Beranda: hero slider versi DESKTOP jangan tampil di HP                  */
/* ---------------------------------------------------------------------- */
/* Markup-nya berkomentar "Desktop Content (Hidden on Mobile)", dan aturan  */
/* lama hanya menyembunyikan .movie-items (konten desktop versi lama).      */
/* Akibatnya di HP blok HP dan hero slider desktop tampil bersamaan         */
/* (banner/hero besar muncul lagi setelah bagian-bagian HP).               */
@media (max-width: 991px){
	.hero.nf-hero-slide,
	.hero.nf-hero-slide.is-active{
		display:none !important;
	}
}

/* ---------------------------------------------------------------------- */
/* Beranda (HP): banner hero dibuat seperti POSTER SINEMATIK               */
/* ---------------------------------------------------------------------- */
/* Sebelumnya banner hanya berisi gambar polos: tanpa judul drama, tanpa    */
/* info, dan tanpa tombol, sehingga terasa jauh dari "poster mewah".        */
/* Markup sekarang: gambar + lapisan gelap + judul/label/info/tombol.       */
.app-hero-banner{ position:relative; overflow:hidden; }
.app-hero-banner .ahb-gambar,
.app-hero-banner .ahb-gambar img{
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	width:100%; height:100%;
	display:block;
}
.app-hero-banner .ahb-gambar img{ object-fit:cover; object-position:center 22%; }
.app-hero-banner .ahb-lapisan{
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	background:
		linear-gradient(180deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,.05) 26%, rgba(8,9,12,.35) 55%, rgba(8,9,12,.94) 100%),
		linear-gradient(90deg, rgba(8,9,12,.55) 0%, rgba(8,9,12,0) 55%);
}
.app-hero-banner .ahb-isi{
	position:absolute;
	left:0; right:0; bottom:0;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:9px;
	padding:16px 16px 18px;
	text-align:left;
}
.app-hero-banner .ahb-lencana{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:4px 11px;
	border-radius:999px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.7px;
	text-transform:uppercase;
	color:#ffd9a0;
	background:rgba(229,9,20,.24);
	border:1px solid rgba(255,197,110,.5);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
}
.app-hero-banner .ahb-judul{
	margin:0;
	font-family:var(--nf-font-display, "Netflix Sans", Montserrat, sans-serif);
	font-size:23px;
	line-height:1.16;
	font-weight:800;
	letter-spacing:-.2px;
	color:#fff;
	text-shadow:0 2px 14px rgba(0,0,0,.75);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.app-hero-banner .ahb-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:7px;
}
.app-hero-banner .ahb-meta > span{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:3px 9px;
	border-radius:999px;
	font-size:11px;
	font-weight:600;
	color:#e9ecf3;
	background:rgba(255,255,255,.10);
	border:1px solid rgba(255,255,255,.14);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	white-space:nowrap;
}
.app-hero-banner .ahb-tombol{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:3px;
	padding:10px 20px;
	border-radius:999px;
	font-size:13.5px;
	font-weight:700;
	color:#1a0d05;
	background:linear-gradient(135deg,#ffd694 0%,#e8b25f 55%,#d79a3f 100%);
	box-shadow:0 6px 20px rgba(216,154,63,.34), inset 0 1px 0 rgba(255,255,255,.4);
}
.app-hero-banner .ahb-tombol i{ font-size:15px; }
/* sentuhan akhir: tepi halus + bayangan supaya terasa "kartu poster" */
.app-hero-banner{
	border:1px solid rgba(255,255,255,.10);
	box-shadow:0 16px 38px rgba(0,0,0,.5);
}

/* Tinggi kartu poster: gambar sudah mengambang, jadi tingginya ditentukan di
   sini. Dipakai hitungan vw (bukan aspect-ratio) supaya tetap benar di
   browser lama/TV. Lebar kartu = 100vw - 48px (padding 12px kiri-kanan + gap). */
@media (max-width: 991px){
	.app-hero-banner{
		/* lebar dipatok hitungan vw: setelah gambarnya dibuat mengambang,
		   `min-width:calc(100% - 24px)` di dalam wadah geser dihitung dari
		   ukuran yang tidak menentu (kartu jadi 2x lebar layar). */
		width:calc(100vw - 48px);
		min-width:calc(100vw - 48px);
		max-width:calc(100vw - 48px);
		height:calc((100vw - 48px) * 1.1);
		max-height:560px;
		min-height:320px;
	}
}

/* ---------------------------------------------------------------------- */
/* Footer: baris "made with love by Ali Akbar"                             */
/* ---------------------------------------------------------------------- */
.nf-footer-made{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:6px;
	margin:10px 0 0;
	font-size:12.5px;
	letter-spacing:.4px;
	color:#8b93a7;
}
.nf-footer-made .nf-hati{
	color:#ff4d5e;
	font-size:13px;
	line-height:1;
	display:inline-block;
	animation:nfHati 3.4s ease-in-out infinite;
	text-shadow:0 0 12px rgba(255,77,94,.55);
}
@keyframes nfHati{
	0%, 100%{ transform:scale(1); }
	14%{ transform:scale(1.18); }
	28%{ transform:scale(1); }
	42%{ transform:scale(1.12); }
	56%{ transform:scale(1); }
}
.nf-footer-made .nf-penulis{
	font-weight:700;
	background:linear-gradient(135deg,#ffd694 0%,#e8b25f 55%,#d79a3f 100%);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:#e8b25f;
}
/* pembaca layar: tetap terbaca "made with cinta by Ali Akbar" */
.nf-footer-made .nf-sr{
	position:absolute;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
@media (prefers-reduced-motion: reduce){
	.nf-footer-made .nf-hati{ animation:none; }
}
@media (max-width: 767px){
	.nf-footer-made{ font-size:12px; }
}


/* ===== PROMO & INFORMASI (tabel informasis / iklans) ===== */
.nf-promo{ margin:26px 0 10px; }
.nf-promo-kepala{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; }
.nf-promo-kepala h2{ margin:0; font-size:20px; color:#f4f5f7; }
.nf-promo-kepala a{ font-size:13px; font-weight:600; color:#e8b25f; }
.nf-promo-lajur{
	display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
	padding:2px 2px 10px; scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.nf-promo-lajur::-webkit-scrollbar{ height:6px; }
.nf-promo-lajur::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:99px; }
.nf-promo-lajur::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; }
.nf-promo-kartu{
	position:relative; display:flex; flex-direction:column;
	flex:0 0 auto; width:300px; overflow:hidden;
	border-radius:14px; background:#14161c;
	border:1px solid rgba(255,255,255,.09);
	scroll-snap-align:start;
	transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nf-promo-kartu:hover{ transform:translateY(-3px); border-color:rgba(232,178,95,.45); box-shadow:0 12px 26px rgba(0,0,0,.45); }
.nf-promo-kartu img{ display:block; width:100%; height:150px; object-fit:cover; background:#1b1e26; }
.nf-promo-kosong{
	display:flex; align-items:center; justify-content:center;
	width:100%; height:150px; font-size:30px; color:#4a5162; background:#1b1e26;
}
.nf-promo-judul{
	display:block; padding:9px 12px 11px;
	font-size:13px; font-weight:600; line-height:1.35; color:#eef1f7;
}
.nf-promo-judul small{ display:block; margin-top:3px; font-size:11.5px; font-weight:400; color:#8b93a7; }

/* halaman /informasi */
.nf-promo-halaman{ max-width:1240px; margin:0 auto; padding:6px 16px 40px; }
.nf-promo-hero{
	margin:6px 0 22px; padding:22px 22px 20px;
	border-radius:18px;
	background:linear-gradient(135deg, rgba(229,9,20,.14), rgba(216,154,63,.13));
	border:1px solid rgba(255,197,110,.26);
}
.nf-promo-lencana{
	display:inline-flex; align-items:center; gap:6px;
	padding:5px 12px; border-radius:999px;
	font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
	color:#ffd9a0; background:rgba(229,9,20,.22); border:1px solid rgba(255,197,110,.45);
}
.nf-promo-hero h1{ margin:12px 0 8px; font-size:26px; color:#fff; }
.nf-promo-hero p{ margin:0; font-size:13.5px; line-height:1.6; color:#c8cfdd; max-width:680px; }
.nf-promo-kepala-halaman{ margin-top:28px; }
.nf-promo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:14px; }
.nf-promo-kartu-besar{ width:100%; }
.nf-promo-kartu-besar img{ height:158px; }
.nf-promo-kosong-teks{ margin:8px 0; font-size:13.5px; color:#8b93a7; }
.nf-promo-ajakan{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
	margin:30px 0 12px; padding:20px 22px; border-radius:18px;
	background:linear-gradient(135deg, rgba(229,9,20,.16), rgba(216,154,63,.14));
	border:1px solid rgba(255,197,110,.28);
}
.nf-promo-ajakan h3{ margin:0 0 6px; font-size:18px; color:#fff; }
.nf-promo-ajakan p{ margin:0; font-size:13.5px; color:#c8cfdd; max-width:620px; }
.nf-promo-tombol{
	display:inline-flex; align-items:center; gap:8px;
	padding:12px 22px; border-radius:999px;
	font-size:14px; font-weight:700; color:#1a0d05;
	background:linear-gradient(135deg,#ffd694 0%,#e8b25f 55%,#d79a3f 100%);
	box-shadow:0 8px 22px rgba(216,154,63,.32);
}
.nf-promo-kembali{ margin:16px 0 0; font-size:13px; color:#8b93a7; text-align:center; }
.nf-promo-kembali a{ color:#e8b25f; font-weight:600; }

@media (max-width: 767px){
	.nf-promo{ margin:20px 0 6px; }
	.nf-promo-kepala h2{ font-size:17px; }
	.nf-promo-lajur .nf-promo-kartu{ width:246px; }
	.nf-promo-lajur .nf-promo-kartu img, .nf-promo-lajur .nf-promo-kosong{ height:126px; }
	.nf-promo-grid .nf-promo-kartu, .nf-promo-kartu-besar{ width:100%; }
	.nf-promo-grid .nf-promo-kartu img, .nf-promo-grid .nf-promo-kosong{ height:112px; }
	.nf-promo-halaman{ padding:4px 12px 32px; }
	.nf-promo-hero{ padding:18px 16px 16px; }
	.nf-promo-hero h1{ font-size:21px; }
	.nf-promo-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:11px; }
	.nf-promo-kartu-besar img, .nf-promo-kartu-besar .nf-promo-kosong{ height:104px; }
	.nf-promo-ajakan{ padding:16px; }
}

/* ===== PROMO: pembantu tampil/sembunyi (beranda member pakai breakpoint 991px) ===== */
@media (min-width: 992px){ .nf-hp-saja{ display:none !important; } }
@media (max-width: 991px){ .nf-desktop-saja{ display:none !important; } }


/* ===== PROMO: kartu grid selalu mengisi kolomnya ===== */
.nf-promo-grid .nf-promo-kartu, .nf-promo-grid .nf-promo-kartu-besar{ flex:1 1 auto; width:100%; }


/* ===== PROMO: gambar tampil utuh, tanpa tulisan tambahan ===== */
.nf-promo-kartu{ padding:0; }
.nf-promo-kartu img{ object-fit:contain; background:#0f1116; }
.nf-promo-lajur .nf-promo-kartu img{ height:170px; }
.nf-promo-grid .nf-promo-kartu img, .nf-promo-kartu-besar img{ height:190px; }
@media (max-width: 767px){
	.nf-promo-lajur .nf-promo-kartu img{ height:132px; }
	.nf-promo-grid .nf-promo-kartu img, .nf-promo-kartu-besar img{ height:126px; }
}


/* ===== PROMO: gambar besar & presisi (tinggi mengikuti gambar) ===== */
.nf-promo-kartu img{
	width:100%;
	height:auto;
	max-height:360px;
	object-fit:contain;
	background:transparent;
}
.nf-promo-lajur .nf-promo-kartu{ width:400px; }
.nf-promo-lajur .nf-promo-kartu img{ height:auto; max-height:360px; }
.nf-promo-grid{ grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:16px; }
.nf-promo-grid .nf-promo-kartu img,
.nf-promo-kartu-besar img{ height:auto; max-height:360px; }
.nf-promo-lajur{ gap:14px; }
.nf-promo-kepala h2{ font-size:22px; }

@media (max-width: 991px) and (min-width: 768px){
	.nf-promo-lajur .nf-promo-kartu{ width:330px; }
	.nf-promo-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 767px){
	.nf-promo-lajur{ gap:11px; }
	.nf-promo-lajur .nf-promo-kartu{ width:302px; }
	.nf-promo-lajur .nf-promo-kartu img{ height:auto; max-height:300px; }
	.nf-promo-grid{ grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:11px; }
	.nf-promo-grid .nf-promo-kartu img,
	.nf-promo-kartu-besar img{ height:auto; max-height:230px; }
	.nf-promo-kepala h2{ font-size:17px; }
}


/* ===== PROMO: ukuran besar (banner lebar) ===== */
.nf-promo-lajur{ gap:16px; }
.nf-promo-lajur .nf-promo-kartu{ width:560px; }
.nf-promo-lajur .nf-promo-kartu img{ height:auto; max-height:none; }
.nf-promo-grid{ grid-template-columns:repeat(auto-fill, minmax(430px, 1fr)); gap:16px; }
.nf-promo-grid .nf-promo-kartu img,
.nf-promo-kartu-besar img{ height:auto; max-height:none; }
.nf-promo-kartu{ border-radius:16px; }

@media (max-width: 991px) and (min-width: 768px){
	.nf-promo-lajur .nf-promo-kartu{ width:430px; }
	.nf-promo-grid{ grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); }
}

@media (max-width: 767px){
	.nf-promo-lajur{ gap:12px; }
	.nf-promo-lajur .nf-promo-kartu{ width:330px; }
	.nf-promo-lajur .nf-promo-kartu img{ height:auto; max-height:none; }
	/* banner lebar: satu kolom penuh supaya besar & jelas */
	.nf-promo-grid{ grid-template-columns:1fr; gap:12px; }
	.nf-promo-grid .nf-promo-kartu,
	.nf-promo-kartu-besar{ width:100%; }
	.nf-promo-grid .nf-promo-kartu img,
	.nf-promo-kartu-besar img{ height:auto; max-height:none; }
}