/* >>> CATATAN 2026-08-04 — BACA DULU <<<
   Klaim di blok bawah sudah TIDAK berlaku. Sumber kebenaran tunggal kini:
       https://n8n.pakpepibikin.id/pdfs/brand/tokens.css   (brand/tokens.css v2)
   Sebabnya: nilai di berkas ini dideklarasikan 2026-07-16 tapi tidak pernah
   digelar — per 2026-08-04 hanya DUA berkas di seluruh ekosistem yang memakai
   token pkpb-, dan skrip penjaga check-brand-tokens.mjs tidak pernah dibuat.
   v2 mengangkat nilai yang benar-benar terpasang (ebook.pakpepibikin.id) dan
   membawa token khas v1 di bagian Warisan, plus alias pkpb- sebagai jembatan.
   Dua putusan yang membalik berkas ini: font label kembali ke DM Mono (bukan
   Titillium Web), dan latar tombol oranye padat memakai b4520a.
   TIDAK ADA nilai di bawah yang diubah. Berkas ini masih melayani utility
   class pkpb- yang belum dipindahkan. Cadangan: tokens.css.bak-sebelum-pointer-20260804
   >>> akhir catatan <<< */

/* ============================================================================
   PAKPEPIBIKIN — tokens.css  ·  Design System Resmi v1  (2026-07-16)
   SUMBER KEBENARAN TUNGGAL — MENGGANTIKAN brand/tokens.css (lama, deprecated).
   Ref: CLAUDE CODE/PAKPEPIBIKIN-DESIGN-SYSTEM-v1.md
   Nilai WCAG (orange-cta) & strategi vendoring diwarisi dari sistem lama.

   Cara pakai (2 opsi):
   - VENDORED (disarankan utk situs live): salin blok :root ini ke <style> tiap
     situs — subdomain tak ikut mati gaya saat induk di-deploy. (pola brand lama)
   - <link rel="stylesheet" href="/assets/tokens.css"> — untuk situs/proyek baru.
   Utility class di-prefix .pkpb- agar aman drop-in (tak bentrok CSS lama).
   Penjaga: scripts/check-brand-tokens.mjs (jalankan setelah tiap deploy).
   🚦 SATU sistem kanonik — jangan bikin token/gaya lain kecuali diminta Pak Pepi.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=Titillium+Web:wght@400;600;700&display=swap');

:root{
  /* — Warna inti — */
  --pkpb-navy:        #0d2b45;   /* fondasi / ink */
  --pkpb-navy-d:      #081726;   /* navy paling gelap (gradasi) */
  --pkpb-navy-d2:     #0a2137;
  /* navy tone-on-tone (bidang geometric) */
  --pkpb-navy-100:    #163f66;
  --pkpb-navy-200:    #1a4a70;
  --pkpb-navy-300:    #1c4f78;
  --pkpb-navy-400:    #245f8c;
  --pkpb-navy-500:    #2b6a90;

  --pkpb-orange:      #e07020;   /* AKSEN saja: eyebrow, garis, ikon, "pepi". ⛔ BUKAN latar tombol (putih 3,23:1 GAGAL AA) */
  --pkpb-orange-l:    #f0873a;   /* aksen terang di latar gelap */
  --pkpb-orange-d:    #c95c10;   /* garis fokus / hover aksen */
  --pkpb-orange-text: #b4520a;   /* teks oranye kecil di latar terang (4,98:1 ✓) */
  /* Oranye untuk LATAR tombol berteks putih — WCAG AA (dari brand/tokens.css) */
  --pkpb-orange-cta:  #c95c10;   /* stop terang gradient tombol */
  --pkpb-orange-cta-d:#b4520a;   /* stop gelap / hover — putih 5,06:1 ✓ AA */

  --pkpb-wa-1:        #25d366;   /* WhatsApp green (CTA chat) */
  --pkpb-wa-2:        #128c7e;

  --pkpb-sand:        #f7f4eb;   /* latar terang (section + dot-grid) */
  --pkpb-sand-card:   #fffdf8;   /* kartu di atas sand */
  --pkpb-paper:       #fffdfa;   /* latar HALAMAN — putih hangat (page bg) */
  --pkpb-cream:       #faf3ec;
  --pkpb-white:       #f4f6f8;
  --pkpb-muted:       #9fb4c6;   /* teks sekunder di navy */
  --pkpb-muted-sand:  #5c7186;   /* teks sekunder di terang (4,5:1 ✓) */
  --pkpb-gold:        #C9A227;
  --pkpb-live:        #1f9d6b;   /* status live / hijau teduh */
  --pkpb-line:        rgba(13,43,69,.12);
  --pkpb-line-dark:   rgba(255,255,255,.12);

  /* ⛔ DILARANG: #4d56b0 (biru rogue), teal/hijau-kebiruan sbg skema, neon. */

  /* — Tipografi — */
  --pkpb-font-display:'Space Grotesk', system-ui, sans-serif;
  --pkpb-font-body:   'Inter', system-ui, sans-serif;
  --pkpb-font-label:  'Titillium Web', system-ui, sans-serif;  /* eyebrow/label/blok injeksi (dulu DM Mono) */
  --pkpb-font-mono:   'Titillium Web', system-ui, sans-serif;  /* alias kompat — DM Mono diganti Titillium Web */

  /* — Radius — */
  --pkpb-radius:      16px;
  --pkpb-radius-lg:   20px;
  --pkpb-radius-pill: 999px;

  /* — Gradient — */
  --pkpb-grad-bg:     linear-gradient(135deg, #0d2b45 0%, #0a2137 45%, #081726 100%);
  --pkpb-grad-orange: linear-gradient(100deg, var(--pkpb-orange-cta), var(--pkpb-orange-cta-d)); /* AA-safe (tombol berteks putih) */
  --pkpb-grad-wa:     linear-gradient(100deg, var(--pkpb-wa-1), var(--pkpb-wa-2));

  /* — Kedalaman: shadow GELAP (3D) default; glow HANYA hover CTA — */
  --pkpb-shadow-3d:   0 6px 14px -4px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35);
  --pkpb-shadow-card: 0 20px 60px -20px rgba(0,0,0,.6);
  --pkpb-shadow-geo:  0 24px 60px -24px rgba(0,0,0,.6);
  --pkpb-glow-orange: 0 8px 18px -8px rgba(224,112,32,.32), 0 4px 9px rgba(0,0,0,.45);
  --pkpb-glow-wa:     0 8px 18px -8px rgba(37,211,102,.3),  0 4px 9px rgba(0,0,0,.45);

  /* — Glass — */
  --pkpb-glass-bg:     rgba(255,255,255,.06);
  --pkpb-glass-border: rgba(255,255,255,.14);
  --pkpb-glass-blur:   16px;
}

