/* ==========================================================================
   portal.css — layout halaman ahli: Portal, Koleksi, Tonton (single),
   Profil, Bantuan, Polisi. Latar guna helper .kn-bg-* dari tokens.css.
   Semua warna guna var(--kn-*). Tiada hex terus.
   ========================================================================== */

/* ---------- Rangka umum portal ---------- */
.kn-portal { min-height: calc(100vh - 64px); padding-bottom: 80px; }
.kn-portal-section { max-width: var(--kn-max-portal); margin: 0 auto; padding: clamp(30px, 4vw, 44px) 20px 0; }
.kn-portal-section--first { padding-top: clamp(24px, 3.5vw, 40px); }
.kn-portal-h1 { color: var(--kn-on-dark); font-size: var(--kn-fs-h1-portal); font-weight: 800; }
.kn-portal-h3 { color: var(--kn-on-dark); font-size: 20px; font-weight: 800; margin-bottom: 16px; }

.kn-portal-welcome { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

/* Banner progress premium */
.kn-portal-progress { background: var(--kn-gold-a12); border: 1px solid var(--kn-gold-a30); border-radius: var(--kn-r-card-md); padding: 14px 18px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kn-portal-progress__label { color: var(--kn-gold-text); font-weight: 700; font-size: 14.5px; }
.kn-portal-progress__track { flex: 1; min-width: 140px; height: 8px; background: var(--kn-surf-dark-12); border-radius: 8px; overflow: hidden; }
.kn-portal-progress__fill { height: 100%; background: var(--kn-grad-gold-bar); }

/* Baris tajuk + "Lihat Semua" */
.kn-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kn-row-head h3 { color: var(--kn-on-dark); font-size: 20px; font-weight: 800; }
.kn-link-more { color: var(--kn-link-dark); font-weight: 700; font-size: 14px; }
.kn-link-more:hover { color: var(--kn-on-dark); }

/* Grid video */
.kn-grid-free    { display: grid; grid-template-columns: var(--kn-grid-free);    gap: var(--kn-gap-grid); }
.kn-grid-premium { display: grid; grid-template-columns: var(--kn-grid-premium); gap: var(--kn-gap-grid-sm); }
.kn-grid-koleksi { display: grid; grid-template-columns: var(--kn-grid-koleksi); gap: var(--kn-gap-grid); }

/* ---------- FEATURED (hero portal 21/9) ---------- */
.kn-featured { position: relative; border-radius: var(--kn-r-panel-lg); overflow: hidden; box-shadow: var(--kn-sh-dark); }
.kn-featured__media { position: relative; aspect-ratio: var(--kn-ar-featured); min-height: 260px; }
.kn-featured__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.kn-featured__scrim { position: absolute; inset: 0; background: var(--kn-scrim-featured); }
.kn-featured__content { position: absolute; left: clamp(20px, 4vw, 44px); top: 50%; transform: translateY(-50%); max-width: 480px; }
.kn-featured__eyebrow { display: inline-block; white-space: nowrap; margin-bottom: 14px; letter-spacing: var(--kn-ls-badge); }
.kn-featured h2 { color: var(--kn-on-dark); font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; }
.kn-featured p { color: var(--kn-on-dark-3); font-size: 15px; margin-top: 10px; line-height: var(--kn-lh-card); max-width: 420px; }
.kn-featured__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.kn-featured__cta-primary { background: var(--kn-on-dark); color: var(--kn-ink); padding: 14px 26px; }
.kn-featured__cta-primary:hover { background: var(--kn-on-dark); color: var(--kn-ink); }
.kn-featured__playtri { width: 0; height: 0; border-left: 13px solid var(--kn-ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* ---------- Banner upsell (Portal free & Watch) ---------- */
.kn-upsell { background: var(--kn-grad-upgrade-cta); border: 1px solid var(--kn-gold-a25); border-radius: var(--kn-r-panel-lg); padding: var(--kn-pad-card); display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.kn-upsell__col { flex: 1; min-width: 240px; }
.kn-upsell h3 { color: var(--kn-on-dark); font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.kn-upsell p { color: var(--kn-on-dark-5); font-size: 15.5px; margin-top: 10px; line-height: var(--kn-lh-card); max-width: 440px; }
.kn-upsell__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; color: var(--kn-on-dark-3); font-size: 13.5px; font-weight: 700; }
.kn-upsell__price-col { flex: none; text-align: center; }
.kn-upsell__price { color: var(--kn-gold-text); font-family: var(--kn-font-head); font-weight: 800; font-size: 34px; }
.kn-upsell__price-col .kn-btn { margin-top: 12px; }

/* ==========================================================================
   KOLEKSI
   ========================================================================== */
.kn-koleksi { min-height: calc(100vh - 64px); padding: clamp(24px, 3.5vw, 40px) 20px 80px; }
.kn-koleksi__inner { max-width: var(--kn-max-portal); margin: 0 auto; }
.kn-koleksi__title { color: var(--kn-on-dark); font-size: clamp(24px, 3.3vw, 34px); font-weight: 800; }
.kn-koleksi__sub { color: var(--kn-on-dark-5); font-size: 15px; margin-top: 8px; }
.kn-koleksi__toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }
.kn-koleksi__sort { display: flex; align-items: center; gap: 8px; background: var(--kn-surf-dark-07); border: 1px solid var(--kn-bd-dark-14); border-radius: var(--kn-r-input); padding: 0 14px; color: var(--kn-on-dark-3); font-weight: 700; font-size: 14px; }
.kn-koleksi__sort-label { color: var(--kn-on-dark-6); }
.kn-koleksi__chips { margin-bottom: 26px; }

/* ==========================================================================
   TONTON (single kn_video)
   ========================================================================== */
.kn-watch { min-height: calc(100vh - 64px); padding: clamp(16px, 2.5vw, 28px) 20px 70px; }
.kn-watch__inner { max-width: var(--kn-max-portal); margin: 0 auto; }
.kn-watch__back { margin-bottom: 16px; }
.kn-watch__layout { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.kn-watch__main { flex: 1 1 560px; min-width: 300px; }
.kn-watch__side { flex: 1 1 300px; min-width: 280px; }
.kn-watch__side h3 { color: var(--kn-on-dark); font-size: 17px; font-weight: 800; margin-bottom: 14px; }
/* Up-next: pastikan tajuk/sub bertindan bila dirender sebagai <span> */
.kn-upnext__meta { display: flex; flex-direction: column; justify-content: center; }
.kn-upnext__title, .kn-upnext__sub { display: block; }

.kn-player { position: relative; aspect-ratio: var(--kn-ar-video); border-radius: var(--kn-r-card-md); overflow: hidden; background: var(--kn-navy-900); box-shadow: var(--kn-sh-dark-lg); }
.kn-player__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--kn-watch-bg); }

.kn-watch__meta { margin-top: 18px; }
.kn-watch__meta h1 { color: var(--kn-on-dark); font-size: var(--kn-fs-h1-watch); font-weight: 800; }
.kn-watch__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; color: var(--kn-on-dark-6); font-size: 13.5px; font-weight: 700; align-items: center; }
.kn-watch__desc { color: var(--kn-on-dark-5); font-size: 15px; margin-top: 14px; line-height: var(--kn-lh-body); max-width: 640px; }

.kn-upsell--watch { display: block; text-align: center; border-radius: var(--kn-r-card-md); padding: 22px; margin-top: 22px; }
.kn-upsell--watch h3 { font-size: 20px; }
.kn-upsell--watch p { color: var(--kn-on-dark-5); font-size: 14.5px; margin-top: 8px; max-width: none; }
.kn-upsell--watch .kn-btn { margin-top: 16px; }

/* ==========================================================================
   PROFIL
   ========================================================================== */
.kn-profil { background: var(--kn-page-bg); min-height: calc(100vh - 64px); padding: clamp(24px, 4vw, 44px) 20px 70px; }
.kn-profil__inner { max-width: var(--kn-max-profil); margin: 0 auto; }
.kn-profil__head { background: var(--kn-on-dark); border-radius: var(--kn-r-panel-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--kn-sh-card); display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.kn-profil__avatar { width: 72px; height: 72px; border-radius: var(--kn-r-full); background: var(--kn-grad-avatar); display: grid; place-items: center; color: var(--kn-on-dark); font-family: var(--kn-font-head); font-weight: 800; font-size: 28px; flex: none; }
.kn-profil__id { flex: 1; min-width: 180px; }
.kn-profil__id-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kn-profil__id h1 { font-size: 23px; font-weight: 800; }
.kn-profil__email { color: var(--kn-muted); font-size: 14px; margin-top: 5px; }
.kn-profil__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }

.kn-panel-card { background: var(--kn-on-dark); border-radius: var(--kn-r-panel); padding: 26px; box-shadow: var(--kn-sh-card-3); }
.kn-panel-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.kn-info-list { display: flex; flex-direction: column; gap: 13px; }
.kn-info-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding-bottom: 11px; border-bottom: 1px solid var(--kn-border-5); }
.kn-info-row__k { color: var(--kn-muted); }
.kn-info-row__v { color: var(--kn-ink-2); font-weight: 700; text-align: right; }
.kn-profil__links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.kn-profil__link { color: var(--kn-ink-3); font-weight: 700; font-size: 14px; }
.kn-profil__link--danger { color: var(--kn-red-ink); }
.kn-order-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--kn-border-5); }
.kn-order-row__thumb { flex: none; width: 48px; aspect-ratio: var(--kn-ar-card-alt); border-radius: var(--kn-r-sm); background: var(--kn-thumb-1); }
.kn-order-row__body { flex: 1; }
.kn-order-row__name { font-family: var(--kn-font-head); font-weight: 700; font-size: 14px; color: var(--kn-ink); }
.kn-order-row__meta { color: var(--kn-muted); font-size: 12px; }
.kn-order-empty { color: var(--kn-body); font-size: 14px; padding: 8px 0 4px; }

