/* ==========================================================================
   tokens.css — Portal Video Kisah Nabi (MommyHana)
   --------------------------------------------------------------------------
   Design tokens diekstrak 1:1 dari prototype "Funnel Kisah Nabi.dc.html".
   Kesemua 93 nilai hex unik dalam prototype diwakili di bawah.

   PERATURAN:
   - Jangan bulatkan nilai. Jangan ganti dengan warna "hampir sama".
   - Jangan tambah warna baharu tanpa kelulusan.
   - Fail ini tiada selector komponen. Ia hanya token + keyframe + helper asas.
     Komponen tinggal dalam components.css / portal.css / marketing.css.

   Letak di: wp-content/themes/mommyhana-kisah-nabi/assets/css/tokens.css
   Enqueue PALING AWAL (sebelum semua CSS lain).

   Versi: 1.0 · 10 Ogos 2026
   ========================================================================== */

:root {

  /* ======================================================================
     1. BRAND — NAVY
     ====================================================================== */
  --kn-navy-900: #0A1B34;   /* header portal & minimal, hero gelap, footer toast */
  --kn-navy-800: #0B1F3D;   /* footer site */
  --kn-navy-700: #0F2647;   /* panel dalam portal, modal locked */
  --kn-navy-600: #0F2E57;   /* teks heading utama, gradient mula */
  --kn-navy-500: #143A6B;   /* hover panel, gradient CTA upgrade */
  --kn-navy-400: #1E4E8C;   /* gradient hujung */
  --kn-navy-350: #16406F;   /* radial gradient portal & koleksi */
  --kn-watch-bg: #07152B;   /* latar halaman Tonton (paling gelap) */

  /* ======================================================================
     2. BRAND — BIRU
     ====================================================================== */
  --kn-blue-400: #5BB8E8;   /* biru langit */
  --kn-blue-600: #2C6FB0;   /* biru utama, border input focus */
  --kn-blue-700: #3E6FB0;   /* gradient thumbnail 6 mula */
  --kn-blue-900: #24406F;   /* gradient thumbnail 6 hujung */

  /* ======================================================================
     3. LATAR TERANG
     ====================================================================== */
  --kn-cream:     #FFF9EF;  /* krim — hujung gradient hero, header site */
  --kn-sky-bg:    #E9F6FD;  /* biru sangat muda — mula gradient hero */
  --kn-sky-bg-2:  #EAF6FD;  /* varian, bulatan FAQ */
  --kn-sky-bg-3:  #D3ECF9;  /* hujung gradient seksyen CTA akhir landing */
  --kn-page-bg:   #EEF3F8;  /* latar body & halaman checkout/profil/bantuan */

  /* ======================================================================
     4. EMAS — PREMIUM
     ====================================================================== */
  --kn-gold:       #F0B542;  /* emas asas — bar progress, ikon kunci, chip aktif */
  --kn-gold-from:  #F5C869;  /* gradient(180deg) mula */
  --kn-gold-to:    #E0A32E;  /* gradient(180deg) hujung */
  --kn-gold2-from: #F2BC52;  /* gradient(150deg) diamond ikon — varian ke-2 */
  --kn-gold2-to:   #DA9426;
  --kn-gold-text:  #F3C971;  /* teks emas atas navy (eyebrow, harga) */
  --kn-gold-ink:   #4A3400;  /* teks atas butang/badge emas */
  --kn-gold-ink-2: #3A2A00;  /* teks atas chip aktif */
  --kn-gold-amber: #B9791A;  /* teks atas badge krim #FFF0D6 */

  /* ======================================================================
     5. CTA — OREN
     ====================================================================== */
  --kn-cta-from:  #FF9A52;
  --kn-cta-to:    #F26B22;
  --kn-cta:       #F26B22;   /* pautan, accent, radio dipilih */
  --kn-cta-hover: #D8551A;   /* a:hover */

  /* ======================================================================
     6. HIJAU — FREE / BERJAYA
     ====================================================================== */
  --kn-green:      #2F9E5B;  /* hijau asas */
  --kn-green-400:  #4CC479;  /* bulatan berjaya mula, toast */
  --kn-green-bg:   #DCF3E5;  /* bg badge FREE / status SELESAI */
  --kn-green-ink:  #1E6B3E;  /* teks atas #DCF3E5 */
  --kn-check-bg:   #D8F0DC;  /* bulatan tanda semak landing */
  --kn-check:      #37955A;  /* tanda semak */

  /* ======================================================================
     7. RALAT — MERAH
     ====================================================================== */
  --kn-red-border:   #E4655A;  /* border input ralat */
  --kn-red-border-2: #F3C9C2;  /* border alert ralat */
  --kn-red-ink:      #C0483B;  /* teks mesej ralat, Log Keluar */
  --kn-red-text:     #B4574A;  /* teks alert & tajuk "Menerima Link Biasa" */
  --kn-red-icon:     #D8674F;  /* ikon "!" gagal, tint player state */
  --kn-red-bg:       #FCE7E4;  /* bg badge BERKUNCI, butang lihat gagal */
  --kn-red-bg-soft:  #FEF6F5;  /* bg input ralat, bg alert */

  /* ======================================================================
     8. TEKS ATAS LATAR TERANG
     ====================================================================== */
  --kn-ink:       #0F2E57;  /* heading */
  --kn-ink-2:     #2C4266;  /* label borang, teks tebal */
  --kn-ink-3:     #3A5378;  /* pautan nav, pautan profil */
  --kn-ink-4:     #4A607F;  /* teks hero, tajuk plan Free */
  --kn-ink-5:     #3F567A;  /* teks seksyen CTA akhir landing */
  --kn-body:      #5A6E8C;  /* teks badan utama */
  --kn-quote:     #6B7F9C;  /* teks testimoni italic */
  --kn-muted:     #8195AE;  /* caption, microcopy */
  --kn-disabled:  #B0BFD1;  /* butang disabled, pemisah ATAU */

  /* ======================================================================
     9. TEKS ATAS LATAR GELAP
     ====================================================================== */
  --kn-on-dark:    #FFFFFF;
  --kn-on-dark-1:  #EAF3FC;  /* teks senarai atas navy */
  --kn-on-dark-2:  #DCE9F7;  /* teks bar prototype (tidak dipakai production) */
  --kn-on-dark-3:  #CFE0F2;  /* teks chip tidak aktif, badan atas navy */
  --kn-on-dark-4:  #A9C4E4;  /* nav portal tidak aktif */
  --kn-on-dark-5:  #9DBBDD;  /* teks badan atas navy */
  --kn-on-dark-6:  #8DA6C4;  /* caption atas navy, ikon nav bawah */
  --kn-on-dark-7:  #7E96B8;  /* footer teks halus, waktu operasi */
  --kn-on-dark-8:  #5E7599;  /* footer copyright */
  --kn-footer-text:#9DB3D0;  /* teks & pautan footer utama */
  --kn-status-text:#B7CBE2;  /* teks status bawah video card */
  --kn-link-dark:  #7FB2E4;  /* pautan "Lihat Semua" atas navy */

  /* ======================================================================
     10. BORDER & GARISAN
     ====================================================================== */
  --kn-border:    #DCE5F0;  /* border input normal, butang secondary */
  --kn-border-2:  #E4EBF3;  /* pemisah halus */
  --kn-border-3:  #EEF3F9;  /* pemisah dalam card */
  --kn-border-4:  #E9EFF6;  /* border card design system */
  --kn-border-5:  #F1F5FA;  /* pemisah paling halus */
  --kn-border-6:  #E3EAF3;  /* border card Free pada Upgrade */
  --kn-border-7:  #D3E0EE;  /* border tab polisi tidak aktif */

  /* ======================================================================
     11. PERMUKAAN & KOMPONEN SEKUNDER
     ====================================================================== */
  --kn-badge-cream: #FFF0D6;  /* bg badge eyebrow terang */
  --kn-surface-alt: #F5F8FC;  /* kotak e-mel tersamar, "Langkah Seterusnya" */
  --kn-ph-from:     #EDF4FB;  /* gradient(150deg) kotak ikon placeholder */
  --kn-ph-to:       #D6E7F6;
  --kn-skeleton:    #E1E9F2;  /* skeleton mid-stop, trek spinner */
  --kn-input-dot:   #C6D2E0;  /* radio tidak dipilih */
  --kn-pay-selected:#FFF6F0;  /* bg kaedah bayaran dipilih */
  --kn-whatsapp:    #25D366;  /* butang WhatsApp Bantuan */

  /* Perbandingan link-vs-portal (Sales) */
  --kn-cons-border: #EFE1DE;
  --kn-cons-chip:   #F6E4E0;
  --kn-cons-x:      #C0685A;
  --kn-cons-text:   #7A5B57;
  --kn-pros-from:   #EFFBF2;
  --kn-pros-border: #CFEFD8;
  --kn-pros-title:  #2F8F55;

  /* Card bonus */
  --kn-bonus-from:   #FFF7E6;
  --kn-bonus-border: #F3E4C0;

  /* Avatar / hero Sales */
  --kn-avatar-from:   #6E7BC8;
  --kn-avatar-to:     #3E458C;
  --kn-sales-hero-1:  #154079;
  --kn-sales-hero-2:  #0B213F;

  /* ======================================================================
     12. GRADIENT
     ====================================================================== */
  --kn-grad-cta:        linear-gradient(180deg, #FF9A52, #F26B22);
  --kn-grad-gold:       linear-gradient(180deg, #F5C869, #E0A32E);
  --kn-grad-gold-bar:   linear-gradient(90deg,  #F5C869, #E0A32E);
  --kn-grad-gold-icon:  linear-gradient(150deg, #F2BC52, #DA9426);
  --kn-grad-blue:       linear-gradient(150deg, #5BB8E8, #2C6FB0);
  --kn-grad-blue-num:   linear-gradient(150deg, #5BB8E8, #2C6FB0);
  --kn-grad-green:      linear-gradient(150deg, #4CC479, #2F9E5B);
  --kn-grad-avatar:     linear-gradient(150deg, #6E7BC8, #3E458C);
  --kn-grad-placeholder:linear-gradient(150deg, #EDF4FB, #D6E7F6);

  /* Latar seksyen */
  --kn-grad-hero:       linear-gradient(180deg, #E9F6FD 0%, #FFF9EF 100%);
  --kn-grad-hero-rev:   linear-gradient(180deg, #EAF6FD, #FFF9EF);
  --kn-grad-cream-sky:  linear-gradient(180deg, #FFF9EF, #EAF6FD);
  --kn-grad-final-cta:  linear-gradient(180deg, #EAF6FD, #D3ECF9);
  --kn-grad-auth:       linear-gradient(180deg, #E9F6FD, #FFF9EF);
  --kn-grad-navy-160:   linear-gradient(160deg, #0F2E57, #1E4E8C);
  --kn-grad-navy-165:   linear-gradient(165deg, #0F2E57, #1E4E8C);
  --kn-grad-navy-120:   linear-gradient(120deg, #0F2E57, #1E4E8C);
  --kn-grad-upgrade-cta:linear-gradient(120deg, #143A6B, #0F2647);
  --kn-grad-portal-bg:  radial-gradient(130% 80% at 50% -10%, #16406F 0%, #0A1B34 55%);
  --kn-grad-koleksi-bg: radial-gradient(130% 70% at 50% -10%, #16406F 0%, #0A1B34 55%);
  --kn-grad-sales-hero: radial-gradient(120% 90% at 50% 0%, #154079 0%, #0B213F 65%);
  --kn-grad-pros-card:  linear-gradient(160deg, #EFFBF2, #FFFFFF);
  --kn-grad-bonus-card: linear-gradient(160deg, #FFF7E6, #FFFFFF);

  /* Skeleton shimmer */
  --kn-grad-skeleton:   linear-gradient(90deg, #EEF3F9 25%, #E1E9F2 50%, #EEF3F9 75%);

  /* ----------------------------------------------------------------------
     Gradient fallback thumbnail — kitaran 6, ikut (index % 6)
     Guna sebagai latar card SEBELUM poster dimuatkan / jika poster tiada.
     ---------------------------------------------------------------------- */
  --kn-thumb-1: linear-gradient(135deg, #5BB8E8, #2C6FB0);
  --kn-thumb-2: linear-gradient(135deg, #F0B542, #E0A32E);
  --kn-thumb-3: linear-gradient(135deg, #7FC8A9, #3E9C88);
  --kn-thumb-4: linear-gradient(135deg, #6E7BC8, #3E458C);
  --kn-thumb-5: linear-gradient(135deg, #D9926E, #B25F3E);
  --kn-thumb-6: linear-gradient(135deg, #3E6FB0, #24406F);

  /* ======================================================================
     13. OVERLAY & SCRIM
     ====================================================================== */
  /* Scrim bawah thumbnail — nilai BERBEZA ikut konteks. Jangan seragamkan. */
  --kn-scrim-card:      linear-gradient(180deg, rgba(10,27,52,0) 38%, rgba(10,27,52,.9));
  --kn-scrim-card-40:   linear-gradient(180deg, rgba(10,27,52,0) 40%, rgba(10,27,52,.9));
  --kn-scrim-upgrade:   linear-gradient(180deg, rgba(10,27,52,0) 45%, rgba(10,27,52,.75));
  --kn-scrim-landing:   linear-gradient(180deg, transparent 45%, rgba(10,27,52,.55));
  --kn-scrim-mock:      linear-gradient(180deg, transparent 50%, rgba(10,27,52,.6));
  --kn-scrim-upnext:    linear-gradient(180deg, transparent 45%, rgba(10,27,52,.7));
  --kn-scrim-hero-mock: linear-gradient(180deg, transparent 40%, rgba(10,27,52,.8));
  --kn-scrim-sales:     linear-gradient(180deg, rgba(11,33,63,0) 38%, rgba(11,33,63,.88));
  --kn-scrim-featured:  linear-gradient(90deg, rgba(10,27,52,.85) 0%, rgba(10,27,52,.3) 60%, transparent 100%);

  /* Overlay video berkunci — alpha berbeza ikut konteks */
  --kn-lock-portal:  rgba(8,20,40,.62);   /* baris Premium Portal */
  --kn-lock-koleksi: rgba(8,20,40,.6);    /* grid Koleksi */
  --kn-lock-upnext:  rgba(8,20,40,.55);   /* sidebar Video Lain */
  --kn-lock-modal:   rgba(8,20,40,.5);    /* modal locked */
  --kn-lock-mock:    rgba(10,27,52,.5);   /* mock grid landing/sales */

  /* Kaca (glassmorphism) — butang play & kawalan */
  --kn-glass-bg:     rgba(255,255,255,.15);
  --kn-glass-bg-2:   rgba(255,255,255,.16);
  --kn-glass-border: rgba(255,255,255,.72);
  --kn-glass-border-2: rgba(255,255,255,.75);
  --kn-glass-blur:   blur(8px);

  /* Permukaan atas navy */
  --kn-surf-dark-04: rgba(255,255,255,.04);
  --kn-surf-dark-05: rgba(255,255,255,.05);
  --kn-surf-dark-07: rgba(255,255,255,.07);  /* chip tidak aktif, input carian */
  --kn-surf-dark-08: rgba(255,255,255,.08);
  --kn-surf-dark-10: rgba(255,255,255,.1);
  --kn-surf-dark-12: rgba(255,255,255,.12);
  --kn-surf-dark-14: rgba(255,255,255,.14);
  --kn-bd-dark-07:   rgba(255,255,255,.07);
  --kn-bd-dark-08:   rgba(255,255,255,.08);
  --kn-bd-dark-10:   rgba(255,255,255,.1);
  --kn-bd-dark-14:   rgba(255,255,255,.14);
  --kn-bd-dark-15:   rgba(255,255,255,.15);
  --kn-bd-dark-20:   rgba(255,255,255,.2);   /* border chip tidak aktif */
  --kn-bd-dark-25:   rgba(255,255,255,.25);  /* border butang ghost, trek bar 5px */
  --kn-bd-dark-30:   rgba(255,255,255,.3);

  /* Aksen emas lut sinar */
  --kn-gold-a12: rgba(240,181,66,.12);
  --kn-gold-a16: rgba(240,181,66,.16);  /* bg badge eyebrow atas navy */
  --kn-gold-a20: rgba(240,181,66,.2);
  --kn-gold-a25: rgba(240,181,66,.25);  /* border card CTA upgrade */
  --kn-gold-a30: rgba(240,181,66,.3);
  --kn-gold-inset: rgba(224,163,46,.3); /* inset ring kotak ikon */

  /* Backdrop modal */
  --kn-backdrop: rgba(7,21,43,.72);
  --kn-backdrop-blur: blur(6px);

  /* Header blur */
  --kn-header-site-bg:   rgba(255,249,239,.9);
  --kn-header-site-blur: blur(12px);
  --kn-header-site-bd:   rgba(16,48,92,.07);
  --kn-header-portal-bg: rgba(10,27,52,.92);
  --kn-header-portal-blur: blur(14px);
  --kn-bottomnav-bg:     rgba(10,27,52,.96);
  --kn-bottomnav-blur:   blur(12px);

  /* Border halus atas latar terang */
  --kn-bd-light-04: rgba(16,48,92,.04);
  --kn-bd-light-05: rgba(16,48,92,.05);
  --kn-bd-light-07: rgba(16,48,92,.07);
  --kn-bd-light-08: rgba(16,48,92,.08);
  --kn-scrollbar:   rgba(16,48,92,.2);

  /* ======================================================================
     14. TIPOGRAFI
     ====================================================================== */
  --kn-font-head: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --kn-font-body: 'Nunito', system-ui, -apple-system, sans-serif;

  /* Skala fluid — nilai tepat dari prototype */
  --kn-fs-h1-hero:    clamp(30px, 4.5vw, 50px);  /* landing */
  --kn-fs-h1-sales:   clamp(28px, 4.2vw, 46px);
  --kn-fs-h1-upgrade: clamp(27px, 3.8vw, 42px);
  --kn-fs-h1-page:    clamp(26px, 3.6vw, 38px);  /* bantuan, polisi, states */
  --kn-fs-h1-portal:  clamp(22px, 3vw,   30px);
  --kn-fs-h1-watch:   clamp(22px, 3vw,   28px);
  --kn-fs-h2:         clamp(25px, 3.4vw, 38px);  /* section heading utama */
  --kn-fs-h2-cta:     clamp(27px, 4vw,   44px);  /* seksyen CTA akhir */
  --kn-fs-h2-alt:     clamp(24px, 3.3vw, 36px);
  --kn-fs-h2-sm:      clamp(24px, 3.2vw, 34px);
  --kn-fs-h3-card-xs: 13.5px;  /* tajuk card premium Portal */
  --kn-fs-h3-card-s:  14px;    /* tajuk card Koleksi */
  --kn-fs-h3-card:    15px;    /* tajuk card portal */
  --kn-fs-h3-panel:   17px;
  --kn-fs-h3:         18px;
  --kn-fs-h3-lg:      21px;    /* tajuk card landing */
  --kn-fs-price:      clamp(38px, 6vw, 52px);

  --kn-fs-lead:       clamp(16px, 1.8vw, 19px);
  --kn-fs-body-lg:    16.5px;
  --kn-fs-body:       15px;
  --kn-fs-body-sm:    14.5px;
  --kn-fs-caption:    13px;
  --kn-fs-caption-sm: 12.5px;
  --kn-fs-micro:      11px;
  --kn-fs-input:      16px;    /* WAJIB 16px — elak zoom auto iOS */

  --kn-lh-head:  1.14;
  --kn-lh-body:  1.6;
  --kn-lh-tight: 1.5;
  --kn-lh-card:  1.55;
  --kn-lh-prose: 1.65;
  --kn-ls-head:  -.022em;
  --kn-ls-badge: .04em;   /* HANYA pada badge eyebrow & PERCUMA landing */
  --kn-ls-eyebrow: .07em;
  --kn-ls-eyebrow-2: .08em;

  /* ======================================================================
     15. RADIUS
     ====================================================================== */
  --kn-r-xs:     8px;    /* ikon kecil, logo sosial */
  --kn-r-sm:     9px;    /* thumbnail mock kecil */
  --kn-r-md:     10px;
  --kn-r-input:  12px;
  --kn-r-btn:    13px;
  --kn-r-btn-lg: 15px;   /* CTA hero */
  --kn-r-card:   15px;
  --kn-r-card-md:16px;   /* player, FAQ, state card */
  --kn-r-card-lg:18px;
  --kn-r-panel:  20px;
  --kn-r-panel-lg:22px;
  --kn-r-modal:  26px;   /* card borang landing, pricing card */
  --kn-r-pill:   20px;   /* badge */
  --kn-r-chip:   22px;   /* filter chip */
  --kn-r-pill-lg:30px;   /* badge eyebrow, tab polisi */
  --kn-r-full:   50%;

  /* ======================================================================
     16. SHADOW
     ====================================================================== */
  --kn-sh-card:     0 12px 32px rgba(16,48,92,.07);
  --kn-sh-card-sm:  0 8px 22px  rgba(16,48,92,.06);
  --kn-sh-card-2:   0 16px 42px rgba(16,48,92,.09);
  --kn-sh-card-3:   0 12px 30px rgba(16,48,92,.07);
  --kn-sh-raise:    0 26px 52px rgba(16,48,92,.15);   /* hover card landing */
  --kn-sh-panel:    0 26px 60px rgba(16,48,92,.16);   /* card auth */
  --kn-sh-panel-lg: 0 30px 68px rgba(0,0,0,.26);      /* card borang atas navy */
  --kn-sh-float:    0 16px 34px rgba(16,48,92,.22);   /* badge terapung hero */
  --kn-sh-mockup:   0 30px 64px rgba(10,27,52,.34);
  --kn-sh-cta:      0 14px 30px rgba(242,107,34,.36);
  --kn-sh-cta-sm:   0 12px 26px rgba(242,107,34,.34);
  --kn-sh-cta-xs:   0 8px 18px  rgba(242,107,34,.3);
  --kn-sh-gold:     0 12px 26px rgba(224,163,46,.36);
  --kn-sh-blue:     0 8px 18px  rgba(44,111,176,.3);
  --kn-sh-green:    0 18px 38px rgba(47,158,91,.35);
  --kn-sh-dark:     0 24px 54px rgba(0,0,0,.4);       /* featured portal */
  --kn-sh-dark-lg:  0 24px 54px rgba(0,0,0,.5);       /* player */
  --kn-sh-card-dark:0 14px 32px rgba(0,0,0,.32);      /* video card portal */
  --kn-sh-card-dark-2: 0 12px 28px rgba(0,0,0,.3);
  --kn-sh-card-dark-hover: 0 24px 46px rgba(0,0,0,.5);
  --kn-sh-modal:    0 40px 90px rgba(0,0,0,.5);
  --kn-sh-focus:    0 0 0 3px rgba(44,111,176,.15);   /* focus ring input */
  --kn-sh-inset-gold: inset 0 0 0 1px rgba(224,163,46,.3);

  /* ======================================================================
     17. LAYOUT
     ====================================================================== */
  --kn-max-marketing: 1180px;
  --kn-max-portal:    1280px;
  --kn-max-content:   1080px;
  --kn-max-sales:     1080px;
  --kn-max-checkout:  960px;
  --kn-max-upgrade:   960px;
  --kn-max-profil:    900px;
  --kn-max-prose:     820px;   /* FAQ, polisi */
  --kn-max-bantuan:   760px;
  --kn-max-cta:       720px;
  --kn-max-berjaya:   560px;
  --kn-max-form:      540px;   /* seksyen daftar landing, pricing */
  --kn-max-daftar:    480px;
  --kn-max-gagal:     480px;
  --kn-max-sahkan:    440px;
  --kn-max-modal:     440px;
  --kn-max-login:     430px;

  --kn-pad-section:   clamp(48px, 7vw, 84px) 20px;
  --kn-pad-section-lg:clamp(52px, 7vw, 90px) 20px;
  --kn-pad-portal:    clamp(24px, 3.5vw, 40px) 20px;
  --kn-pad-card:      clamp(26px, 4vw, 42px);
  --kn-pad-panel:     clamp(22px, 3vw, 34px);
  --kn-gutter:        20px;

  /* Grid — guna auto-fill minmax, BUKAN media query keras */
  --kn-grid-koleksi:  repeat(auto-fill, minmax(200px, 1fr));
  --kn-grid-premium:  repeat(auto-fill, minmax(180px, 1fr));
  --kn-grid-free:     repeat(auto-fill, minmax(230px, 1fr));
  --kn-grid-states:   repeat(auto-fill, minmax(280px, 1fr));
  --kn-grid-benefit:  repeat(auto-fit,  minmax(240px, 1fr));
  --kn-grid-steps:    repeat(auto-fit,  minmax(250px, 1fr));
  --kn-grid-swatch:   repeat(auto-fill, minmax(120px, 1fr));
  --kn-gap-grid:      18px;
  --kn-gap-grid-sm:   16px;

  /* Aspect ratio */
  --kn-ar-featured: 21 / 9;
  --kn-ar-video:    16 / 9;
  --kn-ar-card:     16 / 10;   /* baris Video Percuma Portal, katalog Sales */
  --kn-ar-card-alt: 16 / 11;   /* grid Koleksi, baris Premium Portal */

  /* Transition */
  --kn-t-fast:  .2s;
  --kn-t-base:  .3s;
  --kn-lift:    translateY(-5px);
  --kn-lift-lg: translateY(-6px);

  /* Breakpoint (rujukan JS — CSS guna minmax) */
  --kn-bp-mobile: 820px;

  /* Z-index */
  --kn-z-header: 80;
  --kn-z-nav:    90;
  --kn-z-modal:  150;
}


/* ==========================================================================
   KEYFRAMES — 7 animasi dari prototype. Kekalkan semua.
   ========================================================================== */

@keyframes kn-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes kn-pulsePlay {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(255,255,255,.25); }
  70%      { transform: scale(1.02); box-shadow: 0 0 0 11px rgba(255,255,255,0); }
  100%     { transform: scale(1);    box-shadow: 0 0 0 0    rgba(255,255,255,0); }
}

@keyframes kn-cloudDrift {
  0%   { transform: translateX(-10px); }
  100% { transform: translateX(18px); }
}

@keyframes kn-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kn-twinkle {
  0%, 100% { opacity: .14; }
  50%      { opacity: .5; }
}

@keyframes kn-shimmer {
  0%   { background-position: -320px 0; }
  100% { background-position:  320px 0; }
}

@keyframes kn-spin {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   HELPER ANIMASI — durasi tepat dari prototype
   ========================================================================== */

.kn-anim-floaty      { animation: kn-floaty 5s ease-in-out infinite; }
.kn-anim-play        { animation: kn-pulsePlay 2.8s infinite; }
.kn-anim-play--slow  { animation: kn-pulsePlay 2.6s infinite; }
.kn-anim-cloud       { animation: kn-cloudDrift 10s ease-in-out infinite alternate; }
.kn-anim-cloud--2    { animation: kn-cloudDrift 13s ease-in-out infinite alternate; }
.kn-anim-fadeup      { animation: kn-fadeUp .6s ease both; }
.kn-anim-fadeup--d1  { animation: kn-fadeUp .7s .1s ease both; }
.kn-anim-fadeup--fast{ animation: kn-fadeUp .5s ease both; }
.kn-anim-twinkle     { animation: kn-twinkle 3s infinite; }
.kn-anim-dot         { animation: kn-twinkle 1s infinite; }
.kn-anim-dot--2      { animation: kn-twinkle 1s .2s infinite; }
.kn-anim-dot--3      { animation: kn-twinkle 1s .4s infinite; }
.kn-anim-spin        { animation: kn-spin 1s linear infinite; }

.kn-skeleton {
  border-radius: var(--kn-r-md);
  background: var(--kn-grad-skeleton);
  background-size: 320px 100%;
  animation: kn-shimmer 1.4s infinite;
}


/* ==========================================================================
   ACCESSIBILITY — accessibility gate (NF-A / prefers-reduced-motion)
   Prototype tiada blok ini. Ia WAJIB ditambah dalam production.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   RESET & ASAS — padan dengan blok <style> dalam prototype
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--kn-font-body);
  color: var(--kn-ink);
  background: var(--kn-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--kn-cta); text-decoration: none; }
a:hover { color: var(--kn-cta-hover); }

h1, h2, h3, h4 {
  font-family: var(--kn-font-head);
  margin: 0;
  line-height: var(--kn-lh-head);
  letter-spacing: var(--kn-ls-head);
  color: var(--kn-ink);
}

p { margin: 0; }

button { font-family: var(--kn-font-head); }
input, select, textarea { font-family: var(--kn-font-body); }

/* Elak zoom auto iOS — NF-M08 */
input, select, textarea { font-size: var(--kn-fs-input); }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--kn-scrollbar); border-radius: 8px; }

/* Focus visible — NF-A02. Prototype tiada; wajib dalam production. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kn-blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sr-only untuk label ikon CSS-shape — NF-A04 */
.kn-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   HELPER LATAR & AR — supaya template tak perlu inline style
   ========================================================================== */

.kn-bg-portal   { background: var(--kn-grad-portal-bg); }
.kn-bg-koleksi  { background: var(--kn-grad-koleksi-bg); }
.kn-bg-watch    { background: var(--kn-watch-bg); }
.kn-bg-page     { background: var(--kn-page-bg); }
.kn-bg-hero     { background: var(--kn-grad-hero); }
.kn-bg-auth     { background: var(--kn-grad-auth); }
.kn-bg-navy     { background: var(--kn-navy-900); }
.kn-panel       { background: var(--kn-navy-700); border: 1px solid var(--kn-bd-dark-08); }

.kn-ar-featured { aspect-ratio: var(--kn-ar-featured); }
.kn-ar-video    { aspect-ratio: var(--kn-ar-video); }
.kn-ar-card     { aspect-ratio: var(--kn-ar-card); }
.kn-ar-card-alt { aspect-ratio: var(--kn-ar-card-alt); }

/* Gradient thumbnail fallback — tambah kelas .kn-thumb--{1..6} pada card */
.kn-thumb--1 { background: var(--kn-thumb-1); }
.kn-thumb--2 { background: var(--kn-thumb-2); }
.kn-thumb--3 { background: var(--kn-thumb-3); }
.kn-thumb--4 { background: var(--kn-thumb-4); }
.kn-thumb--5 { background: var(--kn-thumb-5); }
.kn-thumb--6 { background: var(--kn-thumb-6); }


/* ==========================================================================
   NOTA UNTUK PEMBANGUN
   --------------------------------------------------------------------------
   1. Offset 46px dalam prototype datang dari bar PROTOTYPE. Bar itu DIBUANG
      dalam production — sticky header offset mesti 0, bukan 46px.

   2. Breakpoint 820px hanya untuk logic JS (bottom nav, nav desktop).
      Untuk grid, guna --kn-grid-* (auto-fill minmax) supaya reflow semulajadi.
      Prototype TIADA @media sama sekali.

   3. Contrast ratio yang PERLU DIAUDIT (NF-A01) — berkemungkinan gagal 4.5:1:
        --kn-muted      #8195AE atas #FFFFFF
        --kn-on-dark-6  #8DA6C4 atas #0A1B34 / #0F2647
        --kn-on-dark-7  #7E96B8 atas #0B1F3D
        --kn-on-dark-8  #5E7599 atas #0B1F3D
        --kn-disabled   #B0BFD1 atas #EEF3F9
      Naikkan darkness untuk teks badan, bukan untuk teks dekoratif.

   4. Font: preconnect + display=swap. Muat HANYA weight yang digunakan —
      Plus Jakarta Sans 700,800 · Nunito 400,600,700,800.
      (Prototype muat 500,600,700,800 + 400-800 — kurangkan untuk performance.)

   5. letter-spacing .04em HANYA pada badge eyebrow & PERCUMA landing.
      Badge FREE pada video card TIADA letter-spacing.
   ========================================================================== */