/* ============================================================================
   UTILITIES (opt-in, drop-in)
   ============================================================================ */

/* Latar GELAP — navy gradient (pasang .pkpb-geo di dalamnya untuk collage) */
.pkpb-bg-navy{ background: var(--pkpb-grad-bg); color: var(--pkpb-white); }

/* Latar TERANG — sand + dot-grid halus */
.pkpb-bg-sand{
  background-color: var(--pkpb-sand);
  background-image: radial-gradient(circle, rgba(0,0,0,.08) 1px, transparent 1px); /* C: terlihat halus */
  background-size: 22px 22px;
  color: var(--pkpb-navy);
}

/* GEOMETRIC COLLAGE — taruh sebagai anak absolut di container position:relative.
   .pkpb-geo membungkus; tiap <i> = 1 bidang. Isi bidang via .p1..p6 (contoh),
   atau override sendiri. Default = varian TAJAM (clip-path). */
.pkpb-geo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.pkpb-geo > i{ position:absolute; inset:0; display:block; }
.pkpb-geo .p1{ background:var(--pkpb-navy-300); opacity:.55; clip-path:polygon(52% 0,100% 0,100% 58%); }
.pkpb-geo .p2{ background:var(--pkpb-navy-100); opacity:.55; clip-path:polygon(0 14%,100% 0,100% 20%,0 42%); }
.pkpb-geo .p3{ background:var(--pkpb-navy-400); opacity:.32; clip-path:polygon(70% 0,86% 0,76% 100%,60% 100%); }
.pkpb-geo .p4{ background:var(--pkpb-navy-100); opacity:.5;  clip-path:polygon(0 58%,46% 100%,0 100%); }
.pkpb-geo .p5{ background:var(--pkpb-navy-500); opacity:.28; clip-path:polygon(62% 46%,100% 64%,100% 100%,74% 100%); }
.pkpb-geo .p6{ background:var(--pkpb-navy-200); opacity:.4;  clip-path:polygon(30% 66%,52% 78%,40% 100%,18% 100%); }