/* ==========================================================================
   BANTUAN
   ========================================================================== */
.kn-bantuan { background: var(--kn-page-bg); min-height: calc(100vh - 64px); padding: clamp(28px, 4vw, 52px) 20px 70px; }
.kn-bantuan__inner { max-width: var(--kn-max-bantuan); margin: 0 auto; }
.kn-bantuan__head { text-align: center; margin-bottom: 28px; }
.kn-bantuan__head h1 { font-size: var(--kn-fs-h1-page); font-weight: 800; }
.kn-bantuan__head p { color: var(--kn-body); font-size: 15.5px; margin-top: 10px; }
.kn-search--light { background: var(--kn-on-dark); border: 1.5px solid var(--kn-border); border-radius: var(--kn-r-card-md); padding: 14px 18px; box-shadow: var(--kn-sh-card-3); }
.kn-search--light input { color: var(--kn-ink); }
.kn-search--light input::placeholder { color: var(--kn-muted); }
.kn-search__ico--light { border-color: var(--kn-muted); }
.kn-search__ico--light::after { background: var(--kn-muted); }
.kn-bantuan__faq { margin-top: 22px; }
.kn-bantuan__contact { background: var(--kn-grad-navy-120); border-radius: var(--kn-r-panel); padding: 28px; margin-top: 24px; text-align: center; }
.kn-bantuan__contact h3 { color: var(--kn-on-dark); font-size: 20px; font-weight: 800; }
.kn-bantuan__contact p { color: var(--kn-on-dark-5); font-size: 14.5px; margin-top: 8px; }
.kn-bantuan__contact-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.kn-bantuan__hours { color: var(--kn-on-dark-7); font-size: 12.5px; margin-top: 14px; }

