/* ==========================================================================
   responsive.css — lapisan mobile. WAJIB dienqueue PALING AKHIR.
   --------------------------------------------------------------------------
   Kenapa fail ini wujud:
   Prototype asal tiada @media sama sekali (ia guna JS `vw < 820`). Bila
   ditukar ke CSS, grid `auto-fill minmax()` selamat mengecut, TETAPI header
   (flex + nowrap) dan hero featured (absolute dalam kotak 21/9) pecah pada
   390px. Fail ini menutup jurang itu.

   Breakpoint:
     820px  — sepadan `isMobile = vw < 820` dalam prototype
     480px  — telefon (360–430px), tempat header paling ketat
   ========================================================================== */

/* Utiliti label panjang/pendek — dipakai pada CTA header. */
.kn-txt-narrow { display: none; }
.kn-txt-wide { display: inline; }


/* ==========================================================================
   ≤ 820px — TABLET & MOBILE
   ========================================================================== */
@media (max-width: 819.98px) {

	:root { --kn-gutter: 16px; }

	/* ---------- Header: site ---------- */
	.kn-header__inner { padding: 10px 16px; gap: 10px; }
	.kn-header__actions { gap: 12px; }
	.kn-brand__logo { width: 34px; height: 34px; }
	.kn-brand__name--dark { font-size: 16.5px; }
	.kn-header .kn-btn--sm { font-size: 13.5px; padding: 10px 14px; }

	/* ---------- Header: portal ---------- */
	.kn-header__inner--portal { gap: 10px; }
	.kn-header__portal-actions { gap: 10px; }

	/* ---------- Seksyen ---------- */
	.kn-portal-section,
	.kn-koleksi,
	.kn-watch { padding-left: 16px; padding-right: 16px; }
	.kn-section__head { margin-bottom: 28px; }
	.kn-portal-h3,
	.kn-row-head h3,
	.kn-watch__side h3 { font-size: 18px; }

	/* ---------- HERO FEATURED (portal) ----------
	   21/9 pada 358px = tinggi 153px. Kandungan absolute-centered mustahil
	   muat. Tukar ke poster tegak + kandungan berlabuh di bawah. */
	.kn-featured__media { aspect-ratio: 3 / 4; min-height: 0; }
	.kn-featured__poster { object-position: center 18%; }
	.kn-featured__scrim {
		background: linear-gradient(180deg,
			rgba(10,27,52,.10) 0%,
			rgba(10,27,52,.55) 45%,
			rgba(10,27,52,.95) 100%);
	}
	.kn-featured__content {
		position: absolute; inset: auto 0 0 0; top: auto;
		transform: none; max-width: none; padding: 0 18px 20px;
	}
	.kn-featured__eyebrow { margin-bottom: 10px; }
	.kn-featured h2 { font-size: 24px; }
	.kn-featured p {
		font-size: 14px; max-width: none; margin-top: 8px;
		display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	}
	.kn-featured__actions { gap: 10px; margin-top: 16px; }

	/* ---------- Mockup hero: kekang dalam viewport ----------
	   .kn-mockup__float diletak `right:-24px` (menonjol keluar by design pada
	   desktop). Pada mobile ia punca overflow — tarik masuk. */
	.kn-hero__col--media { min-width: 0; }
	/* min-width tetap (280–360px) pada kolum flex menyebabkan overflow pada
	   telefon kecil. Biarkan ia mengecut sepenuhnya. */
	.kn-split__col,
	.kn-split__col--media { flex: 1 1 100%; min-width: 0; }
	.kn-portalmock { padding: 14px; }
	.kn-mockup { width: 100%; max-width: 440px; }
	.kn-mockup__float { right: 4px; bottom: 14px; }

	/* ---------- Grid video: 2 kolum (sepadan `calc(50% - 12px)` prototype) ---------- */
	.kn-grid-free,
	.kn-grid-premium,
	.kn-grid-koleksi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.kn-card--portal-premium .kn-card__title,
	.kn-card--koleksi .kn-card__title { font-size: 12.5px; }
	.kn-card__status { font-size: 10.5px; }
	.kn-card__foot { left: 9px; right: 9px; bottom: 8px; }
	.kn-card__badge-tl { top: 8px; left: 8px; }
	.kn-card__badge-tr { top: 8px; right: 8px; }

	/* ---------- Banner upsell ---------- */
	.kn-upsell { gap: 18px; }
	.kn-upsell__price-col { width: 100%; text-align: left; }
	.kn-upsell__price-col .kn-btn { width: 100%; }

	/* ---------- Sambung menonton ---------- */
	.kn-continue { gap: 14px; }
	.kn-continue__thumb { width: 132px; }
	.kn-continue .kn-btn { width: 100%; }

	/* ---------- Halaman tonton ---------- */
	.kn-watch__layout { gap: 18px; }
	.kn-watch__main,
	.kn-watch__side { flex: 1 1 100%; min-width: 0; }

	/* ---------- Filter chip: baris boleh skrol, tidak membungkus ---------- */
	.kn-chips {
		display: flex; flex-wrap: nowrap; overflow-x: auto;
		gap: 8px; margin-inline: -16px; padding: 2px 16px 8px;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.kn-chips::-webkit-scrollbar { display: none; }
	.kn-chips > * { flex: none; }

	/* ---------- Tab polisi: sama, boleh skrol ---------- */
	.kn-polisi__tabs {
		flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
		margin-inline: -16px; padding: 2px 16px 6px;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.kn-polisi__tabs::-webkit-scrollbar { display: none; }
	.kn-polisi__tab { flex: none; }

	/* ---------- Checkout ---------- */
	.kn-steps { font-size: 12px; gap: 6px; }
	.kn-summary { position: static; }

	/* ---------- Upgrade & Sales ---------- */
	.kn-upgrade__preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.kn-plan { padding: 24px 20px; }

	/* ---------- Profil ---------- */
	.kn-profil__head { text-align: left; }

	/* ---------- Footer ---------- */
	.kn-footer { padding-left: 16px; padding-right: 16px; }

	/* ---------- Halaman generik & 404 ---------- */
	.kn-generic__item { padding: 20px 18px; }
}


/* ==========================================================================
   ≤ 480px — TELEFON (360–430px)
   ========================================================================== */
@media (max-width: 479.98px) {

	/* ---------- Tukar ke label pendek ---------- */
	.kn-txt-wide { display: none; }
	.kn-txt-narrow { display: inline; }

	/* ---------- Header: site — paling ketat ---------- */
	.kn-header__inner { padding: 9px 14px; gap: 8px; }
	.kn-header__actions { gap: 10px; }
	.kn-brand__logo { width: 32px; height: 32px; }
	.kn-brand__name--dark { font-size: 15.5px; }
	.kn-header__link { font-size: 13.5px; }
	.kn-header .kn-btn--sm { font-size: 13px; padding: 9px 13px; border-radius: 11px; }

	/* ---------- Header: portal — logo sahaja, badge pelan dibuang
	   (pelan sudah dipaparkan pada H1 "Selamat Datang") ---------- */
	.kn-header--portal .kn-brand__name { display: none; }
	.kn-header__portal-actions .kn-badge--sm { display: none; }
	.kn-avatar { width: 34px; height: 34px; font-size: 14px; }

	/* ---------- Hero featured ---------- */
	.kn-featured__media { aspect-ratio: 4 / 5; }
	.kn-featured__content { padding: 0 15px 18px; }
	.kn-featured h2 { font-size: 22px; }
	.kn-featured__actions { flex-direction: column; align-items: stretch; }
	.kn-featured__actions .kn-btn { width: 100%; }

	/* ---------- Sambung menonton: susun menegak ---------- */
	.kn-continue { flex-direction: column; align-items: stretch; }
	.kn-continue__thumb { width: 100%; }

	/* ---------- Butang CTA badan: penuh lebar ---------- */
	.kn-hero__cta-row .kn-btn,
	.kn-upgrade .kn-btn--cta,
	.kn-pricing-card .kn-btn { width: 100%; }

	/* ---------- Upgrade preview: kekal 2 kolum tetapi rapat ---------- */
	.kn-upgrade__preview { gap: 10px; }

	/* ---------- Checkout: langkah jadi lebih padat ---------- */
	.kn-steps { font-size: 11px; gap: 4px; flex-wrap: wrap; }

	/* ---------- Modal locked ---------- */
	.kn-modal__panel { border-radius: 18px; }

	/* ---------- 404 ---------- */
	.kn-empty__actions { flex-direction: column; align-items: stretch; }
}


/* ==========================================================================
   ≤ 360px — telefon kecil. Elak overflow mutlak.
   ========================================================================== */
@media (max-width: 359.98px) {
	/* Badge terapung jadi statik — tiada ruang untuk menonjol. */
	.kn-mockup__float { position: static; right: auto; bottom: auto; margin-top: 12px; width: 100%; }
	.kn-mockup__frame { padding: 10px; }

	.kn-header__link { display: none; }          /* Login tersedia di halaman Daftar */
	.kn-brand__name--dark { display: none; }
	.kn-header .kn-btn--sm { font-size: 12.5px; padding: 9px 11px; }
}