/* Varian ROUNDED — tambahkan .pkpb-geo--round; bidang jadi rotated rounded-rect */
.pkpb-geo--round > i{ inset:auto; border-radius:38px; clip-path:none; box-shadow:var(--pkpb-shadow-geo); }
.pkpb-geo--round .p1{ top:-16%; right:-8%;  width:60%; height:72%; transform:rotate(22deg); }
.pkpb-geo--round .p2{ top:-22%; left:16%;   width:72%; height:34%; transform:rotate(-12deg); }
.pkpb-geo--round .p3{ top:6%;   right:14%;  width:15%; height:118%;transform:rotate(16deg); }
.pkpb-geo--round .p4{ bottom:-26%; left:-12%; width:56%; height:58%; transform:rotate(26deg); }
.pkpb-geo--round .p5{ bottom:-12%; right:6%;  width:42%; height:44%; transform:rotate(-18deg); }
.pkpb-geo--round .p6{ bottom:4%; left:22%;  width:27%; height:27%; transform:rotate(34deg); }

/* Grade + vignette opsional di atas geo (glow ambient tipis, vignette gelap) */
.pkpb-grade{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 84% 10%, rgba(224,112,32,.07), transparent 55%),
    radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,.6)); }

/* GLASS panel */
.pkpb-glass{
  background: var(--pkpb-glass-bg);
  border: 1px solid var(--pkpb-glass-border);
  -webkit-backdrop-filter: blur(var(--pkpb-glass-blur));
  backdrop-filter: blur(var(--pkpb-glass-blur));
  border-radius: var(--pkpb-radius-lg);
  box-shadow: var(--pkpb-shadow-card);
}

/* KARTU (di atas sand) */
.pkpb-card{
  background: var(--pkpb-sand-card);
  border: 1px solid rgba(13,43,69,.1);
  border-radius: var(--pkpb-radius);
  box-shadow: 0 8px 24px -14px rgba(13,43,69,.25);
}

/* Efek 3D universal */
.pkpb-shadow-3d{ box-shadow: var(--pkpb-shadow-3d); }

/* ============================================================================
   CTA — gradient pill, shadow gelap default, glow HANYA saat hover
   ============================================================================ */
.pkpb-btn{
  font-family: var(--pkpb-font-display); font-weight:600; font-size:.98rem;
  padding:14px 26px; border-radius:var(--pkpb-radius-pill); border:0; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.pkpb-btn:hover{ transform:translateY(-2px); }

.pkpb-btn--primary{ color:#fff; background:var(--pkpb-grad-orange); box-shadow:var(--pkpb-shadow-3d); }
.pkpb-btn--primary:hover{ box-shadow:var(--pkpb-glow-orange); }         /* glow -50%, sempit */

.pkpb-btn--wa{ color:#fff; background:var(--pkpb-grad-wa); box-shadow:var(--pkpb-shadow-3d); }
.pkpb-btn--wa:hover{ box-shadow:var(--pkpb-glow-wa); }

.pkpb-btn--ghost{ color:var(--pkpb-white); background:var(--pkpb-glass-bg); border:1px solid var(--pkpb-glass-border); }
.pkpb-btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* Judul & mono helper */
.pkpb-display{ font-family:var(--pkpb-font-display); font-weight:700; letter-spacing:-.02em; }
.pkpb-eyebrow{ font-family:var(--pkpb-font-mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pkpb-orange); }
.pkpb-accent{ color:var(--pkpb-orange); }

@media (prefers-reduced-motion:reduce){ .pkpb-btn{ transition:none; } }