/* ==========================================================================
   POLISI & TERMA
   ========================================================================== */
.kn-polisi { background: var(--kn-page-bg); min-height: calc(100vh - 64px); padding: clamp(28px, 4vw, 52px) 20px 70px; }
.kn-polisi__inner { max-width: var(--kn-max-prose); margin: 0 auto; }
.kn-polisi__head { text-align: center; margin-bottom: 26px; }
.kn-polisi__head h1 { font-size: var(--kn-fs-h1-page); font-weight: 800; }
.kn-polisi__head p { color: var(--kn-body); font-size: 15.5px; margin-top: 8px; }
.kn-polisi__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.kn-polisi__tab { border: 1.5px solid var(--kn-border-7); background: var(--kn-on-dark); color: var(--kn-ink-3); padding: 10px 20px; border-radius: var(--kn-r-pill-lg); font-family: var(--kn-font-head); font-weight: 700; font-size: 14px; }
.kn-polisi__tab:hover { color: var(--kn-ink-3); border-color: var(--kn-blue-600); }
.kn-polisi__tab.is-active { border-color: var(--kn-navy-600); background: var(--kn-navy-600); color: var(--kn-on-dark); }
.kn-polisi__tab.is-active:hover { color: var(--kn-on-dark); }
.kn-polisi__card { background: var(--kn-on-dark); border-radius: var(--kn-r-panel-lg); padding: var(--kn-pad-card); box-shadow: var(--kn-sh-card-2); border: 1px solid var(--kn-bd-light-04); }
.kn-polisi__card h2 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.kn-polisi__updated { color: var(--kn-muted); font-size: 13px; margin-bottom: 26px; }
.kn-polisi__body { display: flex; flex-direction: column; gap: 22px; }
.kn-polisi__body h3 { font-size: 17px; font-weight: 700; color: var(--kn-ink); margin-bottom: 8px; }
.kn-polisi__body p { color: var(--kn-body); font-size: 15px; line-height: var(--kn-lh-prose); text-wrap: pretty; }
.kn-polisi__body ul { color: var(--kn-body); font-size: 15px; line-height: var(--kn-lh-prose); margin: 8px 0 0; padding-left: 20px; }
.kn-polisi__body li { margin-bottom: 6px; }
.kn-polisi__foot { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--kn-border-3); color: var(--kn-muted); font-size: 13.5px; line-height: var(--kn-lh-body); }