/* Hallmark · shape: the beranda v3 system carried to every other page; produk and solusi open on a centred stage with the product replica rising, articles read as long documents with a contents rail, tool pages open on a settled head · genre: modern-minimal · theme: brand (locked, DESIGN.md) · redesign: full · copy: verbatim (halaman yang sudah tayang, judul /untuk/* dibekukan)
 * paper: oklch(99.2% 0.003 85) · accent: oklch(79% 0.155 73) · display: Plus Jakarta Sans · body: Plus Jakarta Sans · hero: Stage (/produk/*, /untuk/*), Long document (/kabar/*, /bandingkan/*, legal), Settled (/pricing, /kalkulator, /kontak, /faq, /panduan, /tentang, /kabar) · nav: dense balanced bar (shared with the beranda) · footer: mast, logo over four link lists (shared) · signature: the Welkam product replica of each page, moving on its own once it is in view
 * axes: warm-white/grotesk-750/amber · posture: per route type · contrast: pass on page code, the app replicas as found · fold: pass at 1440 and 1280 · colour posture: restrained (amber only on primary actions and progress marks) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, forty-one pages share one system on purpose (the variety rule inverts after the lock); shape differs by route type */
/* Hallmark · waive 47b · bingkai HP, laptop, dan tablet di replika walkthrough dan gambar layar artikel · founder 24 Okt: gambar layar app berbingkai perangkat sesuai pemakai (staf laptop atau tablet, tamu HP), isinya layar Welkam asli */
/* Hallmark · waive 24b · jarak di luar skala hanya di replika app yang disalin dari welkam-landing · replika Waitlist, Meja & TV, Profil tamu, Loyalty, dan WhatsApp CRM memakai jarak asli aplikasinya */
/* Hallmark · waive 75 · teks replika memakai ukuran app di kanvas yang diperkecil · layar tamu dan staf adalah produk Welkam, bukan teks halaman */
/* Hallmark · waive 44c · replika di kepala produk dan solusi diperkecil (zoom 0,62 sampai 1) supaya kepala pas satu layar di 1440x900 dan 1920x1080; di layar 1280x800 replika bisa mengintip di bawah lipatan seperti tablet dan HP di beranda · judul, satu kalimat, dan tombol Coba Gratis selalu di layar pertama; replika tetap terbaca */
/* Hallmark · waive 49b · tautan di dalam paragraf ikut patah bersama kalimatnya di layar 320px · tautan seperti waiting list untuk klinik gigi adalah bagian kalimat, bukan tombol */
/* Hallmark · waive 78 · judul bab artikel di halaman produk, artikel, dan hukum berukuran dokumen di bawah judul halaman · bagian panjang untuk mesin pencari dibaca seperti artikel dengan daftar isi */
/* Hallmark · waive 79 · kepala artikel, kebijakan privasi, dan syarat ketentuan hanya teks, jarak di bawahnya irama seksi biasa · isi dokumen langsung mulai di seksi berikutnya */
/* Hallmark · waive 77 · catatan singkat halaman solusi dan produk (blok note: judul dan satu paragraf di kartu kertas) · sengaja ringkas di antara blok bervisual, misalnya Barisannya pendek, pelanggan tetap balik */
/* Hallmark · waive 59 · kotak Tanya Pio menempel di bawah judul halaman /faq · mesin Tanya Pio lama tidak dirombak (keputusan founder), kotaknya bagian dari kepala halaman bantuan */
/* Hallmark · waive 39b · tombol kecil 32px hanya di replika app (Walk-in, langkah tur Profil tamu) · ukuran tombol aplikasi Welkam yang sebenarnya */
/* Hallmark · dropped english.html, produk.html · kurasi peta situs founder 26 Okt: /english dan /produk dihapus, dialihkan 301 ke beranda */
/* Hallmark · dropped beranda.html, beranda.html#demo, beranda.html#produk · pratinjau menamai beranda index.html; tautan yang sama kini ke index.html, index.html#demo, dan index.html#pilar */
/* Hallmark · dropped https://wa.me/6281325338760 · founder 26 Okt #70: semua Chat WhatsApp membuka pilihan keperluan dulu; halaman produk memilihkan minatnya, halaman solusi memilihkan jenis bisnisnya, pesan WhatsApp ikut pilihan */
/* Hallmark · dropped ' + waText(msg) + ', + n + · teks di dalam skrip halaman lama, bukan tautan atau isian form */
/* Hallmark · dropped #atas, #dd-produk, #dd-solusi, #dd-sumber, #f-nama, #f-wa, #f-biz, #f-bt · id menu dan form v2; menu dan form v3 (sama dengan beranda) memakai milik sendiri dan tidak ada skrip yang membaca id lama */
/* Hallmark · dropped label kecil di atas judul (Yang sering terjadi, Cara kerja, Rincian, Pertanyaan umum, dan sejenisnya) · 54 menamai eyebrow; setiap judul seksi sudah menyebut isinya, kategori artikel pindah ke kalimat byline */
/* Hallmark · reworded " · " to ", " di teks halaman · 63 menamai rangkaian titik tengah; teks replika app tetap memakai format app */
/* Hallmark · reworded "Unduh checklist Excel gratis→" to "Unduh checklist Excel gratis" · 63 menamai panah yang menempel di teks tautan */
/* Hallmark · reworded "PRIORITAS" to "Prioritas" · 67 menamai label huruf kapital pada lencana bantuan paket Grup */
/* Hallmark · dropped tautan Rincian lengkap harga di bawah kartu paket /pricing · tautan itu menunjuk halaman /pricing sendiri; tabel Perbedaan tiap paket langsung di bawahnya */
/* Hallmark · finish-review: subagent (Sonnet, konteks segar) · verdict fix · 8 temuan, 8 diperbaiki: label Contoh data 12px tanpa tracking, tabel HP bertumpuk berlabel kolom, replika TV HP tidak terpotong, daftar isi tidak menempel teks dan muncul di artikel 6 bab ke atas, titik ganda Harga, artikel tanpa daftar isi rata kiri, gambar HP artikel di tengah, ikon polos tanpa kotak warna dan Kontak sel bergaris (WhatsApp satu-satunya sel terisi), kuning hanya di aksi utama, satu blok gelap per halaman (WaitHub dan angka pindah ke pita kertas) · dicek ulang dengan ukuran di browser */
/* Hallmark · finish-review #115 (27 Okt): subagent konteks segar · verdict fix · 7 temuan diperbaiki · skor ulang peninjau: 4 resolved, 3 partial · 3 partial + 1 nit dikerjakan lalu DINILAI ULANG peninjau dari shot baru: 4/4 resolved · 1 temuan baru (#jam-ramai: kalimat jam puncak hilang, angka kontak salah tempat) diperbaiki, dinilai ulang: resolved · #tiga-pintu catatan dipangkas sesuai saran peninjau */
/* Hallmark · answered · /untuk/grup satu halaman gelap atas permintaan founder (27 Okt #138-#140, rujukan apple.com/iphone-18-pro): kartu app tetap terang dan teksnya kembali ke tinta, teks di panggung gelap memakai --color-on-night (kontras 10,9:1), aturan satu blok gelap per halaman sengaja tidak berlaku di halaman ini */
/* Hallmark · founder-exception 2a 67 40 63 (27 Okt, "Bersihkan, replika tetap persis app") · di replika layar app saja: gradasi kartu Black Loyalty, roda warna Brand, label kapital, kontras lencana kecil, dan baris meta bertitik tengah di papan staf dibiarkan persis seperti app; lantai lain di replika dibersihkan saat build tanpa beda rupa (tools/hallmark-css.mjs, bukti tools/check-hallmark-same.mjs) */
/* Hallmark · waive 81 · lapisan i.ly-mat di kartu stempel digital adalah bahan kartu: mutiara, perak, emas, hitam · isi kartu stempel ada di atasnya, gradasi itu sendiri warna bahan yang dipilih untuk kartu */
/* Hallmark · dismissed 42 · kaki halaman = mast dengan logo di atas empat kolom tautan, bentuk yang disetujui founder dan sama dengan beranda */
/* Hallmark · answered F19 · halaman memakai 400, 600, dan 750; ketebalan lain hanya ada di replika layar app */
/* Hallmark · answered F1 · copy verbatim dari halaman yang sudah tayang (founder: konten sudah ok), tanda kutip mengikuti teks asli */
/* Hallmark · answered F4 · tombol utama kuning dan tombol WhatsApp hijau dua resep keputusan founder; resep lain milik tombol di replika app */
/* Hallmark · answered F7 · bentuk pil dan wadah berulang milik replika app Welkam dan kontrol situs, satu sistem */
/* Hallmark · answered F15 · jarak kolom yang berbeda milik replika app dan grid demo; grid halaman memakai --gap-columns */
/* Hallmark · answered F24 · garis tipis di bawah bayangan lembut hanya pada tooltip uji coba, pembeda dari isi di belakangnya */
/* Hallmark · answered F6 · angka kartu stempel di replika mengikuti font app */ /* Hallmark · answered F18 · slot gambar produk tetap di halaman tanpa skrip slot */ /* Hallmark · answered F21 · nama paket dan label hitungan di bawah judul halaman tampil sebagai kartu berlabel; susunan halaman harga disetujui founder */ /* Hallmark · waive 23 · aksen kuning pada bar progres replika · bar itu penanda proses di replika app Welkam, bukan latar besar */ /* Hallmark · waive 29 · panel kaca kartu Loyalty .lyx-win · replika layar app Welkam persis seperti app */ /* Hallmark · waive 74 · roda warna Brand memuat indigo · replika pemilih warna app Welkam persis seperti app */
/* Hallmark · waive 3 · tiga kolom add-on dan pilar produk · struktur produk Welkam yang disetujui founder, tiap kolom berisi daftar fitur */ /* Hallmark · waive 11 · gambar kartu artikel membesar sedikit saat diarahkan · penanda kartu artikel bisa dibuka, gerak transform saja */ /* Hallmark · waive 25 · pesan selesai form demo 34ch · kalimat singkat di kartu form yang sempit, lanjut ke WhatsApp */

:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1328px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  /* Welkam: kertas putih hangat, tinta hampir hitam, kuning brand (#F5A91E) hanya untuk aksi utama */
  --color-paper: oklch(99.2% 0.003 85); --color-paper-2: oklch(96.6% 0.006 85); --color-paper-3: oklch(93.5% 0.009 85);
  --color-ink: oklch(20% 0.008 70); --color-ink-2: oklch(40% 0.01 70); --color-muted: oklch(46% 0.012 70);
  --color-rule: oklch(88.5% 0.01 80); --color-rule-2: oklch(80% 0.012 80);
  --color-accent: oklch(79% 0.155 73); --color-accent-2: oklch(83% 0.14 78); --color-accent-ink: oklch(22% 0.045 65); --color-accent-soft: oklch(95.5% 0.04 85); --color-gold: oklch(47% 0.11 62);
  --color-focus: oklch(40% 0.1 60);
  /* panggung demo */
  --color-night: oklch(17.5% 0.006 70); --color-night-2: oklch(22% 0.007 70); --color-night-3: oklch(28% 0.008 70); --color-night-rule: oklch(32% 0.008 70);
  --color-on-night: oklch(96% 0.005 85); --color-on-night-2: oklch(82% 0.008 85); --color-focus-night: oklch(88% 0.11 82);
  /* status */
  --color-wa: oklch(52% 0.14 150); --color-wa-2: oklch(47% 0.13 150); --color-success-soft: oklch(95% 0.035 150); --color-success-ink: oklch(42% 0.1 150); --color-success-line: oklch(84% 0.07 150);
  --color-error-soft: oklch(95% 0.03 30); --color-error-ink: oklch(45% 0.15 30); --color-loss: oklch(58% 0.17 35);
  --color-white: oklch(100% 0 0); --color-black: oklch(16% 0.008 70);
  /* warna yang dipakai replika app di luar CSS welkam-landing (status di layar tamu/staf) */
  --app-amber: oklch(78.5% 0.155 73); --app-ink: oklch(29% 0.03 60); --app-ink-2: oklch(43% 0.04 60); --app-warm: oklch(92.5% 0.015 75);
  --app-wa-me: oklch(95% 0.07 140); --app-pending: oklch(96% 0.05 88); --app-pending-ink: oklch(48% 0.1 75); --app-off: oklch(87% 0 0); --app-wa-read: oklch(73% 0.13 230); --app-packet: oklch(76% 0.11 255);
  --app-sw-0: #0071E3; --app-sw-1: #BE0909; --app-sw-2: #F4A91F; --app-sw-3: #1F7A4D; --app-sw-4: #1D4ED8; --app-sw-5: #6D28D9; --app-sw-6: #DB2777; --app-sw-7: #1F1F1F;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
  --display-weight: 750; --weight-ui: 600; --weight-body: 400;
  --radius-card: 12px; --radius-small: 8px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --shadow-float: 0 18px 40px -16px color-mix(in oklab, var(--color-ink) 35%, transparent);
  --tracking-display: -0.035em;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ===== welkam-landing/src/css/10-tokens.css (replika app, rupa tidak diubah; aturan .gcount yang tak terpakai disaring; animasi lebar/posisi jadi transform, tools/hallmark-css.mjs) ===== */
/* Beranda welkam.id v2. Satu tampilan terang (identitas Welkam), semua warna lewat token.
   Tata letak: kolom 1200 px, hero dua kolom (pesan kiri, film produk kanan), bab-bab bawah bergantian kertas/malam. */
#wksite {
  --paper: var(--lc-fd0f3f6);
  --paper-2: var(--lc-bf5c0e1);
  --card: var(--lc-c659d63);
  --ink: var(--lc-144eefb);
  --ink-2: var(--lc-de3acc2);
  --ink-3: var(--lc-e6af4de);
  --line: var(--lc-dad0c40);
  --line-2: var(--lc-560abd1);
  --brand: var(--lc-5ea75f0);
  --brand-2: var(--lc-12e0fda);
  --brand-ink: var(--lc-0a4b996);
  --brand-soft: var(--lc-21690bc);
  --gold-text: var(--lc-d2f445c);
  --night: var(--lc-9b737fd);
  --night-2: var(--lc-51f965e);
  --night-line: var(--lc-1f02e66);
  --on-night: var(--lc-fd0f3f6);
  --on-night-2: var(--lc-2d94e29);
  --wa: var(--lc-36a068a);
  --wa-soft: var(--lc-25c2492);
  --ok: var(--lc-81e84bd);
  --bad: var(--lc-989217b);

  --f-display: 'Fredoka', 'Fredoka Fallback: Arial', 'Fredoka Fallback: Roboto', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-body: 'Nunito', 'Nunito Fallback: Arial', 'Nunito Fallback: Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px var(--lc-298cc7d), 0 2px 8px var(--lc-02de4dc);
  --shadow-2: 0 12px 32px -12px var(--lc-9e89c18), 0 2px 6px var(--lc-298cc7d);
  --shadow-3: 0 40px 80px -30px var(--lc-3e4d4cb), 0 10px 24px -12px var(--lc-2475aa4);

  /* Sistem gerak (riset 21 Okt): masuk lebih lama dari keluar, pop hanya untuk stempel + balon WhatsApp */
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-out-lg: cubic-bezier(.16, 1, .3, 1);
  --e-std: cubic-bezier(.4, 0, .2, 1);
  --e-in: cubic-bezier(.3, 0, 1, 1);
  --e-pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-tap: 120ms;
  --t-toggle: 200ms;
  --t-card: 320ms;
  --t-panel: 520ms;
  --t-scene: 800ms;

  --wrap: 1200px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
}

/* ===== welkam-landing/src/css/45-film.css (replika app, rupa tidak diubah; aturan .gcount yang tak terpakai disaring; animasi lebar/posisi jadi transform, tools/hallmark-css.mjs) ===== */
/* Film produk: kanvas tetap (desktop 760x560, HP 380x560) diskalakan lewat transform (tanpa CLS).
   Replika layar asli Welkam (ref/SCREENS.md): host Fredoka + Nunito, tamu Plus Jakarta Sans, tema bawaan kuning. */
#wksite .film { position: relative; min-width: 0; display: grid; gap: 14px; }
#wksite .f-box { position: relative; width: 100%; aspect-ratio: 760 / 560; --k: 0.86; }
#wksite .f-canvas, #wksite .rpx {
  --h-ink: var(--lc-f63cd00); --h-ink2: var(--lc-2db9f7b); --h-mute: var(--lc-707a6ec); --h-line: var(--lc-247330f); --h-warm: var(--lc-40fc5f8); --h-canvas: var(--lc-709dd8b); --h-sunk: var(--lc-ec40b3b);
  --g-font: 'Plus Jakarta Sans', 'Nunito', system-ui, sans-serif; --g-ink: var(--lc-acc9561); --g-mute: var(--lc-e7025a2); --g-line: var(--lc-0069cf0); --g-surf: var(--lc-e50e19e);
  font: 600 11px/1.35 var(--f-body); color: var(--h-ink);
}
#wksite .f-canvas { position: absolute; left: 0; top: 0; width: 760px; height: 560px; transform-origin: 0 0; transform: scale(var(--k)); contain: layout style; }
#wksite .f-canvas.snap, #wksite .f-canvas.snap * { transition: none !important; }
#wksite .f-canvas svg:has(> use), #wksite .rpx svg:has(> use) { width: 1em; height: 1em; }
#wksite .f-tag { position: absolute; left: 4px; bottom: 0; font: 800 9px/1 var(--f-body); letter-spacing: 0.06em; color: var(--lc-97eb2c1); }

/* ---------- Dasbor host ---------- */
#wksite .f-dash {
  position: absolute; left: 0; top: 34px; width: 610px; height: 424px; border-radius: 16px; overflow: hidden;
  background: var(--h-canvas); box-shadow: var(--shadow-3), 0 0 0 1px var(--lc-e812d35); display: grid; grid-template-columns: 118px minmax(0, 1fr);
}
#wksite .d-side { background: var(--lc-09fa70d); border-right: 1px solid var(--h-line); padding: var(--space-sm) var(--space-xs) 10px; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
#wksite .d-logo { display: flex; align-items: center; gap: 5px; padding: 0 var(--space-2xs) var(--space-3xs); font: 700 13px/1 var(--f-display); letter-spacing: -0.01em; color: var(--h-ink); }
#wksite .d-dot { width: 13px; height: 13px; border-radius: 50% 50% 50% 4px; background: var(--brand); }
#wksite .d-mode { display: grid; grid-template-columns: 1fr 1fr; padding: var(--space-3xs); border-radius: 999px; background: var(--h-canvas); font: 700 7.5px/1 var(--f-body); color: var(--h-ink2); }
#wksite .d-mode span { display: flex; align-items: center; justify-content: center; gap: var(--space-3xs); padding: 5px var(--space-3xs); border-radius: 999px; }
#wksite .d-mode .on { background: var(--lc-d14f901); color: var(--h-ink); box-shadow: 0 1px 2px var(--lc-67cac16); }
#wksite .d-mode svg { width: 8px !important; height: 8px !important; }
#wksite .d-add { height: 24px; border-radius: 999px; background: var(--lc-1f9ef8f); color: var(--h-ink); display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); font: 700 9.5px/1 var(--f-body); }
#wksite .d-add svg { width: 10px !important; height: 10px !important; }
#wksite .d-side ul { display: grid; gap: 1px; }
#wksite .d-side li { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 999px; font: 600 9.5px/1 var(--f-body); color: var(--h-ink2); }
#wksite .d-side li svg { width: 11px !important; height: 11px !important; }
#wksite .d-side li.on { background: var(--lc-d14f901); color: var(--h-ink); box-shadow: 0 1px 3px var(--lc-6bdafb7); }
#wksite .d-side li em { font-style: normal; margin-left: auto; min-width: 14px; height: 13px; padding: 0 var(--space-2xs); border-radius: 999px; background: var(--lc-f49aa7d); color: var(--lc-2aa32ee); font: 800 7.5px/13px var(--f-body); text-align: center; }
#wksite .d-card { padding: 7px var(--space-xs); border-radius: 10px; background: var(--lc-d14f901); box-shadow: 0 2px 6px -3px var(--lc-9f7a728); display: grid; gap: var(--space-3xs); }
#wksite .d-card:first-of-type { margin-top: auto; }
#wksite .d-card small { font: 800 6.5px/1 var(--f-body); letter-spacing: 0.08em; color: var(--h-mute); }
#wksite .d-card span { font: 700 8.5px/1.2 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wksite .d-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
#wksite .d-top { display: flex; align-items: center; gap: 6px; padding: 11px var(--space-sm) 9px; background: var(--lc-d14f901); border-bottom: 1px solid var(--h-line); white-space: nowrap; overflow: hidden; }
#wksite .d-top > b { font: 400 13px/1.2 var(--f-display); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#wksite .d-live { display: inline-flex; align-items: center; gap: 3px; padding: var(--space-3xs) 6px; border-radius: 999px; background: var(--lc-f49aa7d); color: var(--lc-2aa32ee); font: 700 8px/1.3 var(--f-body); }
#wksite .d-live i { width: 4px; height: 4px; border-radius: 50%; background: var(--lc-5df1ed2); }
#wksite .d-wait { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 7px; border-radius: 999px; border: 1.2px solid var(--lc-d6b0f8e); background: var(--lc-ace40bf); color: var(--lc-47699a1); font: 700 8px/1 var(--f-body); }
#wksite .d-wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--lc-6bc1d56); box-shadow: 0 0 0 0 var(--lc-c5812dd); animation: wk-rip 2s var(--e-out) infinite; }
@keyframes wk-rip { to { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0); } }
#wksite .d-wait em, #wksite .d-stat em { font: 600 11px/1 var(--f-display); font-style: normal; color: var(--h-ink); display: inline-block; }
#wksite .d-stat { display: inline-flex; align-items: center; gap: 3px; padding: var(--space-2xs) var(--space-xs); border-radius: 999px; border: 1.2px solid var(--h-line); background: var(--lc-d14f901); color: var(--h-ink2); font: 600 8px/1 var(--f-body); }
#wksite .d-views { position: relative; min-height: 0; overflow: hidden; } /* papan yang meluber tidak mengintip di bawah tampilan lain */
#wksite .d-view { position: absolute; inset: 0; padding: 10px; opacity: var(--wk-js-hide, 1); transform: translateX(14px); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-out); pointer-events: none; }
#wksite .d-view.on { opacity: 1; transform: none; }
#wksite .d-view[data-v=board] { opacity: 1; transform: none; }
#wksite .d-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 0.76fr); gap: var(--space-xs); height: 100%; }
#wksite .d-col { background: var(--lc-d14f901); border-radius: 11px; padding: var(--space-xs) 7px; border: 1px solid var(--h-line); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 7px; min-width: 0; }
#wksite .d-col h5 { margin: 0; display: flex; align-items: center; gap: 5px; padding: 0 var(--space-3xs); font: 500 10.5px/1 var(--f-display); color: var(--h-ink); }
#wksite .d-col h5 span { min-width: 15px; height: 14px; padding: 0 var(--space-2xs); border-radius: 999px; background: var(--h-canvas); display: inline-grid; place-items: center; font: 800 7.5px/1 var(--f-body); color: var(--h-ink2); }
#wksite .d-col[data-col=seat] h5 span { background: var(--lc-f49aa7d); color: var(--lc-2aa32ee); }
#wksite .d-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
#wksite .tk { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 6px; align-items: center; padding: 0 0 0 7px; min-height: 46px; border-radius: 13px; background: var(--lc-d14f901); border: 2px solid var(--h-warm); overflow: hidden; }
#wksite .tk-c { font: 700 13px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-align: center; color: var(--h-ink); }
#wksite .tk-b { display: grid; gap: 3px; min-width: 0; padding: 6px 0; }
#wksite .tk-b b { display: flex; align-items: center; gap: 3px; font: 700 9.5px/1.15 var(--f-display); white-space: nowrap; overflow: hidden; }
#wksite .tk-ke { font-style: normal; flex: none; padding: 1px 3px; border-radius: 999px; background: var(--h-ink); color: var(--lc-5198670); font: 700 6.5px/1.2 var(--f-body); }
#wksite .tk-meta { font: 700 7px/1.25 var(--f-body); color: var(--h-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wksite .tk-meta i { font-style: normal; }
#wksite .tk-meta i[data-ago] { font: 600 8px/1 var(--f-display); color: var(--h-ink2); }
#wksite .tk-lv { width: fit-content; padding: 1.5px 5px; border-radius: 999px; font: 600 6.5px/1.2 var(--f-body); }
#wksite .tk-lv.silver { background: var(--lc-1679459); color: var(--lc-bd327f2); }
#wksite .tk-lv.gold { background: var(--lc-5f58bf7); color: var(--lc-c016eb5); }
#wksite .tk-call { align-self: stretch; display: grid; place-items: center; background: var(--lc-1f9ef8f); color: var(--h-ink); transition: background-color var(--t-tap) var(--e-std); }
#wksite .tk-call .tk-mg { width: 15px; height: 15px; }
#wksite .tk-call.press { background: var(--lc-c0ad6e2); }
#wksite .tk.new { animation: wk-tkin var(--t-panel) var(--e-out-lg) both; }
@keyframes wk-tkin { from { opacity: 0; transform: translateY(-10px) scale(0.96); } }
#wksite .tk.new::after { content: ""; position: absolute; inset: -2px; border-radius: 13px; box-shadow: 0 0 0 2px var(--brand); animation: wk-glowout 1.6s var(--e-std) both; pointer-events: none; }
@keyframes wk-glowout { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
#wksite .tk.lift { z-index: 3; box-shadow: var(--shadow-2); }
#wksite .tk.called { grid-template-columns: 30px minmax(0, 1fr); padding: 0 7px; border-radius: 10px; }
#wksite .tk.called .tk-call, #wksite .tk.called .tk-lv { display: none; }
#wksite .tk-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); padding-bottom: 6px; }
#wksite .tk-acts span { height: 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3xs); font: 700 7px/1 var(--f-display); border: 1.5px solid; }
#wksite .tk-acts .no { border-color: var(--lc-202b496); color: var(--lc-e83023a); background: var(--lc-d14f901); }
#wksite .tk-acts .ok { background: var(--lc-1f9ef8f); border-color: var(--lc-c0ad6e2); color: var(--h-ink); }
#wksite .tk-acts .ok svg { width: 7px !important; height: 7px !important; }
#wksite .tk-acts .re { grid-column: 1 / -1; background: var(--lc-d75c502); border-color: var(--lc-d75c502); color: var(--h-ink2); }
#wksite .tk.seated { grid-template-columns: 30px minmax(0, 1fr); padding: 0 7px; min-height: 38px; border-radius: 10px; border-color: var(--lc-3112708); }
#wksite .tick { animation: wk-tick 420ms var(--e-out) both; }
@keyframes wk-tick { from { transform: translateY(-60%); opacity: 0; } }
#wksite .d-dlg { position: absolute; z-index: 4; left: 26px; top: 120px; width: 170px; padding: 11px var(--space-sm); border-radius: 12px; background: var(--lc-d14f901); box-shadow: var(--shadow-3), 0 0 0 1px var(--h-line); display: grid; gap: var(--space-2xs); opacity: var(--wk-js-hide, 1); transform: translateY(6px) scale(0.96); transition: opacity var(--t-toggle) var(--e-std), transform var(--t-card) var(--e-out); }
#wksite .d-dlg.on { opacity: 1; transform: none; }
#wksite .d-dlg b { font: 600 11.5px/1.2 var(--f-display); }
#wksite .d-dlg span { font: 600 8px/1.3 var(--f-body); color: var(--h-mute); }
#wksite .d-dlg div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: var(--space-2xs); }
#wksite .d-dlg i { font-style: normal; height: 22px; border-radius: 999px; display: grid; place-items: center; font: 700 8.5px/1 var(--f-body); border: 1.5px solid var(--h-line); }
#wksite .d-dlg i.go { background: var(--lc-1f9ef8f); border-color: var(--lc-c0ad6e2); transition: background-color var(--t-tap) var(--e-std); }
#wksite .d-dlg i.go.press { background: var(--lc-c0ad6e2); }
#wksite .d-bar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: var(--lc-d14f901); border-top: 1px solid var(--h-line); }
#wksite .d-bar span { height: 22px; padding: 0 var(--space-xs); border-radius: 8px; display: inline-flex; align-items: center; font: 700 8px/1 var(--f-body); white-space: nowrap; }
#wksite .d-bar .sage { border: 1.5px solid var(--lc-5df1ed2); color: var(--lc-2aa32ee); }
#wksite .d-bar .d-bar-add { margin-left: auto; width: 110px; justify-content: center; background: var(--lc-6bc1d56); color: var(--h-ink); font-size: 9.5px; }

/* Detail pelanggan (GuestDetailBento) */
#wksite .d-view[data-v=profile] { left: 18%; padding: 0; background: var(--lc-d14f901); box-shadow: -18px 0 40px -18px var(--lc-eab689e); transform: translateX(40px); }
#wksite .d-view[data-v=profile].on { transform: none; }
#wksite .gd { position: relative; height: 100%; padding: 14px var(--space-md); display: grid; gap: 10px; align-content: start; }
#wksite .gd-x { position: absolute; right: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--h-ink); display: grid; place-items: center; font: 700 8px/1 var(--f-body); }
#wksite .gd-h { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-right: 26px; }
#wksite .gd-h b { width: 100%; font: 600 15px/1.1 var(--f-display); }
#wksite .gd-st { padding: var(--space-3xs) 7px; border-radius: 999px; background: var(--lc-d61e80f); color: var(--lc-b275e50); font: 700 7.5px/1.3 var(--f-body); }
#wksite .gd-lv { padding: var(--space-3xs) 7px; border-radius: 999px; background: var(--lc-5f58bf7); color: var(--lc-c016eb5); font: 700 7.5px/1.3 var(--f-body); }
#wksite .gd-b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 7px; }
#wksite .gd-b > div { padding: var(--space-xs) 9px; border-radius: 9px; background: var(--h-sunk); display: grid; gap: 3px; align-content: start; min-width: 0; }
#wksite .gd-b .c4 { grid-column: span 4; }
#wksite .gd-b .c5 { grid-column: span 5; }
#wksite .gd-b .c7 { grid-column: span 7; }
#wksite .gd-b .c12 { grid-column: span 12; background: var(--lc-d14f901); border: 1px solid var(--h-line); }
#wksite .gd-b small { font: 800 6.5px/1 var(--f-body); letter-spacing: 0.08em; color: var(--h-mute); }
#wksite .gd-b > div > b { font: 600 15px/1 var(--f-display); font-variant-numeric: tabular-nums; }
#wksite .gd-b p { font: 600 7px/1.3 var(--f-body); color: var(--h-ink2); }
#wksite .gd-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
#wksite .gd-tags span { padding: 1px 6px; border-radius: 999px; background: var(--lc-5f58bf7); border: 1.2px solid var(--lc-2de74e6); font: 600 7px/1.4 var(--f-body); }
#wksite .gd-b p.gd-note { font-size: 8px; color: var(--h-ink); }
#wksite .gd-hist p { display: grid; grid-template-columns: 7px 38px minmax(0, 1fr); gap: 6px; align-items: center; padding: 3px 0; font-size: 7.5px; }
#wksite .gd-hist i { width: 6px; height: 6px; border-radius: 50%; background: var(--lc-6ede79f); }
#wksite .gd-hist p:first-of-type i { background: var(--brand); }
#wksite .gd-hist b { font: 800 7.5px/1 var(--f-body); color: var(--h-ink); }
#wksite .d-view.on .gd-b > div { animation: wk-up var(--t-panel) var(--e-out) both; }
#wksite .d-view.on .gd-b > div:nth-child(2) { animation-delay: 60ms; }
#wksite .d-view.on .gd-b > div:nth-child(3) { animation-delay: 120ms; }
#wksite .d-view.on .gd-b > div:nth-child(4) { animation-delay: 180ms; }
#wksite .d-view.on .gd-b > div:nth-child(5) { animation-delay: 240ms; }
#wksite .d-view.on .gd-b > div:nth-child(6) { animation-delay: 300ms; }
@keyframes wk-up { from { opacity: 0; transform: translateY(8px); } }

/* Kirim promo > Riwayat */
#wksite .cp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); }
#wksite .cp-top b { display: block; font: 600 13px/1.1 var(--f-display); }
#wksite .cp-top small { font: 600 7.5px/1 var(--f-body); color: var(--h-mute); }
#wksite .cp-tabs { display: flex; gap: 3px; }
#wksite .cp-tabs i { font-style: normal; padding: var(--space-2xs) var(--space-xs); border-radius: 999px; font: 800 8px/1 var(--f-body); color: var(--h-ink2); }
#wksite .cp-tabs i.on { background: var(--h-ink); color: var(--lc-ec40b3b); }
#wksite .rw { padding: 10px 11px; border-radius: 12px; background: var(--lc-d14f901); border: 1px solid var(--h-line); display: grid; gap: 7px; }
#wksite .rw-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-xs); }
#wksite .rw-h b { display: block; font: 600 11.5px/1.2 var(--f-display); }
#wksite .rw-h small { font: 600 7px/1.3 var(--f-body); color: var(--h-mute); }
#wksite .rw-chip { flex: none; padding: var(--space-3xs) 7px; border-radius: 999px; background: var(--lc-f49aa7d); color: var(--lc-2aa32ee); font: 800 7.5px/1.3 var(--f-body); }
#wksite .rw-prog { height: 5px; border-radius: 999px; background: var(--lc-d75c502); overflow: hidden; }
#wksite .rw-prog i { display: block; height: 100%; background: var(--lc-1f9ef8f); transform-origin: 0 50%; }
#wksite .d-view.on .rw-prog i { animation: wk-fill 1s var(--e-out-lg) both; }
@keyframes wk-fill { from { transform: scaleX(0); } }
#wksite .rw-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs); }
#wksite .rw-nums div { padding: 5px 6px; border-radius: 7px; background: var(--h-sunk); display: grid; gap: var(--space-3xs); }
#wksite .rw-nums small { font: 700 6.5px/1 var(--f-body); color: var(--h-ink2); }
#wksite .rw-nums b { font: 600 12px/1 var(--f-display); font-variant-numeric: tabular-nums; }
#wksite .rw-res { padding: 7px 9px; border-radius: 9px; background: var(--lc-4bbff15); border: 1px solid var(--lc-3e95c0f); display: grid; gap: var(--space-3xs); }
#wksite .rw-res p { font: 600 8.5px/1.3 var(--f-body); }
#wksite .rw-res p b { font: 600 13px/1 var(--f-display); }
#wksite .rw-res span { font: 600 7px/1.3 var(--f-body); color: var(--lc-47677e8); }

/* Insights */
#wksite .in-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); }
#wksite .in-h b { font: 600 13px/1.1 var(--f-display); }
#wksite .in-h span, #wksite .in-ch-h span { font: 700 7px/1 var(--f-body); color: var(--h-mute); }
#wksite .in-h span { padding: 3px 7px; border-radius: 999px; background: var(--lc-d14f901); border: 1px solid var(--h-line); }
#wksite .in-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 7px; }
#wksite .in-k div { padding: var(--space-xs) 9px; border-radius: 11px; background: var(--lc-d14f901); border: 1px solid var(--h-line); display: grid; gap: 3px; }
#wksite .in-k div.warn { border-top: 2px solid var(--lc-bc7db1e); }
#wksite .in-k small { font: 700 7px/1.2 var(--f-body); color: var(--h-mute); }
#wksite .in-k b { font: 600 17px/1 var(--f-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#wksite .in-k .warn b { color: var(--lc-a92f702); }
#wksite .in-k em { font-style: normal; width: fit-content; padding: 1px 5px; border-radius: 999px; background: var(--lc-d61e80f); color: var(--lc-b275e50); font: 800 6.5px/1.3 var(--f-body); }
#wksite .in-ch { padding: 9px 10px 7px; border-radius: 11px; background: var(--lc-d14f901); border: 1px solid var(--h-line); display: grid; gap: 5px; }
#wksite .in-ch-h { display: flex; justify-content: space-between; align-items: center; }
#wksite .in-ch-h b { font: 600 10px/1 var(--f-display); }
#wksite .in-ch-h span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
#wksite .in-ch-h span i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
#wksite .in-ch-h i.g { background: var(--lc-e92bbe0); }
#wksite .in-ch-h i.t { background: var(--lc-897e618); }
#wksite .in-ch rect.g { fill: var(--lc-e92bbe0); }
#wksite .in-ch rect.t { fill: var(--lc-897e618); }
#wksite .in-ch svg { width: 100%; height: 120px; display: block; }
#wksite .in-ch rect { transform-box: fill-box; transform-origin: 50% 100%; }
#wksite .d-view.on .in-ch rect { animation: wk-grow 760ms var(--e-out-lg) both; animation-delay: var(--bd); }
@keyframes wk-grow { from { transform: scaleY(0.04); } }
#wksite .in-x { display: flex; justify-content: space-between; font: 700 7px/1 var(--f-body); color: var(--h-mute); }

/* ---------- TV (layout split). Latar + bingkai = warna brand yang digelapkan (founder 22 Okt: coklat ikut brand pilihan,
   bukan cuma teks berjalan); --tvb diisi film.js saat warna dipilih, bawaan = merah outlet demo seperti layar tamu. ---------- */
#wksite .f-tv {
  --tvb: var(--lc-b8a990e); --tvb-on: var(--lc-c659d63);
  position: absolute; right: 0; top: 0; width: 212px; height: 128px; border-radius: 12px; padding: var(--space-xs) 10px 0; overflow: hidden;
  background: color-mix(in srgb, var(--tvb) 24%, var(--lc-29c308b)); color: var(--lc-886bf73);
  box-shadow: var(--shadow-2), 0 0 0 4px color-mix(in srgb, var(--tvb) 14%, var(--lc-39aefed));
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2xs); transition: background 600ms var(--e-std), box-shadow 600ms var(--e-std);
}
#wksite .tv-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
#wksite .tv-hd b { font: 600 8px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wksite .tv-hd span { font: 700 7px/1 var(--f-body); color: var(--lc-a0c5c4a); white-space: nowrap; }
#wksite .tv-hd i { font-style: normal; color: var(--lc-3c09eb9); letter-spacing: 0.06em; margin-right: var(--space-2xs); }
#wksite .tv-hero { border-radius: 9px; background: var(--lc-2838416); display: grid; place-items: center; align-content: center; gap: 1px; text-align: center; }
#wksite .tv-hero small { font: 800 6.5px/1 var(--f-body); letter-spacing: 0.14em; color: color-mix(in srgb, var(--tvb) 50%, var(--lc-886bf73)); }
#wksite .tv-hero b { font: 600 36px/1 var(--f-display); letter-spacing: -0.02em; }
#wksite .tv-hero span { font: 700 8px/1 var(--f-body); }
#wksite .tv-hero em { font-style: normal; font: 700 7px/1 var(--f-body); color: var(--lc-d337f9e); }
#wksite .f-tv.flash .tv-hero b { animation: wk-tv 900ms var(--e-out) both; }
#wksite .f-tv.flash .tv-hero { animation: wk-tvbg 1.6s var(--e-std) both; }
@keyframes wk-tv { 0% { transform: scale(0.6); opacity: 0; color: color-mix(in srgb, var(--tvb) 50%, var(--lc-886bf73)); } 60% { transform: scale(1.1); opacity: 1; color: color-mix(in srgb, var(--tvb) 50%, var(--lc-886bf73)); } 100% { transform: scale(1); } }
@keyframes wk-tvbg { 0%, 40% { background: color-mix(in srgb, var(--tvb, var(--lc-1f9ef8f)) 35%, transparent); } 100% { background: var(--lc-2838416); } }
#wksite .tv-tk { margin: 0 -10px; padding: var(--space-2xs) 0; background: var(--tvb, var(--lc-1f9ef8f)); color: var(--tvb-on, var(--lc-f63cd00)); white-space: nowrap; overflow: hidden; font: 800 6.5px/1 var(--f-body); }
#wksite .tv-tk span { display: inline-block; padding-left: 100%; animation: wk-ticker 16s linear infinite; }
@keyframes wk-ticker { to { transform: translateX(-100%); } }

/* ---------- HP tamu (Plus Jakarta Sans, tema bawaan) ---------- */
#wksite .f-phone {
  position: absolute; right: 14px; top: 104px; width: 226px; height: 446px; border-radius: 34px; padding: 9px;
  background: var(--lc-ee05572); box-shadow: var(--shadow-3), inset 0 0 0 2px var(--lc-65da196); transition: opacity var(--t-panel) var(--e-std), transform var(--t-panel) var(--e-out);
}
#wksite .f-phone.dim { opacity: 0.55; transform: translateY(8px) scale(0.97); }
#wksite .ph-notch { position: absolute; z-index: 6; left: 50%; top: 15px; width: 62px; height: 17px; border-radius: 12px; background: var(--lc-05b44f3); transform: translateX(-50%); }
#wksite .ph-scr { position: absolute; inset: 9px; border-radius: 26px; overflow: hidden; background: var(--lc-d14f901); padding: 34px var(--space-sm) 0; display: flex; flex-direction: column; gap: var(--space-xs); font-family: var(--g-font); color: var(--g-ink); opacity: var(--wk-js-hide, 1); transform: translateX(16px); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-out); }
#wksite .ph-scr.on { opacity: 1; transform: none; z-index: 2; }
#wksite .ph-scr.out { opacity: var(--wk-js-hide, 1); transform: translateX(-16px); }
#wksite .gh { display: flex; align-items: center; gap: 7px; }
#wksite .gh b { flex: 1; font: 700 9px/1.2 var(--g-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wksite .gl { flex: none; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--g-line); font: 600 7px/1 var(--g-font); color: var(--g-mute); }
#wksite .glogo { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--g-line); background: var(--lc-cbf9b29); color: var(--lc-d8c1bd0); display: grid; place-items: center; font: 800 7px/1 var(--g-font); }
#wksite .glogo.sm { width: 17px; height: 17px; border-radius: 5px; border: 0; font-size: 5.5px; box-shadow: 0 1px 2px var(--lc-f19eb1b); }
#wksite .gs { font: 400 7.5px/1.3 var(--g-font); color: var(--g-mute); margin-top: calc(-1 * var(--space-3xs)); }
#wksite .gp { height: 4px; border-radius: 3px; background: var(--g-surf); overflow: hidden; }
#wksite .gp i { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--lc-1f9ef8f); }
#wksite .gc { display: grid; gap: var(--space-xs); padding: 10px; border-radius: 10px; background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--g-line); }
#wksite .gt { display: flex; align-items: center; gap: 6px; }
#wksite .gt span { width: 14px; height: 14px; border-radius: 50%; background: var(--lc-1f9ef8f); color: var(--lc-d14f901); display: grid; place-items: center; font: 700 7px/1 var(--g-font); }
#wksite .gt b { font: 700 10px/1.2 var(--g-font); }
#wksite .gf { display: grid; gap: 3px; }
#wksite .gf small { font: 600 8px/1.2 var(--g-font); }
#wksite .gf small em { font-style: normal; font-weight: 700; color: var(--lc-0bb769f); }
#wksite .gi { display: flex; align-items: center; min-width: 0; height: 28px; padding: 0 var(--space-xs); border-radius: 8px; border: 1px solid var(--lc-06efbaa); background: var(--lc-d14f901); font: 500 9px/1 var(--g-font); white-space: nowrap; overflow: hidden; }
#wksite .gi.typing::after { content: ""; width: 1.2px; height: 11px; margin-left: 1px; background: var(--lc-1f9ef8f); animation: wk-blink 0.9s steps(1) infinite; }
@keyframes wk-blink { 50% { opacity: 0.2; } }
#wksite .gph { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--space-2xs); }
#wksite .gph i { font-style: normal; height: 28px; border-radius: 10px; border: 1px solid var(--lc-06efbaa); display: grid; place-items: center; font: 600 8.5px/1 var(--g-font); }
#wksite .ghint { font: 400 6.8px/1.3 var(--g-font); color: var(--g-mute); }
#wksite .gpx { display: flex; align-items: center; gap: var(--space-sm); }
#wksite .gpx i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--g-line); display: grid; place-items: center; font: 600 11px/1 var(--g-font); }
#wksite .gpx b { font: 700 10px/1 var(--g-font); }
#wksite .gbar { margin: auto calc(-1 * var(--space-sm)) 0; padding: var(--space-xs) var(--space-sm) 10px; border-top: 1px solid var(--g-line); background: var(--lc-d14f901); display: grid; gap: 5px; }
#wksite .gcta { height: 29px; border-radius: 999px; background: linear-gradient(90deg, var(--lc-1f9ef8f), var(--lc-b907f8d)); color: var(--lc-cdddffc); display: grid; place-items: center; font: 600 9.5px/1 var(--g-font); box-shadow: 0 5px 12px var(--lc-8fa6259); transition: transform var(--t-tap) var(--e-std); }
#wksite .gcta.b { font-weight: 700; }
#wksite .gcta.press { transform: scale(0.95); }
#wksite .gpw { text-align: center; font: 500 6.5px/1 var(--g-font); color: var(--g-mute); }
#wksite .gpw b { font: 700 8px/1 var(--f-display); color: var(--g-ink); }
#wksite .ghero { position: relative; overflow: hidden; border-radius: 16px; padding: var(--space-md) 10px 14px; background: var(--g-surf); display: grid; justify-items: center; gap: 1px; text-align: center; }
#wksite .au { position: absolute; border-radius: 50%; filter: blur(26px); opacity: 0.3; }
#wksite .au.a { width: 110px; height: 90px; left: -20px; top: -14px; background: var(--lc-1f9ef8f); animation: wk-au 12s ease-in-out infinite alternate; }
#wksite .au.b { width: 100px; height: 90px; right: -24px; bottom: -14px; background: var(--lc-1c81215); animation: wk-au2 14s ease-in-out infinite alternate; }
@keyframes wk-au { to { transform: translate(14px, 10px); } }
@keyframes wk-au2 { to { transform: translate(-13px, -9px); } }
#wksite .ghero small { position: relative; font: 700 6.8px/1.3 var(--g-font); letter-spacing: 0.08em; color: var(--g-mute); }
@keyframes wk-grad { to { background-position: -200% 0; } }
#wksite .gperf { position: relative; width: calc(100% + 4px); height: 1.2px; margin: var(--space-2xs) 0 var(--space-xs); background: repeating-linear-gradient(90deg, var(--lc-98f792b) 0 4px, transparent 4px 8px); background-size: 8px 100%; animation: wk-perf 3.2s linear infinite; }
@keyframes wk-perf { to { background-position: 8px 0; } }
#wksite .ghero strong { position: relative; font: 800 29px/1 var(--g-font); letter-spacing: -0.04em; color: var(--g-ink); }
#wksite .gcl { padding: 10px; border-radius: 10px; border: 1px solid var(--g-line); }
#wksite .gcl-r { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; align-items: start; }
#wksite .gcl-r b { display: block; font: 700 9px/1.25 var(--g-font); }
#wksite .gcl-r div span { font: 400 7.3px/1.3 var(--g-font); color: var(--g-mute); }
#wksite .gbell { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--lc-d3b5db3); color: var(--lc-80f33e4); }
#wksite .gbell svg { width: 13px !important; height: 13px !important; }
#wksite .ph-scr.called { padding-top: 0; }
#wksite .gband { margin: 0 calc(-1 * var(--space-sm)); padding: 34px 10px 14px; border-radius: 0 0 18px 18px; background: linear-gradient(135deg, var(--lc-1f9ef8f), var(--lc-b907f8d)); display: grid; justify-items: center; gap: var(--space-3xs); text-align: center; color: var(--lc-cdddffc); }
#wksite .ph-scr.called.on .gband { animation: wk-drop 0.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wk-drop { from { opacity: 0; transform: translateY(-14px); } }
#wksite .gband small { font: 700 6.8px/1.3 var(--g-font); letter-spacing: 0.08em; opacity: 0.85; }
#wksite .gband strong { font: 800 50px/1 var(--g-font); letter-spacing: -0.04em; margin: var(--space-2xs) 0 var(--space-3xs); animation: wk-glow 2.4s ease-in-out infinite; }
@keyframes wk-glow { 50% { text-shadow: 0 4px 18px var(--lc-520f78c); } }
#wksite .gband span { font: 400 8.5px/1.2 var(--g-font); opacity: 0.9; }
#wksite .gband u { font: 600 7.5px/1.3 var(--g-font); margin-top: var(--space-2xs); }
#wksite .ph-scr.called .gh { margin-top: var(--space-3xs); }
#wksite .ghm { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--g-line); display: grid; gap: var(--space-3xs); }
#wksite .ghm b { font: 700 9px/1.2 var(--g-font); }
#wksite .ghm span { font: 400 7.3px/1.35 var(--g-font); color: var(--g-mute); }
#wksite .sc { position: relative; z-index: 1; margin: var(--space-3xs) var(--space-2xs) 0; aspect-ratio: 330 / 208; border-radius: 13px; padding: 9px 11px; display: grid; grid-template-rows: auto 1fr auto; color: var(--lc-e88a409); background: linear-gradient(135deg, var(--lc-cbcf105), var(--lc-74d5943), var(--lc-672eba4), var(--lc-85e3727)); box-shadow: 0 14px 26px -12px var(--lc-d28dc1a), 0 1px 4px var(--lc-711557d); overflow: hidden; }
#wksite .sc::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--lc-ddaf538) 0 1px, var(--lc-c6ddfa7) 1px 2px, transparent 2px 4px); }
#wksite .sc::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, var(--lc-28b516d), transparent); animation: wk-sheen 5s ease-in-out infinite; }
@keyframes wk-sheen { 0%, 60% { transform: translateX(0); } 100% { transform: translateX(475%); } }
#wksite .sc-top { position: relative; display: flex; justify-content: space-between; align-items: center; }
#wksite .sc-lv { display: inline-flex; align-items: center; gap: var(--space-2xs); font: 800 6.3px/1 var(--g-font); letter-spacing: 0.16em; }
#wksite .sc-lv i { width: 6px; height: 6px; border-radius: 1px; background: var(--lc-e88a409); transform: rotate(45deg); }
#wksite .sc-mid { position: relative; display: flex; justify-content: space-between; align-items: center; }
#wksite .sc-n b { font: 800 26px/1 var(--g-font); letter-spacing: -0.04em; display: inline-block; }
#wksite .sc-n span { font: 700 10px/1 var(--g-font); color: var(--lc-121869e); }
#wksite .sc-n small { display: block; font: 800 5.8px/1 var(--g-font); letter-spacing: 0.14em; color: var(--lc-121869e); margin-top: var(--space-3xs); }
#wksite .sc-g { display: grid; grid-template-columns: repeat(5, 12px); gap: var(--space-2xs); }
#wksite .sc-g i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--lc-a0f4850); box-shadow: inset 0 1px 2px var(--lc-325b858), 0 1px 0 var(--lc-911c393); }
#wksite .sc-g i.on { background: var(--lc-e88a409); box-shadow: 0 1px 2px var(--lc-1b4f759); }
#wksite .sc-g i em { position: absolute; inset: 0; border-radius: 50%; background: var(--lc-e88a409); transform: scale(0); opacity: var(--wk-js-hide, 1); }
#wksite .sc-g i em.land { animation: wk-stamp 620ms var(--e-pop) both; }
@keyframes wk-stamp { 0% { transform: scale(2.4) rotate(-30deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
#wksite .sc-cyc { position: relative; font: 600 6.5px/1 var(--g-font); color: var(--lc-121869e); }
#wksite .st { margin-top: -18px; padding: var(--space-lg) 9px 9px; border-radius: 13px; border: 1px solid var(--g-line); display: grid; gap: 5px; }
#wksite .st p { display: flex; justify-content: space-between; gap: 6px; font: 400 7.5px/1.3 var(--g-font); }
#wksite .st p b { font-weight: 700; }
#wksite .st p span:last-child { color: var(--g-mute); white-space: nowrap; }
#wksite .st-p { height: 4px; border-radius: 3px; background: var(--g-surf); overflow: hidden; }
#wksite .st-p i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--lc-569da71); clip-path: inset(0 calc(100% - var(--w, 50%)) 0 0 round 3px); transition: clip-path var(--t-scene) var(--e-out-lg); }
#wksite .st-h { font: 400 6.6px/1.3 var(--g-font); color: var(--g-mute); }
#wksite .wa-c { margin: auto calc(-1 * var(--space-sm)) 0; padding: var(--space-xs) 9px 10px; background: var(--lc-2eddbc6); display: grid; gap: var(--space-2xs); }
#wksite .wa-b { max-width: 96%; padding: 7px var(--space-xs); border-radius: 3px 10px 10px 10px; background: var(--lc-d14f901); font: 400 7.3px/1.35 var(--g-font); box-shadow: 0 1px 1px var(--lc-aa7c1b0); opacity: var(--wk-js-hide, 1); transform: translateY(6px) scale(0.94); transform-origin: 0 0; }
#wksite .wa-b small { display: block; margin-top: var(--space-2xs); font: 400 6px/1.3 var(--g-font); color: var(--g-mute); }
#wksite .wa-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; max-width: 96%; opacity: var(--wk-js-hide, 1); transform: translateY(4px); }
#wksite .wa-btn span { padding: 5px 0; border-radius: 7px; background: var(--lc-d14f901); text-align: center; font: 600 7px/1 var(--g-font); color: var(--lc-92e07b2); }
#wksite .wa-b.on { animation: wk-bub var(--t-panel) var(--e-pop) both; }
#wksite .wa-btn.on { animation: wk-bub var(--t-panel) var(--e-out) both; animation-delay: 160ms; }
@keyframes wk-bub { to { opacity: 1; transform: none; } }
#wksite .ph-nt { position: absolute; z-index: 7; left: 15px; right: 15px; top: 16px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: start; padding: var(--space-xs) 9px; border-radius: 13px; background: var(--lc-ee1be53); box-shadow: 0 12px 24px -10px var(--lc-d28dc1a); font-family: var(--g-font); opacity: var(--wk-js-hide, 1); transform: translateY(-22px) scale(0.96); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-pop); }
#wksite .ph-nt.on { opacity: 1; transform: none; }
#wksite .ph-nt-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--wa); color: var(--lc-d14f901); display: grid; place-items: center; }
#wksite .ph-nt-ic svg { width: 14px !important; height: 14px !important; }
#wksite .ph-nt.push .ph-nt-ic { background: var(--lc-1f9ef8f); color: var(--lc-f63cd00); }
#wksite .ph-nt b { display: block; font: 700 7.5px/1.2 var(--g-font); }
#wksite .ph-nt p { font: 400 7.3px/1.3 var(--g-font); color: var(--lc-cb48e6e); }

/* Kursor */
#wksite .f-cur { position: absolute; z-index: 9; left: 0; top: 0; width: 22px; height: 22px; transform: translate(300px, 500px); opacity: var(--wk-js-hide, 1); transition: transform 900ms var(--e-out-lg), opacity var(--t-card) var(--e-std); pointer-events: none; }
#wksite .f-cur.on { opacity: 1; }
#wksite .f-cur svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px var(--lc-1b67487)); }
#wksite .f-cur i { position: absolute; left: 2px; top: 2px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--lc-1762a7f); transform: scale(0); opacity: var(--wk-js-hide, 1); }
#wksite .f-cur.tap i { animation: wk-tap 520ms var(--e-out) both; }
@keyframes wk-tap { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Bab + caption */
#wksite .f-bar { display: flex; align-items: center; gap: 10px; }
#wksite .f-chs { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#wksite .f-ch { display: grid; gap: 7px; padding: 6px var(--space-3xs) 0; border: 0; background: none; text-align: left; font: 800 13px/1 var(--f-body); color: var(--ink-3); transition: color var(--t-toggle) var(--e-std); }
#wksite .f-ch.on, #wksite .f-ch.past { color: var(--ink); }
#wksite .f-ch i { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
#wksite .f-ch i b { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); }
#wksite .f-ch.past i b { transform: scaleX(1); }
#wksite .f-pp { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); display: grid; place-items: center; color: var(--ink); }
#wksite .f-pp svg { width: 16px; height: 16px; }
#wksite .f-pp .pl { display: none; }
#wksite .film.paused .f-pp .pz { display: none; }
#wksite .film.paused .f-pp .pl { display: block; }
#wksite .f-cap { min-height: 1.5em; font: 700 16px/1.45 var(--f-body); color: var(--ink-2); transition: opacity var(--t-tap) var(--e-std); }
#wksite .f-cap.swap { opacity: 0; }
#wksite .f-cap::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 10px; vertical-align: 2px; }

@media (max-width: 640px) {
  #wksite .f-box { aspect-ratio: 380 / 560; --k: 0.92; }
  #wksite .f-canvas { width: 380px; }
  #wksite .f-dash { left: 0; top: 104px; width: 262px; height: 372px; grid-template-columns: 0 minmax(0, 1fr); }
  #wksite .d-side { display: none; }
  #wksite .d-top { padding: 9px; gap: 5px; }
  #wksite .d-top > b { font-size: 10.5px; max-width: 92px; }
  #wksite .d-top .d-stat { display: none; }
  #wksite .d-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #wksite .d-col[data-col=seat] { display: none; }
  #wksite .d-view { padding: var(--space-xs); }
  #wksite .d-bar .sage:nth-child(2) { display: none; }
  #wksite .d-bar .d-bar-add { width: 70px; }
  #wksite .d-dlg { left: 8px; top: 96px; width: 150px; }
  #wksite .d-view[data-v=profile] { left: 0; }
  #wksite .gd { padding: 10px; gap: 7px; }
  #wksite .gd-b .c4 { grid-column: span 6; }
  #wksite .gd-b .c4:nth-child(3), #wksite .gd-b .c5, #wksite .gd-b .c7 { grid-column: span 12; }
  #wksite .gd-b .gd-hist { display: none; }
  #wksite .rw-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #wksite .rw-nums div:nth-child(n + 4) { display: none; }
  #wksite .in-k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wksite .in-k div.warn { display: none; }
  #wksite .in-ch svg { height: 110px; }
  #wksite .f-tv { right: 0; top: 0; width: 178px; height: 100px; }
  #wksite .tv-hero b { font-size: 28px; }
  #wksite .f-phone { right: 0; top: 112px; width: 206px; height: 432px; }
  #wksite .f-cap { font-size: 15px; }
}
#wksite .d-view[data-v=campaign], #wksite .d-view[data-v=report] { background: var(--h-canvas); }

@media (min-width: 641px) {
  #wksite .d-view[data-v=campaign], #wksite .d-view[data-v=report], #wksite .d-view[data-v=target] { padding-right: 104px; }
  #wksite .d-view[data-v=profile] .gd { padding-right: 104px; }
  #wksite .d-view[data-v=profile] .gd-x { right: 104px; }
}

/* Tema brand outlet demo Kedai Nusantara (merah, sesuai prod) */
#wksite .f-phone { --gb: var(--lc-b8a990e); --gb2: var(--lc-af085da); --gb-soft: var(--lc-8cb405e); --gb-on: var(--lc-c659d63); }
#wksite :is(.f-phone, .wk2-phone) .gp i, #wksite :is(.f-phone, .wk2-phone) .gt span { background: var(--gb); }
#wksite :is(.f-phone, .wk2-phone) .gcta { background: linear-gradient(90deg, var(--gb), var(--gb2)); color: var(--gb-on); box-shadow: 0 5px 12px color-mix(in srgb, var(--gb) 30%, transparent); }
#wksite :is(.f-phone, .wk2-phone) .gi.typing::after { background: var(--gb); }
#wksite :is(.f-phone, .wk2-phone) .au.a { background: var(--gb); }
#wksite :is(.f-phone, .wk2-phone) .au.b { background: var(--gb2); }
#wksite :is(.f-phone, .wk2-phone) .gperf { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gb) 32%, white) 0 4px, transparent 4px 8px); }
#wksite :is(.f-phone, .wk2-phone) .gband { background: linear-gradient(135deg, var(--gb), var(--gb2)); color: var(--gb-on); }
#wksite :is(.f-phone, .wk2-phone) .gband strong { animation-name: wk-glow-w; }
@keyframes wk-glow-w { 50% { text-shadow: 0 4px 18px var(--lc-28b516d); } }
#wksite :is(.f-phone, .wk2-phone) .ph-nt.push .ph-nt-ic { background: var(--gb); color: var(--gb-on); }
#wksite :is(.f-phone, .wk2-phone) .st-p i { background: var(--gb); }
/* Kartu stempel Member (program tanpa level), target 10 */
#wksite .sc.member { background: linear-gradient(135deg, var(--lc-204f097), var(--lc-da0afae), var(--lc-da6d4c6), var(--lc-eb5dcb0)); color: var(--lc-2fc8193); }
#wksite .sc.member::before { background: radial-gradient(120% 90% at 85% 0, var(--lc-46ea816), transparent 55%), radial-gradient(90% 80% at 0 100%, var(--lc-ce0bc30), transparent 60%); }
#wksite .sc.member .sc-n span, #wksite .sc.member .sc-n small, #wksite .sc.member .sc-cyc { color: var(--lc-70b244e); }
#wksite .sc.member .sc-g i { background: var(--lc-7dd6946); }
#wksite .sc.member .sc-g i.on, #wksite .sc.member .sc-g i em { background: var(--lc-2fc8193); }
#wksite .st-lv { padding-bottom: 5px; border-bottom: 1px solid var(--g-line); color: var(--g-mute); }
#wksite .st-lv span:last-child { font-size: 10px; line-height: 0.8; color: var(--lc-06efbaa); }
#wksite .st-ok { display: none; padding: 5px var(--space-xs); border-radius: 8px; background: var(--lc-7adc1a2); font: 400 7.3px/1.3 var(--g-font); color: var(--g-ink); }
#wksite .st-ok.on { display: block; animation: wk-up var(--t-panel) var(--e-out) both; }

/* HP: potongan kamera, satu perangkat per adegan (film.js mengatur data-focus) */
@media (max-width: 640px) {
  #wksite .f-dash, #wksite .f-tv, #wksite .f-phone { transition: opacity 460ms var(--e-std), transform 640ms var(--e-out-lg); }
  #wksite .f-phone { left: 77px; right: auto; top: 44px; width: 226px; height: 446px; }
  #wksite .f-dash { left: 0; top: 40px; width: 290px; height: 360px; transform-origin: 0 0; transform: scale(1.31); }
  #wksite .d-top > b { max-width: 118px; }
  #wksite .f-tv { left: 4px; right: auto; top: 150px; width: 212px; height: 128px; transform-origin: 0 0; transform: scale(1.75); }
  #wksite .tv-hero b { font-size: 36px; }
  #wksite .f-canvas .f-dash, #wksite .f-canvas .f-tv { opacity: 0; pointer-events: none; }
  #wksite .f-canvas[data-focus=dash] .f-dash, #wksite .f-canvas[data-focus=tv] .f-tv { opacity: 1; }
  #wksite .f-canvas:not([data-focus=dash]) .f-dash { transform: translateY(12px) scale(1.26); }
  #wksite .f-canvas:not([data-focus=tv]) .f-tv { transform: translateY(12px) scale(1.68); }
  #wksite .f-canvas[data-focus=dash] .f-phone, #wksite .f-canvas[data-focus=tv] .f-phone { opacity: var(--wk-js-hide, 1); transform: translateY(18px) scale(0.95); }
  #wksite .f-chs { gap: 6px; }
  #wksite .f-ch { font-size: 12px; white-space: nowrap; letter-spacing: -0.01em; }
}

/* ---------- 22 Okt: bab aktif (film.js data-bab). TV hanya di bab Dipanggil; bab Tumbuh fokus data (HP dan TV disembunyikan) ---------- */
@media (min-width: 641px) {
  #wksite .f-tv, #wksite .f-dash { transition: opacity 460ms var(--e-std), transform 640ms var(--e-out-lg); }
  #wksite .f-canvas:not([data-bab="1"]) .f-tv { opacity: var(--wk-js-hide, 1); transform: translateY(-10px) scale(.96); pointer-events: none; }
  #wksite .f-canvas[data-bab="4"] .f-phone { opacity: var(--wk-js-hide, 1); transform: translateY(16px) scale(.96); pointer-events: none; }
  #wksite .f-canvas[data-bab="4"] .f-dash { transform: translateX(75px); }
}

/* Mode Bisnis (bab Tumbuh): menu Insights, outlet aktif = Semua outlet, tanpa tombol operasional */
#wksite .d-side .biz-nav, #wksite .f-dash .biz { display: none; }
#wksite .f-dash.biz .d-side .biz-nav { display: grid; }
#wksite .f-dash.biz .d-side .ops-nav, #wksite .f-dash.biz .ops, #wksite .f-dash.biz .d-live, #wksite .f-dash.biz .d-wait, #wksite .f-dash.biz .d-stat { display: none; }
#wksite .f-dash.biz .d-card .biz, #wksite .f-dash.biz .d-top b.biz { display: block; }
#wksite .f-dash.biz .d-top b.biz { max-width: none; font: 400 13px/1.2 var(--f-display); }
#wksite .f-dash.biz .d-mode span:first-child { background: none; box-shadow: none; color: var(--h-ink2); }
#wksite .f-dash.biz .d-mode span:last-child { background: var(--lc-d14f901); color: var(--h-ink); box-shadow: 0 1px 2px var(--lc-67cac16); }
#wksite .f-dash.biz .d-add, #wksite .f-dash.biz .d-bar { visibility: hidden; }

/* Kirim promo > Buat target sendiri (campaign_v3): syarat bertambah, jumlah tamu dihitung ulang, kirim */
#wksite .d-view[data-v=target] { background: var(--h-canvas); }
#wksite .tg { padding: 11px var(--space-sm); border-radius: 12px; background: var(--lc-d14f901); border: 1px solid var(--h-line); display: grid; gap: 7px; }
#wksite .tg-h { display: flex; justify-content: space-between; align-items: baseline; }
#wksite .tg-h > b { font: 600 11px/1.1 var(--f-display); }
#wksite .tg-n { font: 700 8.5px/1 var(--f-body); color: var(--h-mute); }
#wksite .tg-n em { font: 600 22px/1 var(--f-display); font-style: normal; color: var(--h-ink); font-variant-numeric: tabular-nums; margin-right: 3px; }
#wksite .tg-l { margin: 0; padding: 7px 9px; border-radius: 9px; background: var(--h-sunk); font: 700 9px/1.5 var(--f-body); color: var(--h-ink2); opacity: var(--wk-js-hide, 1); transform: translateY(6px); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-out); }
#wksite .tg-l.on { opacity: 1; transform: none; }
#wksite .tg-l i { font-style: normal; padding: 1px 6px; border-radius: 999px; background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--h-line); color: var(--h-ink); }
#wksite .tg-tpl { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--h-line); font: 700 8px/1.2 var(--f-body); color: var(--h-mute); }
#wksite .tg-tpl b { font: 800 9px/1 var(--f-body); color: var(--h-ink); }
#wksite .tg-tpl em { margin-left: auto; font-style: normal; padding: 3px 6px; border-radius: 999px; background: var(--lc-6c2ae4f); color: var(--lc-b275e50); }
#wksite .tg-rows { display: grid; gap: var(--space-2xs); }
#wksite .tg-rows p { display: flex; justify-content: space-between; margin: 0; font: 700 8.5px/1.3 var(--f-body); color: var(--h-mute); }
#wksite .tg-rows b { color: var(--h-ink); font-variant-numeric: tabular-nums; }
#wksite .tg-act { display: flex; align-items: center; gap: var(--space-xs); }
#wksite .tg-go { padding: 6px var(--space-md); border-radius: 999px; background: var(--lc-1f9ef8f); font: 800 9px/1 var(--f-body); color: var(--h-ink); transition: transform var(--t-tap) var(--e-std), opacity var(--t-card) var(--e-std); }
#wksite .tg-go.press { transform: scale(0.94); }
#wksite .tg-go.done { opacity: 0.45; }
#wksite .tg-sent { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 5px 9px; border-radius: 999px; background: var(--lc-6c2ae4f); color: var(--lc-b275e50); font: 800 8.5px/1 var(--f-body); opacity: var(--wk-js-hide, 1); transform: translateX(-6px); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-out); }
#wksite .tg-sent.on { opacity: 1; transform: none; }
#wksite .tg-sent svg { width: 9px !important; height: 9px !important; }

/* Analitik Pusat (lensa pusat): KPI gabungan + komparasi cabang, hijau terbaik, oranye terburuk, angka x tertinggal */
#wksite .d-view[data-v=pusat] { background: var(--h-canvas); display: grid; align-content: start; gap: var(--space-xs); }
#wksite .pz-h { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
#wksite .pz-h b { display: block; font: 600 13px/1.1 var(--f-display); }
#wksite .pz-h small { font: 600 7.5px/1 var(--f-body); color: var(--h-mute); }
#wksite .pz-dl { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 5px 9px; border-radius: 999px; background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--h-line); font: 800 8px/1 var(--f-body); }
#wksite .pz-dl svg { width: 9px !important; height: 9px !important; }
#wksite .pz-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#wksite .pz-k div { padding: var(--space-xs) 9px; border-radius: 10px; background: var(--lc-d14f901); border: 1px solid var(--h-line); display: grid; gap: 3px; }
#wksite .pz-k small { font: 700 7.5px/1 var(--f-body); color: var(--h-mute); }
#wksite .pz-k b { font: 600 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
#wksite .pz-k em { justify-self: start; font-style: normal; padding: var(--space-3xs) 6px; border-radius: 999px; background: var(--lc-6c2ae4f); color: var(--lc-b275e50); font: 800 7px/1.2 var(--f-body); }
#wksite .pz-c { padding: 9px 10px; border-radius: 12px; background: var(--lc-d14f901); border: 1px solid var(--h-line); display: grid; gap: 6px; }
#wksite .pz-ch { display: flex; justify-content: space-between; align-items: center; }
#wksite .pz-ch b { font: 600 10.5px/1 var(--f-display); }
#wksite .pz-ch span { display: inline-flex; align-items: center; gap: var(--space-2xs); font: 700 7px/1 var(--f-body); color: var(--h-mute); }
#wksite .pz-ch i { width: 7px; height: 7px; border-radius: 2px; }
#wksite .pz-ch i.g, #wksite .pz-r span.g { background: var(--lc-6c2ae4f); }
#wksite .pz-ch i.o, #wksite .pz-r span.o { background: var(--lc-bec8699); }
#wksite .pz-t { display: grid; gap: 3px; }
#wksite .pz-r { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: 3px; }
#wksite .pz-r span { position: relative; padding: 6px 7px; border-radius: 7px; font: 700 9px/1.1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--h-ink); overflow: hidden; }
#wksite .pz-r span:first-child { color: var(--h-mute); padding-left: 0; }
#wksite .pz-r.hd span { padding-top: 0; padding-bottom: var(--space-3xs); font-size: 7.5px; color: var(--h-mute); }
#wksite .pz-r span.g { color: var(--lc-b275e50); }
#wksite .pz-r span.o { color: var(--lc-e6b5346); }
#wksite .pz-r span em { font-style: normal; font-size: 7.5px; opacity: .85; }
#wksite .pz-r span i { position: absolute; left: 7px; bottom: 3px; height: 2px; width: calc(var(--w) - 14px); border-radius: 2px; background: currentColor; opacity: .55; transform-origin: left; }
#wksite .d-view[data-v=pusat].on .pz-r:not(.hd) { animation: wk-up var(--t-panel) var(--e-out) both; animation-delay: calc(var(--r) * 90ms + 200ms); }
#wksite .d-view[data-v=pusat].on .pz-r span i { animation: pz-bar .9s var(--e-out) .5s both; }
@keyframes pz-bar { from { transform: scaleX(0); } }
#wksite .pz-r span[data-pz-hot] { transition: box-shadow var(--t-card) var(--e-std); }
#wksite .pz-r span[data-pz-hot].hot { box-shadow: 0 0 0 1.5px var(--lc-e4ee0e2); }
@media (max-width: 640px) {
  #wksite .pz-k b { font-size: 16px; }
  #wksite .pz-k em { display: none; }
  #wksite .pz-dl { display: none; }
  #wksite .pz-r span { padding: 5px var(--space-2xs); font-size: 8px; }
  #wksite .tg-tpl span { display: none; }
}

/* ---------- 22 Okt: layar tamu = prod v1.2.11644 (ref/tamu-2026-10-22) ---------- */
#wksite .gl.c { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
#wksite .gcl { display: grid; gap: var(--space-xs); }
#wksite .gcl-s { display: grid; gap: var(--space-3xs); padding-top: 7px; border-top: 1px solid var(--g-line); }
#wksite .gcl-s b { font: 700 9px/1.25 var(--g-font); }
#wksite .gcl-s span { font: 400 7.3px/1.3 var(--g-font); color: var(--g-mute); }
#wksite .gcl-r + .gcl-s + .gcl-r { padding-top: 7px; border-top: 1px solid var(--g-line); }
#wksite .gwa { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--lc-25c2492); color: var(--lc-36a068a); }
#wksite .gwa svg { width: 13px !important; height: 13px !important; }
#wksite .gwa-b { display: inline-flex; margin-top: 5px; padding: 6px 11px; border-radius: 999px; background: var(--lc-8fc3840); color: var(--lc-d14f901); font: 700 7.5px/1 var(--g-font); font-style: normal; }
#wksite .ph-scr.called .sc { margin-top: 0; }
#wksite .st-plus { display: none; padding: 5px var(--space-xs); border-radius: 8px; background: var(--g-surf); font: 600 7.3px/1.3 var(--g-font); color: var(--g-ink); }
#wksite .st-plus.on { display: block; animation: wk-up var(--t-panel) var(--e-out) both; }
#wksite .st-rw { display: none; padding: 6px 7px; border-radius: 9px; background: var(--g-surf); }
#wksite .st-rw.on { display: grid; gap: var(--space-2xs); animation: wk-up var(--t-panel) var(--e-out) both; }
#wksite .st-rw small { font: 800 6px/1 var(--g-font); letter-spacing: 0.1em; color: var(--g-mute); }
#wksite .st-rw div { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
#wksite .st-no { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--lc-d14f901); font: 800 8px/1 var(--g-font); }
#wksite .st-rw p { display: grid; gap: 1px; margin: 0; }
#wksite .st-rw p b { font: 700 8.5px/1.2 var(--g-font); }
#wksite .st-rw p span { font: 400 6.6px/1.2 var(--g-font); color: var(--g-mute); }
#wksite .st-rw i { padding: 5px 9px; border-radius: 999px; background: linear-gradient(90deg, var(--lc-1f9ef8f), var(--lc-b907f8d)); font: 700 7.5px/1 var(--g-font); font-style: normal; color: var(--lc-cdddffc); }
#wksite .ph-scr.wa { padding: 0; gap: 0; background: var(--lc-384d0ca); }
#wksite .wa-h { display: flex; align-items: center; gap: 7px; padding: 32px 10px var(--space-xs); background: var(--lc-d14f901); border-bottom: 1px solid var(--g-line); }
#wksite .wa-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lc-ca46cb7); }
#wksite .wa-av .d-dot { width: 11px; height: 11px; }
#wksite .wa-h b { display: block; font: 700 9px/1.2 var(--g-font); }
#wksite .wa-h small { font: 500 6.8px/1.2 var(--g-font); color: var(--g-mute); }
#wksite .ph-scr.wa .wa-c { margin: 0; padding: 10px; background: transparent; align-content: start; gap: 5px; }
#wksite .wa-day { justify-self: center; padding: 3px 7px; border-radius: 6px; background: var(--lc-e66e271); font: 600 6.5px/1 var(--g-font); color: var(--g-mute); }
/* HP: sidebar disembunyikan, jadi isi dasbor wajib mengisi satu-satunya kolom (sebelumnya jatuh ke kolom selebar 0) */
@media (max-width: 640px) { #wksite .f-dash { grid-template-columns: minmax(0, 1fr); } #wksite .d-main { grid-column: 1; min-width: 0; } }

/* 22 Okt: logo outlet ikut warna brand; warna berganti halus (Chrome/Safari baru: @property) */
@property --gb { syntax: '<color>'; inherits: true; initial-value: #BE0909; }
@property --gb2 { syntax: '<color>'; inherits: true; initial-value: #A30808; }
#wksite .f-phone { transition: opacity var(--t-panel) var(--e-std), transform var(--t-panel) var(--e-out), --gb .45s var(--e-std), --gb2 .45s var(--e-std); }
#wksite :is(.f-phone, .wk2-phone) .glogo:not(.sm) { background: var(--gb2); color: var(--gb-on); border-color: transparent; }
/* Tiket menunggu: hero tidak boleh menyusut (A12 terpotong); bilah tombol menempel di bawah seperti aplikasi, kartu lain lewat di bawahnya */
#wksite .ph-scr[data-s=ticket] > * { flex-shrink: 0; }
#wksite .ph-scr[data-s=ticket] .gbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; }
/* Pemilih warna brand di bawah film */
#wksite .f-theme { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
#wksite .f-th-l { font: 800 13.5px/1.2 var(--f-body); color: var(--ink); }
#wksite .f-sws { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#wksite .f-sw { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: var(--c); box-shadow: 0 0 0 2px var(--lc-d14f901), 0 0 0 3px var(--line-2); cursor: pointer; transition: transform var(--t-tap) var(--e-std), box-shadow var(--t-tap) var(--e-std); }
#wksite .f-sw:hover { transform: scale(1.1); }
#wksite .f-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--lc-d14f901), 0 0 0 4px var(--ink); }
#wksite .f-sw-c { display: inline-grid; background: conic-gradient(var(--lc-37118c7), var(--lc-7437b68), var(--lc-41fbf18), var(--lc-7b66c35), var(--lc-8e1a301), var(--lc-70a9309), var(--lc-37118c7)); overflow: hidden; }
#wksite .f-sw-c input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { #wksite .f-phone { transition: none; } }

/* Adegan scan QR (bab Datang, 22 Okt): kamera HP membidik kartu meja, bingkai mengunci, tautan muncul lalu diketuk */
#wksite .ph-scr.qs { padding: 0; background: var(--lc-8d8d64b); }
#wksite .qs-cam { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 60%, var(--lc-b6fd96f), var(--lc-870b6f4) 70%, var(--lc-29c308b)); }
#wksite .qs-tent { display: grid; justify-items: center; gap: 6px; width: 62%; padding: var(--space-sm) 10px 10px; border-radius: 12px; background: var(--lc-311d3d5); color: var(--lc-6ed8d25); box-shadow: 0 18px 30px var(--lc-d28dc1a); transform: perspective(400px) rotateX(10deg); }
#wksite .qs-tent small { font: 800 6.5px/1.2 var(--g-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lc-e7025a2); text-align: center; }
#wksite .qs-tent b { font: 800 8.5px/1 var(--g-font); }
#wksite .qs-qr { width: 78%; height: auto; color: var(--lc-6ed8d25); }
#wksite .ph-scr.qs.on .qs-tent { animation: qs-zoom 1.3s var(--e-out-lg) both; }
@keyframes qs-zoom { from { transform: perspective(400px) rotateX(18deg) scale(0.78); filter: blur(1.5px); } }
#wksite .qs-fr { position: absolute; width: 24px; height: 24px; border: 3px solid var(--lc-d14f901); opacity: 0.9; }
#wksite .qs-fr.tl { left: 18%; top: 24%; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
#wksite .qs-fr.tr { right: 18%; top: 24%; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
#wksite .qs-fr.bl { left: 18%; bottom: 30%; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
#wksite .qs-fr.br { right: 18%; bottom: 30%; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
#wksite .ph-scr.qs.on .qs-fr { animation: qs-lock .5s var(--e-out) .7s both; }
@keyframes qs-lock { to { border-color: var(--lc-014102c); opacity: 1; } }
#wksite .qs-line { position: absolute; left: 22%; right: 22%; top: 30%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--lc-014102c), transparent); opacity: 0; }
#wksite .ph-scr.qs.on .qs-line { animation: qs-scan .9s var(--e-std) .1s both; }
@keyframes qs-scan { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px); } }
#wksite .qs-link { position: absolute; left: 50%; bottom: 46px; display: flex; align-items: center; gap: 7px; padding: 7px var(--space-sm) 7px 9px; border-radius: 999px; background: var(--lc-014102c); color: var(--lc-6ed8d25); box-shadow: 0 8px 18px var(--lc-1b4f759); white-space: nowrap; opacity: var(--wk-js-hide, 1); transform: translate(-50%, 10px) scale(0.96); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-out); }
#wksite .qs-link.on { opacity: 1; transform: translate(-50%, 0); }
#wksite .qs-link.press { transform: translate(-50%, 0) scale(0.94); }
#wksite .qs-link svg { width: 14px !important; height: 14px !important; }
#wksite .qs-link b { display: block; font: 800 8.5px/1.1 var(--g-font); }
#wksite .qs-link small { font: 600 6.8px/1.1 var(--g-font); opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { #wksite .ph-scr.qs.on .qs-tent, #wksite .ph-scr.qs.on .qs-fr, #wksite .ph-scr.qs.on .qs-line { animation: none; } #wksite .qs-fr { border-color: var(--lc-014102c); } }

/* 22 Okt: TV ikut warna brand (film.js setBrand), transisi halus */
@property --tvb { syntax: '<color>'; inherits: true; initial-value: #F4A91F; }
#wksite .f-tv { transition: opacity 460ms var(--e-std), transform 640ms var(--e-out-lg), --tvb .45s var(--e-std); }
/* Notifikasi di HP lebih besar dan menonjol; WhatsApp diberi cincin hijau */
#wksite .ph-nt { left: 7px; right: 7px; top: 12px; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-xs); padding: 10px 11px; border-radius: 16px; box-shadow: 0 16px 32px var(--lc-914e255); }
#wksite .ph-nt:not(.push) { box-shadow: 0 0 0 2px var(--lc-80207c7), 0 16px 32px var(--lc-914e255); }
#wksite .ph-nt-ic { width: 30px; height: 30px; border-radius: 8px; }
#wksite .ph-nt-ic svg { width: 18px !important; height: 18px !important; }
#wksite .ph-nt b { font-size: 9px; }
#wksite .ph-nt p { font-size: 8.4px; line-height: 1.35; }
#wksite .ph-nt.on { animation: nt-pop .5s var(--e-pop) both; }
@keyframes nt-pop { 0% { transform: translateY(-14px) scale(.94); opacity: 0; } 60% { transform: translateY(2px) scale(1.03); opacity: 1; } 100% { transform: none; } }
/* Bab Datang: pilih Waitlist atau Reservasi (buku tamu digital) */
#wksite .ch-t { display: grid; gap: 3px; margin-top: var(--space-2xs); }
#wksite .ch-t b { font: 800 11.5px/1.25 var(--g-font); }
#wksite .ch-t small { font: 500 7.3px/1.35 var(--g-font); color: var(--g-mute); }
#wksite .ch-o { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 9px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--g-line); transition: border-color var(--t-card) var(--e-std), box-shadow var(--t-card) var(--e-std), transform var(--t-tap) var(--e-std); }
#wksite .ch-o.press { transform: scale(.97); }
#wksite .ch-o.pick { border-color: var(--gb); box-shadow: 0 0 0 1px var(--gb); }
#wksite .ch-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--g-surf); color: var(--gb); }
#wksite .ch-ic svg { width: 15px !important; height: 15px !important; }
#wksite .ch-o b { display: block; font: 800 10px/1.2 var(--g-font); }
#wksite .ch-o small { font: 500 7.3px/1.2 var(--g-font); color: var(--g-mute); }
#wksite .ch-o em { grid-column: 2; justify-self: start; padding: var(--space-3xs) 6px; border-radius: 999px; background: var(--lc-6c2ae4f); color: var(--lc-b275e50); font: 700 6.5px/1.2 var(--g-font); font-style: normal; }
#wksite .ch-gb { display: flex; align-items: center; gap: 6px; margin: var(--space-3xs) 0 0; padding: var(--space-xs) 9px; border-radius: 10px; background: var(--lc-ca46cb7); font: 600 7.2px/1.35 var(--g-font); color: var(--lc-25a20ef); }
#wksite .ch-gb svg { width: 13px !important; height: 13px !important; flex: none; }
/* Analitik Pusat lebih dramatis: 4 KPI, baris pendapatan bergaris, rating & komplain bertanda Internal, kotak insight */
#wksite .pz-k { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#wksite .pz-k b { font-size: 17px; }
#wksite .pz-r.rev span { font-weight: 800; }
#wksite .pz-r.int > span:first-child { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
#wksite .pz-lock { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 1px var(--space-2xs); border-radius: 999px; background: var(--lc-f63cd00); color: var(--lc-886bf73); font: 800 5.6px/1.3 var(--f-body); font-style: normal; letter-spacing: .03em; }
#wksite .pz-lock svg { width: 6px !important; height: 6px !important; }
#wksite .pz-r.int span:not(:first-child) { background-image: repeating-linear-gradient(135deg, var(--lc-e1eaef6) 0 4px, transparent 4px 8px); }
#wksite .pz-call { margin: 0; padding: 6px var(--space-xs); border-radius: 8px; background: var(--lc-bec8699); color: var(--lc-01b6570); font: 700 7.6px/1.35 var(--f-body); display: flex; gap: 5px; align-items: center; opacity: var(--wk-js-hide, 1); transform: translateY(-4px); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-out); }
#wksite .pz-call.on { opacity: 1; transform: none; }
#wksite .pz-call svg { width: 9px !important; height: 9px !important; flex: none; }
#wksite .pz-r { gap: var(--space-3xs); }
#wksite .pz-r span { padding: var(--space-2xs) 6px; }
#wksite .d-view[data-v=pusat].on .pz-r span.o { animation: pz-warn 1.6s var(--e-std) 1.4s 2; }
@keyframes pz-warn { 50% { background: var(--lc-26a5a36); } }
@media (max-width: 640px) { #wksite .pz-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } #wksite .pz-k b { font-size: 15px; } #wksite .pz-call { font-size: 7px; } }
/* Ajakan coba warna: gelombang kecil di bulatan warna sampai pengunjung memilih; pilihan memantul + riak */
#wksite .f-theme.invite .f-sw { animation: wk-sw-wave 4800ms var(--e-out) infinite; animation-delay: calc(1200ms + var(--k, 0) * 90ms); }
#wksite .f-theme.invite .f-th-l::after { content: " \2192"; display: inline-block; color: var(--gold-text); animation: wk-th-nudge 1600ms var(--e-std) infinite; }
#wksite .f-sw::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c, var(--ink)); opacity: 0; pointer-events: none; }
#wksite .f-sw.pop { animation: wk-sw-pop 560ms var(--e-pop); }
#wksite .f-sw.pop::after { animation: wk-sw-ring 700ms var(--e-out) both; }
@keyframes wk-sw-wave { 0%, 14%, 100% { transform: none; } 5% { transform: translateY(-5px) scale(1.14); } 9% { transform: translateY(1px) scale(.97); } }
@keyframes wk-th-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
@keyframes wk-sw-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes wk-sw-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { #wksite .f-theme.invite .f-sw, #wksite .f-theme.invite .f-th-l::after, #wksite .f-sw.pop, #wksite .f-sw.pop::after { animation: none; } }

/* ===== welkam-landing/src/css/55-prodviz.css (replika app, rupa tidak diubah; aturan .gcount yang tak terpakai disaring; animasi lebar/posisi jadi transform, tools/hallmark-css.mjs) ===== */
/* Replika kecil per fitur. Animasi hanya untuk .pv.on, dan berhenti saat seksi produk tak terlihat. */
#wksite #produk:not(.vis) .pv *, #wksite #produk:not(.vis) .pv *::before, #wksite #produk:not(.vis) .pv *::after { animation-play-state: paused !important; }
#wksite .mv { width: min(84%, 500px); border-radius: 22px; background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--line), var(--shadow-3); padding: 20px; display: grid; gap: var(--space-sm); font: 700 13px/1.35 var(--f-body); position: relative; zoom: 1.08; }
#wksite .mv-h { display: flex; justify-content: space-between; align-items: center; }
#wksite .mv-h b { font: 600 17px/1 var(--f-display); }
#wksite .mv-h span { font: 800 12px/1 var(--f-body); color: var(--ink-3); padding: 5px 10px; border-radius: 999px; background: var(--paper-2); }
#wksite .pstage .pv::after { content: "Contoh data"; position: absolute; left: 16px; bottom: 12px; font: 800 10.5px/1 var(--f-body); letter-spacing: 0.06em; color: var(--lc-0a318b2); }

/* Waitlist */
#wksite .mv-tk { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px var(--space-sm); border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
#wksite .mv-tk b { font: 600 18px/1 var(--f-display); text-align: center; }
#wksite .mv-tk span { font: 700 12px/1.3 var(--f-body); color: var(--ink-3); }
#wksite .mv-tk em { font-style: normal; display: block; font: 800 14px/1.2 var(--f-body); color: var(--ink); }
#wksite .mv-tk i { font-style: normal; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 800 12px/1 var(--f-body); }
#wksite .pv.on .mv-tk.hot i { animation: wk-press 4.2s var(--e-std) infinite; }
@keyframes wk-press { 0%, 30% { transform: none; box-shadow: none; } 34% { transform: scale(0.9); box-shadow: 0 0 0 7px var(--lc-98cd3e1); } 40%, 100% { transform: none; box-shadow: none; } }
#wksite .mv-toast { position: absolute; left: 50%; bottom: -16px; transform: translate(-50%, 0); display: inline-flex; align-items: center; gap: var(--space-xs); padding: 10px var(--space-md); border-radius: 999px; background: var(--ink); color: var(--lc-d14f901); font: 800 12.5px/1 var(--f-body); white-space: nowrap; box-shadow: var(--shadow-2); opacity: 0; }
#wksite .mv-toast svg { width: 16px; height: 16px; color: var(--lc-898d60b); }
#wksite .pv.on .mv-toast { animation: wk-toast 4.2s var(--e-out) infinite; }
@keyframes wk-toast { 0%, 38% { opacity: 0; transform: translate(-50%, 10px); } 44%, 86% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; transform: translate(-50%, 0); } }

/* Reservasi */
#wksite .rs-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
#wksite .rs-g small { font: 800 10.5px/1 var(--f-body); color: var(--ink-3); padding-bottom: var(--space-3xs); }
#wksite .rs-g i { font-style: normal; aspect-ratio: 1.4; border-radius: 8px; display: grid; place-items: center; font: 700 11.5px/1 var(--f-body); color: var(--ink-2); background: var(--paper); }
#wksite .rs-g i.bk { background: var(--brand-soft); color: var(--brand-ink); }
#wksite .rs-g i.sel { background: var(--ink); color: var(--lc-d14f901); }
#wksite .pv.on .rs-g i.sel { animation: wk-sel 3.6s var(--e-std) infinite; }
@keyframes wk-sel { 0%, 20% { background: var(--brand-soft); color: var(--brand-ink); } 26%, 100% { background: var(--ink); color: var(--lc-d14f901); } }
#wksite .rs-c { display: grid; gap: 3px; padding: var(--space-sm) 14px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
#wksite .rs-c b { font: 600 15px/1.2 var(--f-display); }
#wksite .rs-c span { color: var(--ink-3); font-size: 12.5px; }
#wksite .rs-c em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2xs); color: var(--ok); font: 800 12px/1 var(--f-body); }
#wksite .rs-c em svg { width: 14px; height: 14px; }
#wksite .pv.on .rs-c em { animation: wk-fadein 3.6s var(--e-out) infinite; }
@keyframes wk-fadein { 0%, 40% { opacity: 0; transform: translateY(4px); } 50%, 100% { opacity: 1; transform: none; } }

/* Meja */
#wksite .mj-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#wksite .mj-g i { aspect-ratio: 1.25; border-radius: 12px; display: grid; place-items: center; font-style: normal; background: var(--lc-6c2ae4f); color: var(--lc-b275e50); transition: background-color var(--t-card) var(--e-std); }
#wksite .mj-g i b { font: 600 16px/1 var(--f-display); }
#wksite .pv.on .mj-g i { animation: wk-table 7.2s steps(1) infinite; animation-delay: var(--md); }
@keyframes wk-table { 0% { background: var(--lc-6c2ae4f); color: var(--lc-b275e50); } 33% { background: var(--lc-ab09b31); color: var(--lc-c9059b4); } 66% { background: var(--lc-45469a1); color: var(--lc-1e62a97); } }
#wksite .mj-l { display: flex; flex-wrap: wrap; gap: 14px; font: 800 11.5px/1 var(--f-body); color: var(--ink-3); }
#wksite .mj-l span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#wksite .mj-l .f::before { background: var(--lc-afc4704); } #wksite .mj-l .o::before { background: var(--lc-9adff52); } #wksite .mj-l .c::before { background: var(--lc-d999514); }

/* TV */
#wksite .mv-tv { background: var(--lc-1187a23); color: var(--lc-886bf73); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; box-shadow: 0 0 0 6px var(--lc-30b4c6f), var(--shadow-3); }
#wksite .tv-s { display: grid; place-items: center; text-align: center; gap: var(--space-2xs); padding: 18px 6px; border-radius: 14px; background: var(--lc-ffbe15f); }
#wksite .tv-s small, #wksite .tv-n small { font: 800 10px/1 var(--f-body); letter-spacing: 0.16em; color: var(--brand); }
#wksite .tv-s b { font: 600 64px/1 var(--f-display); }
#wksite .pv.on .tv-s b { animation: wk-tvpulse 2.4s var(--e-std) infinite; }
@keyframes wk-tvpulse { 0%, 100% { color: var(--lc-886bf73); } 50% { color: var(--brand); } }
#wksite .tv-s span { font: 700 12px/1 var(--f-body); color: var(--lc-a0c5c4a); }
#wksite .tv-n { display: grid; gap: var(--space-xs); align-content: center; }
#wksite .tv-n i { font-style: normal; padding: var(--space-xs) 10px; border-radius: 10px; background: var(--lc-2838416); font: 600 20px/1 var(--f-display); text-align: center; }
#wksite .tv-p { grid-column: 1 / -1; overflow: hidden; border-radius: 10px; background: var(--lc-7270fe3); padding: 9px 0; white-space: nowrap; font: 700 12px/1 var(--f-body); }
#wksite .tv-p span { display: inline-block; padding-left: 100%; }
#wksite .pv.on .tv-p span { animation: wk-ticker 9s linear infinite; }
@keyframes wk-ticker { to { transform: translateX(-100%); } }

/* Kasir */
#wksite .mv-ks { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
#wksite .ks-l { display: grid; gap: var(--space-xs); align-content: start; }
#wksite .ks-l p { display: flex; justify-content: space-between; gap: 10px; font: 700 12.5px/1.3 var(--f-body); color: var(--ink-2); padding: 6px 0; border-bottom: 1px dashed var(--line-2); }
#wksite .ks-l p.tot { border: 0; font: 600 16px/1 var(--f-display); color: var(--ink); padding-top: var(--space-xs); }
#wksite .ks-r { display: grid; gap: 7px; align-content: start; padding: var(--space-sm); border-radius: 14px; background: var(--paper); }
#wksite .ks-r small { font: 800 11px/1 var(--f-body); color: var(--ink-3); }
#wksite .ks-r i { font-style: normal; height: 32px; border-radius: 10px; background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; font: 800 12.5px/1 var(--f-body); }
#wksite .ks-r i.on { background: var(--ink); color: var(--lc-d14f901); box-shadow: none; }
#wksite .ks-r em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font: 800 11.5px/1.2 var(--f-body); color: var(--ok); margin-top: var(--space-3xs); }
#wksite .ks-r em svg { width: 14px; height: 14px; flex: none; }
#wksite .pv.on .ks-r em { animation: wk-fadein 3.6s var(--e-out) infinite; }

/* Menu */
#wksite .mv-mn p { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px 56px; gap: 10px; align-items: center; padding: 9px var(--space-2xs); border-bottom: 1px solid var(--line); font: 700 13px/1.2 var(--f-body); }
#wksite .mv-mn p b { font: 600 13.5px/1 var(--f-display); }
#wksite .mv-mn p i { width: 34px; height: 20px; border-radius: 999px; background: var(--ok); position: relative; }
#wksite .mv-mn p i em { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--lc-d14f901); transform: translateX(14px); transition: transform var(--t-toggle) var(--e-std); }
#wksite .mv-mn p.out i { background: var(--lc-27bee0e); }
#wksite .mv-mn p.out i em { transform: none; }
#wksite .mv-mn p small { font: 800 11px/1 var(--f-body); color: var(--ok); }
#wksite .mv-mn p.out small { color: var(--bad); }
#wksite .mv-mn p.out span, #wksite .mv-mn p.out b { opacity: 0.5; }

/* Integrasi */
#wksite .mv-in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 26px 22px; }
#wksite .in-n { display: grid; justify-items: center; gap: var(--space-xs); font: 600 14px/1 var(--f-display); }
#wksite .in-n span { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--paper-2); }
#wksite .in-n span svg { width: 28px; height: 28px; }
#wksite .in-n.wk span { background: var(--brand-soft); }
#wksite .in-n .d-dot { width: 24px; height: 24px; border-radius: 50% 50% 50% 7px; background: var(--brand); }
#wksite .in-w { position: relative;container-type: inline-size; height: 54px; border-top: 2px dashed var(--line-2); margin-top: 26px; }
#wksite .in-w i { position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
#wksite .pv.on .in-w i { animation: wk-pkt 2.4s var(--e-std) infinite; }
#wksite .pv.on .in-w i:nth-child(2) { animation-delay: 0.8s; background: var(--lc-0348a30); animation-direction: reverse; }
#wksite .pv.on .in-w i:nth-child(3) { animation-delay: 1.6s; }
@keyframes wk-pkt { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(calc(100cqw - 12px)); opacity: 0; } }
#wksite .in-w small { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font: 800 11px/1.3 var(--f-body); color: var(--ink-3); }

/* Profil */
#wksite .mv-pf { gap: 14px; }
#wksite .mv-pf .pf-h b { font-size: 18px; }
#wksite .mv-pf .pf-h small { font-size: 12px; }
#wksite .mv-pf .pf-av { width: 48px; height: 48px; font-size: 17px; }
#wksite .mv-pf .pf-h { grid-template-columns: 48px minmax(0, 1fr) auto; }
#wksite .mv-pf .pf-lv { font-size: 11px; padding: 6px 11px; }
#wksite .mv-pf .pf-k b { font-size: 24px; }
#wksite .mv-pf .pf-k small { font-size: 11.5px; }
#wksite .mv-pf .pf-k div { padding: 14px; border-radius: 14px; }
#wksite .mv-pf .pf-tags span { font-size: 11.5px; padding: 7px 11px; }
#wksite .pv.on .mv-pf .pf-tags span { animation: wk-up var(--t-panel) var(--e-out) both; }
#wksite .pv.on .mv-pf .pf-tags span:nth-child(2) { animation-delay: 120ms; }

/* Loyalty */
#wksite .mv-ly { background: transparent; box-shadow: none; padding: 0; }
#wksite .ly-c { border-radius: 24px; padding: 22px; background: linear-gradient(150deg, var(--lc-da9a8cb), var(--lc-ecb571a)); color: var(--lc-ca46cb7); display: grid; gap: var(--space-md); box-shadow: var(--shadow-3); }
#wksite .ly-h { display: flex; justify-content: space-between; align-items: center; }
#wksite .ly-h b { font: 600 18px/1 var(--f-display); }
#wksite .ly-h span { padding: 6px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--lc-9c7810a), var(--lc-4d2f9c9)); color: var(--lc-0a4b996); font: 800 11px/1 var(--f-body); }
#wksite .ly-s { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); }
#wksite .ly-s i { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--lc-73e5e6f); }
#wksite .ly-s i.on { border: 0; background: radial-gradient(circle at 35% 30%, var(--lc-d8f6fdf), var(--lc-fcd45a6)); }
#wksite .pv.on .ly-s i.land { animation: wk-stamploop 3.4s var(--e-pop) infinite; }
@keyframes wk-stamploop { 0%, 25% { border: 2px dashed var(--lc-73e5e6f); background: transparent; transform: none; } 30% { border: 0; background: radial-gradient(circle at 35% 30%, var(--lc-d8f6fdf), var(--lc-fcd45a6)); transform: scale(1.6) rotate(-20deg); } 42%, 100% { border: 0; background: radial-gradient(circle at 35% 30%, var(--lc-d8f6fdf), var(--lc-fcd45a6)); transform: none; } }
#wksite .ly-c p { display: flex; align-items: center; gap: var(--space-xs); font: 700 12.5px/1.3 var(--f-body); color: var(--lc-6095e11); }
#wksite .ly-c p svg { width: 16px; height: 16px; color: var(--brand); }

/* Campaign */
#wksite .mv-cp { background: var(--lc-7ac072c); }
#wksite .cp-b { position: relative; max-width: 88%; padding: var(--space-sm) 14px 20px; border-radius: 4px 16px 16px 16px; background: var(--lc-d14f901); font: 700 13px/1.4 var(--f-body); box-shadow: 0 1px 1px var(--lc-011607f); }
#wksite .cp-b b { display: block; font: 800 12px/1 var(--f-body); color: var(--lc-e4648b3); margin-bottom: var(--space-2xs); }
#wksite .cp-b small { position: absolute; right: 10px; bottom: 6px; font: 700 10px/1 var(--f-body); color: var(--ink-3); }
#wksite .pv.on .cp-b { animation: wk-bub2 4s var(--e-pop) infinite; transform-origin: 0 0; }
@keyframes wk-bub2 { 0% { opacity: 0; transform: scale(0.9) translateY(6px); } 12%, 100% { opacity: 1; transform: none; } }
#wksite .cp-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
#wksite .cp-r div { padding: 10px var(--space-sm); border-radius: 14px; background: var(--lc-d14f901); display: grid; gap: 3px; }
#wksite .cp-r small { font: 800 11px/1 var(--f-body); color: var(--ink-3); }
#wksite .cp-r b { font: 600 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
#wksite .cp-r .hl { background: var(--wa-soft); }
#wksite .cp-r .hl b, #wksite .cp-r .hl small { color: var(--lc-b2b0c5b); }

/* Laporan */
#wksite .lp-k { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#wksite .lp-k div { padding: var(--space-sm) 14px; border-radius: 14px; background: var(--paper); display: grid; gap: var(--space-2xs); }
#wksite .lp-k small { font: 800 11px/1 var(--f-body); color: var(--ink-3); }
#wksite .lp-k b { font: 600 26px/1 var(--f-display); }
#wksite .lp-b { height: 120px; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-xs); align-items: end; padding: 0 var(--space-2xs); }
#wksite .lp-b i { height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--brand), var(--lc-ec9cf78)); transform-origin: 50% 100%; }
#wksite .pv.on .lp-b i { animation: wk-grow 900ms var(--e-out-lg) both; animation-delay: var(--bd); }
#wksite .lp-t { display: flex; align-items: center; gap: var(--space-xs); padding: 10px var(--space-sm); border-radius: 12px; background: var(--lc-a28e5c5); color: var(--lc-5694bf3); font: 800 12px/1.2 var(--f-body); }
#wksite .lp-t svg { width: 16px; height: 16px; }

/* AI chat */
#wksite .mv-ai { background: var(--lc-be2c114); gap: var(--space-sm); }
#wksite .mv-ai p { max-width: 82%; padding: 11px 14px; border-radius: 16px; font: 700 13px/1.4 var(--f-body); }
#wksite .mv-ai .q { justify-self: end; background: var(--ink); color: var(--lc-d14f901); border-radius: 16px 16px 4px 16px; }
#wksite .mv-ai .a { background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--line); border-radius: 16px 16px 16px 4px; }
#wksite .mv-ai .a b { display: flex; align-items: center; gap: 6px; font: 800 11.5px/1 var(--f-body); color: var(--gold-text); margin-bottom: 5px; }
#wksite .mv-ai .a b svg { width: 14px; height: 14px; }
#wksite .pv.on .mv-ai p { animation: wk-chat 6s var(--e-out) infinite both; }
#wksite .pv.on .mv-ai p:nth-child(2) { animation-name: wk-chat2; }
#wksite .pv.on .mv-ai p:nth-child(3) { animation-name: wk-chat3; }
@keyframes wk-chat { 0% { opacity: 0; transform: translateY(8px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wk-chat2 { 0%, 22% { opacity: 0; transform: translateY(8px); } 30%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wk-chat3 { 0%, 48% { opacity: 0; transform: translateY(8px); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 640px) {
  #wksite .mv { width: 90%; padding: 14px; }
  #wksite .mv-ks { grid-template-columns: minmax(0, 1fr); }
  #wksite .ks-r { grid-template-columns: repeat(2, 1fr); }
  #wksite .ks-r small, #wksite .ks-r em { grid-column: 1 / -1; }
  #wksite .mv-tv { grid-template-columns: minmax(0, 1fr); }
  #wksite .tv-n { grid-template-columns: repeat(4, 1fr); }
  #wksite .tv-s b { font-size: 48px; }
}

/* Replika layar asli (komponen film) di panggung fitur, diperbesar */
#wksite .mv.rpx { zoom: 1.5; width: min(58%, 330px); padding: var(--space-sm); gap: var(--space-xs); font-size: 9px; }
#wksite .mv-list { display: grid; gap: 6px; }
#wksite .mv-wl .mv-h b { font-size: 12px; } #wksite .mv-wl .mv-h span { font-size: 8px; padding: 3px 7px; }
#wksite .mv-wl .mv-toast { font-size: 8.5px; padding: 7px 11px; bottom: -12px; }
#wksite .mv-wl .mv-toast svg { width: 11px !important; height: 11px !important; }
#wksite .mv-pf { gap: 9px; }
#wksite .mv-ly { background: transparent; box-shadow: none; padding: 0; }
#wksite .mv-ly .sc { margin: 0; }
#wksite .mv-ly .st { background: var(--lc-d14f901); }
#wksite .pv.on .mv-ly .sc-g i.land { animation: wk-stamploop 3.4s var(--e-pop) infinite; }
@keyframes wk-stamploop { 0%, 25% { background: var(--lc-7dd6946); transform: none; } 30% { background: var(--lc-2fc8193); transform: scale(1.7) rotate(-20deg); } 42%, 100% { background: var(--lc-2fc8193); transform: none; } }
#wksite .mv-cp { background: var(--lc-2eddbc6); }
#wksite .mv-cp .cp-b { font: 400 8.5px/1.4 'Plus Jakarta Sans', var(--f-body); border-radius: 3px 10px 10px 10px; padding: var(--space-xs) 9px; max-width: 100%; }
#wksite .mv-cp .cp-b small { position: static; display: block; margin-top: 5px; font-size: 6.5px; color: var(--lc-e7025a2); }
#wksite .mv-cp .rw-nums div { background: var(--lc-d14f901); }
#wksite .mv-lp .in-k { grid-template-columns: 1fr 1fr; margin: 0; }
#wksite .mv-lp .lp-b { height: 80px; grid-template-columns: repeat(28, 1fr); gap: 1.5px; padding: 0; }
#wksite .mv-lp .lp-b i { border-radius: 2px 2px 1px 1px; background: var(--lc-e92bbe0); }
#wksite .mv-lp .lp-b i.t { background: var(--lc-897e618); }
#wksite .mv-lp .lp-t { font-size: 8px; padding: 7px 9px; }
#wksite .mv-lp .lp-t svg { width: 11px !important; height: 11px !important; }
#wksite .mv-tv .tv-s em { font-style: normal; font: 700 11px/1 var(--f-body); color: var(--lc-d337f9e); }
#wksite .mv-tv .tv-s span { font-size: 13px; color: var(--lc-886bf73); }
#wksite .mv-tv { background: var(--lc-f63cd00); }
@media (max-width: 640px) { #wksite .mv.rpx { zoom: 1.25; width: 76%; } }
#wksite .mv-cp .cp-b b { display: inline; margin: 0; color: inherit; font: inherit; font-weight: 700; }
#wksite .mj-g i b { padding: 0 var(--space-2xs); text-align: center; font: 600 14px/1.15 var(--f-display); }
#wksite .mj-g.few { grid-template-columns: repeat(3, 1fr); }
#wksite .mj-g.few i { aspect-ratio: 1.5; }
@keyframes wk-table2 { 0% { background: var(--lc-6c2ae4f); color: var(--lc-b275e50); } 50% { background: var(--lc-ab09b31); color: var(--lc-c9059b4); } }
#wksite .pv.on .mj-g.two i { animation-name: wk-table2; }

/* Tables (22 Okt): hitungan cepat Flow (terisi, turnover hari ini), timer di meja terisi, durasi satu kunjungan */
#wksite .mj-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
#wksite .mj-k div { display: grid; gap: var(--space-2xs); padding: var(--space-xs) 10px; border-radius: 12px; background: var(--paper-2); }
#wksite .mj-k small { font: 800 12px/1.1 var(--f-body); color: var(--ink-3); }
#wksite .mj-k small .nw { white-space: nowrap; } /* "Rata-rata" tidak patah di tanda hubung (3 baris di HP) */
#wksite .mj-k b { font: 600 19px/1 var(--f-display); color: var(--ink); }
/* 9 terisi (o, timer), 1 dibersihkan (c), 2 kosong (f). Meja 2 selesai lalu dibersihkan, meja 6 siap lalu diisi tamu baru (turnover) */
#wksite .mv-mj .mj-g i { aspect-ratio: 1.6; position: relative; gap: var(--space-3xs); align-content: center; background: var(--lc-6c2ae4f); color: var(--lc-b275e50); }
#wksite .pv.on .mv-mj .mj-g i { animation: none; }
#wksite .mv-mj .mj-g i.o { background: var(--lc-ab09b31); color: var(--lc-c9059b4); }
#wksite .mv-mj .mj-g i.c { background: var(--lc-45469a1); color: var(--lc-1e62a97); }
#wksite .mv-mj .mj-g i em { font: 800 12px/1 var(--f-body); font-style: normal; opacity: 0; }
#wksite .mv-mj .mj-g i.o em { opacity: .85; }
#wksite .pv.on .mv-mj .mj-g i.go { animation: mj-go 7.2s steps(1) infinite; }
#wksite .pv.on .mv-mj .mj-g i.go em { animation: mj-go-t 7.2s steps(1) infinite; }
#wksite .pv.on .mv-mj .mj-g i.come { animation: mj-come 7.2s steps(1) infinite; }
#wksite .pv.on .mv-mj .mj-g i.come em { animation: mj-come-t 7.2s steps(1) infinite; }
@keyframes mj-go { 0% { background: var(--lc-ab09b31); color: var(--lc-c9059b4); } 40% { background: var(--lc-45469a1); color: var(--lc-1e62a97); } 75% { background: var(--lc-6c2ae4f); color: var(--lc-b275e50); } }
@keyframes mj-go-t { 0% { opacity: .85; } 40% { opacity: 0; } }
@keyframes mj-come { 0% { background: var(--lc-45469a1); color: var(--lc-1e62a97); } 40% { background: var(--lc-6c2ae4f); color: var(--lc-b275e50); } 75% { background: var(--lc-ab09b31); color: var(--lc-c9059b4); } }
@keyframes mj-come-t { 0% { opacity: 0; } 75% { opacity: .85; } }
#wksite .mj-v { display: grid; gap: var(--space-xs); padding: 10px var(--space-sm); border-radius: 14px; background: var(--paper-2); }
#wksite .mj-vh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3xs) 10px; font: 800 13px/1.2 var(--f-body); } /* sempit: total turun baris, nama tamu tidak terlipat */
#wksite .mj-vh span { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
#wksite .mj-vh em { font: 600 15px/1 var(--f-display); font-style: normal; color: var(--ink); }
#wksite .mj-bar { display: flex; gap: 3px; height: 28px; }
#wksite .mj-bar i { display: flex; align-items: center; min-width: 0; padding: 0 9px; border-radius: 9px; font-style: normal; white-space: nowrap; overflow: hidden; transform-origin: left center; }
#wksite .mj-bar i span { font: 800 12px/1 var(--f-body); }
#wksite .mj-bar .w { flex: 14 1 0; min-width: max-content; background: var(--lc-ab09b31); color: var(--lc-c9059b4); } /* label utuh walau porsinya kecil */
#wksite .mj-bar .s { flex: 48 1 0; background: var(--lc-6c2ae4f); color: var(--lc-b275e50); }
#wksite .pv.on .mj-bar i { animation: mj-grow .8s var(--e-out) both; }
#wksite .pv.on .mj-bar .s { animation-delay: .55s; }
@keyframes mj-grow { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* TV (22 Okt): suara panggilan 6 bahasa + teks layar bisa diubah (judul berganti, label Semua teks bisa diubah) */
#wksite .tv-sw { display: grid; }
#wksite .tv-sw span { grid-area: 1 / 1; padding: var(--space-3xs) 6px; border-radius: 6px; }
#wksite .tv-sw span:last-child { opacity: 0; }
#wksite .pv.on .tv-sw span:first-child { animation: tv-sw-a 8s steps(1) infinite; }
#wksite .pv.on .tv-sw span:last-child { animation: tv-sw-b 8s steps(1) infinite; }
@keyframes tv-sw-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes tv-sw-b { 0% { opacity: 0; } 50% { opacity: 1; outline: 1.5px dashed var(--brand); } 62% { outline: 1.5px dashed transparent; } }
#wksite .tv-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; margin-top: 6px; }
#wksite .tv-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--brand); transform: scaleY(.35); }
#wksite .pv.on .tv-wave i { animation: tv-wave 1s ease-in-out infinite; }
#wksite .pv.on .tv-wave i:nth-child(2) { animation-delay: .15s; } #wksite .pv.on .tv-wave i:nth-child(3) { animation-delay: .3s; }
#wksite .pv.on .tv-wave i:nth-child(4) { animation-delay: .45s; } #wksite .pv.on .tv-wave i:nth-child(5) { animation-delay: .6s; }
@keyframes tv-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
#wksite .tv-lang { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#wksite .tv-lk { display: inline-flex; align-items: center; gap: 5px; margin-right: var(--space-3xs); font: 800 12px/1 var(--f-body); color: var(--brand); }
#wksite .tv-lk svg { width: 13px; height: 13px; }
#wksite .tv-lang i { padding: 5px 9px; border-radius: 999px; background: var(--lc-7270fe3); font: 700 12px/1 var(--f-body); font-style: normal; color: var(--lc-dce31e2); }
#wksite .pv.on .tv-lang i { animation: tv-lang 6s steps(1) infinite; animation-delay: calc(var(--li) * 1s); }
@keyframes tv-lang { 0% { background: var(--brand); color: var(--brand-ink); } 16.67% { background: var(--lc-7270fe3); color: var(--lc-dce31e2); } }
#wksite .tv-ed { position: absolute; top: -13px; right: 16px; padding: 7px 11px; border-radius: 999px; background: var(--lc-d14f901); color: var(--ink); box-shadow: var(--shadow-2); font: 800 12px/1 var(--f-body); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { #wksite .tv-sw span:first-child { opacity: 1; } #wksite .tv-wave i { transform: none; } #wksite .mj-bar i { transform: none; opacity: 1; } }

/* ---------- 22 Okt: Menu (tamu lihat menu sambil menunggu), Profil lebih dalam, Loyalty bergerak, Campaign + Meta, AI chat ---------- */
#wksite .pv.on [data-loop] *, #wksite .pv.on [data-loop] { animation-play-state: running; }
#wksite .mv-mn2 { width: min(84%, 420px); justify-items: center; background: none; box-shadow: none; padding: 0; gap: var(--space-sm); }
#wksite .mn-ph { position: relative; width: 250px; height: 330px; border-radius: 26px; padding: 14px var(--space-sm); overflow: hidden; background: var(--lc-d14f901); box-shadow: 0 0 0 7px var(--lc-ee05572), var(--shadow-3); display: grid; align-content: start; gap: 10px; font-family: var(--g-font); }
#wksite .mn-tk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-xs); padding: 10px; border-radius: 14px; background: var(--g-surf); }
#wksite .mn-tk small { display: block; font: 600 9px/1 var(--g-font); color: var(--g-mute); }
#wksite .mn-tk b { font: 800 22px/1 var(--g-font); }
#wksite .mn-tk em { font: 700 9.5px/1.2 var(--g-font); font-style: normal; color: var(--lc-b8a990e); text-align: right; }
#wksite .mn-tk .glogo { background: var(--lc-af085da); color: var(--lc-d14f901); }
#wksite .mn-bk { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--g-line); font: 700 11px/1 var(--g-font); }
#wksite .mn-bk i { padding: 7px 11px; border-radius: 999px; background: var(--lc-cdddffc); color: var(--lc-d14f901); font: 700 10px/1 var(--g-font); font-style: normal; }
#wksite .pv.on .mn-bk i { animation: mn-tap 7s var(--e-std) infinite; }
@keyframes mn-tap { 0%, 12% { transform: none; } 14% { transform: scale(.9); } 17%, 100% { transform: none; } }
#wksite .mn-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px var(--space-sm) var(--space-md); border-radius: 18px 18px 0 0; background: var(--lc-d14f901); box-shadow: 0 -12px 26px var(--lc-414b319); display: grid; gap: var(--space-xs); transform: translateY(105%); }
#wksite .pv.on .mn-sheet { animation: mn-sheet 7s var(--e-out) infinite; }
@keyframes mn-sheet { 0%, 16% { transform: translateY(105%); } 24%, 88% { transform: none; } 96%, 100% { transform: translateY(105%); } }
#wksite .mn-sheet > b { font: 800 12px/1.2 var(--g-font); }
#wksite .mn-sheet p { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: var(--space-xs); margin: 0; font: 700 11px/1.2 var(--g-font); }
#wksite .mn-sheet p em { font-style: normal; font-weight: 800; }
#wksite .mn-sheet p i { position: absolute; left: 22px; top: -4px; padding: var(--space-3xs) 5px; border-radius: 6px; background: var(--lc-b8a990e); color: var(--lc-d14f901); font: 800 7.5px/1 var(--g-font); font-style: normal; }
#wksite .mn-sheet p.out { opacity: .55; }
#wksite .mn-sheet p.out em { color: var(--lc-989217b); }
#wksite .mn-img { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, var(--lc-5c2967d), var(--lc-f4c2627)); }
#wksite .mn-img.b { background: linear-gradient(150deg, var(--lc-ae61b20), var(--lc-5c55a88)); } #wksite .mn-img.c { background: linear-gradient(150deg, var(--lc-4b4f813), var(--lc-7fcfd89)); } #wksite .mn-img.d { background: linear-gradient(150deg, var(--lc-b5691ea), var(--lc-c020332)); }
#wksite .mn-cap { margin: 0; text-align: center; font: 600 13px/1.4 var(--f-body); color: var(--ink-2); }
#wksite .mn-cap b { color: var(--ink); }

#wksite .mv-pf2 { gap: 9px; }
#wksite .pf-h { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-xs); }
#wksite .pf-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lc-ab09b31); color: var(--lc-c9059b4); font: 800 13px/1 var(--f-display); }
#wksite .pf-h b { display: block; font: 600 16px/1.1 var(--f-display); }
#wksite .pf-h small { font: 600 10.5px/1 var(--f-body); color: var(--ink-3); }
#wksite .pf-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#wksite .pf-k div, #wksite .pf-g > div, #wksite .pf-tl { padding: var(--space-xs) 9px; border-radius: 12px; background: var(--paper-2); display: grid; gap: var(--space-3xs); align-content: start; }
#wksite .pf-k small, #wksite .pf-g small, #wksite .pf-tl small { font: 800 9px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#wksite .pf-k b { font: 600 18px/1.1 var(--f-display); }
#wksite .pf-k em { font: 600 10px/1.2 var(--f-body); font-style: normal; color: var(--ink-2); }
#wksite .pf-lb { display: flex; flex-wrap: wrap; gap: 5px; }
#wksite .pf-lb span { padding: var(--space-2xs) 9px; border-radius: 999px; background: var(--paper-2); font: 700 10.5px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .pf-lb span.ok { background: var(--lc-6c2ae4f); color: var(--lc-b275e50); }
#wksite .pf-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 6px; }
#wksite .pf-sub { margin-top: 5px; }
#wksite .pf-g p { display: flex; justify-content: space-between; gap: 6px; margin: 0; font: 600 10.5px/1.35 var(--f-body); color: var(--ink-3); }
#wksite .pf-g p b { color: var(--ink); text-align: right; }
#wksite .pf-tags { flex-wrap: wrap; justify-content: flex-start !important; }
#wksite .pf-tags i { padding: var(--space-3xs) 7px; border-radius: 999px; background: var(--lc-d14f901); font: 700 10px/1.3 var(--f-body); font-style: normal; color: var(--ink-2); }
#wksite .pf-note { color: var(--ink-2) !important; }
#wksite .pf-tl p { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: var(--space-3xs) 6px; margin: 3px 0 0; font: 600 10.5px/1.3 var(--f-body); color: var(--ink-2); }
#wksite .pf-tl p span { grid-column: 2; }
#wksite .pf-tl p i { margin-top: 3px; }
#wksite .pf-tl p i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
#wksite .pf-tl p i.c { background: var(--lc-36a068a); }
#wksite .pf-tl p b { color: var(--ink); }
#wksite .pv.on .mv-pf2 .pf-k div, #wksite .pv.on .mv-pf2 .pf-g > div, #wksite .pv.on .mv-pf2 .pf-tl { animation: wk-up var(--t-panel) var(--e-out) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
#wksite .pv.on .mv-pf2 .pf-tl p { animation: wk-up var(--t-panel) var(--e-out) both; }
#wksite .pv.on .mv-pf2 .pf-tl p:nth-of-type(1) { animation-delay: .75s; } #wksite .pv.on .mv-pf2 .pf-tl p:nth-of-type(2) { animation-delay: .9s; } #wksite .pv.on .mv-pf2 .pf-tl p:nth-of-type(3) { animation-delay: 1.05s; }

#wksite .mv-ly2 .sc { position: relative; }
#wksite .mv-ly2 .sc-g i { transition: background-color .25s var(--e-std), transform .35s var(--e-pop); }
#wksite .mv-ly2 .sc-g i.land { animation: wk-stamp 620ms var(--e-pop) both; }
#wksite .ly-win { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: var(--space-2xs); border-radius: inherit; background: var(--lc-09d4de0); color: var(--lc-886bf73); text-align: center; opacity: var(--wk-js-hide, 1); transform: scale(.94); transition: opacity .35s var(--e-std), transform .45s var(--e-pop); pointer-events: none; }
#wksite .ly-win.on { opacity: 1; transform: none; }
#wksite .ly-win span { font-size: 26px; line-height: 1; }
#wksite .ly-win b { font: 600 15px/1.1 var(--f-display); }
#wksite .ly-win em { font: 800 12px/1 var(--f-body); font-style: normal; color: var(--brand); }
#wksite .ly-win i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); opacity: 0; }
#wksite .ly-win.on i { animation: ly-pop .9s var(--e-out) .1s both; }
#wksite .ly-win i:nth-of-type(even) { background: var(--lc-633fdd2); }
@keyframes ly-pop { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px); } }
#wksite .ly-plus { display: block; padding: 5px var(--space-xs); border-radius: 8px; background: var(--g-surf); font: 700 7.3px/1.3 var(--g-font); opacity: var(--wk-js-hide, 1); transform: translateY(4px); transition: opacity .25s var(--e-std), transform .25s var(--e-std); }
#wksite .ly-plus.on { opacity: 1; transform: none; }
#wksite .mv-ly2 .st-p i { transition: clip-path .45s var(--e-out); }

#wksite .mv-cp2 { gap: 10px; }
#wksite .cp-meta { display: flex; flex-wrap: wrap; gap: 6px; }
#wksite .cp-badge, #wksite .cp-ok { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font: 800 11px/1 var(--f-body); }
#wksite .cp-badge { background: var(--lc-25c2492); color: var(--lc-71398ca); }
#wksite .cp-ok { background: var(--paper-2); color: var(--ink-2); }
#wksite .cp-badge svg, #wksite .cp-ok svg { width: 13px; height: 13px; }
#wksite .cp-seg { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: 9px 11px; border-radius: 12px; background: var(--paper-2); }
#wksite .cp-seg p { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; }
#wksite .cp-seg i { padding: 3px var(--space-xs); border-radius: 999px; background: var(--lc-d14f901); font: 700 10.5px/1.3 var(--f-body); font-style: normal; }
#wksite .cp-seg b { font: 700 12px/1 var(--f-body); white-space: nowrap; }
#wksite .cp-seg em { font: 600 20px/1 var(--f-display); font-style: normal; }
#wksite .cp-fly { position: relative; height: 62px; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
#wksite .cp-src { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--lc-36a068a); color: var(--lc-d14f901); box-shadow: 0 0 0 6px var(--lc-25c2492); }
#wksite .cp-src svg { width: 16px; height: 16px; }
#wksite .cp-ph { position: relative; width: 26px; height: 42px; border-radius: 7px; background: var(--lc-d14f901); box-shadow: 0 0 0 2px var(--lc-65da196); }
#wksite .cp-ph:nth-child(3) { margin-right: 46px; } #wksite .cp-ph:nth-child(4) { margin-left: 46px; }
#wksite .cp-ph i { position: absolute; left: 4px; right: 4px; top: 8px; height: 10px; border-radius: 3px; background: var(--lc-25c2492); opacity: 0; }
#wksite .pv.on .cp-ph i { animation: cp-msg 5.5s var(--e-out) infinite; animation-delay: calc(var(--i) * 120ms + .3s); }
@keyframes cp-msg { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 10%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
#wksite .pv.on .cp-src { animation: cp-pulse 5.5s var(--e-std) infinite; }
@keyframes cp-pulse { 0%, 100% { box-shadow: 0 0 0 6px var(--lc-25c2492); } 6% { box-shadow: 0 0 0 14px rgba(31, 168, 85, 0); } }
#wksite .cp-fn { display: grid; gap: 5px; }
#wksite .cp-fn p { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: var(--space-xs); margin: 0; font: 700 11px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .cp-fn p i { display: block; height: 9px; border-radius: 9px; background: var(--paper-2); overflow: hidden; position: relative; }
#wksite .cp-fn p i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--lc-36a068a), var(--lc-2143802)); transform-origin: left; }
#wksite .cp-fn p:last-child { color: var(--ink); }
#wksite .cp-fn p:last-child i::after { background: linear-gradient(90deg, var(--brand-2), var(--brand)); }
#wksite .cp-fn p b { font: 600 14px/1 var(--f-display); text-align: right; color: var(--ink); }
#wksite .pv.on .cp-fn p i::after { animation: cp-bar 5.5s var(--e-out) infinite; animation-delay: calc(var(--i) * 180ms + .9s); }
@keyframes cp-bar { 0% { transform: scaleX(0); } 14%, 90% { transform: none; } 100% { transform: scaleX(0); } }

#wksite .mv-ai2 { gap: var(--space-xs); width: min(84%, 440px); }
#wksite .ai-h { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--line); }
#wksite .ai-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--gold-text); }
#wksite .ai-av svg { width: 15px; height: 15px; }
#wksite .ai-h b { display: block; font: 600 14px/1.1 var(--f-display); }
#wksite .ai-h small { font: 700 10.5px/1 var(--f-body); color: var(--ink-3); }
#wksite .ai-c { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, var(--lc-598b32b) 22%); mask-image: linear-gradient(transparent, var(--lc-598b32b) 22%); }
#wksite .ai-c p { max-width: 82%; margin: 0; padding: var(--space-xs) 11px; border-radius: 14px; font: 600 12.5px/1.4 var(--f-body); animation: wk-up .35s var(--e-out) both; }
#wksite .ai-c p.q { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--ink); color: var(--card); }
#wksite .ai-c p.a { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--paper-2); color: var(--ink); }
#wksite .ai-c p.dots { display: inline-flex; gap: var(--space-2xs); padding: 11px var(--space-sm); }
#wksite .ai-c p.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: ai-dot 1s ease-in-out infinite; }
#wksite .ai-c p.dots i:nth-child(2) { animation-delay: .15s; } #wksite .ai-c p.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
#wksite .ai-in { display: flex; align-items: center; gap: var(--space-xs); min-height: 38px; padding: 6px 6px 6px var(--space-sm); border-radius: 999px; box-shadow: 0 0 0 1px var(--line-2); font: 600 12.5px/1.3 var(--f-body); color: var(--ink); }
#wksite .ai-in span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
#wksite .ai-in span:empty::before { content: "Tulis pertanyaan..."; color: var(--ink-3); }
#wksite .ai-in span.typing::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: wk-blink .9s steps(1) infinite; }
#wksite .ai-in i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); }
#wksite .ai-in i svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { #wksite .pv.on .mn-sheet { animation: none; transform: none; } #wksite .pv.on .cp-fn p i::after, #wksite .pv.on .cp-ph i { animation: none; opacity: 1; transform: none; } }
/* HP (22 Okt): visual baru tidak diperbesar (panggung 400 px); profil cukup angka, label, dan riwayat */
@media (max-width: 900px) {
  #wksite .pstage .mv.mv-mn2, #wksite .pstage .mv.mv-pf2, #wksite .pstage .mv.mv-cp2, #wksite .pstage .mv.mv-ai2, #wksite .pstage .mv.mv-ly2 { zoom: 1; width: min(94%, 360px); }
  #wksite .mv-pf2 .pf-g { grid-template-columns: minmax(0, 1fr); }
  #wksite .mv-pf2 .pf-g > div:first-child { display: none; }
  #wksite .mv-ai2 .ai-c { height: 200px; }
  #wksite .mn-ph { width: 236px; height: 318px; }
}
/* 22 Okt (putaran rapikan): Profil sederhana, Campaign rapi, Reports = perbandingan cabang */
#wksite .mv-pf3 { gap: var(--space-sm); }
#wksite .mv-pf3 .pf-h { display: flex; align-items: center; gap: 10px; }
#wksite .mv-pf3 .pf-h small { font: 700 12px/1.2 var(--f-body); color: var(--gold-text); }
#wksite .mv-pf3 .pf-k div { padding: 10px var(--space-sm); }
#wksite .mv-pf3 .pf-k b { font-size: 21px; }
#wksite .mv-pf3 .pf-lb span { font-size: 12px; }
#wksite .mv-pf3 .pf-tl { padding: 10px var(--space-sm); gap: 6px; }
#wksite .mv-pf3 .pf-tl p { display: grid; grid-template-columns: 8px 62px minmax(0, 1fr); align-items: center; gap: var(--space-xs); margin: 0; font: 600 12px/1.3 var(--f-body); color: var(--ink-2); }
#wksite .mv-pf3 .pf-tl p span { grid-column: 3; min-width: 0; } /* kolom isi (aturan lama .pf-tl span = kolom 2 menjepitnya ke kolom tanggal 62 px); boleh dua baris */
#wksite .mv-pf3 .pf-tl p i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin: 0; }
#wksite .mv-pf3 .pf-tl p i.c { background: var(--lc-36a068a); }
#wksite .pv.on .mv-pf3 .pf-k div, #wksite .pv.on .mv-pf3 .pf-lb span, #wksite .pv.on .mv-pf3 .pf-tl p { animation: wk-up var(--t-panel) var(--e-out) both; animation-delay: calc(var(--i, 0) * 90ms + 100ms); }
#wksite .mv-cp3 { gap: var(--space-sm); }
#wksite .mv-cp3 .cp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px var(--space-sm); border-radius: 12px; background: var(--lc-25c2492); color: var(--lc-71398ca); }
#wksite .mv-cp3 .cp-meta > svg { width: 16px; height: 16px; flex: none; }
#wksite .mv-cp3 .cp-meta b { font: 800 13px/1.2 var(--f-body); }
#wksite .mv-cp3 .cp-meta span { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2xs); font: 700 11.5px/1 var(--f-body); color: var(--lc-71398ca); }
#wksite .mv-cp3 .cp-meta span svg { width: 12px; height: 12px; }
#wksite .mv-cp3 .cp-seg { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px var(--space-sm); border-radius: 12px; background: var(--paper-2); }
#wksite .mv-cp3 .cp-seg small { display: block; margin-bottom: 5px; font: 800 9.5px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#wksite .mv-cp3 .cp-seg p { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; }
#wksite .mv-cp3 .cp-seg i { padding: var(--space-2xs) var(--space-xs); border-radius: 999px; background: var(--lc-d14f901); font: 700 11px/1.2 var(--f-body); font-style: normal; }
#wksite .mv-cp3 .cp-seg > b { display: grid; justify-items: end; font: 700 11.5px/1 var(--f-body); color: var(--ink-3); }
#wksite .mv-cp3 .cp-seg em { font: 600 24px/1 var(--f-display); font-style: normal; color: var(--ink); }
#wksite .mv-cp3 .cp-fn { display: grid; gap: 9px; }
#wksite .mv-cp3 .cp-fn p { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 8px; gap: var(--space-2xs) var(--space-xs); margin: 0; font: 700 12px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .mv-cp3 .cp-fn p b { font: 600 14px/1 var(--f-display); color: var(--ink); }
#wksite .mv-cp3 .cp-fn p i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 8px; background: var(--paper-2); position: relative; overflow: hidden; }
#wksite .mv-cp3 .cp-fn p i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--lc-36a068a), var(--lc-2143802)); transform-origin: left; }
#wksite .mv-cp3 .cp-fn p:last-child { color: var(--ink); }
#wksite .mv-cp3 .cp-fn p:last-child i::after { background: linear-gradient(90deg, var(--brand-2), var(--brand)); }
#wksite .pv.on .mv-cp3 .cp-fn p i::after { animation: lp-grow .9s var(--e-out) both; animation-delay: calc(var(--i) * 160ms + .3s); }
@keyframes lp-grow { from { transform: scaleX(0); } }
#wksite .mv-lp2 { gap: 10px; }
#wksite .lp-r { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: var(--paper-2); }
#wksite .lp-r b { display: block; font: 600 14px/1.1 var(--f-display); }
#wksite .lp-r small { font: 600 10.5px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .lp-r > i { display: block; height: 12px; border-radius: 12px; background: var(--lc-a56d7d6); position: relative; overflow: hidden; }
#wksite .lp-r > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--brand); transform-origin: left; }
#wksite .lp-r.g > i::after { background: var(--lc-36a068a); }
#wksite .lp-r.o > i::after { background: var(--lc-e4ee0e2); }
#wksite .lp-r.o { box-shadow: inset 0 0 0 1.5px var(--lc-5b6326b); }
#wksite .lp-r em { font: 600 15px/1 var(--f-display); font-style: normal; white-space: nowrap; }
#wksite .pv.on .lp-r > i::after { animation: lp-grow 1s var(--e-out) both; animation-delay: calc(var(--i) * 180ms + .2s); }
@media (max-width: 900px) { #wksite .pstage .mv.mv-pf3, #wksite .pstage .mv.mv-cp3, #wksite .pstage .mv.mv-lp2 { zoom: 1; width: min(94%, 360px); } #wksite .lp-r { grid-template-columns: 84px minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { #wksite .pv.on .lp-r > i::after, #wksite .pv.on .mv-cp3 .cp-fn p i::after { animation: none; } }
/* AI chat di HP sungguhan (22 Okt) */
#wksite .mv-ai3 { width: auto; padding: 0; background: none; box-shadow: none; zoom: 1; justify-items: center; }
#wksite .ai-ph { position: relative; width: 250px; height: 420px; padding: var(--space-xs); border-radius: 38px; background: var(--lc-ee05572); box-shadow: var(--shadow-3), inset 0 0 0 2px var(--lc-65da196); }
#wksite .ai-notch { position: absolute; z-index: 2; left: 50%; top: 15px; width: 70px; height: 20px; border-radius: 12px; background: var(--lc-05b44f3); transform: translateX(-50%); }
#wksite .ai-scr { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: var(--lc-d14f901); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 42px var(--space-sm) var(--space-sm); gap: var(--space-xs); font-family: var(--g-font); }
#wksite .mv-ai3 .ai-h { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--g-line); }
#wksite .mv-ai3 .ai-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--gold-text); flex: none; }
#wksite .mv-ai3 .ai-av svg { width: 14px; height: 14px; }
#wksite .mv-ai3 .ai-h b { display: block; font: 800 12px/1.2 var(--g-font); }
#wksite .mv-ai3 .ai-h small { font: 600 9.5px/1.2 var(--g-font); color: var(--g-mute); }
#wksite .mv-ai3 .ai-c { height: auto; min-height: 0; gap: 6px; }
#wksite .mv-ai3 .ai-c p { max-width: 86%; padding: 7px 10px; border-radius: 13px; font: 600 11px/1.4 var(--g-font); }
#wksite .mv-ai3 .ai-c p.q { background: var(--lc-cdddffc); color: var(--lc-d14f901); }
#wksite .mv-ai3 .ai-c p.a { background: var(--g-surf); color: var(--g-ink); }
#wksite .mv-ai3 .ai-in { min-height: 34px; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) 11px; font: 600 11px/1.3 var(--g-font); }
#wksite .mv-ai3 .ai-in i { width: 26px; height: 26px; }
@media (max-width: 900px) { #wksite .pstage .mv.mv-ai3 { zoom: 1; width: auto; } #wksite .ai-ph { width: 228px; height: 372px; } }
#wksite .pf-lb span.warn { background: var(--lc-4ce5e46); color: var(--lc-3cec153); }
/* Denah dengan nama unit panjang (Mandi Bola, Bom-bom Car) tetap muat: kolom boleh menyusut, nama boleh pindah baris */
#wksite .mv-mj .mj-g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#wksite .mv-mj .mj-g.few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#wksite .mv-mj .mj-g i b { max-width: 100%; overflow-wrap: anywhere; }
#wksite .cp-foot { margin: 0; font: 700 12px/1.2 var(--f-body); color: var(--ink-3); }
/* WhatsApp CRM: pembangun target (syarat menyala, penerima menyusut, pesan terkirim) */
#wksite .mv-crm { display: grid; gap: var(--space-sm); width: min(94%, 440px); padding: 18px; border-radius: 24px; background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--line), var(--shadow-3); }
#wksite .crm-h { display: grid; gap: var(--space-3xs); }
#wksite .crm-h b { font: 600 18px/1.2 var(--f-display); color: var(--ink); }
#wksite .crm-h span { font: 700 12px/1.3 var(--f-body); color: var(--ink-3); }
#wksite .crm-f { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
#wksite .crm-c { display: grid; gap: var(--space-3xs); margin: 0; padding: 9px 11px; border-radius: 12px; border: 1.5px dashed var(--line-2); background: var(--paper); opacity: .45; transition: opacity var(--t-card) var(--e-std), border-color var(--t-card) var(--e-std), background-color var(--t-card) var(--e-std), transform var(--t-card) var(--e-pop); }
#wksite .crm-c small { font: 700 11.5px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .crm-c b { font: 800 14px/1.2 var(--f-body); color: var(--ink); }
#wksite .crm-c.on { opacity: 1; border-style: solid; border-color: var(--wa); background: var(--wa-soft); transform: translateY(-2px); }
#wksite .crm-n { display: grid; gap: 6px; padding: var(--space-sm) 14px; border-radius: 14px; background: var(--ink); color: var(--paper); }
#wksite .crm-n small { font: 700 12px/1 var(--f-body); color: var(--lc-27769d2); }
#wksite .crm-n p { display: flex; align-items: baseline; gap: var(--space-xs); margin: 0; }
#wksite .crm-n p b { font: 600 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
#wksite .crm-n p b.bump { animation: calc-bump .32s var(--e-pop); }
#wksite .crm-n p span { font: 700 12.5px/1 var(--f-body); color: var(--lc-27769d2); }
#wksite .crm-n i { display: block; height: 8px; border-radius: 4px; background: var(--lc-75fac51); overflow: hidden; }
#wksite .crm-n em { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--brand); clip-path: inset(0 calc(100% - var(--w, 0%)) 0 0 round 4px); transition: clip-path 700ms var(--e-out); }
#wksite .crm-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) 10px; align-items: start; padding: 10px var(--space-sm); border-radius: 14px; background: var(--lc-496c274); opacity: var(--wk-js-hide, 1); transform: translateY(10px) scale(.97); transition: opacity var(--t-card) var(--e-std), transform var(--t-panel) var(--e-pop); }
#wksite .crm-msg > svg { width: 22px; height: 22px; color: var(--wa); }
#wksite .crm-msg p { display: grid; gap: var(--space-3xs); margin: 0; font: 700 13px/1.35 var(--f-body); color: var(--ink-2); }
#wksite .crm-msg p b { color: var(--ink); }
#wksite .crm-msg em { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font: 800 12.5px/1.2 var(--f-body); font-style: normal; color: var(--lc-4d35c21); }
#wksite .crm-msg em svg { width: 14px; height: 14px; }
#wksite .mv-crm.sent .crm-msg { opacity: 1; transform: none; }
#wksite .crm-code { font-style: normal; font-weight: 800; white-space: nowrap; color: var(--ink); }
/* Atur Program Stempel: pilih level (bahan kartu = app GuestStampFace), cara dapat stempel, tangga hadiah */
#wksite .mv-lyx { display: grid; gap: var(--space-sm); width: min(94%, 420px); padding: var(--space-md); border-radius: 24px; background: var(--lc-d14f901); box-shadow: 0 0 0 1px var(--line), var(--shadow-3); }
#wksite .lyx-lv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 12px; background: var(--paper-2); }
#wksite .lyx-lv button { height: 30px; border: 0; border-radius: 9px; background: none; font: 800 12px/1 var(--f-body); color: var(--ink-2); cursor: pointer; transition: background-color var(--t-tap) var(--e-std), color var(--t-tap) var(--e-std); }
#wksite .lyx-lv button[aria-pressed="true"] { background: var(--lc-d14f901); color: var(--ink); box-shadow: var(--shadow-1); }
#wksite .lyx-card { --gs-ink: var(--lc-e88a409); --gs-muted: var(--lc-121869e); --gs-glyph: var(--lc-cbcf105); position: relative; display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: 1.586; padding: var(--space-sm) 14px; border-radius: 16px; overflow: hidden; color: var(--gs-ink); background: linear-gradient(135deg, var(--lc-cbcf105), var(--lc-74d5943), var(--lc-672eba4), var(--lc-85e3727)); box-shadow: 0 22px 44px -16px var(--lc-a39d5ce), 0 2px 6px var(--lc-414b319); transition: background var(--t-panel) var(--e-std), color var(--t-panel) var(--e-std); }
#wksite .lyx-card[data-mat="mutiara"] { --gs-ink: var(--lc-2fc8193); --gs-muted: var(--lc-70b244e); --gs-glyph: var(--lc-204f097); background: linear-gradient(135deg, var(--lc-204f097), var(--lc-da0afae), var(--lc-da6d4c6), var(--lc-eb5dcb0)); }
#wksite .lyx-card[data-mat="perak"] { --gs-ink: var(--lc-29b0eb4); --gs-muted: var(--lc-26dbda2); --gs-glyph: var(--lc-8fd095a); background: linear-gradient(135deg, var(--lc-8fd095a), var(--lc-5ee4c76), var(--lc-c659925), var(--lc-6d319d2)); }
#wksite .lyx-card[data-mat="hitam"] { --gs-ink: var(--lc-99b49b4); --gs-muted: var(--lc-9892f27); --gs-glyph: var(--lc-1a8eb93); background: linear-gradient(135deg, var(--lc-0f59067), var(--lc-b2b88b3), var(--lc-80f8e00)); }
#wksite .lyx-pat, #wksite .lyx-sheen { position: absolute; inset: 0; pointer-events: none; }
#wksite .lyx-pat { background: repeating-linear-gradient(90deg, var(--lc-6f75f37) 0 1px, var(--lc-e0bfea0) 1px 2px, transparent 2px 4px); }
#wksite .lyx-card[data-mat="hitam"] .lyx-pat { background: repeating-radial-gradient(circle at 92% 8%, var(--lc-f4d0a0f) 0 1px, transparent 1.5px 7px); }
#wksite .lyx-sheen { background: linear-gradient(105deg, transparent 34%, var(--lc-25768e1) 50%, transparent 66%); transform: translateX(-130%); }
#wksite .pv.on .lyx-card .lyx-sheen, #wksite [data-vis].vis .lyx-card .lyx-sheen { animation: lyx-sheen 4.2s var(--e-std) infinite; }
#wksite .lyx-top, #wksite .lyx-mid, #wksite .lyx-bot { position: relative; }
#wksite .lyx-top { display: flex; justify-content: space-between; align-items: center; }
#wksite .lyx-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--lc-b8a990e); color: var(--lc-d14f901); font: 800 10px/1 var(--f-body); }
#wksite .lyx-lvt { display: inline-flex; align-items: center; gap: 5px; font: 800 10px/1 var(--f-body); letter-spacing: .16em; }
#wksite .lyx-lvt i { width: 7px; height: 7px; border-radius: 1px; background: var(--gs-ink); transform: rotate(45deg); }
#wksite .lyx-card[data-mat="hitam"] .lyx-lvt b { background: linear-gradient(100deg, var(--lc-d64a4ac), var(--lc-b4c40c2), var(--lc-60202db), var(--lc-ffb5b5d)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#wksite .lyx-card[data-mat="hitam"] .lyx-lvt i { background: var(--lc-095d608); }
#wksite .lyx-mid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); }
#wksite .lyx-n { display: grid; grid-template-columns: auto auto; align-items: baseline; }
#wksite .lyx-n b { font: 600 32px/1 var(--f-display); font-variant-numeric: tabular-nums; }
#wksite .lyx-n span { font: 700 14px/1 var(--f-display); color: var(--gs-muted); }
#wksite .lyx-n small { grid-column: 1 / -1; font: 800 9px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gs-muted); margin-top: var(--space-2xs); }
#wksite .lyx-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; justify-self: end; width: min(100%, 170px); }
#wksite .lyx-g i { aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--gs-ink) 10%, transparent); box-shadow: inset 0 1px 2px var(--lc-be0490b); }
#wksite .lyx-g i.goal { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gs-ink) 70%, transparent); }
#wksite .lyx-g i.on { background: var(--gs-ink); box-shadow: 0 1px 2px var(--lc-2fa0cc6); }
#wksite .lyx-card[data-mat="hitam"] .lyx-g i.on { background: linear-gradient(100deg, var(--lc-d64a4ac), var(--lc-b4c40c2), var(--lc-60202db), var(--lc-ffb5b5d)); }
#wksite .lyx-g i.land { animation: wk-stamp 620ms var(--e-pop) both; }
#wksite .lyx-bot { display: flex; justify-content: space-between; gap: var(--space-xs); font: 700 10px/1.2 var(--f-body); color: var(--gs-muted); }
#wksite .lyx-bot span:first-child { color: var(--gs-ink); }
#wksite .lyx-win { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3xs); background: var(--lc-63935d8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--lc-d14f901); opacity: var(--wk-js-hide, 1); transform: scale(.96); transition: opacity var(--t-card) var(--e-std), transform var(--t-card) var(--e-pop); }
#wksite .lyx-win.on { opacity: 1; transform: none; }
#wksite .lyx-win span { font-size: 26px; }
#wksite .lyx-win b { font: 600 17px/1.2 var(--f-display); }
#wksite .lyx-win em { font: 800 12px/1.2 var(--f-body); font-style: normal; color: var(--brand); }
#wksite .lyx-set { display: grid; gap: var(--space-xs); }
#wksite .lyx-row { display: grid; gap: 6px; margin: 0; }
#wksite .lyx-row small, #wksite .lyx-sub { font: 800 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#wksite .lyx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 12px; background: var(--paper-2); }
#wksite .lyx-seg button { height: 32px; border: 0; border-radius: 9px; background: none; font: 800 12.5px/1 var(--f-body); color: var(--ink-2); cursor: pointer; }
#wksite .lyx-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#wksite .lyx-rule { margin: 0; padding: var(--space-xs) 10px; border-radius: 10px; background: var(--brand-soft); font: 800 12.5px/1.35 var(--f-body); color: var(--brand-ink); }
#wksite .lyx-rule.pop { animation: tm-in 360ms var(--e-pop); }
#wksite .lyx-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#wksite .lyx-tiers li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; border: 1.5px solid var(--line); font: 700 13px/1.2 var(--f-body); color: var(--ink-2); transition: border-color var(--t-card) var(--e-std), background-color var(--t-card) var(--e-std); }
#wksite .lyx-tiers b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); font: 600 14px/1 var(--f-display); color: var(--ink); }
#wksite .lyx-tiers em { font: 800 11.5px/1 var(--f-body); font-style: normal; color: var(--ink-3); }
#wksite .lyx-tiers li.next { border-color: var(--brand-2); }
#wksite .lyx-tiers li.done { border-color: var(--lc-cf53d40); background: var(--lc-7d82e9c); color: var(--ink); }
#wksite .lyx-tiers li.done b { background: var(--ok); color: var(--lc-d14f901); }
#wksite .lyx-tiers li.done em { color: var(--ok); }
@keyframes lyx-sheen { 0%, 60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { #wksite .lyx-card .lyx-sheen, #wksite .lyx-g i.land, #wksite .lyx-rule.pop { animation: none !important; } }

/* ===== welkam-landing/src/css/59-profil.css (replika app, rupa tidak diubah; aturan .gcount yang tak terpakai disaring; animasi lebar/posisi jadi transform, tools/hallmark-css.mjs) ===== */
/* Tur Profil Tamu (/produk/profil-tamu, 23 Okt): daftar langkah + satu layar aplikasi gaya desktop (640x420, diskala JS lewat
   --pt-s) + keterangan berpanah. Desktop: langkah | layar | keterangan. HP: layar, keterangan di bawah (panah ke atas), lalu
   nomor langkah. Tampilan aktif = atribut data-view, gerak per langkah = .play + data-s (src/js/profil.js). */
#wksite .pt { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; gap: 28px; align-items: start; --pt-s: 1; }
#wksite .pt-steps { list-style: none; margin: 0; padding: var(--space-2xs) 0 0; display: grid; gap: var(--space-2xs); }
#wksite .pt-steps button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px var(--space-sm); border: 0; border-radius: 12px; background: none; text-align: left; font: 700 15px/1.25 var(--f-body); color: var(--ink-3); cursor: pointer; transition: background-color var(--t-card) var(--e-std), color var(--t-card) var(--e-std), box-shadow var(--t-card) var(--e-std); }
#wksite .pt-steps button span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); font: 800 13px/1 var(--f-body); color: var(--ink-3); transition: background-color var(--t-card) var(--e-std), color var(--t-card) var(--e-std); }
#wksite .pt-steps button em { font-style: normal; }
#wksite .pt-steps button:hover { color: var(--ink); }
#wksite .pt-steps button.done { color: var(--ink-2); }
#wksite .pt-steps button.done span { background: var(--brand-soft); color: var(--gold-text); }
#wksite .pt-steps button[aria-current] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
#wksite .pt-steps button[aria-current] span { background: var(--brand); color: var(--brand-ink); }
#wksite .pt-steps button:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* Layar: kotak tetap 640x420, diskala dari tengah atas */
#wksite .pt-stage { position: relative; width: 100%; height: calc(420px * var(--pt-s)); }
#wksite .pt-app { position: absolute; top: 0; left: 50%; width: 640px; height: 420px; transform: translateX(-50%) scale(var(--pt-s)); transform-origin: 50% 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-3); font-family: var(--f-body); color: var(--ink); text-align: left; }
#wksite .pt-app p { margin: 0; }
#wksite .pt-app i, #wksite .pt-app em { font-style: normal; }
#wksite .pt-app svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#wksite .pt-tb { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-sm); background: var(--paper-2); border-bottom: 1px solid var(--line); }
#wksite .pt-tb i { width: 9px; height: 9px; border-radius: 50%; background: var(--lc-bb3ac26); }
#wksite .pt-tb i:nth-child(2) { background: var(--lc-c2a936b); }
#wksite .pt-tb i:nth-child(3) { background: var(--lc-de6c7ea); }
#wksite .pt-tb span { flex: 1; margin-right: var(--space-xl); text-align: center; font: 700 11px/1 var(--f-body); color: var(--ink-3); }
#wksite .pt-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); }
#wksite .pt-nav { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm) var(--space-xs); background: var(--lc-bd0b8ee); border-right: 1px solid var(--line); }
#wksite .pt-logo { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 0 var(--space-xs) var(--space-2xs); border-radius: 8px; background: var(--brand); color: var(--brand-ink); font: 800 11px/1 var(--f-body); }
#wksite .pt-ni { display: flex; align-items: center; gap: 6px; padding: 7px var(--space-xs); border-radius: 8px; font: 700 10.5px/1 var(--f-body); color: var(--ink-3); transition: background-color var(--t-card) var(--e-std), color var(--t-card) var(--e-std); }
#wksite .pt-ni.on { background: var(--brand-soft); color: var(--brand-ink); }
#wksite .pt-ct { position: relative; overflow: hidden; background: var(--paper); }
#wksite .pt-v { position: absolute; inset: 0; padding: 14px var(--space-md); opacity: 0; visibility: hidden; transition: opacity 350ms var(--e-std), visibility 0s linear 350ms; }
#wksite .pt[data-view="board"] .pt-vb, #wksite .pt[data-view="detail"] .pt-vd, #wksite .pt[data-view="list"] .pt-vl { opacity: 1; visibility: visible; transition-delay: 0s; }
#wksite .pt-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#wksite .pt-hd b { font: 600 15px/1.2 var(--f-display); }

/* Papan Waitlist */
#wksite .pt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-sm); }
#wksite .pt-col { display: grid; gap: 7px; align-content: start; padding: var(--space-xs); border-radius: 12px; background: var(--paper-2); }
#wksite .pt-ch { font: 800 10.5px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .pt-ch em { margin-left: var(--space-2xs); padding: 1px 6px; border-radius: 999px; background: var(--card); color: var(--ink-3); }
#wksite .pt-cd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: var(--space-xs) 10px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
#wksite .pt-code { font: 600 21px/1 var(--f-display); color: var(--ink); }
#wksite .pt-nm { display: flex; align-items: center; gap: 6px; font: 800 12.5px/1.2 var(--f-body); }
#wksite .pt-nmt { position: relative; transition: color var(--t-tap) var(--e-std); }
#wksite .pt-vis { padding: var(--space-3xs) 6px; border-radius: 999px; background: var(--brand-soft); color: var(--gold-text); font: 800 10px/1.1 var(--f-body); }
#wksite .pt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-2xs) 0 3px !important; }
#wksite .pt-lv { padding: var(--space-3xs) 6px; border-radius: 999px; font: 800 9px/1.1 var(--f-body); }
#wksite .pt-lv.gold { background: var(--lc-d3b5db3); color: var(--lc-80f33e4); }
#wksite .pt-lv.silver { background: var(--lc-187b710); color: var(--lc-0cdcc93); }
#wksite .pt-lv.none { background: var(--paper-2); color: var(--ink-3); }
#wksite .pt-tag { padding: var(--space-3xs) 6px; border-radius: 6px; background: var(--lc-bf94728); color: var(--lc-4ba0b0b); font: 800 9px/1.1 var(--f-body); }
#wksite .pt-tag.warn { background: var(--lc-dd83b12); color: var(--bad); }
#wksite .pt-cm small { display: block; font: 700 9.5px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .pt-cur { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--lc-90f4d20); border: 2px solid var(--lc-d14f901); box-shadow: 0 2px 8px var(--lc-e2e1973); opacity: 0; pointer-events: none; }
#wksite .pt-dim { position: absolute; inset: 0; background: var(--lc-5a29650); opacity: 0; transition: opacity var(--t-card) var(--e-std); }
#wksite .pt-pn { position: absolute; top: 0; right: 0; bottom: 0; width: 282px; display: grid; gap: 9px; align-content: start; padding: var(--space-sm) 14px; background: var(--card); box-shadow: -14px 0 30px -14px var(--lc-8e6839e); transform: translateX(105%); transition: transform var(--t-panel) var(--e-out); }
#wksite .pt[data-s="2"] .pt-pn { transform: none; transition-delay: 850ms; }
#wksite .pt[data-s="2"] .pt-dim { opacity: 1; transition-delay: 850ms; }
#wksite .pt-ph { display: grid; gap: 6px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
#wksite .pt-pt { display: flex; align-items: center; justify-content: space-between; font: 800 13px/1.2 var(--f-body); }
#wksite .pt-x { display: inline-flex; color: var(--ink-3); }
#wksite .pt-who { display: flex; align-items: center; gap: 10px; }
#wksite .pt-who b { display: block; font: 800 14px/1.2 var(--f-body); }
#wksite .pt-who small { font: 700 10.5px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .pt-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--gold-text); font: 800 14px/1 var(--f-body); }
#wksite .pt-av.lg { width: 46px; height: 46px; font-size: 18px; }
#wksite .pt-av.sm { display: inline-grid; width: 18px; height: 18px; margin-right: 6px; font-size: 9px; }
#wksite .pt-row { display: flex; align-items: center; gap: var(--space-xs); font: 800 12px/1.2 var(--f-body); }
#wksite .pt-st { padding: var(--space-3xs) 7px; border-radius: 999px; background: var(--lc-d74378d); color: var(--lc-b275e50); font: 800 9.5px/1.1 var(--f-body); white-space: nowrap; }
#wksite .pt-sub { font: 700 10.5px/1.3 var(--f-body); color: var(--ink-2); }
#wksite .pt-okc { color: var(--ok); }
#wksite .pt-tags, #wksite .pt-acts { display: flex; gap: 6px; }
#wksite .pt-acts span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font: 800 10.5px/1 var(--f-body); }
#wksite .pt-wa { background: var(--wa); color: var(--lc-d14f901); }
#wksite .pt-tg { background: var(--paper-2); color: var(--ink); }
#wksite .pt-lbl { font: 800 9.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
#wksite .pt-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
#wksite .pt-hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs); padding: 6px var(--space-xs); border-radius: 8px; background: var(--paper); font: 700 10.5px/1.2 var(--f-body); }
#wksite .pt-hist span { color: var(--ink-3); }
#wksite .pt-hist em { color: var(--ok); }
#wksite .pt-hist em.no { color: var(--bad); }

/* Detail Pelanggan: isi digeser (--pt-y) seolah digulir */
#wksite .pt-vd { padding: 0; }
#wksite .pt-dv-in { display: grid; gap: 10px; padding: 14px var(--space-md) 18px; transform: translateY(calc(-1 * var(--pt-y, 0px))); transition: transform 700ms var(--e-out); }
#wksite .pt-dh { display: flex; align-items: center; gap: var(--space-sm); }
#wksite .pt-dh b { font: 600 18px/1.2 var(--f-display); }
#wksite .pt-optin { padding: var(--space-3xs) 6px; border-radius: 999px; background: var(--wa-soft); color: var(--lc-5e780db); font: 800 9px/1.1 var(--f-body); }
#wksite .pt-sum { display: flex; flex-wrap: wrap; gap: 5px; }
#wksite .pt-sum span { padding: 3px var(--space-xs); border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font: 700 10px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .pt-sum span:first-child { background: var(--lc-dd83b12); color: var(--bad); box-shadow: none; }
#wksite .pt-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#wksite .pt-stats div, #wksite .pt-box { border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
#wksite .pt-stats div { padding: var(--space-xs) 10px; }
#wksite .pt-stats small { display: block; font: 700 9.5px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .pt-stats b { display: block; margin-top: var(--space-3xs); font: 600 15px/1.2 var(--f-display); white-space: nowrap; }
#wksite .pt-box { padding: 10px var(--space-sm); border-radius: 12px; }
#wksite .pt-bt { margin-bottom: 6px !important; font: 800 10.5px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .pt-line { position: relative; height: 32px; margin: var(--space-3xs) 6px var(--space-2xs); }
#wksite .pt-line::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: var(--line-2); }
#wksite .pt-dot { position: absolute; left: var(--x); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--card); }
#wksite .pt-dot.r { background: var(--lc-91ba196); }
#wksite .pt-dot.x { background: var(--card); box-shadow: inset 0 0 0 2px var(--bad), 0 0 0 2px var(--card); }
#wksite .pt-dot small { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font: 700 9px/1 var(--f-body); color: var(--ink-3); }
#wksite .pt-leg { display: flex; flex-wrap: wrap; gap: var(--space-2xs) 14px; font: 700 9.5px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .pt-leg span { display: inline-flex; align-items: center; gap: 5px; }
#wksite .pt-leg .pt-dot { position: static; width: 9px; height: 9px; box-shadow: none; }
#wksite .pt-leg .pt-dot.x { box-shadow: inset 0 0 0 2px var(--bad); }
#wksite .pt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
#wksite .pt-pr { display: grid; justify-items: start; }
#wksite .pt-big { font: 600 24px/1 var(--f-display); }
#wksite .pt-andal { margin-top: 6px; padding: var(--space-3xs) 7px; border-radius: 999px; background: var(--lc-d74378d); color: var(--lc-b275e50); font: 800 9.5px/1.1 var(--f-body); }
#wksite .pt-ins { display: flex; gap: 6px; font: 700 11px/1.35 var(--f-body); }
#wksite .pt-ins svg { width: 14px; height: 14px; color: var(--gold-text); }
#wksite .pt-heat { display: grid; grid-template-rows: repeat(3, 9px); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
#wksite .pt-heat i { border-radius: 2px; background: var(--paper-2); }
#wksite .pt-heat .pt-h1 { background: var(--lc-667d6aa); }
#wksite .pt-heat .pt-h2 { background: var(--lc-c228056); }
#wksite .pt-heat .pt-h3 { background: var(--brand-2); }
#wksite .pt-hx { display: flex; justify-content: space-between; margin-top: 3px !important; font: 700 8.5px/1 var(--f-body); color: var(--ink-3); }
#wksite .pt-tabs { display: flex; gap: var(--space-md); padding: 0 var(--space-3xs); border-bottom: 1px solid var(--line); font: 700 11px/1 var(--f-body); color: var(--ink-3); }
#wksite .pt-tabs b, #wksite .pt-tabs span { padding: var(--space-2xs) 0 7px; }
#wksite .pt-tabs b { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
#wksite .pt-res { display: grid; gap: 6px; }
#wksite .pt-br { display: grid; grid-template-columns: 96px minmax(0, 1fr) 16px; gap: var(--space-xs); align-items: center; font: 700 10px/1.2 var(--f-body); color: var(--ink-2); }
#wksite .pt-br i { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
#wksite .pt-br i::after, #wksite .pt-stg i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: inherit; background: var(--brand); transform-origin: 0 50%; }
#wksite .pt-br.ok i::after { background: var(--ok); }
#wksite .pt-br.no i::after { background: var(--bad); }
#wksite .pt-br.cx i::after { background: var(--lc-00bc52f); }
#wksite .pt-br b { text-align: right; color: var(--ink); }

/* Daftar Pelanggan */
#wksite .pt-comp { margin: var(--space-2xs) 0 var(--space-xs) !important; font: 700 10px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .pt-stg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#wksite .pt-stg div { display: grid; gap: var(--space-3xs); padding: 7px var(--space-xs); border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
#wksite .pt-stg small { min-height: 21px; font: 700 9px/1.15 var(--f-body); color: var(--ink-3); }
#wksite .pt-stg b { font: 600 16px/1.1 var(--f-display); }
#wksite .pt-stg em { font: 800 9.5px/1 var(--f-body); color: var(--gold-text); }
#wksite .pt-stg i { position: relative; display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
#wksite .pt-tool { display: flex; gap: 6px; margin: 10px 0 var(--space-xs) !important; }
#wksite .pt-tool span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font: 700 9.5px/1 var(--f-body); white-space: nowrap; }
#wksite .pt-q { flex: 1; color: var(--ink-3); }
#wksite .pt-tool .pt-f.on { background: var(--brand-soft); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-2); }
#wksite .pt-tbl { border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
#wksite .pt-tr { display: grid; grid-template-columns: 1.2fr 1.15fr 1fr .6fr .95fr; gap: var(--space-xs); align-items: center; padding: 7px 10px; border-top: 1px solid var(--line); font: 700 10.5px/1.2 var(--f-body); }
#wksite .pt-tr.th { border-top: 0; background: var(--paper); font: 800 9px/1.2 var(--f-body); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
#wksite .pt-tr span:first-child { display: inline-flex; align-items: center; }
#wksite .pt-tr small { display: block; font: 700 8.5px/1.2 var(--f-body); color: var(--bad); }

/* Keterangan + panah + cincin */
#wksite .pt-side { position: relative; align-self: stretch; }
#wksite .pt-call { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-md) 18px 18px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); transition: transform 450ms var(--e-out); }
#wksite .pt-cb { grid-row: 1; grid-column: 1; visibility: hidden; opacity: 0; transition: opacity var(--t-card) var(--e-std), visibility 0s linear var(--t-card); }
#wksite .pt-cb.on { visibility: visible; opacity: 1; transition-delay: 0s; }
#wksite .pt-cb small { font: 800 12px/1.2 var(--f-body); letter-spacing: .04em; color: var(--gold-text); }
#wksite .pt-cb b { display: block; margin: var(--space-2xs) 0 6px; font: 600 19px/1.25 var(--f-display); color: var(--ink); }
#wksite .pt-cb p { margin: 0; font: 600 15px/1.5 var(--f-body); color: var(--ink-2); }
#wksite .pt-pg { grid-row: 2; display: block; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
#wksite .pt-pg i { display: block; width: 100%; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
#wksite .pt.play .pt-pg i { animation: pt-bar var(--pt-ms, 5s) linear both; }
#wksite .pt:not(.vis) .pt-pg i { animation-play-state: paused; }
#wksite .pt:not(.ptjs) .pt-pg { display: none; }
#wksite .pt-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 250ms var(--e-std); filter: drop-shadow(0 0 1.5px var(--lc-d14f901)) drop-shadow(0 0 1.5px var(--lc-d14f901)); }
#wksite .pt-arl { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
#wksite .pt-arh { fill: var(--ink); opacity: 0; transition: opacity 150ms var(--e-std) 380ms; }
#wksite .pt.arr .pt-ov { opacity: 1; }
#wksite .pt.arr .pt-arl { stroke-dashoffset: 0; transition: stroke-dashoffset 450ms var(--e-out); }
#wksite .pt.arr .pt-arh { opacity: 1; }
#wksite .pt-ring { position: absolute; z-index: 2; border-radius: 10px; box-shadow: 0 0 0 2px var(--brand-2), 0 0 0 6px var(--lc-4b14463); pointer-events: none; opacity: 0; transition: opacity 250ms var(--e-std); }
#wksite .pt.arr .pt-ring { opacity: 1; animation: pt-ring 1.6s var(--e-std) 300ms infinite; }

/* Gerak per langkah */
#wksite .pt.play[data-s="1"] .pt-col { animation: pt-up 500ms var(--e-out) both; }
#wksite .pt.play[data-s="1"] .pt-col + .pt-col { animation-delay: 120ms; }
#wksite .pt.play[data-s="1"] .pt-vis { animation: pt-pop 500ms var(--e-pop) 550ms both; }
#wksite .pt.play[data-s="2"] .pt-cur { animation: pt-cur 1100ms var(--e-out) both; }
#wksite .pt.play[data-s="2"] .pt-nmt { animation: pt-hit 1100ms linear both; }
#wksite .pt.play[data-s="3"] .pt-stats div { animation: pt-up 450ms var(--e-out) both; }
#wksite .pt.play[data-s="3"] .pt-stats div:nth-child(2) { animation-delay: 70ms; }
#wksite .pt.play[data-s="3"] .pt-stats div:nth-child(3) { animation-delay: 140ms; }
#wksite .pt.play[data-s="3"] .pt-stats div:nth-child(4) { animation-delay: 210ms; }
#wksite .pt.play[data-s="3"] .pt-stats div:nth-child(5) { animation-delay: 280ms; }
#wksite .pt.play[data-s="4"] .pt-line .pt-dot { animation: pt-pop 400ms var(--e-pop) calc(450ms + var(--k) * 90ms) both; }
#wksite .pt.play[data-s="5"] .pt-heat i { animation: pt-fade 300ms var(--e-std) calc(400ms + var(--k) * 18ms) both; }
#wksite .pt.play[data-s="5"] .pt-andal { animation: pt-pop 500ms var(--e-pop) 600ms both; }
#wksite .pt.play[data-s="6"] .pt-br i::after { animation: pt-grow 700ms var(--e-out) 450ms both; }
#wksite .pt.play[data-s="7"] .pt-stg div { animation: pt-up 450ms var(--e-out) calc(var(--k) * 60ms) both; }
#wksite .pt.play[data-s="7"] .pt-stg i::after { animation: pt-grow 700ms var(--e-out) 450ms both; }
#wksite .pt.play[data-s="7"] .pt-f.on { animation: pt-glow 900ms var(--e-std) 900ms 2 both; }
@keyframes pt-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes pt-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes pt-fade { from { opacity: 0; } }
@keyframes pt-grow { from { transform: scaleX(0); } }
@keyframes pt-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pt-cur { 0% { opacity: 0; transform: translate(150px, 110px); } 20% { opacity: 1; } 62% { transform: translate(0, 0) scale(1); } 72% { transform: scale(.7); } 84% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes pt-hit { 0%, 66% { color: inherit; } 72%, 100% { color: var(--gold-text); } }
@keyframes pt-glow { 50% { box-shadow: 0 0 0 1px var(--brand-2), 0 0 0 5px var(--lc-97933bc); } }
@keyframes pt-ring { 50% { box-shadow: 0 0 0 2px var(--brand-2), 0 0 0 9px var(--lc-79c8a54); } }

/* Layar sempit: layar penuh lebar, keterangan di bawah, nomor langkah di bawahnya */
@media (max-width: 1099px) {
  #wksite .pt { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #wksite .pt-stage { order: 1; }
  #wksite .pt-side { order: 2; }
  #wksite .pt-steps { order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0; }
  #wksite .pt-steps button { width: auto; padding: 6px var(--space-sm) 6px 6px; font-size: 13px; }
  #wksite .pt-call { position: relative; top: auto; transition: none; padding: 14px var(--space-md) var(--space-md); }
  #wksite .pt-cb b { font-size: 17px; }
  #wksite .pt-cb p { font-size: 14.5px; }
}
@media (max-width: 700px) { #wksite .pt { --pt-s: .5; } }
@media (max-width: 639px) {
  #wksite .pt-steps button { padding: 0; background: none; box-shadow: none; }
  #wksite .pt-steps button[aria-current] { background: none; box-shadow: none; }
  #wksite .pt-steps button span { width: 36px; height: 36px; font-size: 14px; }
  #wksite .pt-steps button em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #wksite .pt, #wksite .pt * { animation: none !important; transition: none !important; }
  #wksite .pt-pg { display: none; }
  #wksite .pt-arl { stroke-dashoffset: 0; }
}

/* Cerita outlet: diadaptasi dari welkam-landing/src/css/52-stories.css oleh tools/make-stories-css.py (warna lewat token, label tanpa kapital, keadaan tersembunyi di bawah .js). */
/* Cerita outlet: panggung bertab (beranda #cerita) + versi tunggal (blok story halaman SEO). Visual diputar saat .play
   (core.js menambahkannya tiap tab aktif / saat masuk layar). Semua gerak mati di prefers-reduced-motion. */
#wksite .sto { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(20px, 2.6vw, 32px); align-items: stretch; margin-top: 32px; }
#wksite .sto-l { display: grid; gap: var(--space-xs); align-content: center; }
#wksite .sto-l button { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md) var(--space-md) var(--space-sm); border: 0; border-radius: var(--r-lg); background: transparent; text-align: left; cursor: pointer; color: var(--ink); transition: background-color var(--t-card) var(--e-std), box-shadow var(--t-card) var(--e-std); }
#wksite .sto-l button:hover { background: var(--paper-2); }
#wksite .sto-l button[aria-selected=true] { background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
#wksite .sto-tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
#wksite .sto-tile img { width: 44px; height: 34px; object-fit: contain; }
#wksite .sto-tile b { font: 600 18px/1 var(--f-display); color: var(--ink); }
#wksite .sto-tile.f { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
#wksite .sto-tile.f svg { width: 24px; height: 24px; }
#wksite .sto-tx { display: grid; gap: var(--space-2xs); min-width: 0; }
#wksite .sto-tx small { font: 800 12px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .sto-tx b { font: 600 17px/1.25 var(--f-display); color: var(--ink); }
#wksite .sto-bar { position: absolute; left: 84px; right: var(--space-md); bottom: var(--space-xs); height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity var(--t-card) var(--e-std); }
#wksite .sto-bar i { display: block; width: 100%; height: 100%; background: var(--brand-2); transform: scaleX(0); transform-origin: left; }
#wksite .sto-l button[aria-selected=true] .sto-bar { opacity: 1; }
#wksite .sto.run .sto-l button[aria-selected=true] .sto-bar i { animation: sto-prog var(--sto-dur, 6500ms) linear forwards; }
#wksite .sto.hold .sto-l button[aria-selected=true] .sto-bar i { animation-play-state: paused; }
#wksite .sto-r { display: grid; min-width: 0; border-radius: var(--r-xl); background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); overflow: hidden; }
#wksite .sto-p { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto; opacity: 0; visibility: hidden; transition: opacity .45s var(--e-std), visibility 0s linear .45s; }
#wksite .sto-p.on { opacity: 1; visibility: visible; transition: opacity .45s var(--e-std); }
#wksite .sto-v { position: relative; height: 330px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, var(--color-paper-3), transparent 60%), var(--paper-2); }
#wksite .sto-c { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm) 20px; flex-wrap: wrap; padding: 20px 28px var(--space-lg); }
#wksite .sto-c p { margin: 0; flex: 1 1 260px; font: 600 16px/1.5 var(--f-body); color: var(--ink-2); }
#wksite .st-more { display: inline-flex; align-items: center; gap: var(--space-xs); font: 800 14px/1 var(--f-body); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; white-space: nowrap; }
#wksite .st-more svg { width: 14px; height: 14px; }

/* Versi tunggal di halaman SEO */
#wksite .sto.solo { display: block; margin-top: 28px; }
#wksite .sto.solo .sto-p { opacity: 1; visibility: visible; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: none; border-radius: var(--r-xl); background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); overflow: hidden; }
#wksite .sto.solo .sto-v { height: 300px; }
#wksite .sto.solo .sto-c { display: grid; align-content: center; gap: var(--space-sm); padding: 28px 32px; }
#wksite .sto.solo .sto-c p { flex: none; font-weight: 500; }
#wksite .sto-who { display: flex; align-items: center; gap: var(--space-sm); }
#wksite .sto-who span { display: grid; gap: var(--space-3xs); }
#wksite .sto-who span b { font: 600 17px/1.2 var(--f-display); color: var(--ink); }
#wksite .sto-who span small { font: 800 12px/1.2 var(--f-body); color: var(--ink-3); }

/* Visual bersama */
#wksite .sv { position: relative; display: grid; place-items: center; gap: var(--space-sm); font: 700 13px/1.2 var(--f-body); color: var(--ink); }
#wksite .sv svg { width: 16px; height: 16px; }
#wksite .tkt { display: grid; gap: var(--space-3xs); padding: var(--space-md) 20px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); text-align: left; }
#wksite .tkt small { font: 700 12px/1.2 var(--f-body); color: var(--ink-3); }
#wksite .tkt b { font: 600 34px/1 var(--f-display); letter-spacing: -.01em; }
#wksite .tkt span { font: 700 13.5px/1.3 var(--f-body); color: var(--ink-2); white-space: nowrap; }
#wksite .tkt span i { font-style: normal; display: inline-block; min-width: .6em; color: var(--ink); }
#wksite .ntf { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: 14px; background: var(--ink); color: var(--card); box-shadow: var(--shadow-2);  transform: translateY(-8px) scale(.96); white-space: nowrap; }
.js #wksite .ntf { opacity: 0; }
#wksite .play .ntf { animation: sto-in .45s var(--e-pop) 2.7s both; }
#wksite .sv-walk, #wksite .sv-cup { position: static; } /* notifikasi menempel ke sudut panggung, tidak menutupi isi */

/* Mio Udon: kalender terisi lalu cap Penuh */
/* Kalender tamu: disalin dari views/reservation/ReservationScheduleCard.css (rupa K-D tema tamu). Warna var --gt-* diganti token situs. */
#wksite .mc { --mc-text: var(--app-ink); --mc-text-2: var(--app-ink-2); --mc-text-3: color-mix(in oklab, var(--app-ink) 48%, transparent); --mc-hair: color-mix(in oklab, var(--app-ink) 10%, transparent); --mc-av: var(--app-warm);
  display: flex; flex-direction: column; gap: 10px; width: min(340px, 100%); padding: var(--space-md) 18px 18px; border-radius: 20px; background: var(--color-white); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); font-family: var(--font-body); color: var(--mc-text); }
#wksite .mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
#wksite .mc-month { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--mc-text); }
#wksite .mc-tz { font-size: 12px; line-height: 1.4; color: var(--mc-text-2); }
#wksite .mc-nav { display: flex; gap: var(--space-xs); flex-shrink: 0; }
#wksite .mc-arr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mc-hair); color: var(--mc-text); }
#wksite .mc-arr svg { width: 18px; height: 18px; }
#wksite .mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 6px; text-align: center; }
#wksite .mc-dow { padding-bottom: var(--space-3xs); font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--mc-text-2); }
#wksite .mc-d { justify-self: center; display: grid; place-items: center; width: min(40px, 100%); aspect-ratio: 1; border-radius: 50%; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mc-text); }
#wksite .mc-d.off { color: var(--mc-text-3); text-decoration: line-through; text-decoration-color: currentColor; }
#wksite .mc-d.out { color: var(--mc-text-3); opacity: .55; }
/* Gerak: tanggal tampak bisa dipesan (latar tamu), lalu satu per satu penuh dan dicoret */
#wksite .play .mc-d.off { animation: mc-full .35s var(--e-out) both; animation-delay: var(--d); }
@keyframes mc-full { from { background: var(--mc-av); color: var(--mc-text); text-decoration-color: transparent; } to { background: transparent; color: var(--mc-text-3); text-decoration-color: currentColor; } }
#wksite .sv-cal .toast { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2);  white-space: nowrap; }
.js #wksite .sv-cal .toast { opacity: 0; }
#wksite .play .sv-cal .toast { animation: sto-toast 1.6s var(--e-out) .3s both; }
#wksite .sv-cal .stamp { position: absolute; right: 12%; bottom: 14%; padding: var(--space-sm) var(--space-md); border-radius: 12px; background: var(--ink); color: var(--card); font: 800 16px/1 var(--f-body); font-style: normal; letter-spacing: .02em; transform: rotate(-8deg) scale(.4);  }
.js #wksite .sv-cal .stamp { opacity: 0; }
#wksite .play .sv-cal .stamp { animation: sto-stamp .5s var(--e-pop) 1.55s both; }

/* Obihiro (22 Okt): peta kawasan Blok M. Pembungkus .mp-me selebar peta digeser translate(x%, y%) = titik di peta (hanya transform). */
#wksite .sv-walk { width: 100%; }
#wksite .mp { position: relative; width: min(560px, 94%); height: 250px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  background:
    linear-gradient(90deg, transparent calc(35% - 8px), color-mix(in oklab, var(--color-white) 90%, transparent) calc(35% - 8px) calc(35% + 8px), transparent calc(35% + 8px)),
    linear-gradient(180deg, transparent calc(60% - 8px), color-mix(in oklab, var(--color-white) 90%, transparent) calc(60% - 8px) calc(60% + 8px), transparent calc(60% + 8px)),
    linear-gradient(90deg, transparent calc(72% - 5px), color-mix(in oklab, var(--color-white) 65%, transparent) calc(72% - 5px) calc(72% + 5px), transparent calc(72% + 5px)),
    radial-gradient(70px 50px at 90% 86%, color-mix(in oklab, var(--color-wa) 14%, transparent), transparent 70%),
    radial-gradient(60px 40px at 8% 18%, color-mix(in oklab, var(--color-wa) 10%, transparent), transparent 70%),
    var(--paper-2); }
#wksite .mp-area { position: absolute; left: var(--space-md); top: var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-2xs); font: 800 12px/1 var(--f-body); color: var(--ink-3); }
#wksite .mp-area svg { width: 13px; height: 13px; }
#wksite .sv .mp-path { position: absolute; inset: 0; width: 100%; height: 100%;  }
.js #wksite .sv .mp-path { opacity: 0; } /* .sv svg (16 px) jangan menimpa peta */
#wksite .mp-path path { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 6; }
#wksite .mp-home, #wksite .mp-spot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
#wksite .mp-home { display: grid; justify-items: center; gap: var(--space-2xs); }
#wksite .mp-home .sto-tile { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 0 0 2px var(--brand), var(--shadow-2); }
#wksite .mp-home .sto-tile img { width: 40px; height: 30px; }
#wksite .mp-home small { position: absolute; top: calc(100% + var(--space-2xs)); font: 800 12px/1 var(--f-body); white-space: nowrap; color: var(--ink); }
#wksite .mp-spot { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--r-pill); background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); font: 800 12.5px/1 var(--f-body); white-space: nowrap; }
#wksite .mp-spot svg { width: 14px; height: 14px; color: var(--gold-text); }
#wksite .mp-me { position: absolute; inset: 0; transform: translate(18%, 70%); pointer-events: none; }
#wksite .mp-tk { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 30px)); display: inline-flex; align-items: baseline; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--ink); color: var(--card); box-shadow: var(--shadow-2); white-space: nowrap; font: 700 12px/1 var(--f-body); }
#wksite .mp-tk::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
#wksite .mp-tk b { font: 600 15px/1 var(--f-display); color: var(--brand); }
#wksite .play .mp-tk b { animation: mp-called-b .35s var(--e-out) 4s both; }
#wksite .mp-tk i { font-style: normal; }
#wksite .play .mp-path { animation: sto-in .6s var(--e-out) .2s both; }
#wksite .play .mp-me { animation: mp-walk 6s var(--e-std) both; }
#wksite .play .mp-spot { animation: mp-hit .5s var(--e-pop) var(--t) both; }
#wksite .play .mp-tk { animation: mp-called .35s var(--e-out) 4s both; }
#wksite .play .sv-walk .ntf { animation-delay: 4s; }@keyframes mp-walk { 0%, 13% { transform: translate(18%, 70%); } 25%, 35% { transform: translate(52%, 40%); } 47%, 55% { transform: translate(80%, 44%); } 67%, 73% { transform: translate(64%, 82%); } 88%, 100% { transform: translate(18%, 70%); }}@keyframes mp-hit { 0% { transform: translate(-50%, -50%) scale(1); } 45% { transform: translate(-50%, -50%) scale(1.12); } 100% { transform: translate(-50%, -50%) scale(1); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand), var(--shadow-1); }}@keyframes mp-called { to { background: var(--brand); color: var(--brand-ink); }}@keyframes mp-called-b { to { color: var(--brand-ink); }}

/* Enchanting Valley (22 Okt): sambil menunggu wahana, struk jajan di resto sekitar muncul satu per satu dan total belanja naik */
#wksite .sv-cup { width: 100%; }
#wksite .eco { display: grid; grid-template-columns: auto auto; align-items: end; justify-content: center; gap: 32px var(--space-lg); width: min(560px, 94%); }
#wksite .eco-shops { display: flex; gap: var(--space-sm); }
#wksite .eco-s { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--space-xs); width: 84px; height: 84px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
#wksite .eco-s > svg { width: 30px; height: 30px; }
#wksite .eco-s small { font: 800 12px/1 var(--f-body); color: var(--ink-2); }
#wksite .eco-s em { position: absolute; left: 50%; bottom: calc(100% + var(--space-xs)); transform: translate(-50%, 10px); padding: var(--space-xs) var(--space-xs); border-radius: 10px; background: var(--ok); color: var(--color-white); font: 800 12px/1 var(--f-body); font-style: normal; white-space: nowrap;  }
.js #wksite .eco-s em { opacity: 0; }
#wksite .eco-sum { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0; padding: var(--space-md) 20px; border-radius: 16px; background: var(--ink); color: var(--card); }
#wksite .eco-sum span { font: 700 14px/1.2 var(--f-body); color: color-mix(in oklab, var(--color-on-night) 78%, transparent); }
#wksite .eco-sum b { display: inline-block; font: 600 24px/1 var(--f-display); color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
#wksite .play .eco-s { animation: eco-hit .5s var(--e-pop) var(--t) both; }
#wksite .play .eco-s em { animation: eco-rcpt .5s var(--e-pop) var(--t) both; }
#wksite .play .eco-sum b { animation: eco-bump 1.1s var(--e-std) 1.1s 3 both; } /* berdenyut tiap struk masuk (1,1 / 2,2 / 3,3 dtk) */
#wksite .play .eco .tkt { animation: eco-called .35s var(--e-out) 4.4s both; }
#wksite .sv-cup .ntf { right: auto; left: 20px; } /* kiri: tidak menabrak struk toko ketiga */
#wksite .play .sv-cup .ntf { animation-delay: 4.4s; }@keyframes eco-hit { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--ok), var(--shadow-2); }}@keyframes eco-rcpt { to { opacity: 1; transform: translate(-50%, 0); }}@keyframes eco-bump { 0%, 35%, 100% { transform: scale(1); } 15% { transform: scale(1.14); }}@keyframes eco-called { to { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand), var(--shadow-2); }}

/* Barber&Co: target, pesan WA, datang hari itu */
#wksite .sv-tgt { justify-items: center; gap: var(--space-md); }
#wksite .flt { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
#wksite .flt .chip { padding: var(--space-xs) var(--space-sm); border-radius: var(--r-pill); background: var(--card); box-shadow: 0 0 0 1px var(--line); white-space: nowrap;  transform: translateY(8px); }
.js #wksite .flt .chip { opacity: 0; }
#wksite .play .flt .chip { animation: sto-in .4s var(--e-pop) .1s both; }
#wksite .play .flt .chip + .chip { animation-delay: .35s; }
#wksite .bub { width: min(320px, 78vw); padding: var(--space-sm) var(--space-md); border-radius: 4px 16px 16px 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); text-align: left;  transform: translateY(8px); }
.js #wksite .bub { opacity: 0; }
#wksite .bub b { display: flex; align-items: center; gap: var(--space-xs); font: 800 12px/1.2 var(--f-body); color: var(--wa); margin-bottom: var(--space-2xs); }
#wksite .bub p { margin: 0; font: 600 14px/1.45 var(--f-body); color: var(--ink); }
#wksite .play .bub { animation: sto-in .5s var(--e-out) .8s both; }
#wksite .sv-tgt .ok { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--r-pill); background: var(--ink); color: var(--card);  transform: translateY(8px); white-space: nowrap; }
.js #wksite .sv-tgt .ok { opacity: 0; }
#wksite .play .sv-tgt .ok { animation: sto-in .45s var(--e-pop) 1.9s both; }@keyframes sto-prog { to { transform: scaleX(1); }}@keyframes sto-fill { to { background: var(--brand); color: var(--brand-ink); }}@keyframes sto-toast { 0% { opacity: 0; transform: translateY(10px); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); }}@keyframes sto-stamp { to { opacity: 1; transform: rotate(-8deg) scale(1); }}@keyframes sto-in { to { opacity: 1; transform: none; }}@keyframes sto-reveal { to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }}@keyframes sto-grow { to { transform: scaleX(1); }}@media (max-width: 900px) {
  #wksite .sto { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  #wksite .sto-l { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); gap: var(--space-xs); margin-inline: calc(-1 * var(--gut)); padding: var(--space-3xs) var(--gut) var(--space-xs); scrollbar-width: none; }
  #wksite .sto-l::-webkit-scrollbar { display: none; }
  #wksite .sto-l button { flex: 0 0 auto; width: min(260px, 76vw); scroll-snap-align: start; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-sm); }
  #wksite .sto-tile { width: 44px; height: 44px; border-radius: 12px; }
  #wksite .sto-tile img { width: 38px; height: 28px; }
  #wksite .sto-tx b { font-size: 15px; }
  #wksite .sto-bar { left: var(--space-2xl); }
  #wksite .sto-v { height: 270px; }
  #wksite .sto-c { padding: var(--space-md) 20px 20px; }
  #wksite .sto.solo .sto-p { grid-template-columns: minmax(0, 1fr); }
  #wksite .sto.solo .sto-v { height: 260px; }
  #wksite .sto.solo .sto-c { padding: 20px 20px var(--space-lg); }
  #wksite .mp { height: 206px; }
  #wksite .mp-area-k { display: none; } /* HP: cukup "Blok M", supaya tidak tertutup kabar di sudut */
  #wksite .mp-spot { padding: var(--space-xs) var(--space-xs); font-size: 12px; }
  #wksite .mp-home .sto-tile { width: 40px; height: 40px; }
  #wksite .mp-home .sto-tile img { width: 34px; height: 26px; }
  #wksite .eco { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-xl); }
  #wksite .eco .tkt { justify-self: start; display: flex; align-items: baseline; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 14px; }
  #wksite .eco .tkt b { font-size: 20px; }
  #wksite .sv-cup .ntf { display: none; } /* HP: tiket sendiri berubah jadi Dipanggil, kabar sudut akan menabrak tiket */
  #wksite .eco-s { width: 72px; height: 72px; }
  #wksite .eco-sum { width: 100%; padding: var(--space-sm) var(--space-md); }
  #wksite .eco-sum b { font-size: 21px; }
  #wksite .tkt { padding: var(--space-sm) var(--space-md); }
  #wksite .tkt b { font-size: 28px; }
  #wksite .ntf { top: var(--space-sm); right: var(--space-sm); }}@media (prefers-reduced-motion: reduce) {
  #wksite .sto *, #wksite .sto *::before { animation: none !important; transition: none !important; }
  #wksite .cal-g i { background: var(--brand); color: var(--brand-ink); }.js #wksite .sv-cal .stamp { opacity: 1; transform: rotate(-8deg); }.js #wksite .ntf, .js #wksite .flt .chip, .js #wksite .bub, .js #wksite .sv-tgt .ok, .js #wksite .mp-path { opacity: 1; transform: none; }
  #wksite .mp-spot { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand), var(--shadow-1); }.js #wksite .eco-s em { opacity: 1; transform: translate(-50%, 0); }}

/* Barber&Co (22 Okt): target -> promo terkirim (centang biru) -> pelanggan datang hari itu juga */
#wksite .tg3 { display: grid; gap: var(--space-sm); width: min(440px, 92%); text-align: left; }
#wksite .tg3-seg { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
#wksite .tg3-seg span { padding: var(--space-xs) var(--space-sm); border-radius: var(--r-pill); background: var(--card); box-shadow: 0 0 0 1px var(--line); font: 800 12.5px/1 var(--f-body); }
#wksite .tg3-wa { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm); border-radius: 4px 16px 16px 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
#wksite .tg3-wa i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-wa); }
#wksite .tg3-wa i svg { width: 15px; height: 15px; }
#wksite .tg3-wa b { display: block; font: 800 12px/1.2 var(--f-body); color: var(--color-success-ink); }
#wksite .tg3-wa small { font: 600 12.5px/1.35 var(--f-body); color: var(--ink); }
#wksite .tg3-wa em { align-self: end; font: 800 12px/1 var(--f-body); font-style: normal; color: var(--color-muted); }
#wksite .tg3-feed { display: grid; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm); border-radius: 16px; background: var(--ink); color: var(--card); }
#wksite .tg3-feed small { font: 800 12px/1 var(--f-body); color: var(--brand); }
#wksite .tg3-feed p { display: grid; grid-template-columns: 26px auto 1fr 16px; align-items: center; gap: var(--space-xs); margin: 0; font: 700 12.5px/1.2 var(--f-body); }
#wksite .tg3-feed p span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font: 800 12px/1 var(--f-body); }
#wksite .tg3-feed p em { font-style: normal; font-weight: 600; color: color-mix(in oklab, var(--color-on-night) 72%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wksite .tg3-feed p svg { width: 15px; height: 15px; color: var(--color-success-line); }
#wksite .tg3-seg span, #wksite .tg3-wa, #wksite .tg3-feed, #wksite .tg3-feed p {  transform: translateY(8px); }
.js #wksite .tg3-seg span, .js #wksite .tg3-wa, .js #wksite .tg3-feed, .js #wksite .tg3-feed p { opacity: 0; }
#wksite .play .tg3-seg span { animation: sto-in .4s var(--e-pop) .1s both; }
#wksite .play .tg3-seg span + span { animation-delay: .3s; }
#wksite .play .tg3-wa { animation: sto-in .45s var(--e-out) .7s both; }
#wksite .play .tg3-wa em { animation: tg3-read .3s ease 1.4s both; }@keyframes tg3-read { to { color: var(--app-wa-read); }}
#wksite .play .tg3-feed { animation: sto-in .4s var(--e-out) 1.7s both; }
#wksite .play .tg3-feed p { animation: sto-in .4s var(--e-pop) both; animation-delay: calc(2.1s + var(--i) * .6s); }@media (max-width: 900px) { #wksite .tg3 { gap: var(--space-xs); } #wksite .tg3-wa small { font-size: 12px; } #wksite .tg3-feed { padding: var(--space-xs) var(--space-sm); gap: var(--space-2xs); }}@media (prefers-reduced-motion: reduce) {.js #wksite .tg3-seg span, .js #wksite .tg3-wa, .js #wksite .tg3-feed, .js #wksite .tg3-feed p { opacity: 1; transform: none; }}

/* Kartu Mio Udon: kalender tamu asli (sel 40px) lebih tinggi dari panggung biasa */
#wksite .sto-v:has(.mc) { height: auto; min-height: 372px; padding-block: var(--space-md); }

/* ===== Situs v3 (kelas r-*), sistem Hallmark brand: tokens.css + base.css. Semua warna dan huruf lewat token. ===== */
#wksite.r-site { position: relative; background: var(--color-paper); color: var(--color-ink); font: var(--weight-body) var(--text-md)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }

/* Dasar replika: spesifisitas nol lewat :where() supaya kelas r-* menang; replika app tetap menang karena ber-#wksite */
:where(#wksite) :is(h4, ul, ol, figure, blockquote) { margin: 0; }
:where(#wksite) :is(ul, ol) { padding: 0; list-style: none; }
:where(#wksite) a { color: inherit; text-decoration: none; }
:where(#wksite) svg:where(:has(> use)) { width: 20px; height: 20px; flex: none; }
:where(#wksite) :is(button, input, select, textarea) { color: inherit; }
:where(#wksite) button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(#wksite) sup { font-size: .62em; line-height: 0; vertical-align: .55em; }
#wksite .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#wksite :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.r-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografi ---------- */
.r-h1 { font-size: clamp(2.5rem, 4.2vw + 0.75rem, 4.75rem); line-height: 0.98; max-width: 13ch; }
.r-h2 { font-size: var(--text-section); max-width: 16ch; }
.r-h3 { font-size: var(--text-title); line-height: 1.2; max-width: 30ch; }
.r-lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 44ch; }
.r-lead a, .r-fine a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
.r-lbl { font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); }
.r-live .r-lbl { color: var(--color-on-night-2); }
.r-fn { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- Tombol (satu gaya utama: kuning brand) ---------- */
.r-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); border: 1px solid transparent; font: var(--weight-ui) var(--text-md)/1 var(--font-body); white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.r-btn:active { transform: scale(.97); }
.r-btn svg { width: 18px !important; height: 18px !important; }
.r-btn-sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.r-btn-main { background: var(--color-accent); color: var(--color-accent-ink); }
.r-btn-main:hover { background: var(--color-accent-2); }
.r-btn-line { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.r-btn-line:hover { border-color: var(--color-ink); }
.r-btn-ghost { background: transparent; color: var(--color-on-night); border-color: var(--color-night-rule); }
.r-btn-ghost:hover { border-color: var(--color-on-night-2); }
.r-btn-wa { background: var(--color-wa); color: var(--color-white); }
.r-btn-wa:hover { background: var(--color-wa-2); }
.r-tlink { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: var(--weight-ui); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 4px; min-height: 44px; }
.r-tlink:hover { text-decoration-color: var(--color-ink); }
.r-tlink svg { width: 18px !important; height: 18px !important; }

/* ---------- Pengumuman + menu ---------- */
.r-ann { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs) var(--space-sm); min-height: 44px; padding: var(--space-xs) var(--space-md); background: var(--color-night); color: var(--color-on-night); font-size: var(--text-sm); text-align: center; }
.r-ann-k { padding: 0 var(--space-xs); border-radius: var(--radius-small); border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--weight-ui); }
.r-ann-go { text-decoration: underline; text-underline-offset: 3px; font-weight: var(--weight-ui); }
.r-ann b { color: var(--color-accent); font-weight: var(--weight-ui); }
.r-ann-s { display: none; }
.r-ann:focus-visible { outline-color: var(--color-focus-night); outline-offset: -4px; }

.r-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.r-nav.stuck { border-bottom-color: var(--color-rule); }
.r-nav-in { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.r-logo { display: inline-flex; align-items: center; min-height: 44px; }
.r-logo img { width: 104px; height: auto; }
.r-nl { display: flex; align-items: center; gap: var(--space-2xs); }
.r-nl > a, .r-dd > button { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.r-nl > a:hover, .r-dd > button:hover, .r-dd > button[aria-expanded=true] { color: var(--color-ink); background: var(--color-paper-2); }
.r-dd { position: relative; }
.r-dd > button svg { width: 14px !important; height: 14px !important; transition: transform var(--dur-short) var(--ease-out); }
.r-dd > button[aria-expanded=true] svg { transform: rotate(180deg); }
.r-dd-p { position: absolute; left: calc(var(--space-xs) * -1); top: 100%; z-index: var(--z-dropdown); min-width: 240px; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper); border: 1px solid var(--color-rule-2); display: none; gap: var(--space-3xs); }
.r-dd-p.wide { width: 600px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xs); }
.r-dd.open .r-dd-p, .r-dd:hover .r-dd-p, .r-dd:focus-within .r-dd-p { display: grid; }
.r-dd-p a { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border-radius: var(--radius-small); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink); }
/* #114: isi menu rata atas (kalimat 1 baris dulu melayang di tengah baris), ikon dalam ubin, ubin menyala saat disorot */
.r-dd-p a { align-content: start; }
.r-dd-p.wide a { grid-template-columns: 40px minmax(0, 1fr); align-items: start; column-gap: var(--space-sm); }
.r-dd-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-paper-2); color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.r-dd-ic svg { width: 20px; height: 20px; }
.r-dd-p a:hover .r-dd-ic, .r-dd-p a:focus-visible .r-dd-ic { background: var(--color-accent-soft); }
.r-dd-x { display: grid; gap: var(--space-3xs); min-width: 0; padding-top: 1px; }
.r-dd-x b { font-weight: var(--weight-ui); }
.r-dd-x small { font-size: var(--text-xs); font-weight: var(--weight-body); line-height: 1.45; color: var(--color-muted); }
.r-dd-p a:hover { background: var(--color-paper-2); }
/* Panel Who we serve (founder 27 Okt, rujukan SevenRooms): judul berikon di atas daftar, ikon dalam lingkaran */
.r-dd-p.headed { min-width: 264px; }
.r-dd-h { display: flex; align-items: center; gap: var(--space-sm); margin: 0; padding: var(--space-sm) var(--space-sm) var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--display-weight); line-height: 1.2; color: var(--color-ink); }
.r-dd-h i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink); }
.r-dd-h svg { width: 22px; height: 22px; }
.r-nr { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); }
/* Ajakan "GRATIS, Coba dulu aja" (seperti welkam.id sekarang, gaya v3; founder 26 Okt #85): tiap 10 dtk sesudah hero lewat,
   tombol Coba Gratis berdenyut + kilau, balon turun di bawahnya dengan panah tepat di tengah tombol (site.js mengukur posisinya). */
.r-nr { position: relative; }
.r-trial { position: relative; overflow: hidden; }
.r-trial::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--color-white) 55%, transparent) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.r-trial-tip { display: none; }
.js .r-trial-tip { display: block; position: absolute; top: calc(100% + var(--space-sm)); right: var(--tip-r, 0px); padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: var(--shadow-float); color: var(--color-ink); font: var(--weight-ui) var(--text-sm)/1.25 var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; transform-origin: calc(100% - var(--tip-c, 60px)) 0; }
.r-trial-tip b { color: var(--color-gold); letter-spacing: 0.04em; }
.r-trial-tip::before { content: ""; position: absolute; top: -7px; right: calc(var(--tip-c, 60px) - 6px); width: 12px; height: 12px; border: 1px solid var(--color-rule); border-right: 0; border-bottom: 0; background: var(--color-paper); transform: rotate(45deg); }
.r-nav.nudge .r-trial { animation: r-trial-pop 900ms var(--ease-out) both; }
.r-nav.nudge .r-trial::after { animation: r-trial-shine 1100ms var(--ease-in-out) 250ms both; }
.js .r-nav.nudge .r-trial-tip { animation: r-trial-tip 3800ms var(--ease-out) 200ms both; }
@keyframes r-trial-pop { 35% { transform: scale(1.06); } 60% { transform: scale(0.98); } }
@keyframes r-trial-shine { to { transform: translateX(120%); } }
@keyframes r-trial-tip { 0% { opacity: 0; transform: translateY(-6px) scale(0.92); } 10% { opacity: 1; transform: translateY(0) scale(1.02); } 16% { transform: none; } 50% { transform: translateY(-2px); } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .r-nav.nudge .r-trial, .r-nav.nudge .r-trial::after { animation: none; } .js .r-nav.nudge .r-trial-tip { animation: r-trial-tip-rm 3800ms linear both; } @keyframes r-trial-tip-rm { 0%, 100% { opacity: 0; } 8%, 88% { opacity: 1; } } }
.r-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-login:hover { color: var(--color-ink); }
.r-burger { display: none; width: 44px; height: 44px; border-radius: var(--radius-pill); place-items: center; color: var(--color-ink); }
.r-burger svg { width: 22px !important; height: 22px !important; }
@media (max-width: 60rem) { .r-nl, .r-login { display: none; } .r-burger { display: grid; } .r-nav-in { min-height: 60px; gap: var(--space-sm); } }
.r-sheet { position: fixed; inset: 0; z-index: var(--z-modal); overflow-y: auto; padding: var(--space-sm) var(--space-lg) var(--space-xl); background: var(--color-paper); display: grid; align-content: start; gap: var(--space-2xs); }
.r-sheet-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: var(--space-xs); }
.r-sheet details { border-bottom: 1px solid var(--color-rule); }
.r-sheet summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: var(--text-lg); font-weight: var(--weight-ui); list-style: none; cursor: pointer; }
.r-sheet summary::-webkit-details-marker { display: none; }
.r-sheet summary svg { width: 18px !important; height: 18px !important; transition: transform var(--dur-short) var(--ease-out); }
.r-sheet details[open] summary svg { transform: rotate(180deg); }
.r-sheet details a { display: flex; align-items: center; min-height: 44px; padding-left: var(--space-sm); color: var(--color-ink-2); }
.r-sheet details a .r-dd-ic { width: 32px; height: 32px; margin-right: var(--space-sm); border-radius: 10px; }
.r-sheet details a .r-dd-ic svg { width: 17px; height: 17px; }
.r-sheet details[open] { padding-bottom: var(--space-xs); }
.r-sheet-big { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--color-rule); font-size: var(--text-lg); font-weight: var(--weight-ui); }
.r-sheet-cta { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.r-sheet-cta .r-btn { width: 100%; }

/* ---------- Seksi ---------- */
.r-sec { position: relative; padding-block: var(--section-gap); border-top: 1px solid var(--color-rule); }
.r-sec.r-gap-s { padding-block: var(--section-gap-s); }
.r-sec.r-gap-l { padding-block: var(--section-gap-l); }
.r-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.r-sub-h { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-sm) var(--gap-columns); align-items: end; margin: var(--space-3xl) 0 var(--space-xl); }
.r-head-s { display: grid; gap: var(--space-md); align-content: start; }
.r-head-stack { display: grid; gap: var(--space-md); max-width: 760px; margin-bottom: var(--space-2xl); }
.r-head-stack .r-h2 { max-width: 20ch; }
/* pita latar untuk blok bukti (cerita + data): satu perubahan latar, bukan zebra */
.r-band { background: var(--color-paper-2); }
.r-band .r-sec { border-top: 0; }
.r-band .r-sec + .r-sec { padding-top: 0; }
@media (max-width: 60rem) { .r-head, .r-sub-h { grid-template-columns: minmax(0, 1fr); } .r-head { margin-bottom: var(--space-xl); } .r-sub-h { margin-top: var(--space-2xl); } }

/* ---------- Hero (pilihan founder 26 Okt, alternatif A ala Apple): teks rata tengah, tablet staf + HP tamu naik dari bawah ---------- */
/* Hero = satu layar: tinggi pita + menu diukur site.js ke --chrome-h. Panggung mengisi sisa tinggi dan terpotong di lipatan,
   jadi perangkat selalu "mengintip" dan section demo mulai tepat di bawahnya. Layar sangat pendek: hero memanjang, teks tak terpotong. */
.r-hero { display: flex; flex-direction: column; align-items: center; min-height: calc(100svh - var(--chrome-h, 108px)); padding-top: clamp(var(--space-lg), 7vh, 88px); overflow: hidden; text-align: center; }
.r-hero-g { display: grid; justify-items: center; margin-block: auto; }
/* Judul patah di koma (founder 26 Okt): dua baris seimbang, tanpa satu kata yatim */
.r-hero .r-hl-type > * { white-space: pre-line; }
.r-hero .r-h1 { max-width: min(18ch, 100%); font-size: clamp(2.5rem, min(6.4vw, 10.5vh), 6rem); line-height: 1.02; letter-spacing: -0.045em; }
/* Teks pembaca layar di judul: ukuran biasa, supaya satu barisnya tidak membentang ribuan piksel di luar layar (Hallmark 44d) */
#wksite .r-h1 .sr { font-size: var(--text-md); letter-spacing: 0; }
/* Judul mengetik: ketiga judul ditumpuk tak terlihat di satu sel (tinggi h1 = judul terpanjang, tak melompat), lapisan ketikan di atasnya */
.r-hl-type { display: grid; }
.r-hl-type > * { grid-area: 1 / 1; text-wrap: wrap; }
.r-hl-g { visibility: hidden; }
.r-hl-live { display: block; }
.r-caret { display: inline-block; width: 0.055em; height: 0.82em; margin-left: 0.06em; vertical-align: -0.06em; background: var(--color-accent); border-radius: 1px; animation: r-blink 1.05s steps(1) infinite; }
.r-h1.typing .r-caret { animation: none; }
.r-h1.still .r-caret { display: none; }
@keyframes r-blink { 50% { opacity: 0; } }
.r-sub { margin-top: var(--space-lg); max-width: 38ch; font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.5rem); line-height: 1.45; color: var(--color-ink-2); text-wrap: balance; }
.r-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.r-hero .r-ctas { justify-content: center; margin-top: clamp(var(--space-lg), 4vh, var(--space-xl)); }
.r-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-md); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.r-note .r-tlink { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-note .r-tlink svg { color: var(--color-wa); }
/* Panggung: gambar layar app asli (sama dengan demo di bawahnya), diketuk = lompat ke demo Waitlist. HP di kiri seperti demo (#52). */
.r-stage { --tw: min(820px, 86%); position: relative; display: block; flex: 1 1 0; min-height: 0; max-height: clamp(280px, 34vw, 420px); width: min(1120px, 100% - 2 * var(--gutter)); margin-top: clamp(var(--space-lg), 5vh, var(--space-2xl)); -webkit-tap-highlight-color: transparent; }
.r-dev { position: absolute; top: 0; display: block; background: var(--color-night); box-shadow: 0 40px 80px -40px color-mix(in oklab, var(--color-ink) 55%, transparent); }
.r-dev img { display: block; width: 100%; height: auto; }
.r-dev-tab { left: calc(50% - var(--tw) / 2); width: var(--tw); padding: var(--space-sm) var(--space-sm) 0; border-radius: 28px 28px 0 0; }
.r-dev-tab img { aspect-ratio: 1319 / 917; border-radius: 18px 18px 0 0; }
.r-dev-phone { top: 8%; left: calc(50% - var(--tw) / 2 - 3%); width: clamp(140px, 17vw, 210px); padding: var(--space-xs) var(--space-xs) 0; border-radius: 26px 26px 0 0; }
.r-dev-phone img { aspect-ratio: 390 / 843; border-radius: 19px 19px 0 0; } /* founder 26 Okt #76: sudut dikurangi */
.js .r-dev-tab { opacity: 0; transform: translateY(60px); }
.js .r-dev-phone { opacity: 0; transform: translateY(80px); }
.js .r-stage.rise .r-dev-tab { animation: r-rise 1.1s var(--ease-out) 0.25s forwards; }
.js .r-stage.rise .r-dev-phone { animation: r-rise 1.1s var(--ease-out) 0.45s forwards; }
@keyframes r-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .r-dev-tab, .js .r-dev-phone { opacity: 1; transform: none; animation: none !important; } }
@media (max-width: 60rem) {
  .r-ctas .r-btn { flex: 1 1 100%; }
  .r-hero .r-ctas .r-btn { flex: 0 0 auto; }
}
/* HP: tablet geser kanan, HP tamu di kiri. Catatan = 2 baris saja (#58): kalimat satu baris (huruf mengecil sedikit), WhatsApp di bawahnya. */
@media (max-width: 40rem) {
  .r-hero .r-h1 { font-size: min(10.3vw, 3.25rem); } /* HP: judul lebih besar, tetap dua baris (founder 26 Okt #75) */
  .r-stage { --tw: 92%; max-height: calc(62vw - 25px); }
  .r-dev-tab { left: 8%; }
  .r-dev-phone { top: 12%; left: 2%; width: 128px; padding: var(--space-2xs) var(--space-2xs) 0; border-radius: 18px 18px 0 0; } /* bingkai tipis ala iPhone Pro (founder 26 Okt #79) */
  .r-dev-phone img { border-radius: 14px 14px 0 0; }
  .r-hero .r-note { flex-direction: column; }
  .r-hero .r-note > span { white-space: nowrap; font-size: min(0.875rem, calc((100vw - 2 * var(--gutter)) / 27.4)); }
}
@media (max-width: 22.4rem) { .r-hero .r-note > span { white-space: normal; text-wrap: balance; font-size: 0.75rem; } }
/* Laptop pendek: teks dipadatkan supaya tablet + HP tetap kelihatan di layar pertama */
@media (min-width: 40.01rem) and (max-height: 760px) {
  .r-hero { padding-top: clamp(var(--space-md), 4vh, var(--space-xl)); }
  .r-hero .r-h1 { font-size: clamp(2.5rem, min(6.4vw, 9.5vh), 6rem); }
  .r-sub { margin-top: var(--space-md); font-size: 1.25rem; }
  .r-hero .r-ctas { margin-top: var(--space-lg); }
  .r-stage { margin-top: var(--space-lg); }
}
@media (pointer: fine) { .r-hero .r-note .r-tlink { min-height: 32px; } }

/* ---------- Seksi demo: panggung + coba jadi tamu + logo klien ---------- */
.r-live-sec { padding-top: 0; border-top: 0; }
.r-try { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: center; margin-top: var(--space-3xl); }
.r-try-steps { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.r-try-steps li { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-try-steps em { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); font-size: var(--text-xs); color: var(--color-ink); }
.r-try-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: center; padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-qr { width: 148px; padding: var(--space-xs); border-radius: var(--radius-small); border: 1px solid var(--color-rule); background: var(--color-white); }
.r-qr svg { width: 100%; height: auto; }
.r-try-t { display: grid; gap: var(--space-2xs); justify-items: start; }
.r-try-t b { font-size: var(--text-lg); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.r-try-t span { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
@media (max-width: 60rem) { .r-try { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2xl); } }
@media (max-width: 32rem) { .r-try-card { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); } .r-qr { display: none; } .r-try-t .r-btn { width: 100%; } }

/* Bukti sosial (founder 25 Okt: dulu terlihat menyendiri): pita sendiri, angka + kalimat di kiri, dinding logo berubin seragam di kanan */
.r-proof { padding-block: var(--space-2xl); background: var(--color-paper-2); border-block: 1px solid var(--color-rule); }
.r-proof-g { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--space-2xl); align-items: center; }
.r-proof-t { display: grid; gap: var(--space-sm); justify-items: start; }
.r-proof-n { display: grid; gap: var(--space-2xs); font-size: var(--text-lg); font-weight: var(--weight-ui); letter-spacing: 0; color: var(--color-ink-2); }
.r-proof-n b { font-size: var(--text-display-s); font-weight: var(--display-weight); letter-spacing: -0.04em; line-height: 1; color: var(--color-ink); }
.r-proof-s { max-width: 30ch; color: var(--color-ink-2); }
.r-proof .r-mqs { --mq-fade: var(--color-paper-2); --mq-fade-0: var(--lc-f0604bb); margin-top: 0; min-width: 0; }
.r-proof .r-mq-t { gap: var(--space-sm); padding-inline: var(--space-sm); }
.r-proof .r-lg { width: 168px; height: 84px; padding: var(--space-sm); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-proof .r-lg img { max-width: 132px; max-height: 52px; }
/* Logo berlatar warna sendiri (founder 26 Okt): sudut ikut tile; logo kartu cerita persegi mengisi tile penuh */
.r-proof .r-lg img:is([alt="Toko Emas Italy"], [alt="Barber&Co"], [alt="Enchanting Valley"]) { border-radius: var(--radius-small); }
#wksite .sto-tile img:is([alt="Mio Udon"], [alt="Enchanting Valley"], [alt="Barber&Co"]) { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 60rem) { .r-proof-g { grid-template-columns: minmax(0, 1fr); } .r-proof .r-lg { width: 136px; height: 72px; } .r-proof .r-lg img { max-width: 108px; max-height: 44px; } }
.r-mq-pause { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-mq-pause svg { width: 14px !important; height: 14px !important; }
.r-mq-pause .pl { display: none; }
.r-mq-pause[aria-pressed=true] .pl { display: block; }
.r-mq-pause[aria-pressed=true] .pz { display: none; }
/* Logo klien (founder #146, 27 Okt: di HP tidak mulus dan bisa berhenti). Pudar tepi = dua lapisan warna latar (bukan mask-image,
   yang di Safari HP menggambar ulang trek tiap frame); trek dipromosikan ke lapisan sendiri; jeda hanya untuk kursor sungguhan,
   fokus keyboard, dan tombol jeda (sentuhan di HP tidak lagi membekukan marquee lewat :hover yang tertinggal). */
.r-mqs { --mq-fade: var(--color-paper); --mq-fade-0: var(--lc-d00f63d); position: relative; display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.r-mqs::before, .r-mqs::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 8%; pointer-events: none; }
.r-mqs::before { left: 0; background: linear-gradient(90deg, var(--mq-fade), var(--mq-fade-0)); }
.r-mqs::after { right: 0; background: linear-gradient(270deg, var(--mq-fade), var(--mq-fade-0)); }
.r-mq { overflow: hidden; }
.r-mq-t { display: flex; align-items: center; gap: var(--space-2xl); width: max-content; padding-inline: var(--space-lg); animation: r-mq var(--d) linear infinite; will-change: transform; backface-visibility: hidden; }
.r-mq.rev .r-mq-t { animation-direction: reverse; }
@media (hover: hover) and (pointer: fine) { .r-mqs:hover .r-mq-t { animation-play-state: paused; } }
.r-mqs:has(:focus-visible) .r-mq-t, .r-mqs.paused .r-mq-t { animation-play-state: paused; }
@keyframes r-mq { to { transform: translate3d(-50%, 0, 0); } }
.r-lg { flex: none; display: grid; place-items: center; height: 72px; padding-block: var(--space-2xs); }
.r-lg img { max-height: 60px; max-width: 148px; width: auto; height: auto; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; transition: filter var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.r-lg:hover img { filter: none; opacity: 1; }
.r-lg-t { font-weight: var(--display-weight); color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .r-mq-t { animation: none; } }

/* ---------- Detail (9 sel): visual kecil + kalimat ---------- */
.r-hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.r-hl-c { display: grid; grid-template-rows: 112px auto; gap: var(--space-md); padding: var(--space-lg); border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.r-hl-c:nth-child(3n) { border-right: 0; }
.r-hl-c:nth-child(n + 7) { border-bottom: 0; }
.r-hl-c > p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2); }
.r-hl-c > p b { color: var(--color-ink); font-weight: var(--weight-ui); }
.r-hl-v { position: relative; display: grid; place-items: center; border-radius: var(--radius-small); background: var(--color-paper-2); overflow: hidden; }
@media (max-width: 60rem) { .r-hl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r-hl-c:nth-child(3n) { border-right: 1px solid var(--color-rule); } .r-hl-c:nth-child(2n) { border-right: 0; } .r-hl-c:nth-child(n + 7) { border-bottom: 1px solid var(--color-rule); } .r-hl-c:nth-child(9) { border-bottom: 0; } }
@media (max-width: 40rem) { .r-hl { grid-template-columns: minmax(0, 1fr); } .r-hl-c { border-right: 0 !important; grid-template-rows: 96px auto; padding: var(--space-md); } .r-hl-c:nth-child(n + 7) { border-bottom: 1px solid var(--color-rule); } .r-hl-c:last-child { border-bottom: 0; } }
.h-url { display: flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-white); border: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-ink-2); max-width: 100%; }
.h-url svg { width: 14px !important; height: 14px !important; color: var(--color-success-ink); }
.h-url:hover { border-color: var(--color-ink); }
.h-url span { min-width: 0; }
.h-open { display: grid; justify-items: center; gap: var(--space-xs); max-width: 100%; }
.h-ok { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success-ink); font-size: var(--text-xs); font-weight: var(--weight-ui); }
.h-ok svg { width: 12px !important; height: 12px !important; }
.js .r-hl.auto .h-ok { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .r-hl.auto .h-ok.on { opacity: 1; transform: none; }
[data-h-type].typing::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--color-ink); animation: r-blink 1s steps(1) infinite; }
.h-try { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-ui); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.h-try.press { transform: scale(0.96); border-color: var(--color-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 35%, transparent); }
.h-nt.wa b { color: var(--color-success-ink); }
.h-try:hover { border-color: var(--color-ink); }
.h-nt { position: absolute; left: var(--space-sm); right: var(--space-sm); top: var(--space-xs); display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); background: var(--color-white); box-shadow: var(--shadow-float); text-align: left; transform: translateY(-140%); transition: transform var(--dur-long) var(--ease-out); color: var(--color-ink); }
.h-nt.on { transform: none; }
.h-nt:not(.on) { box-shadow: none; }
.h-nt b { font-size: var(--text-sm); }
.h-nt span { font-size: var(--text-xs); color: var(--color-muted); }
.h-big { display: grid; justify-items: center; gap: var(--space-2xs); }
.h-big b { font-size: var(--text-3xl); font-weight: var(--display-weight); letter-spacing: -0.04em; line-height: 1; }
.h-big span { font-size: var(--text-xs); color: var(--color-muted); }
.h-steps { display: grid; gap: var(--space-xs); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-muted); }
.h-steps li button { display: flex; align-items: center; gap: var(--space-xs); min-height: 32px; font-weight: var(--weight-ui); color: inherit; }
.h-steps li svg { width: 16px !important; height: 16px !important; color: var(--color-rule-2); transition: color var(--dur-short) var(--ease-out); }
.h-steps li button[aria-pressed=true] { color: var(--color-ink); }
.h-steps li button[aria-pressed=true] svg { color: var(--color-success-ink); }
.h-steps li.on { color: var(--color-ink); }
.h-steps li.on svg { color: var(--color-success-ink); }
.h-brand { display: flex; align-items: center; gap: var(--space-md); }
.h-tk { --c: var(--app-sw-1); display: grid; justify-items: center; gap: var(--space-3xs); width: 112px; padding: var(--space-sm) var(--space-xs) var(--space-md); border-radius: var(--radius-small); background: var(--c); color: var(--color-white); transition: background-color var(--dur-long) var(--ease-out); }
.h-tk small { font-size: 0.6875rem; white-space: nowrap; }
.h-tk b { font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1; }
.h-sws { display: grid; grid-template-columns: repeat(3, 28px); gap: var(--space-2xs); }
.h-sws button { position: relative; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--c); border: 3px solid var(--color-paper-2); }
.h-sws button::after { content: ""; position: absolute; inset: calc(var(--space-xs) * -1); }
.h-sws button[aria-pressed=true] { outline: 2px solid var(--color-ink); outline-offset: 0; }
.h-bars { display: grid; gap: var(--space-xs); width: 80%; }
.h-bars button { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: var(--space-xs); min-height: 24px; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); text-align: left; }
.h-bars button[aria-pressed=true] { color: var(--color-ink); }
.h-bars button:not([aria-pressed=true]) i::after { background: var(--color-muted); }
.h-bars-v { font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink); }
.h-bars i { height: 8px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.h-bars i::after { content: ""; display: block; height: 100%; width: 100%; background: var(--color-ink); transform-origin: left; transform: scaleX(var(--w)); }
.h-qr { display: grid; width: 72px; height: 72px; padding: var(--space-2xs); border-radius: var(--radius-small); background: var(--color-white); border: 1px solid var(--color-rule); }
.h-qr svg { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.h-qr svg.on { opacity: 1; }
/* Hitung mundur 10 detik sampai QR berganti (mati saat reduced-motion: QR tetap berganti, tanpa animasi) */
.h-qrbar { display: block; width: 72px; height: 3px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.h-qrbar i { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
.h-qrbar.run i { animation: r-qrcount 10s linear forwards; }
@keyframes r-qrcount { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .h-qrbar { display: none; } }
.h-qrl { position: absolute; bottom: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.h-gift { display: grid; gap: var(--space-2xs); width: 84%; }
.h-gift button { display: grid; grid-template-columns: 24px 52px minmax(0, 1fr); align-items: center; gap: var(--space-xs); min-height: 30px; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-small); background: var(--color-white); border: 1px solid var(--color-rule); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); text-align: left; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.h-gift button i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-small); background: var(--color-paper-2); }
.h-gift button i svg { width: 13px !important; height: 13px !important; }
.h-gift button.on { color: var(--color-ink); border-color: var(--color-accent); }
.h-gift button.on i { background: var(--color-accent-soft); color: var(--color-gold); }
.h-mask { display: grid; justify-items: center; gap: var(--space-sm); }
.h-mask span { font-size: var(--text-lg); font-weight: var(--display-weight); font-variant-numeric: tabular-nums; }
.h-sw { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); cursor: pointer; }
.h-sw input { position: absolute; opacity: 0; pointer-events: none; }
.h-sw i { width: 32px; height: 20px; border-radius: var(--radius-pill); background: var(--color-rule-2); position: relative; transition: background-color var(--dur-short) var(--ease-out); }
.h-sw i::after { content: ""; position: absolute; left: var(--space-3xs); top: var(--space-3xs); width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--color-white); transition: transform var(--dur-short) var(--ease-out); }
.h-sw input:checked + i { background: var(--color-success-ink); }
.h-sw input:checked + i::after { transform: translateX(12px); }
.h-sw input:focus-visible + i { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Hasil: cerita + data ---------- */
#cerita .sto-l button[aria-selected=true] { box-shadow: 0 0 0 1px var(--color-rule-2); }
#wksite :is(#cerita, .r-story) .sto-tx small { color: var(--color-ink-2); }
#cerita .sto-r { box-shadow: 0 0 0 1px var(--color-rule); }
.r-sto-ctl { display: flex; justify-content: flex-end; margin-top: var(--space-sm); }
.r-ins { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "head tunggu" "jam pekan" "balik pekan"; gap: var(--space-md); }
.r-ins-head { grid-area: head; align-self: end; padding-bottom: var(--space-lg); }
.r-ins-jam { grid-area: jam; } .r-ins-tunggu { grid-area: tunggu; } .r-ins-pekan { grid-area: pekan; } .r-ins-balik { grid-area: balik; }
.r-ins-c { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-ins-c h3 { font-size: var(--text-lg); line-height: 1.3; max-width: 26ch; }
.r-ins-c > p { color: var(--color-ink-2); font-size: var(--text-sm); }
.r-ins-act { display: flex; gap: var(--space-xs); align-items: flex-start; margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink); }
.r-ins-act b { color: var(--color-gold); font-weight: var(--weight-ui); }
.r-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--space-xs); height: 260px; margin-top: var(--space-xs); }
.r-bars-d { height: 132px; margin-bottom: var(--space-lg); }
.r-bars button { position: relative; height: 100%; display: flex; align-items: flex-end; border-radius: var(--radius-small); }
.r-bars button i { display: block; width: 100%; height: 100%; border-radius: var(--radius-small) var(--radius-small) 2px 2px; background: var(--color-paper-3); transform-origin: bottom; transform: scaleY(var(--h)); transition: background-color var(--dur-short) var(--ease-out); }
.r-bars button.pk i { background: var(--color-ink); }
.r-bars button:hover i, .r-bars button:focus-visible i, .r-bars button.tip i { background: var(--color-accent); }
.r-bars button s { position: absolute; left: 0; right: 0; bottom: -22px; text-decoration: none; text-align: center; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); }
.r-bars button::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(var(--h) + var(--space-xs)); transform: translate(-50%, 4px); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-small); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); font-weight: var(--weight-ui); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out); z-index: var(--z-raised); }
.r-bars button:hover::after, .r-bars button:focus-visible::after, .r-bars button.tip::after { opacity: 1; transform: translate(-50%, 0); }
.r-ax { display: flex; justify-content: space-between; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); }
.r-vs { display: grid; gap: var(--space-xs); }
.r-iv { display: grid; grid-template-columns: 104px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-iv i { height: 10px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.r-iv i::after { content: ""; display: block; height: 100%; background: var(--color-muted); transform-origin: left; transform: scaleX(var(--w)); }
.r-iv.wk i::after { background: var(--color-accent); }
.r-iv b { text-align: right; color: var(--color-ink); }
.r-vs small { font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 60rem) { .r-ins { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "jam" "tunggu" "pekan" "balik"; } }
@media (max-width: 40rem) { .r-bars { height: 180px; gap: var(--space-2xs); } }

/* ---------- Harga: kalkulator + ROI + paket + grup ---------- */
.r-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: stretch; }
.r-calc-in { display: grid; gap: var(--space-lg); align-content: start; padding: 0 0 var(--space-lg); }
.r-calc-in .r-head-s { margin-bottom: var(--space-md); }
.r-sl label { display: block; margin-bottom: var(--space-sm); font-weight: var(--weight-ui); }
.r-sl-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
.r-sl-r output { min-width: 96px; text-align: right; font-size: var(--text-lg); font-weight: var(--display-weight); font-variant-numeric: tabular-nums; }
.r-sl input[type=range] { --p: 15%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.r-sl input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-ink) var(--p), var(--color-rule-2) var(--p)); }
.r-sl input[type=range]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-ink) var(--p), var(--color-rule-2) var(--p)); }
.r-sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: calc(var(--space-xs) * -1); border-radius: var(--radius-pill); background: var(--color-white); border: 1px solid var(--color-muted); }
.r-sl input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--color-white); border: 1px solid var(--color-muted); }
.r-asm { color: var(--color-ink-2); line-height: 2; }
.r-asm button { min-height: 44px; padding: 0 var(--space-xs); margin: 0 var(--space-3xs); border-radius: var(--radius-small); background: var(--color-accent-soft); color: var(--color-gold); font-weight: var(--display-weight); border: 1px solid var(--color-accent); }
.r-asm button:hover { background: var(--color-paper); }
.r-calc-out { display: grid; align-content: center; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.r-loss { display: grid; gap: var(--space-2xs); }
.r-loss b { font-size: var(--text-display-s); font-weight: var(--display-weight); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.r-loss span { color: var(--color-ink-2); font-weight: var(--weight-ui); }
.r-ppl { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: var(--space-xs); max-width: 520px; }
.r-ppl i { display: block; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.r-ppl i svg { width: 100% !important; height: auto !important; fill: currentColor; }
.r-ppl i.go { color: var(--color-loss); transform: translateX(6px); }
.js .r-ppl.arm i { opacity: 0; transform: translateY(10px); }
.js .r-ppl.arm i.in { opacity: 1; transform: none; transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out), color var(--dur-short) var(--ease-out); }
.js .r-ppl.arm i.in.go { transform: translateX(6px); }
.r-ppl i.walk { animation: r-walk 900ms var(--ease-in-out) both; }
@keyframes r-walk { 0% { transform: none; } 25% { transform: translate(3px, -3px) rotate(5deg); } 50% { transform: translate(6px, 0) rotate(-4deg); } 75% { transform: translate(9px, -3px) rotate(4deg); } 100% { transform: translateX(6px); } }
.r-ppl-n { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-ppl-n b { color: var(--color-ink); }
.r-roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-lg) var(--gap-columns); align-items: center; margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.r-roi-a p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.4; }
.r-roi-a b { display: block; font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.1; color: var(--color-ink); }
.r-roi-bars { display: grid; gap: var(--space-sm); }
.r-rb { display: grid; grid-template-columns: 128px minmax(0, 1fr) 84px; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-rb i { height: 10px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.r-rb em { display: block; height: 100%; width: 100%; border-radius: var(--radius-pill); background: var(--color-loss); transform-origin: left; transform: scaleX(var(--w, 1)); transition: transform var(--dur-long) var(--ease-out); }
.r-rb.pro em { background: var(--color-ink); }
.r-rb b { text-align: right; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.r-roi-go { grid-column: 1 / -1; justify-self: start; position: relative; overflow: hidden; background: var(--color-wa); color: var(--color-white); }
.r-roi-go:hover { background: var(--color-wa-2); }
.r-roi-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--color-white) 35%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: r-shine 3.2s ease-in-out 3; }
@keyframes r-shine { 60%, 100% { transform: translateX(100%); } }
.r-roi-go .go-low { display: none; }
.r-roi.low .r-roi-go .go-x { display: none; }
.r-roi.low .r-roi-go .go-low { display: inline; }
@media (prefers-reduced-motion: reduce) { .r-roi-go::after { animation: none; } }
@media (max-width: 60rem) { .r-calc { grid-template-columns: minmax(0, 1fr); } .r-calc-in { padding: 0; } .r-ppl { grid-template-columns: repeat(10, minmax(0, 1fr)); } .r-roi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .r-roi-bars { grid-column: 1 / -1; } }
@media (max-width: 32rem) { .r-calc-out { padding: var(--space-lg); } .r-rb { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2xs); } .r-rb i { grid-column: 1 / -1; grid-row: 2; } .r-roi { padding: var(--space-md); } .r-roi-go { white-space: normal; text-align: center; width: 100%; } }

.r-pr-ctl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.r-seg { display: inline-flex; gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.r-seg button { min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.r-seg button em { font-style: normal; margin-left: var(--space-xs); color: var(--color-success-ink); }
.r-seg button[aria-pressed=true] { background: var(--color-paper); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-rule-2); }
.r-step { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-sv { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-3xs); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); }
.r-sv button { width: 44px; height: 44px; border-radius: var(--radius-pill); font-size: var(--text-lg); }
.r-sv button:hover { background: var(--color-paper-2); }
.r-sv button:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; opacity: .6; }
.r-sv output { min-width: 28px; text-align: center; font-weight: var(--display-weight); color: var(--color-ink); }
.r-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-md); align-items: stretch; }
.r-plan { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-plan h3 { font-size: var(--text-lg); }
.r-pp b { display: block; font-size: var(--text-3xl); font-weight: var(--display-weight); letter-spacing: -0.04em; line-height: 1; }
.r-pp b small { font-size: var(--text-sm); font-weight: var(--weight-ui); letter-spacing: 0; color: var(--color-muted); }
.r-pp .r-pp-s { font-size: var(--text-2xl); }
.r-pp span { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.r-plan ul { display: grid; gap: var(--space-sm); align-content: start; }
.r-plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.r-plan li svg { width: 18px !important; height: 18px !important; margin-top: 1px; color: var(--color-success-ink); }
.r-plan li b { color: var(--color-ink); font-weight: var(--weight-ui); }
.r-pl-sub { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-2xs) !important; padding: var(--space-sm); border-radius: var(--radius-small); background: var(--color-paper-2); }
.r-pl-sub ul { display: grid; gap: var(--space-2xs); }
.r-pl-sub ul li { display: flex; align-items: center; gap: var(--space-xs); font-weight: var(--weight-ui); color: var(--color-ink); }
/* Ikon AI: bintang kilau bermask, gradasi kuning Welkam bergeser pelan (bukan berkedip) */
.r-spark { flex: none; width: 14px; height: 14px; background: linear-gradient(115deg, var(--color-gold), var(--color-accent) 30%, var(--color-accent-2) 50%, var(--color-accent) 70%, var(--color-gold)); background-size: 300% 100%; background-position: 0% 0; -webkit-mask: var(--spark) center / contain no-repeat; mask: var(--spark) center / contain no-repeat; animation: r-spark-shift 5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.2s); --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.7 5.6 4.9 9.8 10.5 10.5-5.6.7-9.8 4.9-10.5 10.5-.7-5.6-4.9-9.8-10.5-10.5C7.1 11.3 11.3 7.1 12 1.5z'/%3E%3C/svg%3E"); }
@keyframes r-spark-shift { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .r-spark { animation: none; } }
.r-plan .r-btn { width: 100%; }
.r-plan.hot { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.r-plan-tag { position: absolute; top: var(--space-lg); right: var(--space-lg); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-small); background: var(--color-accent-soft); color: var(--color-gold); font-size: var(--text-xs); font-weight: var(--weight-ui); }
.r-pr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 60rem) { .r-plans { grid-template-columns: minmax(0, 1fr); } .r-plan.hot { order: -1; } }

.r-grp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.r-grp-t { position: sticky; top: var(--space-3xl); }
.r-grp .r-btn { justify-self: start; }
.r-chips-s { display: grid; gap: var(--space-xs); }
.r-chips-s li { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-chips-s svg { width: 18px !important; height: 18px !important; color: var(--color-ink); }
@media (max-width: 60rem) { .r-grp { grid-template-columns: minmax(0, 1fr); } .r-grp-t { position: static; } }
.tree2 { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); min-width: 0; }
.t2-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.tree-tag { font-size: var(--text-xs); color: var(--color-muted); }
.t2-head small { font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.t2-tabs { display: flex; gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); overflow-x: auto; scrollbar-width: none; }
.t2-tabs::-webkit-scrollbar { display: none; }
.t2-tabs button { flex: 1 0 auto; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); white-space: nowrap; }
.t2-tabs button[aria-pressed=true] { background: var(--color-paper); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-rule-2); }
.t2-stage { display: grid; min-width: 0; }
.t2-panel { grid-area: 1 / 1; display: grid; gap: var(--space-md); align-content: start; min-width: 0; transition: opacity var(--dur-short) var(--ease-out); }
.t2-panel.off { opacity: 0; pointer-events: none; visibility: hidden; }
.gm-kpi small { font-size: var(--text-xs); color: var(--color-muted); }
.gm-kpi p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); margin-top: var(--space-2xs); }
.gm-kpi b { font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.035em; }
.gm-kpi em { font-style: normal; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-success-ink); }
.gm-kpi > span { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.t2-list { display: grid; gap: var(--space-sm); }
.t2-b { border-radius: var(--radius-small); border: 1px solid var(--color-rule); overflow: hidden; }
.t2-bh { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 44px; padding: 0 var(--space-md); text-align: left; background: var(--color-paper-2); }
.t2-bh b { font-weight: var(--weight-ui); }
.t2-bh em { font-style: normal; font-size: var(--text-xs); color: var(--color-muted); }
.t2-bh svg { margin-left: auto; width: 16px !important; height: 16px !important; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.t2-bh[aria-expanded=false] svg { transform: rotate(-90deg); }
.t2-b > ul { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-md) var(--space-sm); }
.t2-b.shut > ul { display: none; }
.t2-b > ul li { display: grid; grid-template-columns: 88px minmax(0, 1fr) 56px 72px; align-items: center; gap: var(--space-sm); min-height: 28px; font-size: var(--text-sm); color: var(--color-ink-2); }
.t2-b > ul li i { height: 8px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.t2-b > ul li i::after { content: ""; display: block; height: 100%; background: var(--color-muted); transform-origin: left; transform: scaleX(var(--w)); }
.t2-b > ul li.top i::after { background: var(--color-accent); }
.t2-b > ul li b { text-align: right; color: var(--color-ink); font-variant-numeric: tabular-nums; font-weight: var(--weight-ui); }
.t2-b > ul li s { text-decoration: none; font-size: var(--text-xs); color: var(--color-gold); }
.gm-share, .gm-mix { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; gap: var(--space-3xs); }
.gm-share i, .gm-mix i { width: var(--w); }
.gm-share i:nth-child(1), .gm-revenue .gm-legend li:nth-child(1) i { background: var(--color-accent); }
.gm-share i:nth-child(2), .gm-revenue .gm-legend li:nth-child(2) i { background: var(--color-ink); }
.gm-share i:nth-child(3), .gm-revenue .gm-legend li:nth-child(3) i { background: var(--color-muted); }
.gm-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.gm-legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.gm-legend i { width: 10px; height: 10px; border-radius: 2px; }
.gm-legend b { color: var(--color-ink); font-weight: var(--weight-ui); }
.gm-legend .s-hi i, .gm-mix .hi { background: var(--color-success-ink); }
.gm-legend .s-mid i, .gm-mix .mid { background: var(--color-rule-2); }
.gm-legend .s-lo i, .gm-mix .lo { background: var(--color-loss); }
.gm-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.gm-table th { text-align: left; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.gm-table td { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.gm-table td small { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.gm-table tr.top td:first-child { color: var(--color-ink); font-weight: var(--weight-ui); }
.gm-foot, .gm-sub { font-size: var(--text-sm); color: var(--color-muted); }
.gm-score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.gm-score li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); background: var(--color-paper-2); }
.gm-score b { font-size: var(--text-lg); font-weight: var(--display-weight); }
.gm-score span { font-size: var(--text-xs); color: var(--color-muted); }
.gm-score .lo b { color: var(--color-error-ink); }
.gm-quote { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.gm-quote p { padding: var(--space-sm); border-radius: var(--radius-small); border: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: var(--weight-ui); }
.gm-quote small { display: block; margin-bottom: var(--space-3xs); font-size: var(--text-xs); font-weight: var(--weight-body); color: var(--color-muted); }
.gm-neg { display: grid; gap: var(--space-2xs); }
.gm-neg li { display: grid; grid-template-columns: 148px minmax(0, 1fr) 36px 52px; align-items: center; gap: var(--space-sm); min-height: 36px; font-size: var(--text-sm); color: var(--color-ink-2); }
.gm-neg li > span { color: var(--color-ink); font-weight: var(--weight-ui); }
.gm-neg small { display: block; font-size: var(--text-xs); font-weight: var(--weight-body); color: var(--color-muted); }
.gm-neg i { height: 8px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.gm-neg i::after { content: ""; display: block; height: 100%; background: var(--color-muted); transform-origin: left; transform: scaleX(var(--w)); }
.gm-neg li.top i::after { background: var(--color-loss); }
.gm-neg b { text-align: right; color: var(--color-ink); font-variant-numeric: tabular-nums; font-weight: var(--weight-ui); }
.gm-neg em { font-style: normal; text-align: right; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.gm-topics { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.gm-topics li { display: inline-flex; align-items: baseline; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.gm-topics b { color: var(--color-ink); font-variant-numeric: tabular-nums; font-weight: var(--weight-ui); }
.gm-heat-w { overflow-x: auto; }
.gm-heat { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--text-xs); }
.gm-heat th { font-weight: var(--weight-ui); color: var(--color-muted); text-align: left; padding: var(--space-2xs); white-space: nowrap; }
.gm-heat tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--color-paper); }
.gm-heat td { text-align: center; padding: var(--space-xs) var(--space-2xs); border-radius: var(--radius-small); background: color-mix(in oklab, var(--color-loss) calc(var(--a, 0) * 80%), var(--color-paper)); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.gm-heat td:last-child { background: none; }
.gm-heat tr.top th { color: var(--color-ink); }
.gm-say { display: flex; align-items: flex-start; gap: var(--space-xs); }
.gm-say-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-night); color: var(--color-accent); }
.gm-say-ic svg { width: 15px !important; height: 15px !important; }
.gm-say p { display: grid; gap: var(--space-3xs); max-width: 48ch; padding: var(--space-xs) var(--space-sm); border-radius: 4px 16px 16px 16px; background: var(--color-accent-soft); font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink); }
.gm-say small { font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-gold); }
.gm-say [data-say-t] { font-weight: var(--weight-ui); transition: opacity 140ms var(--ease-out); }
.gm-dots { display: none; gap: var(--space-2xs); padding-block: 6px; }
.gm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); animation: gm-dot 900ms var(--ease-in-out) infinite; }
.gm-dots i:nth-child(2) { animation-delay: 150ms; }
.gm-dots i:nth-child(3) { animation-delay: 300ms; }
.gm-say.typing .gm-dots { display: inline-flex; }
.gm-say.typing [data-say-t] { display: none; }
@keyframes gm-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.t2-panel.play .gm-say { animation: gm-pop 520ms var(--ease-out) 650ms both; }
@keyframes gm-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.t2-panel.play .t2-b > ul li i::after, .t2-panel.play .gm-neg i::after, .t2-panel.play .gm-funnel p i::after, .t2-panel.play .gm-why i::after { animation: gm-grow 760ms var(--ease-out) calc(120ms + var(--k, 0) * 55ms) both; }
@keyframes gm-grow { from { transform: scaleX(0); } }
.t2-panel.play .gm-share { animation: gm-wipe 900ms var(--ease-out) 120ms both; }
@keyframes gm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.t2-panel.play .gm-table tbody tr, .t2-panel.play .gm-rank li, .t2-panel.play .gm-topics li, .t2-panel.play .gm-legend li { animation: gm-rise 480ms var(--ease-out) calc(160ms + var(--k, 0) * 60ms) both; }
@keyframes gm-rise { from { opacity: 0; transform: translateY(6px); } }
.t2-panel.play .gm-heat td { animation: gm-cell 420ms var(--ease-out) calc(100ms + var(--k, 0) * 22ms) both; }
@keyframes gm-cell { from { opacity: 0; transform: scale(0.85); } }
.t2-panel [data-say]:not(.gm-say) { border-radius: var(--radius-small); transition: background-color var(--dur-short) var(--ease-out); }
.t2-panel [data-say]:not(.gm-say):hover, .t2-panel [data-say]:not(.gm-say):focus-visible, .t2-panel [data-say].hot { background: var(--color-paper-2); outline: none; }
.t2-panel li[data-say].hot i::after { background: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .t2-panel.play *, .gm-dots i { animation: none !important; } }
/* Corong + alasan memakai kolom yang sama: label kiri | batang | angka kanan (rata kanan, tak patah baris) */
.gm-funnel, .gm-why { --lc: 168px; --vc: 118px; display: grid; gap: var(--space-xs); }
.gm-funnel p, .gm-why li { display: grid; grid-template-columns: var(--lc) minmax(0, 1fr) var(--vc); align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.gm-funnel p { min-height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-small); background: var(--color-paper-2); }
.gm-funnel p.lost { background: var(--color-error-soft); color: var(--color-error-ink); }
.gm-funnel p span { font-weight: var(--weight-ui); color: var(--color-ink); }
.gm-funnel p.lost span { color: inherit; }
.gm-funnel i, .gm-why i { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.gm-funnel i::after, .gm-why i::after { content: ""; display: block; height: 100%; min-width: 4px; background: var(--color-muted); transform-origin: left; transform: scaleX(var(--w)); border-radius: var(--radius-pill); }
.gm-funnel p:first-child i::after { background: var(--color-ink); }
.gm-funnel p.lost i { background: color-mix(in oklab, var(--color-loss) 22%, var(--color-paper)); }
.gm-funnel p.lost i::after, .gm-why i::after { background: var(--color-loss); }
.gm-funnel b, .gm-why b { text-align: right; white-space: nowrap; color: var(--color-ink); font-variant-numeric: tabular-nums; font-weight: var(--weight-ui); }
.gm-funnel p.lost b { color: inherit; }
.gm-why li { padding: 0 var(--space-sm); min-height: 28px; }
.gm-rank { display: grid; gap: var(--space-xs); }
.gm-rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); border: 1px solid var(--color-rule); font-size: var(--text-sm); }
.gm-rank small { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.gm-rank em { font-style: normal; font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 36rem) { .t2-b > ul li { grid-template-columns: 72px minmax(0, 1fr) 48px; } .t2-b > ul li s { display: none; } .gm-score { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gm-funnel p, .gm-why li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2xs); padding-block: var(--space-xs); } .gm-funnel p i, .gm-why li i { grid-column: 1 / -1; grid-row: 2; } .gm-neg li { grid-template-columns: minmax(0, 1fr) 32px 48px; } .gm-neg li i { grid-column: 1 / -1; grid-row: 2; } .tree2 { padding: var(--space-md); } }

/* ---------- Tanya: FAQ + form ---------- */
.r-ask { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) clamp(var(--space-xl), 8vw, 8rem); align-items: start; }
.r-ask > #faq { max-width: 44rem; }
.r-faq { margin-top: var(--space-xl); }
.r-faq-lead { margin-top: var(--space-md); }
.r-faq details { border-bottom: 1px solid var(--color-rule); }
.r-faq details:first-child { border-top: 1px solid var(--color-rule); }
.r-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; padding: var(--space-md) 0; font-size: var(--text-lg); font-weight: var(--weight-ui); letter-spacing: -0.01em; list-style: none; cursor: pointer; }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary i { position: relative; flex: none; width: 16px; height: 16px; }
.r-faq summary i::before, .r-faq summary i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--color-ink-2); transition: transform var(--dur-short) var(--ease-out); }
.r-faq summary i::after { transform: rotate(90deg); }
.r-faq details[open] summary i::after { transform: rotate(0); }
.r-faq details p { padding: 0 var(--space-xl) var(--space-lg) 0; color: var(--color-ink-2); line-height: 1.65; }
.r-demo { position: sticky; top: var(--space-3xl); display: grid; gap: var(--space-md); }
.r-reply { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink); }
.r-reply svg { width: 18px !important; height: 18px !important; color: var(--color-gold); }
.r-form { position: relative; display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-intent { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-small); background: var(--color-accent-soft); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-gold); }
.r-intent button { min-height: 44px; font-size: var(--text-sm); font-weight: var(--weight-ui); text-decoration: underline; }
.r-fld { display: grid; gap: var(--space-xs); }
.r-fld > span { font-size: var(--text-sm); font-weight: var(--weight-ui); }
.r-fld input, .r-fld select { min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-small); border: 1px solid var(--color-muted); background: var(--color-paper); font-size: var(--text-md); color: var(--color-ink); }
.r-fld input:focus-visible, .r-fld select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.r-fld em { display: none; font-size: var(--text-xs); font-weight: var(--weight-ui); font-style: normal; color: var(--color-error-ink); }
.r-fld.bad input { border-color: var(--color-error-ink); }
.r-fld.bad em { display: block; }
.r-oc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.r-oc button { min-height: 48px; border-radius: var(--radius-small); border: 1px solid var(--color-rule-2); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-oc button[aria-pressed=true] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.r-fine { font-size: var(--text-xs); color: var(--color-muted); }
.r-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.r-done { position: absolute; inset: 0; z-index: var(--z-raised); display: grid; place-content: center; justify-items: center; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); text-align: center; }
.r-done b { font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.r-done p { max-width: 34ch; color: var(--color-ink-2); }
.r-ferr { margin: 0; font-size: var(--text-sm); color: var(--color-error-ink); }
.r-ferr a { color: inherit; text-decoration: underline; }
@media (max-width: 60rem) { .r-ask { grid-template-columns: minmax(0, 1fr); } .r-demo { position: static; } .r-form { padding: var(--space-md); } }

/* ---------- Penutup + kabar ---------- */
.r-end-b { display: grid; justify-items: center; gap: var(--space-lg); padding: var(--space-3xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-night); color: var(--color-on-night); text-align: center; }
.r-end-pio { width: 176px; height: auto; }
.r-end-b .r-h2 { max-width: 16ch; color: var(--color-on-night); }
.r-end-b .r-ctas { justify-content: center; }
.r-end-note { font-size: var(--text-sm); color: var(--color-on-night-2); }
#wksite .r-end-b :focus-visible { outline-color: var(--color-focus-night); }
.r-kabar-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: var(--space-3xl) 0 var(--space-lg); }
.r-kabar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.r-kabar a { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); transition: border-color var(--dur-short) var(--ease-out); }
.r-kabar a:hover { border-color: var(--color-ink); }
.r-kabar b { font-size: var(--text-lg); font-weight: var(--weight-ui); line-height: 1.35; }
.r-kabar span { font-size: var(--text-xs); color: var(--color-muted); }
.r-sumber { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin-top: var(--space-md); }
@media (max-width: 60rem) { .r-kabar { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kaki ---------- */
.r-foot { padding: var(--space-2xl) 0 var(--space-xl); border-top: 1px solid var(--color-rule); }
.r-foot-g { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.r-about img { width: 240px; height: auto; }
.r-about p { margin-top: var(--space-sm); max-width: 30ch; font-size: var(--text-sm); color: var(--color-ink-2); }
/* judul kolom kaki = h3 (urutan judul h2 lalu h3, Hallmark F21, 27 Okt); rupa dikunci sama dengan h4 lama: gaya dasar h3 dinetralkan */
.r-foot h3 { max-width: none; margin: 0 0 var(--space-sm); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-ui); letter-spacing: normal; line-height: inherit; }
.r-foot ul { display: grid; gap: var(--space-2xs); }
.r-foot ul a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--text-sm); color: var(--color-ink-2); }
.r-foot ul a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.r-legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.r-legal a:hover { color: var(--color-ink); }
.r-addr { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 60rem) { .r-foot-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r-about { grid-column: 1 / -1; } }

/* ---------- Tombol WhatsApp melayang ---------- */
.js .r-fab:not(.on) { opacity: 0; transform: translateY(12px); pointer-events: none; }
.r-fab { position: fixed; right: calc(var(--space-md) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); width: 56px; height: 56px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-wa); color: var(--color-white); box-shadow: var(--shadow-float); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.r-fab svg { width: 26px !important; height: 26px !important; }
/* Pilih keperluan dulu (founder 26 Okt): panel tumbuh dari tombol, pilihan masuk berurutan, pesan WA ikut pilihan */
.r-fab { padding: 0; border: 0; cursor: pointer; }
.r-fab-i, .r-fab-x { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.r-fab-x { display: none; }
.js .r-fab-x { display: grid; opacity: 0; transform: rotate(-90deg) scale(0.6); }
.js .r-fab.open .r-fab-i { opacity: 0; transform: rotate(90deg) scale(0.6); }
.r-fab.open .r-fab-x { opacity: 1; transform: none; }
.r-fab .r-fab-x svg { width: 22px !important; height: 22px !important; }
.r-wa { position: fixed; right: calc(var(--space-md) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-md) + 56px + var(--space-sm) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-dropdown); width: min(360px, calc(100% - 2 * var(--space-md))); display: grid; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-float); transform-origin: 100% 100%; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .r-wa:not(.open) { opacity: 0; transform: translateY(var(--space-sm)) scale(0.96); }
.r-wa-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.r-wa-top p { display: grid; gap: var(--space-3xs); }
.r-wa-top b { font-size: var(--text-lg); line-height: 1.25; }
.r-wa-top span { font-size: var(--text-sm); color: var(--color-muted); }
.r-wa-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)) 0 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink-2); cursor: pointer; }
.r-wa-close:hover { background: var(--color-paper-2); }
.r-wa-close svg { width: 18px !important; height: 18px !important; }
.r-wa-q { display: grid; gap: var(--space-xs); }
.r-wa-q > p { font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-wa-q.need > p { color: var(--color-gold); }
.r-wa-q.need .r-wa-ch { animation: r-wa-nudge 360ms var(--ease-out); }
@keyframes r-wa-nudge { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.r-wa-ch { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.r-wa-ch button { min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: var(--weight-ui) var(--text-sm)/1 var(--font-body); cursor: pointer; transition-property: opacity, transform, background-color, border-color, color; transition-duration: var(--dur-short), var(--dur-long), var(--dur-short), var(--dur-short), var(--dur-short); transition-timing-function: var(--ease-out); }
.r-wa-ch button:hover { border-color: var(--color-ink); }
.r-wa-ch button[aria-pressed=true] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.js .r-wa:not(.open) .r-wa-ch button { opacity: 0; transform: translateY(6px); }
.js .r-wa.open .r-wa-ch button { transition-delay: calc(80ms + var(--k) * 35ms), calc(80ms + var(--k) * 35ms), 0s, 0s, 0s; }
.r-wa-msg { min-height: calc(3 * 1.45em + 2 * var(--space-sm)); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card) var(--radius-card) var(--space-2xs) var(--radius-card); background: var(--color-paper-2); font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-wa-msg.on { background: color-mix(in oklab, var(--color-wa) 12%, var(--color-paper)); color: var(--color-ink); }
.r-wa-msg.pop { animation: r-wa-pop var(--dur-long) var(--ease-out); }
@keyframes r-wa-pop { from { opacity: 0.2; transform: translateY(4px); } }
.r-wa-go { width: 100%; }
.r-wa-go[aria-disabled=true] { filter: grayscale(1); opacity: 0.55; }
@media (max-width: 40rem) { .r-wa { left: calc(var(--space-md) + env(safe-area-inset-left, 0px)); width: auto; } }
/* Desktop: panel menempel ke yang diklik (site.js waPlace), panah kecil menunjuk ke situ */
[data-wa-open], .r-wa-go:not([href]) { cursor: pointer; }
.r-wa.anchored { right: auto; bottom: auto; left: var(--x); top: var(--y); }
.js .r-wa.anchored.below:not(.open) { transform: translateY(calc(-1 * var(--space-sm))) scale(0.96); }
.r-wa-caret { display: none; }
.r-wa.anchored .r-wa-caret { display: block; position: absolute; left: calc(var(--cx) - 7px); width: 14px; height: 14px; border: 1px solid var(--color-rule); background: var(--color-paper); transform: rotate(45deg); }
.r-wa.anchored.below .r-wa-caret { top: -8px; border-right: 0; border-bottom: 0; }
.r-wa.anchored.above .r-wa-caret { bottom: -8px; border-left: 0; border-top: 0; }

@media (max-width: 40rem) { .r-ann-go, .r-ann-k, .r-ann-l { display: none; } .r-ann-s { display: inline; } .r-ann { white-space: nowrap; overflow: hidden; font-size: var(--text-xs); } }
/* pita di atas header lengket pada HP berponi (area aman atas) */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); }
/* Cerita (CSS welkam-landing 52-stories): tab HP ikut gutter halaman ini; stempel "Penuh" di bawah kalender, tidak menutupi tanggal */
@media (max-width: 900px) { #wksite :is(#cerita, .r-story) .sto-l { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }
#wksite :is(#cerita, .r-story) .sv-cal .stamp { position: static; justify-self: center; }
#wksite :is(#cerita, .r-story) .sv-cal .stamp.mc-full { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-sm)/1.25 var(--font-body); letter-spacing: 0; transform: translateY(6px); }
#wksite :is(#cerita, .r-story) .sv-cal .stamp.mc-full b { font-weight: var(--weight-ui); color: var(--color-accent); }
#wksite :is(#cerita, .r-story) .sv-cal .stamp.mc-full svg { width: 16px; height: 16px; color: var(--color-accent); }
#wksite :is(#cerita, .r-story) .play .sv-cal .stamp.mc-full { animation: mc-full 0.5s var(--ease-out) 1.55s both; }
@keyframes mc-full { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Cerita seragam dengan halaman: satu keluarga huruf (Plus Jakarta Sans, juga untuk replika lain), bobot label diturunkan,
   ruang sisa tinggi kartu masuk ke panggung visual, bukan jadi ruang putih kosong di bawah teks */
#wksite { --f-display: var(--font-display); --f-body: var(--font-body); }
#wksite :is(#cerita, .r-story) .sto-p { grid-template-rows: minmax(0, 1fr) auto; }
#wksite :is(#cerita, .r-story) .sto-v { height: auto; min-height: 330px; }
#wksite :is(#cerita, .r-story) .sto-c { padding: var(--space-md) var(--space-lg) var(--space-lg); }
#wksite :is(#cerita, .r-story) .sto-c p { font: 500 var(--text-md)/1.55 var(--font-body); color: var(--color-ink-2); }
#wksite :is(#cerita, .r-story) .st-more { font: 600 var(--text-sm)/1 var(--font-body); }
#wksite :is(#cerita, .r-story) small, #wksite :is(#cerita, .r-story) .mp-area, #wksite :is(#cerita, .r-story) .mp-spot, #wksite :is(#cerita, .r-story) .eco-s em, #wksite :is(#cerita, .r-story) .eco-sum span { font-weight: 600; }
#wksite :is(#cerita, .r-story) .tkt b, #wksite :is(#cerita, .r-story) .sto-tile b, #wksite :is(#cerita, .r-story) .sto-tx b, #wksite :is(#cerita, .r-story) .eco-sum b, #wksite :is(#cerita, .r-story) .mp-tk b { font-weight: var(--display-weight); letter-spacing: -0.02em; }
/* Rel langkah walkthrough (bagian halaman, bukan isi HP): kontras teks penuh */
#wksite .r-pv .wk2-steps button { color: var(--color-ink-2); }
#wksite .r-pv .wk2-steps button[aria-current] { color: var(--color-ink); }

/* ---------- Fitur utama: satu sel besar (91%) + delapan dalam dua kolom ---------- */
.r-hl2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.r-hl-side { display: grid; gap: var(--space-xl); align-content: start; position: sticky; top: var(--space-3xl); }
.r-hl-big { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-night); color: var(--color-on-night); }
.r-hl-big .r-hl-num { font-size: clamp(4.5rem, 8vw, 7rem); font-weight: var(--display-weight); letter-spacing: -0.05em; line-height: .9; color: var(--color-on-night); font-variant-numeric: tabular-nums; }
.r-hl-big p b { color: var(--color-on-night); font-weight: var(--weight-ui); }
.r-hl-big p { color: var(--color-on-night-2); font-size: var(--text-lg); line-height: 1.4; }
.r-hl-big .r-fn { margin: 0; font-size: var(--text-xs); color: var(--color-on-night-2); }
.r-hl2 .r-hl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-hl2 .r-hl-c { grid-template-rows: auto auto; border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.r-hl2 .r-hl-c:nth-child(2n) { border-right: 0; }
.r-hl2 .r-hl-c:nth-child(n + 7) { border-bottom: 0; }
.r-hl2 .r-hl-v { min-height: 136px; padding: var(--space-md); overflow: hidden; }
.h-qrw { display: grid; justify-items: center; gap: var(--space-xs); }
.h-qrw .h-qrbar { margin-top: calc(var(--space-3xs) * -1); }
.h-qrw .h-qrl { position: static; }
@media (max-width: 60rem) { .r-hl2 { grid-template-columns: minmax(0, 1fr); } .r-hl-side { position: static; } }
@media (max-width: 40rem) { .r-hl2 .r-hl { grid-template-columns: minmax(0, 1fr); } .r-hl2 .r-hl-c { border-right: 0; } .r-hl2 .r-hl-c:nth-child(n + 7) { border-bottom: 1px solid var(--color-rule); } .r-hl2 .r-hl-c:last-child { border-bottom: 0; } }

/* ---------- Produk: 3 pilar (Operate, Sell, Grow), tanpa demo ---------- */
.r-pil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.r-pil-c { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-pil-c h3 { font-size: var(--text-2xl); max-width: none; }
.r-pil-s { color: var(--color-ink-2); font-size: var(--text-md); margin-bottom: var(--space-md); }
.r-pil-c ul { display: grid; }
.r-pil-c li { border-top: 1px solid var(--color-rule); font-size: var(--text-md); font-weight: var(--weight-ui); }
.r-pil-a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 48px; margin-inline: calc(-1 * var(--space-sm)); padding-inline: var(--space-sm); border-radius: var(--radius-small); color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.r-pil-a > span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.r-pil-a svg { flex: none; width: 16px !important; height: 16px !important; color: var(--color-ink-2); opacity: 0.35; transform: translateX(-4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.r-pil-a:hover, .r-pil-a:focus-visible { background: var(--color-paper-2); }
.r-pil-x, .r-pil-x:hover { background: none; cursor: default; }
.r-pil-x:hover > span { text-decoration: none; }
.r-pil-a:hover > span, .r-pil-a:focus-visible > span { text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 5px; }
.r-pil-a:hover svg, .r-pil-a:focus-visible svg { opacity: 1; transform: none; }
.r-pil-a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
@media (hover: none) { .r-pil-a svg { opacity: 0.55; transform: none; } }
.r-pil-beta { font-style: normal; padding: 0 var(--space-xs); border-radius: var(--radius-small); border: 1px solid var(--color-rule-2); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
@media (max-width: 60rem) { .r-pil { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .r-pil-c { padding: var(--space-lg) var(--space-md); } .r-pil-c h3 { font-size: var(--text-xl); } .r-pil-s { margin-bottom: var(--space-sm); } .r-pil-a { min-height: 44px; } }
@media (max-width: 36rem) { .gm-neg li:nth-child(n + 6) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .r-ppl i.walk { animation: none; }
  #wksite :is(#cerita, .r-story) .sv-cal .stamp.mc-full, #wksite :is(#cerita, .r-story) .play .sv-cal .stamp.mc-full { opacity: 1; transform: none; animation: none; }
}
.r-hl-w { min-width: 0; }

/* ---------- Kompatibel Odoo (rilis v3 27 Okt): website.layout memuat Bootstrap reboot dan CSS tema Odoo. Aturan ini mengembalikan
   bawaan browser yang dipakai desain v3, jadi di pratinjau tidak mengubah apa pun. Spesifisitas rendah (0,0,1 sampai 0,0,2) dan
   dimuat sesudah CSS Odoo: kelas v3 tetap menang. Ditemukan lewat banding gaya terhitung pratinjau vs staging Odoo. ---------- */
:where(#wksite) img, :where(#wksite) svg { vertical-align: baseline; }
:where(#wksite) :is(h4, h5, h6) { line-height: inherit; }
:where(#wksite) small { font-size: smaller; }
:where(#wksite) dl { margin-top: 1em; margin-bottom: 1em; }
:where(#wksite) dt { font-weight: inherit; }
:where(#wksite) caption { color: inherit; }
:where(#wksite) :is(ul, ol) :is(ul, ol) { list-style-type: inherit; }
:where(#wksite) input[type="range"] { margin: var(--space-3xs); }
:where(#wksite) input:is([type="checkbox"], [type="radio"]) { margin: 3px 3px 3px var(--space-2xs); }

/* ===== Halaman lain welkam.id (revamp 26 Okt): sistem beranda v3 (DESIGN.md), kelas r-*. Warna dan huruf lewat token. ===== */

/* ---------- Irama halaman: satu jarak seksi untuk semua halaman, lebih rapat dari beranda karena isinya panjang ---------- */
.r-page .r-ps { padding-block: clamp(var(--space-2xl), 8.5vw, 120px); }
.r-page .r-ps:first-of-type { border-top: 0; }
.r-bh { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.r-bh .r-h2 { max-width: 22ch; }
.r-bh .r-lead { max-width: 60ch; }
.r-blk-foot { margin-top: var(--space-lg); max-width: 72ch; font-size: var(--text-sm); color: var(--color-muted); }
.r-il { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
.r-il:hover { text-decoration-color: var(--color-ink); }
.r-tag { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 0 var(--space-xs); border-radius: var(--radius-small); border: 1px solid var(--color-rule-2); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-tag-gold { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-gold); }
.r-ico { display: grid; place-items: center; width: 32px; height: 32px; color: var(--color-ink); }
.r-ico svg { width: 24px !important; height: 24px !important; }

/* Teks kecil abu-abu di replika app (token welkam-landing --ink-3) dinaikkan ke --color-muted supaya terbaca (4,5:1 ke atas) */
#wksite .r-page { --ink-3: var(--color-muted); }
/* /faq: saran pertanyaan Tanya Pio satu baris, sisa teks dipotong elipsis */
#wksite .fchips .fchip { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* /faq: kotak Tanya muat di HP dan tepinya terlihat (3:1) */
#wksite .kb .kb-ask { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
#wksite .kb .kb-box input { width: 0; }
#wksite .kb .kb-box { width: 100%; min-width: 0; box-shadow: 0 0 0 1px var(--color-muted); }
#wksite .kb .kb-box:focus-within { box-shadow: 0 0 0 2px var(--color-focus); }

/* ---------- Jalur remah ---------- */
.r-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.r-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.r-crumbs a:hover { text-decoration-color: var(--color-rule-2); }
.r-crumbs [aria-current] { color: var(--color-ink); font-weight: var(--weight-ui); }

/* ---------- Kepala produk/solusi: panggung tengah seperti beranda, replika app naik di bawah tombol ---------- */
.r-phero { min-height: 0; padding-top: var(--space-2xs); padding-bottom: clamp(var(--space-md), 2vw, var(--space-xl)); overflow: visible; }
.r-phero-c { width: 100%; text-align: left; }
.r-phero .r-hero-g { margin-block: clamp(var(--space-md), 4vh, var(--space-2xl)) 0; }
.r-phero .r-h1 { max-width: min(22ch, 100%); font-size: clamp(2.25rem, min(3.2vw, 6.4vh) + 0.75rem, 3.75rem); line-height: 1.05; letter-spacing: -0.04em; }
.r-phero .r-sub { max-width: 52ch; margin-top: var(--space-md); font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem); }
.r-phero .r-ctas { margin-top: var(--space-lg); }
.r-phero .r-note > span + span::before { content: none; }
.r-pwr { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.r-pwr img { width: 112px; height: auto; }
.r-pwr:hover { color: var(--color-ink); }
.r-pstage { width: min(880px, 100% - 2 * var(--gutter)); margin: clamp(var(--space-lg), 4vh, var(--space-xl)) auto 0; }
.js .r-pstage .r-vstage-hero { opacity: 0; transform: scale(0.94); transform-origin: 50% 100%; }
.js .r-pstage.rise .r-vstage-hero { animation: r-rise 1.1s var(--ease-out) 0.2s forwards; }
@media (prefers-reduced-motion: reduce) { .js .r-pstage .r-vstage-hero { opacity: 1; transform: none; animation: none !important; } }
/* Kepala Produk Waitlist (#91): satu layar penuh seperti hero beranda (sistem .r-stage + .r-dev yang sudah disetujui), tablet staf
   + HP tamu dengan layar app asli naik dari lipatan. HP di kanan supaya kolom Menunggu dan Dipanggil tetap terlihat. Sekali:
   cincin ketukan di tombol panggil A10, lalu kedua layar berganti ke keadaan dipanggil (opacity saja). */
.r-phero-dev { min-height: calc(100svh - var(--chrome-h, 108px)); padding-bottom: 0; overflow: hidden; }
.r-phero-dev .r-hero-g { margin-block: clamp(var(--space-md), 3vh, var(--space-xl)) 0; }
/* Lebar tablet ikut tinggi panggung (unit kontainer): tombol panggil A10 (46% tinggi layar papan) selalu di atas lipatan */
.r-pdev { container-type: size; --tw: max(420px, min(800px, 78cqw, (100cqh - 32px) * 3.1)); }
.r-pdev .r-dev-phone { left: auto; right: calc(50% - var(--tw) / 2 - 4%); }
.r-pdev-s { position: relative; display: block; }
.r-pdev-s .r-pdev-b { position: absolute; inset: 0; transition: opacity 0.8s var(--ease-out); }
.js .r-pdev:not(.called) .r-pdev-b { opacity: 0; }
.r-pdev-tap { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border-radius: 10px; box-shadow: 0 0 0 3px var(--color-accent), 0 0 0 12px color-mix(in oklab, var(--color-accent) 28%, transparent); opacity: 0; pointer-events: none; }
.r-pdev.tap .r-pdev-tap { animation: r-pdev-tap 1.3s var(--ease-out) forwards; }
@keyframes r-pdev-tap { 0% { opacity: 0; transform: scale(1.4); } 32% { opacity: 1; transform: scale(1); } 46% { transform: scale(0.9); } 62% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@media (max-width: 40rem) { .r-pdev { --tw: 92cqw; } .r-pdev .r-dev-tab { left: 0; } .r-pdev .r-dev-phone { left: auto; right: 2%; } }
@media (prefers-reduced-motion: reduce) { .js .r-pdev .r-pdev-b { opacity: 1; transition: none; } .r-pdev-tap { display: none; } }

/* ---------- Kepala artikel dan halaman: rata kiri, ukuran dokumen ---------- */
.r-ahero { padding-block: var(--space-lg) clamp(var(--space-xl), 5vw, var(--space-2xl)); }
.r-ahero-w { display: grid; gap: var(--space-lg); justify-items: start; }
.r-ah1 { max-width: min(24ch, 100%); font-size: clamp(2.25rem, 3.2vw + 1rem, 4rem); line-height: 1.05; letter-spacing: -0.04em; }
.r-alead { margin-top: 0; max-width: 58ch; text-wrap: pretty; }
.r-hhero .r-ctas { margin-top: var(--space-xs); }
.r-byline { font-size: var(--text-sm); color: var(--color-muted); }
.r-cover-w { margin-bottom: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
.r-cover { width: 100%; }
.r-cover img { width: 100%; max-height: 560px; object-fit: cover; }

/* ---------- Sel berbagi garis (masalah, fitur) ---------- */
.r-cells { display: grid; gap: 1px; padding: 1px; border-radius: var(--radius-card); overflow: hidden; }
.r-cells.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-cells.c1 { grid-template-columns: minmax(0, 1fr); }
.r-cell { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: start; gap: var(--space-md) var(--space-md); padding: var(--space-xl) var(--space-lg); background: var(--color-paper); outline: 1px solid var(--color-rule); }
.r-cell .r-h3 { align-self: center; }
.r-cell p { grid-column: 1 / -1; color: var(--color-ink-2); }
@media (max-width: 60rem) { .r-cells.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .r-cells.c2, .r-cells.c3 { grid-template-columns: minmax(0, 1fr); } .r-cell { padding: var(--space-lg) var(--space-md); } }

/* ---------- Langkah bernomor (urutan sungguhan) ---------- */
.r-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); counter-reset: none; }
.r-steps li { display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.r-step-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-ui); font-variant-numeric: tabular-nums; }
.r-steps p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .r-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .r-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Dua kolom: judul kiri, isi kanan (rincian, contoh sehari, daftar siap, FAQ) ---------- */
.r-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.r-two > .r-bh { position: sticky; top: calc(var(--space-3xl) + var(--space-md)); margin-bottom: 0; }
@media (max-width: 60rem) { .r-two { grid-template-columns: minmax(0, 1fr); } .r-two > .r-bh { position: static; } }

.r-time { display: grid; }
.r-time li { display: grid; grid-template-columns: minmax(0, 9ch) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.r-time li:last-child { border-bottom: 1px solid var(--color-rule); }
.r-time time { font-weight: var(--weight-ui); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.r-time p { color: var(--color-ink-2); }

.r-specs > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.r-specs > div:last-child { border-bottom: 1px solid var(--color-rule); }
.r-specs dt { font-weight: var(--weight-ui); }
.r-specs dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 40rem) { .r-specs > div { grid-template-columns: minmax(0, 1fr); } }

.r-checks { display: grid; gap: var(--space-sm); }
.r-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.r-checks svg { width: 24px !important; height: 24px !important; padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success-ink); }
.r-checks li > span { padding-top: 1px; color: var(--color-ink-2); }
.r-vz-t .r-checks, .r-two .r-checks { margin-top: var(--space-xs); }

/* ---------- Tabel ---------- */
.r-tbl { overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.r-tbl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-tbl table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-sm); }
.r-tbl th, .r-tbl td { padding: var(--space-md); border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: top; line-height: 1.5; }
.r-tbl tbody tr:last-child > * { border-bottom: 0; }
.r-tbl thead th { background: var(--color-paper-2); font-weight: var(--weight-ui); color: var(--color-ink); }
.r-tbl tbody th { font-weight: var(--weight-ui); color: var(--color-ink); }
.r-tbl td { color: var(--color-ink-2); }
.r-cmp .w { background: var(--color-paper-2); color: var(--color-ink); }
.r-cmp thead .w { background: var(--color-ink); color: var(--color-paper); }

/* HP: tiap baris jadi blok bertumpuk berlabel kolom, tidak ada kolom tersembunyi di luar layar */
@media (max-width: 40rem) {
  .r-tbl { overflow: visible; border: 0; border-radius: 0; }
  .r-tbl table { min-width: 0; }
  .r-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .r-tbl tbody, .r-tbl tr, .r-tbl th, .r-tbl td { display: block; }
  .r-tbl tr { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
  .r-tbl tbody tr:last-child { border-bottom: 1px solid var(--color-rule); }
  .r-tbl th, .r-tbl td { padding: 0; border: 0; }
  .r-tbl tbody th { font-size: var(--text-md); }
  .r-tbl td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--space-3xs); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); }
  .r-cmp .w { padding: var(--space-sm); border-radius: var(--radius-small); }
}

/* ---------- Replika app di panggung (vizkit welkam-landing) ---------- */
.pstage { position: relative; overflow: hidden; }
.pstage .pv { position: absolute; inset: 0; display: grid; place-items: center; }
.sx-stage { min-height: clamp(320px, 34vw, 440px); display: grid; }
.sx-stage .pv { position: relative; inset: auto; padding: 30px 14px var(--space-xl); }
#wksite .r-vstage .pstage .pv::after { font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.r-vstage .pstage { border-radius: var(--radius-card); background: radial-gradient(120% 90% at 85% 0%, var(--color-paper-3), transparent 60%), var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
/* Kepala = satu layar seperti beranda: pages.js memperkecil isi replika (zoom) secukupnya supaya utuh di atas lipatan */
.r-vstage-hero .pstage { min-height: 0; }
.r-vz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.r-vz.flip .r-vz-t { order: 2; }
/* Blok dibalik: gambar di kiri tetap kolom lebar (replika app dirancang untuk panggung lebar, mis. profil Salon #102) */
@media (min-width: 60.01rem) { .r-vz.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.r-vz-t { display: grid; gap: var(--space-md); align-content: start; }
.r-vz-t .r-lead { font-size: var(--text-lg); }
@media (max-width: 60rem) { .r-vz { grid-template-columns: minmax(0, 1fr); } .r-vz.flip .r-vz-t { order: 0; } }
@media (max-width: 40rem) { #wksite .r-vstage .mv-tv { width: 100%; padding: var(--space-sm); } }

.r-walk, .r-tour, .r-tm { position: relative; }
.r-walk-v .r-walk { justify-self: center; width: 100%; }
.r-walk-v .r-blk-foot { margin-top: 0; }
.r-walk[data-slot], .r-tour[data-slot], .r-tm[data-slot] { background: none; overflow: visible; }

/* ---------- WaitHub (blok powered) ---------- */
.r-pwb { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: center; padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); border-radius: var(--radius-card); background: var(--color-paper-2); }
.r-pwb-l { display: grid; gap: var(--space-md); justify-items: center; text-align: center; }
.r-pwb-l p { font-size: var(--text-sm); color: var(--color-muted); }
.r-pwb-l img { width: min(100%, 240px); height: auto; }
.r-pwb-r { display: grid; gap: var(--space-md); min-width: 0; }
.r-pwb .r-h2 { max-width: 20ch; }
.r-pwb .r-lead { max-width: 56ch; }
.r-pwb-k { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); padding-block: var(--space-sm); }
.r-pwb-k p { display: grid; gap: var(--space-3xs); }
.r-pwb-k b { font-size: var(--text-3xl); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.r-pwb-k span { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-pwb-c { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.r-pwb-c li { display: grid; place-items: center; height: 64px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); border: 1px solid var(--color-rule); background: var(--color-white); }
.r-pwb-c img { width: auto; height: auto; max-width: 100%; max-height: 40px; }
@media (max-width: 60rem) { .r-pwb { grid-template-columns: minmax(0, 1fr); } .r-pwb-l img { width: 160px; } }
@media (max-width: 36rem) { .r-pwb-c { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Kartu tautan (artikel, daftar) ---------- */
.r-cards { display: grid; gap: var(--space-md); }
.r-cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); overflow: hidden; transition: border-color var(--dur-short) var(--ease-out); }
a.r-card:hover { border-color: var(--color-ink); }
.r-card-i { display: block; aspect-ratio: 16 / 9; background: var(--color-paper-2); overflow: hidden; }
.r-card-i img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
a.r-card:hover .r-card-i img { transform: scale(1.03); }
.r-card-b { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); }
.r-card-b b { font-size: var(--text-lg); font-weight: var(--weight-ui); line-height: 1.35; letter-spacing: -0.01em; }
.r-card-b > span { color: var(--color-ink-2); font-size: var(--text-sm); }
.r-card-b small { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 60rem) { .r-cards.c3, .r-cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .r-cards.c2, .r-cards.c3, .r-cards.c4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Catatan (note) ---------- */
.r-note-b { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg) var(--gap-columns); align-items: start; padding: clamp(var(--space-lg), 3vw, var(--space-xl)); border-radius: var(--radius-card); background: var(--color-paper-2); }
.r-note-b .r-h2 { font-size: var(--text-2xl); max-width: 24ch; }
.r-note-b p { color: var(--color-ink-2); }
.r-note-b p + p { margin-top: var(--space-sm); }
@media (max-width: 60rem) { .r-note-b { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kontak ---------- */
.r-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; border-radius: var(--radius-card); overflow: hidden; }
@media (max-width: 40rem) { .r-contacts { grid-template-columns: minmax(0, 1fr); } }
.r-contact { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl) var(--space-lg); background: var(--color-paper); outline: 1px solid var(--color-rule); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.r-contact:hover { background: var(--color-paper-2); }
.r-contact-h { display: flex; align-items: center; gap: var(--space-sm); }
.r-contact b { font-size: var(--text-lg); font-weight: var(--weight-ui); }
.r-contact-d { color: var(--color-ink-2); font-size: var(--text-sm); }
.r-contact em { margin-top: var(--space-xs); font-style: normal; font-weight: var(--weight-ui); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 4px; }
#wksite .r-contact.main { background: var(--color-wa); color: var(--color-white); outline-color: var(--color-wa); }
#wksite .r-contact.main:hover { background: var(--color-wa-2); }
#wksite .r-contact.main .r-ico, #wksite .r-contact.main .r-contact-d { color: var(--color-white); }
#wksite .r-contact.main em { text-decoration-color: var(--color-white); }
#wksite .r-contact.main:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* ---------- Angka (latar malam, menghitung naik saat terlihat) ---------- */
.r-night { background: var(--color-night); color: var(--color-on-night); border-top: 0; }
.r-night .r-h2 { color: var(--color-on-night); }
#wksite .r-night :focus-visible { outline-color: var(--color-focus-night); }
.r-facts { display: grid; gap: var(--space-xl); }
.r-facts-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-lg) var(--gap-columns); }
.r-band-s { background: var(--color-paper-2); }
.r-facts-g > div { display: grid; align-content: start; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); }
.r-facts-g b { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: var(--display-weight); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.r-facts-g span { color: var(--color-ink-2); }
.r-facts-g sup { color: var(--color-gold); }

/* ---------- Tentang: garis cerita mengikuti gulir ---------- */
.r-tl { position: relative; }
.r-tl-rail { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--color-rule); }
.r-tl-rail i { position: absolute; inset: 0; border-radius: inherit; background: var(--color-ink); transform-origin: top; transform: scaleY(var(--tp, 1)); }
.r-tl-list { display: grid; gap: clamp(var(--space-2xl), 8vw, var(--space-3xl)); }
.r-tl-i { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--space-md) var(--gap-columns); align-items: start; padding-left: var(--space-xl); }
.r-tl-k { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: var(--weight-ui); color: var(--color-ink); }
.r-tl-k i { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--color-paper); border: 2px solid var(--color-ink); }
.r-tl-t { display: grid; gap: var(--space-md); }
.r-tl-t .r-h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem); }
.r-tl-art { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-sm); align-items: center; padding: var(--space-md); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-tl-art .r-ico { grid-row: 1 / 3; }
.r-tl-art b { font-size: var(--text-lg); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.r-tl-art span:last-child { font-size: var(--text-sm); color: var(--color-muted); }
.r-tl.live .r-tl-i { transition: opacity var(--dur-long) var(--ease-out); }
.r-tl.live .r-tl-i:not(.on) { opacity: 0.4; }
.r-tl.live .r-tl-i.on .r-tl-k i, .r-tl.live .r-tl-i.past .r-tl-k i { background: var(--color-accent); border-color: var(--color-accent-ink); }
.js .r-tl.live .r-tl-art { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform 700ms var(--ease-out); }
.js .r-tl.live .r-tl-i.on .r-tl-art, .js .r-tl.live .r-tl-i.past .r-tl-art { opacity: 1; transform: none; }
@media (max-width: 60rem) { .r-tl-i { grid-template-columns: minmax(0, 1fr); } .r-tl-art { justify-self: start; } }

/* ---------- Standar, perusahaan ---------- */
.r-std { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.r-std li { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.r-std b { font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.r-std p { color: var(--color-ink-2); }
@media (max-width: 40rem) { .r-std { grid-template-columns: minmax(0, 1fr); } }
.r-co { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.r-co .r-lead { margin-top: var(--space-md); }
.r-co ul { display: grid; }
.r-co li { border-top: 1px solid var(--color-rule); }
.r-co li:last-child { border-bottom: 1px solid var(--color-rule); }
.r-co .r-tlink { min-height: 56px; }
@media (max-width: 60rem) { .r-co { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Harga: daftar fitur Free dan Pro, layanan tambahan ---------- */
.r-fx { border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.r-fx-h, .r-fx-g li { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; align-items: center; gap: var(--space-sm); }
.r-fx-h { position: sticky; top: 64px; z-index: var(--z-raised); padding: var(--space-sm) var(--space-lg); background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); font-weight: var(--weight-ui); }
.r-fx-h b { text-align: center; }
.r-fx-g h3 { padding: var(--space-lg) var(--space-lg) var(--space-xs); max-width: none; }
.r-fx-g h3 small { font-size: var(--text-sm); font-weight: var(--weight-body); letter-spacing: 0; color: var(--color-muted); }
.r-fx-g ul { padding-bottom: var(--space-xs); }
.r-fx-g li { padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-rule); }
.r-fx-g li:first-child { border-top: 0; }
.r-fx-n { display: grid; gap: var(--space-3xs); min-width: 0; }
.r-fx-n b { font-weight: var(--weight-ui); }
.r-fx-n small { font-size: var(--text-sm); color: var(--color-muted); }
.r-fx-c { display: grid; place-items: center; text-align: center; font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-fx-c.ok svg { width: 26px !important; height: 26px !important; padding: 5px; border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success-ink); }
@media (max-width: 40rem) { .r-fx-h, .r-fx-g li { grid-template-columns: minmax(0, 1fr) 56px 56px; padding-inline: var(--space-md); } .r-fx-g h3 { padding-inline: var(--space-md); } }
.r-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.r-addon { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: var(--space-sm) var(--space-md); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.r-addon.hot { border-color: var(--color-ink); }
.r-addon .r-h3 { align-self: center; }
.r-addon > :not(.r-ico):not(.r-h3) { grid-column: 1 / -1; }
.r-addon p { color: var(--color-ink-2); }
.r-ai { display: grid; gap: var(--space-xs); align-content: start; }
.r-ai li { display: flex; align-items: center; gap: var(--space-xs); font-weight: var(--weight-ui); }
.r-addon-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.r-addon-f b { font-weight: var(--weight-ui); }
@media (max-width: 60rem) { .r-addons { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Form demo di halaman (kalkulator, harga, kontak) + gerbang Panduan ---------- */
.r-demo-w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.r-demo-w .r-head-s { position: sticky; top: calc(var(--space-3xl) + var(--space-md)); }
.r-demo-w .r-demo { position: static; }
@media (max-width: 60rem) { .r-demo-w { grid-template-columns: minmax(0, 1fr); } .r-demo-w .r-head-s { position: static; } }
#wksite.gate-open .r-gate-ask { display: none; }

/* ---------- Pertanyaan umum + penutup + tautan terkait ---------- */
.r-faq-w { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.r-faq-w .r-faq { margin-top: 0; }
@media (max-width: 60rem) { .r-faq-w { grid-template-columns: minmax(0, 1fr); } }
.r-rel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); }
.r-rel p { font-weight: var(--weight-ui); }
.r-rel ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }

/* ---------- Artikel: dokumen panjang, daftar isi menempel ---------- */
.r-doc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.r-doc.notoc { grid-template-columns: minmax(0, 1fr); }
.r-doc.notoc .r-doc-b { width: min(100%, 46rem); }
.r-toc { position: sticky; top: calc(var(--space-3xl) + var(--space-md)); display: grid; gap: var(--space-sm); min-width: 0; }
.r-toc p { font-weight: var(--weight-ui); }
.r-toc ol { display: grid; grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--color-rule); }
.r-toc li { min-width: 0; }
.r-toc a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: var(--space-xs) 0 var(--space-xs) var(--space-md); margin-left: -1px; border-left: 1px solid transparent; font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.r-toc a:hover { color: var(--color-ink); }
.r-toc a[aria-current] { color: var(--color-ink); border-left-color: var(--color-ink); font-weight: var(--weight-ui); }
.r-doc-b { min-width: 0; max-width: 46rem; font-size: 1.0625rem; line-height: 1.7; }
.r-doc-b > section:not(:first-child) { margin-top: var(--space-2xl); }
.r-doc-b h2 { max-width: 30ch; margin-bottom: var(--space-md); font-size: clamp(1.625rem, 1.2vw + 1.1rem, 2.25rem); line-height: 1.15; scroll-margin-top: var(--space-3xl); }
.r-doc-b h3 { max-width: 40ch; margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-xl); line-height: 1.25; }
/* Blok dokumen berjudul (#92): judul bagian memimpin, kepala bab turun satu tingkat (h3), sub-bab h4 */
.r-doc-titled .r-doc-b h3 { max-width: 34ch; margin: 0 0 var(--space-sm); line-height: 1.2; scroll-margin-top: var(--space-3xl); }
.r-doc-titled .r-doc-b h4 { max-width: 40ch; margin: var(--space-lg) 0 var(--space-xs); font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); font-size: var(--text-lg); line-height: 1.3; }
.r-doc-b p { max-width: 68ch; color: var(--color-ink-2); }
.r-doc-b p + p, .r-doc-b p + ul, .r-doc-b p + ol, .r-doc-b ul + p, .r-doc-b ol + p { margin-top: var(--space-md); }
.r-doc-b b { color: var(--color-ink); font-weight: var(--weight-ui); }
.r-doc-b ul, .r-doc-b ol { display: grid; gap: var(--space-xs); padding-left: 1.4em; color: var(--color-ink-2); }
.r-doc-b ul { list-style: disc; }
.r-doc-b ol { list-style: decimal; }
.r-doc-b li::marker { color: var(--color-muted); }
.r-doc-b .r-tbl, .r-doc-b .r-fig, .r-doc-b .r-hbar, .r-doc-b .r-flow, .r-doc-b blockquote { margin-block: var(--space-xl); }
.r-doc-b blockquote { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); }
.r-doc-b a:not(.r-btn) { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
.r-doc-b a:not(.r-btn):hover { text-decoration-color: var(--color-ink); }
@media (max-width: 60rem) {
  .r-doc { grid-template-columns: minmax(0, 1fr); }
  .r-toc { position: static; }
  .r-toc ol { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-left: 0; }
  .r-toc ol::-webkit-scrollbar { display: none; }
  .r-toc li { flex: none; }
  .r-toc a { display: flex; align-items: center; max-width: 72vw; min-height: 44px; margin-left: 0; padding: 0 var(--space-md); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); }
  .r-toc a[aria-current] { border-color: var(--color-ink); }
}

.r-fig { display: grid; gap: var(--space-xs); }
.r-fig img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-rule); background: var(--color-paper-2); }
.r-fig figcaption { font-size: var(--text-sm); color: var(--color-muted); }
/* Gambar layar app berbingkai perangkat sesuai pemakai (founder 24 Okt): staf = laptop/tablet, tamu = HP */
.r-frame { width: 100%; justify-items: center; }
.r-frame-in { display: block; width: 100%; padding: var(--space-sm); border-radius: 28px; background: var(--color-night); box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--color-ink) 55%, transparent); }
.r-frame-in img { box-shadow: none; border-radius: 16px; background: var(--color-white); }
.r-frame-laptop .r-frame-in { width: 94%; border-radius: 18px 18px 6px 6px; }
.r-frame-laptop .r-frame-in img { border-radius: 6px; }
.r-frame-phone .r-frame-in { width: min(300px, 78%); padding: var(--space-xs); border-radius: 40px; }
.r-frame-phone .r-frame-in img { border-radius: 32px; }
.r-frame figcaption { width: min(100%, 52ch); text-align: center; }

/* Batang mendatar berteks: batang tumbuh dari kiri saat terlihat (transform, bukan lebar) */
.r-hbar > div { display: grid; gap: var(--space-xs); }
.r-hbar p { display: grid; grid-template-columns: minmax(0, 16ch) minmax(0, 1fr) minmax(0, 9ch); gap: var(--space-sm); align-items: center; max-width: none; font-size: var(--text-sm); }
.r-hbar.wide p { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr) minmax(0, 9ch); }
.r-hbar span { color: var(--color-ink-2); }
.r-hbar i { display: block; width: var(--w); height: 12px; border-radius: var(--radius-pill); background: var(--color-rule-2); transform-origin: left; transition: transform 900ms var(--ease-out) calc(var(--k, 0) * 70ms); }
.r-hbar p.hot i { background: var(--color-accent); }
.r-hbar b { font-weight: var(--weight-ui); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.r-hbar figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.js .r-hbar:not(.in) i { transform: scaleX(0); }
@media (max-width: 40rem) { .r-hbar p, .r-hbar.wide p { grid-template-columns: minmax(0, 1fr) auto; } .r-hbar i { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .js .r-hbar:not(.in) i { transform: none; } }
.r-flow-s { overflow-x: auto; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.r-flow-s svg { min-width: 560px; max-width: 100%; height: auto; }
.r-flow figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* Panduan terkunci: bab 2 tampil kabur sebagai pratinjau, bab 3 dst. tersembunyi, kartu kunci mengarah ke form */
/* Pratinjau bab 2 = judul + paragraf pertamanya saja (kabur), sisanya disembunyikan, supaya tidak ada teks terpotong di bawah kartu kunci */
[data-gate]:not(.open) .r-doc-b > section:nth-of-type(2) { filter: blur(3px); opacity: 0.55; user-select: none; pointer-events: none; -webkit-mask-image: linear-gradient(var(--color-black) 30%, transparent); mask-image: linear-gradient(var(--color-black) 30%, transparent); }
[data-gate]:not(.open) .r-doc-b > section:nth-of-type(2) > :not(h2):not(p:first-of-type) { display: none; }
[data-gate]:not(.open) .r-doc-b > section:nth-of-type(n + 3) { display: none; }
[data-gate]:not(.open) .r-toc li:nth-child(n + 2) a { opacity: 0.45; pointer-events: none; }
.r-gate-lock { position: relative; display: grid; justify-items: center; gap: var(--space-xs); margin-top: var(--space-lg); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); text-align: center; }
.r-gate-lock svg { width: 26px !important; height: 26px !important; color: var(--color-gold); }
.r-gate-lock b { font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.r-gate-lock span { color: var(--color-ink-2); }
.r-gate-lock .r-btn { margin-top: var(--space-xs); }
[data-gate].open .r-gate-lock { display: none; }

/* ---------- /faq: pertanyaan populer bertab ---------- */
.r-fh { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.r-fh-tabs { position: sticky; top: calc(var(--space-3xl) + var(--space-md)); display: grid; gap: var(--space-2xs); }
.r-fh-tabs button { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-small); text-align: left; font-weight: var(--weight-ui); color: var(--color-ink-2); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.r-fh-tabs button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.r-fh-tabs button[aria-selected=true] { background: var(--color-ink); color: var(--color-paper); }
.r-fh-tabs em { font-style: normal; font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: 0.75; }
.r-fh-gt { margin-bottom: var(--space-sm); }
.js .r-fh-p:not([data-on]) { display: none; }
.js .r-fh-p[data-on] { animation: r-fade 360ms var(--ease-out); }
.r-fh-p + .r-fh-p { margin-top: var(--space-2xl); }
.js .r-fh-p + .r-fh-p { margin-top: 0; }
.r-fh-q { border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-3xl); }
.r-fh-q:first-of-type { border-top: 1px solid var(--color-rule); }
.r-fh-s { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); width: 100%; min-height: 60px; padding: var(--space-md) 0; text-align: left; font-size: var(--text-lg); font-weight: var(--weight-ui); letter-spacing: -0.01em; }
.r-fh-s i { position: relative; flex: none; width: 16px; height: 16px; }
.r-fh-s i::before, .r-fh-s i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--color-ink-2); transition: transform var(--dur-short) var(--ease-out); }
.r-fh-s i::after { transform: rotate(90deg); }
.r-fh-s[aria-expanded=true] i::after { transform: rotate(0); }
.r-fh-s[aria-expanded=false] + .r-fh-a { display: none; }
.r-fh-s[aria-expanded=true] + .r-fh-a > div { animation: r-fade 300ms var(--ease-out); }
.r-fh-a > div { display: grid; gap: var(--space-sm); padding: 0 var(--space-xl) var(--space-lg) 0; color: var(--color-ink-2); }
.r-fh-m { font-size: var(--text-sm); }
.r-fh-x { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }
.r-fh-ask { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-ink); }
.r-fh-ask svg { width: 16px !important; height: 16px !important; color: var(--color-gold); }
.r-fh-ask:hover { border-color: var(--color-ink); }
.r-fh-q.hit { animation: r-hit 1.2s var(--ease-out); }
@keyframes r-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes r-hit { 0% { background: var(--color-accent-soft); } 100% { background: transparent; } }
@media (max-width: 60rem) { .r-fh { grid-template-columns: minmax(0, 1fr); } .r-fh-tabs { position: static; display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .r-fh-tabs::-webkit-scrollbar { display: none; } .r-fh-tabs button { flex: none; } }

/* ---------- Gerak: satu pernyataan untuk semua yang bergerak di halaman ini ---------- */
@media (prefers-reduced-motion: reduce) {
  .r-tl.live .r-tl-i:not(.on) { opacity: 1; }
  .js .r-tl.live .r-tl-art { opacity: 1; transform: none; }
  .js .r-fh-p[data-on], .r-fh-s[aria-expanded=true] + .r-fh-a > div, .r-fh-q.hit { animation: none; }
}

/* Coba suara di layar TV (#93): pil anotasi di tepi bawah TV, pasangan label "Semua teks bisa diubah" di tepi atas.
   Chip bahasa jadi tombol; begitu dipilih, sorotan berganti-ganti berhenti dan chip terpilih menyala. */
#wksite .r-vz .mv-tv { position: relative; margin-bottom: var(--space-lg); }
#wksite .r-tvplay { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); display: inline-flex; align-items: center; gap: var(--space-xs); max-width: calc(100% - 2 * var(--space-md)); min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-rule), 0 10px 24px -12px color-mix(in oklab, var(--color-ink) 50%, transparent); font: 600 var(--text-sm)/1.25 var(--font-body); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
#wksite .r-tvplay svg { flex: none; width: 18px; height: 18px; }
#wksite .r-tvplay span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#wksite .r-tvplay:hover { box-shadow: 0 0 0 1px var(--color-rule-2), 0 12px 28px -12px color-mix(in oklab, var(--color-ink) 60%, transparent); }
#wksite .r-tvplay:active { transform: translate(-50%, 50%) scale(0.97); }
#wksite .r-tvplay:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
#wksite .mv-tv.r-tv-say .r-tvplay svg { animation: r-tvspk 0.8s var(--ease-out) infinite alternate; }
@keyframes r-tvspk { to { transform: scale(1.18); } }
#wksite .mv-tv .tv-lang i[role=button] { cursor: pointer; }
#wksite .mv-tv.r-tv-live .tv-lang i { animation: none; }
#wksite .mv-tv .tv-lang i[aria-pressed=true] { background: var(--brand); color: var(--brand-ink); }
#wksite .mv-tv .tv-lang i:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#wksite .mv-tv.r-tv-say .tv-s b { animation: r-tvcall 0.7s var(--ease-out) 2; }
@keyframes r-tvcall { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { #wksite .mv-tv.r-tv-say .r-tvplay svg, #wksite .mv-tv.r-tv-say .tv-s b { animation: none; } #wksite .r-tvplay { transition: none; } }
/* Replika profil Salon (#102): angka ubin muat satu baris di dalam kotaknya */
#wksite .r-vstage .mv-pf3 .pf-k b { font-size: 16px; white-space: nowrap; }

/* ---------- Grafik interaktif (#95-#97, chart.mjs + chart.js) ----------
   Kartu putih bergaris rambut di atas kertas. Besaran = satu warna urut kuning (5 tingkat), kategori tetap: Datang kuning,
   Reservasi toska (palet lolos validator dataviz: pemisahan buta warna dE 12,6+, kontras kuning 3:1 dibantu label langsung).
   Merah hanya untuk status Tidak datang, abu untuk Batal. Gerak: transform dan opacity saja, sekali saat terlihat. */
:root {
  --viz-c0: #c9850a; --viz-c1: #0f9483; --viz-bad: var(--color-error); --viz-gray: var(--color-rule-2); --viz-grid: var(--color-rule);
  --viz-q0: oklch(95.5% 0.02 85); --viz-q1: oklch(90% 0.06 82); --viz-q2: oklch(83% 0.11 78); --viz-q3: oklch(72% 0.14 70); --viz-q4: oklch(52% 0.12 58);
  --viz-card: var(--color-white);
  --viz-r0: oklch(96% 0.02 30); --viz-r1: oklch(90% 0.05 30); --viz-r2: oklch(81% 0.09 29); --viz-r3: oklch(68% 0.14 28); --viz-r4: oklch(52% 0.17 27);
}
/* Bab dibalik: grafik di kiri tetap mendapat kolom lebar */
.r-chap.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 60rem) { .r-chap.flip { grid-template-columns: minmax(0, 1fr); } }
.r-ich { display: grid; gap: var(--space-md); min-width: 0; padding: clamp(var(--space-md), 2.4vw, var(--space-xl)); border-radius: var(--radius-card); background: var(--viz-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 24px 48px -32px color-mix(in oklab, var(--color-ink) 30%, transparent); }
.r-ich-h { font-weight: var(--weight-ui); color: var(--color-ink); }
.r-ich-n { font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.r-ch-tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); width: fit-content; padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.r-ch-tabs button { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: var(--weight-ui) var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-ch-tabs button[aria-pressed=true] { background: var(--viz-card); color: var(--color-ink); box-shadow: 0 1px 3px color-mix(in oklab, var(--color-ink) 18%, transparent); }
.r-ch-tabs button:focus-visible, .r-ich [data-tip]:focus-visible, .r-ch-status input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-ch-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--text-xs); color: var(--color-ink-2); }
.r-ch-legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.r-ch-legend b { font-weight: var(--weight-ui); color: var(--color-ink); }
.r-ch-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--tone, var(--viz-c0)); }
.r-chtip { position: fixed; left: 0; top: 0; z-index: var(--z-tooltip); max-width: 260px; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); background: var(--color-ink); color: var(--color-paper); font: var(--weight-ui) var(--text-xs)/1.4 var(--font-body); pointer-events: none; }
.r-tip-on { filter: brightness(1.06); }
/* warna peran */
.vc0, .vk-first, .vk-back { --tone: var(--viz-c0); }
.vc1, .vk-rsv { --tone: var(--viz-c1); }
.vk-remind { --tone: var(--color-wa); }
.vc2, .vk-noshow, .vt-bad { --tone: var(--viz-bad); }
.vc3, .vk-cancel, .vt-mute { --tone: var(--viz-gray); }
.vt-base { --tone: var(--color-ink); } .vt-ok { --tone: var(--color-success); } .vt-acc { --tone: var(--viz-c0); }

/* Peta panas: tabel asli (pembaca layar membaca angkanya), angka tampil di sel tertinggi */
.r-heat { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.r-heat th { font: var(--weight-ui) var(--text-xs)/1.2 var(--font-body); color: var(--color-muted); text-align: center; padding-bottom: var(--space-2xs); }
.r-heat thead td { height: auto; background: none; }
.r-heat tbody th { width: 5.6em; padding: 0 var(--space-xs) 0 0; text-align: left; white-space: nowrap; }
/* Hallmark finish review: label jam ("< 15.00", "≥ 18.00") tidak terpotong di HP */
@media (max-width: 40rem) { .r-heat thead tr > :first-child, .r-heat tbody th { width: 52px; padding-right: var(--space-3xs); font-size: var(--text-xs); } .r-heat { border-spacing: 2px; } }
.r-heat td { position: relative; height: clamp(34px, 4vw, 46px); border-radius: 6px; background: var(--viz-q0); transition: background-color var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.r-heat td span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 var(--text-xs)/1 var(--font-body); color: var(--color-white); opacity: 0; }
.r-heat td.q1 { background: var(--viz-q1); } .r-heat td.q2 { background: var(--viz-q2); } .r-heat td.q3 { background: var(--viz-q3); } .r-heat td.q4 { background: var(--viz-q4); }
.r-heat td.q4 span { opacity: 1; }
/* nada merah: porsi tiket tidak datang (bukan tingkat), legenda sendiri */
.r-heat.vt-bad td { background: var(--viz-r0); } .r-heat.vt-bad td.q1 { background: var(--viz-r1); } .r-heat.vt-bad td.q2 { background: var(--viz-r2); } .r-heat.vt-bad td.q3 { background: var(--viz-r3); } .r-heat.vt-bad td.q4 { background: var(--viz-r4); }
.r-ch-key.vt-bad i { background: var(--viz-r0); } .r-ch-key.vt-bad i.q1 { background: var(--viz-r1); } .r-ch-key.vt-bad i.q2 { background: var(--viz-r2); } .r-ch-key.vt-bad i.q3 { background: var(--viz-r3); } .r-ch-key.vt-bad i.q4 { background: var(--viz-r4); }
.r-heat thead td, .r-heat.vt-bad thead td { background: none; }
.r-ch-heat { display: grid; gap: var(--space-md); }
.r-ch-key { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.r-ch-key i { width: 18px; height: 10px; border-radius: 3px; background: var(--viz-q0); }
.r-ch-key i.q1 { background: var(--viz-q1); } .r-ch-key i.q2 { background: var(--viz-q2); } .r-ch-key i.q3 { background: var(--viz-q3); } .r-ch-key i.q4 { background: var(--viz-q4); }
.r-ch-key span:first-child { margin-right: var(--space-2xs); } .r-ch-key span:last-child { margin-left: var(--space-2xs); }
.js .wait:not(.in) .r-heat td { opacity: 0; transform: scale(0.8); }
.r-heat tr:nth-child(2) td { transition-delay: 60ms; } .r-heat tr:nth-child(3) td { transition-delay: 120ms; } .r-heat tr:nth-child(4) td { transition-delay: 180ms; }

/* Kolom: tumbuh dari garis dasar (scaleY), nilai di ujung kolom yang disorot */
.r-ch-cols { display: grid; gap: var(--space-md); }
.r-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-xs); height: clamp(160px, 18vw, 220px); border-bottom: 1px solid var(--viz-grid); }
.r-cols li { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; min-width: 0; }
.r-cols b { position: relative; display: block; width: 100%; height: 100%; }
.r-cols b i { position: absolute; left: 50%; bottom: 0; width: 24px; height: 100%; margin-left: calc(-1 * var(--space-sm)); border-radius: 4px 4px 0 0; background: var(--viz-gray); transform-origin: 50% 100%; transform: scaleY(var(--h)); transition: transform 0.75s var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.r-cols li.hot b i { background: var(--viz-c0); }
.r-cols em { position: absolute; left: 0; right: 0; bottom: calc(var(--h) * 100% + 6px); font: 700 var(--text-xs)/1 var(--font-body); font-style: normal; color: var(--color-ink); text-align: center; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.r-cols li.hot em, .r-cols li.r-tip-on em { opacity: 1; }
.r-cols span { padding-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.r-ch-x { font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.js .wait:not(.in) .r-cols b i { transform: scaleY(0); }
.js .wait:not(.in) .r-cols em { opacity: 0; }

/* Batang mendatar berlabel (hasil tiket) */
.r-hb { display: grid; gap: var(--space-md); }
.r-hb li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); }
.r-hb span { font-weight: var(--weight-ui); }
.r-hb b { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-hb i { position: relative; grid-column: 1 / -1; height: 10px; overflow: hidden; border-radius: 5px; background: var(--color-paper-3); }
.r-hb i::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: var(--tone); transform-origin: 0 50%; transform: scaleX(var(--w)); transition: transform 0.9s var(--ease-out) calc(var(--k) * 110ms); }
.js .wait:not(.in) .r-hb i::after { transform: scaleX(0); }

/* Batang bertumpuk + legenda */
.r-ch-st { display: grid; gap: var(--space-md); }
.r-st { display: flex; gap: var(--space-3xs); height: 16px; transform-origin: 0 50%; transition: transform 1s var(--ease-out); }
.r-st i { flex: 0 0 calc(var(--w) * (100% - 6px)); border-radius: 4px; background: var(--tone); }
.js .wait:not(.in) .r-st { transform: scaleX(0); }

/* Cincin persen */
.r-ch-ring { display: grid; grid-template-columns: clamp(96px, 12vw, 132px) minmax(0, 1fr); align-items: center; gap: var(--space-lg); }
.r-ch-ring svg { width: 100%; height: auto; transform: rotate(-90deg); }
.r-ch-ring circle { fill: none; stroke-width: 12; }
.r-ch-ring .tr { stroke: var(--color-paper-3); }
.r-ch-ring .fg { stroke: var(--viz-c0); stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.2s var(--ease-out); }
.js .wait:not(.in) .r-ch-ring .fg { stroke-dashoffset: var(--len); }
.r-ch-ring p { display: grid; gap: var(--space-2xs); }
.r-ch-ring b { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.r-ch-ring span { color: var(--color-ink-2); }

/* Angka utama */
.r-ch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: var(--space-md) var(--space-lg); }
.r-ch-stats dt { font-size: var(--text-xs); color: var(--color-muted); }
.r-ch-stats dd { display: grid; gap: var(--space-3xs); margin: var(--space-2xs) 0 0; }
.r-ch-stats b { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.r-ch-stats span { font-size: var(--text-xs); color: var(--color-ink-2); }

/* Perjalanan tamu: garis tergambar dari kiri, titik muncul berurutan, label di atas dan bawah bergantian */
.r-ch-jr { display: grid; gap: var(--space-md); }
.r-jr { position: relative; height: 168px; margin: 0 var(--space-lg); }
.r-jr::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--today) * 100%); height: 2px; margin-top: -1px; border-radius: 1px; background: var(--color-ink); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out); }
.r-jr::after { content: ""; position: absolute; left: calc(var(--today) * 100%); right: 0; top: 50%; height: 1px; background: var(--viz-grid); }
.r-jr li { position: absolute; left: calc(var(--x) * 100%); top: 50%; transform: translate(-50%, -50%); transition: opacity var(--dur-long) var(--ease-out) calc(300ms + var(--k) * 120ms), transform var(--dur-long) var(--ease-out) calc(300ms + var(--k) * 120ms); }
.r-jr button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.r-jr button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px var(--viz-card); }
.r-jr p { position: absolute; left: 50%; bottom: 30px; display: grid; width: max-content; max-width: 9.5em; transform: translateX(-50%); text-align: center; font-size: var(--text-xs); line-height: 1.3; }
.r-jr li.dn p { bottom: auto; top: 30px; }
.r-jr li.al p { left: 2px; transform: none; text-align: left; } .r-jr li.ar p { left: auto; right: 2px; transform: none; text-align: right; }
.r-jr p b { font-weight: var(--weight-ui); }
.r-jr p span { color: var(--color-muted); }
.r-jr .r-jr-now { left: calc(var(--today) * 100%); top: 8px; bottom: 8px; width: 1px; transform: none; background: var(--color-rule-2); }
.r-jr .r-jr-now span { position: absolute; top: -6px; left: 6px; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.r-ch-jr .r-ch-legend i { border-radius: 50%; }
.js .wait:not(.in) .r-jr::before { transform: scaleX(0); }
.js .wait:not(.in) .r-jr li:not(.r-jr-now) { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }

/* Status sekarang: penggeser hari, zona wajar / lebih lama / terlalu lama */
.r-ch-status { --v: 0; display: grid; gap: var(--space-md); }
.r-stat-l { display: flex; justify-content: space-between; gap: var(--space-md); font-weight: var(--weight-ui); }
.r-stat-l output { font-variant-numeric: tabular-nums; }
.r-stat-track { position: relative; height: 10px; margin-top: var(--space-md); border-radius: 5px; background: var(--color-paper-3); }
.r-stat-track i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); background: var(--zone-soft); }
.r-stat-track i:first-child { border-radius: 5px 0 0 5px; } .r-stat-track i:last-child { border-radius: 0 5px 5px 0; }
.r-stat-track em { position: absolute; left: calc(var(--x) * 100%); bottom: calc(100% + 4px); transform: translateX(-50%); font-size: var(--text-xs); font-style: normal; color: var(--color-muted); white-space: nowrap; }
.r-stat-track em::after { content: ""; position: absolute; left: 50%; top: calc(100% + 2px); width: 2px; height: 18px; margin-left: -1px; background: var(--color-ink); }
.r-ch-status input { width: 100%; margin: 0; accent-color: var(--color-ink); }
.r-stat-caps { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: calc(-1 * var(--space-xs)); font-size: var(--text-xs); color: var(--color-muted); }
.r-stat-caps span:nth-child(2):not(:last-child) { text-align: center; } .r-stat-caps span:last-child { text-align: right; }
.vt-ok { --zone-soft: var(--color-success-soft); --zone-ink: var(--color-success-ink); }
.vt-late { --zone-soft: var(--color-accent-soft); --zone-ink: var(--color-gold); }
.vt-lost { --zone-soft: var(--color-error-soft); --zone-ink: var(--color-error-ink); }
.r-stat-out { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-small); background: var(--zone-soft); transition: background-color var(--dur-short) var(--ease-out); }
.r-stat-s { font-weight: 700; color: var(--zone-ink); }
.r-stat-tip { color: var(--color-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .r-heat td, .r-cols b i, .r-cols em, .r-hb i::after, .r-st, .r-ch-ring .fg, .r-jr::before, .r-jr li, .r-stat-out, .r-ch-tabs button { transition: none; }
}
@media (max-width: 40rem) {
  .r-jr { height: 200px; margin: 0 var(--space-sm); }
  .r-jr p { max-width: 6.5em; }
  .r-heat { border-spacing: 3px; }
  .r-heat tbody th { width: 4.4em; }
}

/* Rentang antar brand sampel: jalur 0-100%, ruas terisi dari min sampai maks, tumbuh dari kiri saat terlihat */
.r-rg { display: grid; gap: var(--space-lg); }
.r-rg li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); }
.r-rg span { font-weight: var(--weight-ui); }
.r-rg b { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-rg i { position: relative; grid-column: 1 / -1; display: block; height: 12px; border-radius: 6px; background: var(--color-paper-3); }
.r-rg em { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 6px; background: var(--tone); transform-origin: 0 50%; transition: transform 0.9s var(--ease-out) calc(var(--k) * 140ms); }
.js .wait:not(.in) .r-rg em { transform: scaleX(0); }
.r-rg-axis { display: flex; justify-content: space-between; margin-top: calc(-1 * var(--space-sm)); font-size: var(--text-xs); color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .r-rg em { transition: none; } }

/* Tiga pintu (Waitlist, Reservasi, Buku Tamu): tanpa skrip semua panel tampil; dengan skrip satu panel per sakelar */
.r-md { display: grid; gap: var(--space-md); }
.r-md-p { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-small); background: var(--color-paper-2); }
.js .r-md-js .r-md-p:not(.on) { display: none; }
.js .r-md-js .r-md-k { display: none; }
.r-md-k { font-weight: 700; }
.r-md-when { font: var(--display-weight) var(--text-lg)/1.35 var(--font-display); letter-spacing: var(--tracking-display); }
.r-md-rec { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.r-md-rec li { padding: var(--space-2xs) var(--space-xs); border-radius: 6px; background: var(--viz-card); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-md-how { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-md-fact { display: grid; gap: var(--space-3xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.r-md-fact b { font: var(--display-weight) var(--text-xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.r-md-fact span { font-size: var(--text-xs); color: var(--color-muted); }
/* Resep ajak balik (#108): langkah 1-4 + HP berukuran wajar; tanpa skrip semua tampil di keadaan akhir */
.r-rc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--space-xl) clamp(var(--space-xl), 5vw, var(--space-3xl)); align-items: center; }
.r-rc-l { display: grid; gap: var(--space-md); }
.r-rc-steps { position: relative; display: grid; gap: var(--space-sm); }
.r-rc-steps::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: 24px; width: 2px; background: var(--color-rule); }
.r-rc-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-md); align-items: start; transition: opacity var(--dur-long) var(--ease-out); }
.r-rc-steps button { display: contents; cursor: pointer; font: inherit; color: inherit; }
.r-rc-steps button b { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule-2); font-weight: 700; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.r-rc-steps button span { align-self: center; justify-self: start; text-align: left; font-weight: var(--weight-ui); }
.r-rc-c { grid-column: 2; margin-top: var(--space-2xs); color: var(--color-ink-2); line-height: 1.5; }
.r-rc-s b { font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-rc-s em { font-style: normal; padding: 0 0.2em; border-radius: 6px; background: var(--color-accent-soft); color: var(--color-accent-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.r-rc-steps button:focus-visible b, .r-rc-play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.js .r-rc-js .r-rc-steps li:not(.on):not(.past) { opacity: 0.45; }
.r-rc-steps li.on button b { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: none; transform: scale(1.08); }
.r-rc-steps li.past button b { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-rc-play { display: none; justify-self: start; min-height: 40px; padding: 0 var(--space-md); border: 0; background: transparent; color: var(--color-ink); font: var(--weight-ui) var(--text-sm)/1 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; cursor: pointer; }
.js .r-rc-js .r-rc-play { display: inline-flex; align-items: center; }
.r-rc-phone { justify-self: center; width: 100%; max-width: 340px; overflow: hidden; border-radius: 30px; background: var(--wa-chat); box-shadow: 0 0 0 8px var(--color-night), 0 30px 60px -30px color-mix(in oklab, var(--color-ink) 55%, transparent); }
.r-rc-top { display: grid; gap: var(--space-3xs); padding: var(--space-md) var(--space-md) var(--space-sm); background: var(--color-paper); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.r-rc-top b { font-size: var(--text-sm); color: var(--color-ink); }
.r-rc-chat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); min-height: 470px; padding: var(--space-md) var(--space-sm); }
.r-rc-chat .r-wab-msg { font-size: var(--text-xs); }
.r-rc-chat .r-wab-btns span { font-size: var(--text-xs); }
.r-rc-wait, .r-rc-typing { display: none; }
.r-rc-done { align-self: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-success-soft); color: var(--color-success-ink); font-size: var(--text-xs); font-weight: var(--weight-ui); text-align: center; }
.js .r-rc-js.s0 .r-rc-wait, .js .r-rc-js.s1 .r-rc-wait { display: block; align-self: center; margin-bottom: auto; margin-top: auto; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper); font-size: var(--text-xs); color: var(--color-muted); }
.js .r-rc-js.typing .r-rc-typing { display: inline-flex; gap: var(--space-2xs); align-self: flex-start; padding: var(--space-sm) var(--space-md); border-radius: 4px 14px 14px 14px; background: var(--wa-bubble); }
.r-rc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-muted); animation: r-rc-dot 0.9s var(--ease-in-out) infinite; }
.r-rc-typing i:nth-child(2) { animation-delay: 0.15s; } .r-rc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes r-rc-dot { 50% { transform: translateY(-4px); opacity: 0.5; } }
.r-rc-msg { display: grid; gap: var(--space-xs); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.js .r-rc-js:not(.arrived) .r-rc-msg { opacity: 0; transform: translateY(18px) scale(0.98); position: absolute; visibility: hidden; }
.r-rc-done { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .r-rc-js:not(.s3) .r-rc-done { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .r-rc-steps li, .r-rc-steps button b, .r-rc-msg, .r-rc-done { transition: none; } .r-rc-typing i { animation: none; } }
@media (max-width: 60rem) { .r-rc { grid-template-columns: minmax(0, 1fr); } .r-rc-chat { min-height: 0; } }

/* Kepala kartu resep = judul resep industri (judul besar bab = Resep ajak balik, #101) */
.r-chap .r-ich:has(.r-rc) .r-ich-h { font: var(--display-weight) var(--text-xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }

/* Ekosistem (#104): peta tujuh produk, Profil tamu di tengah; sisi produk terpilih menyala dan mengalir (garis putus bergerak) */

/* #107: panah arah di tiap alur (penanda abu, menyala kuning saat alurnya terpilih) + kilau kuning bergerak di Profil tamu */

/* ---------- WhatsApp CRM (#96, wa.mjs + wa.js) ----------
   Kalimat target dengan kata berwarna, balon WhatsApp, putaran terkirim sampai ditukar, data dari kunjungan, batas biaya.
   Warna lewat token; gerak transform dan opacity, sekali; tanpa skrip semua tampil di keadaan akhir. */
:root { --wa-chat: oklch(95.5% 0.012 95); --wa-bubble: var(--color-white); --wa-link: oklch(52% 0.11 235); }

/* Kalimat target */
.r-tg { display: grid; gap: var(--space-lg); }
.r-tg-rek p, .r-tg-add > p { margin-bottom: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.r-tg-rek div, .r-tg-add div { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.r-tg-rek button, .r-tg-w { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); font: var(--weight-ui) var(--text-sm)/1.2 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.r-tg-rek button { background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-tg-rek button[aria-pressed=true] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-tg-w { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.r-tg-w.off { background: transparent; color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.r-tg-rek button:focus-visible, .r-tg-w:focus-visible, .r-tg-fun summary:focus-visible, .r-wab button:focus-visible, .r-wab textarea:focus-visible, .r-lp-again:focus-visible, .r-pl input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-tg-s { font: var(--display-weight) var(--text-xl)/1.35 var(--font-display); letter-spacing: var(--tracking-display); }
.r-tg-s b { font-weight: inherit; color: var(--color-ink-2); }
.r-tg-s em { font-style: normal; padding: 0 0.2em; border-radius: 6px; background: var(--color-accent-soft); color: var(--color-accent-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.r-tg-n { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.r-tg-n p { font-size: var(--text-lg); }
.r-tg-n p b { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.r-tg-n span { font-size: var(--text-sm); color: var(--color-muted); }
.r-tg-fun summary { display: inline-flex; min-height: 40px; align-items: center; font-weight: var(--weight-ui); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; cursor: pointer; list-style: none; }
.r-tg-fun summary::-webkit-details-marker { display: none; }
.r-tg-fun ul { display: grid; margin-top: var(--space-xs); }
.r-tg-fun li { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.r-tg-fun li b { font-variant-numeric: tabular-nums; }
.r-tg-fun li.out { color: var(--color-ink-2); }
.r-tg-fun li.sum { border-bottom: 0; font-weight: 700; }
.r-tg-fun > p { font-size: var(--text-xs); color: var(--color-muted); }

/* Balon pesan WhatsApp */
.r-wab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.r-wab-ctl { display: grid; gap: var(--space-sm); }
.r-wab-l { display: flex; justify-content: space-between; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-wab textarea { width: 100%; padding: var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-small); background: var(--color-paper); color: var(--color-ink); font: var(--text-sm)/1.45 var(--font-body); resize: vertical; }
.r-wab-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.r-wab-chips button { min-height: 36px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font: var(--weight-ui) var(--text-xs)/1 var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-wab-chips button[aria-pressed=true] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-wab-ph { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: 20px; background: var(--wa-chat); }
.r-wab-from { font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.r-wab-msg { display: grid; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: 4px 14px 14px 14px; background: var(--wa-bubble); font-size: var(--text-sm); line-height: 1.5; box-shadow: 0 1px 1px color-mix(in oklab, var(--color-ink) 12%, transparent); }
.r-wab-msg p.code { font-weight: 700; }
.r-wab-msg p.r-flash { animation: r-wab-flash 0.9s var(--ease-out); }
@keyframes r-wab-flash { 30% { opacity: 0.35; } }
.r-wab-btns { display: grid; gap: var(--space-3xs); }
.r-wab-btns span { padding: var(--space-xs); border-radius: 10px; background: var(--wa-bubble); color: var(--wa-link); font-size: var(--text-sm); font-weight: var(--weight-ui); text-align: center; }
.r-wab-foot { font-size: var(--text-xs); line-height: 1.4; color: var(--color-muted); }

/* Putaran: Riwayat, HP tamu, Tukar Hadiah, hasil */
.r-lp { display: grid; gap: var(--space-md); }
.r-lp-steps { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-sm); }
.r-lp-steps > li { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-small); background: var(--color-paper-2); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.r-lp-h { font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); }
.r-lp-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: var(--space-xs) var(--space-sm); }
.r-lp-k div { display: grid; gap: var(--space-3xs); }
.r-lp-k dt { font-size: 0.75rem; color: var(--color-ink-2); }
.r-lp-k dd { margin: 0; font: 700 var(--text-lg)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.r-lp-s { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-lp-code, .r-lp-in { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border-radius: var(--radius-small); background: var(--viz-card, var(--color-white)); }
.r-lp-code small, .r-lp-in small { font-size: var(--text-xs); color: var(--color-muted); }
.r-lp-code b, .r-lp-in b { font: 700 var(--text-lg)/1.1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-lp-st span { display: inline-block; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-ui); }
.r-lp-st .ok { display: none; background: var(--color-success-soft); color: var(--color-success-ink); }
.r-lp-st .done { background: var(--color-ink); color: var(--color-paper); }
.r-lp.play:not(.s4) .r-lp-st .ok { display: inline-block; } .r-lp.play:not(.s4) .r-lp-st .done { display: none; }
.r-lp-res { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-small); background: var(--color-accent-soft); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.r-lp-res b { font-weight: 700; }
.r-lp-again { justify-self: start; min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: var(--weight-ui) var(--text-sm)/1 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; cursor: pointer; }
.js .r-lp.armed:not(.play) .r-lp-steps > li, .js .r-lp.armed:not(.play) .r-lp-res,
.js .r-lp.play:not(.s1) .r-lp-a, .js .r-lp.play:not(.s2) .r-lp-b, .js .r-lp.play:not(.s3) .r-lp-c, .js .r-lp.play:not(.s5) .r-lp-res { opacity: 0.28; transform: translateY(8px); }

/* Data terisi dari kunjungan */
.r-fd { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.r-fd-ev { display: grid; gap: var(--space-xs); }
.r-fd-ev li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-small); background: var(--color-paper-2); transition: opacity var(--dur-long) var(--ease-out) calc(var(--k) * 220ms), transform var(--dur-long) var(--ease-out) calc(var(--k) * 220ms); }
.r-fd-src { grid-row: span 2; align-self: start; padding: var(--space-2xs) var(--space-xs); border-radius: 6px; background: var(--viz-card, var(--color-white)); font-size: var(--text-xs); font-weight: var(--weight-ui); }
.r-fd-ev b { font-weight: var(--weight-ui); }
.r-fd-ev small { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-fd-pf { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-small); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-fd-name { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.r-fd-name b { font: var(--display-weight) var(--text-lg)/1 var(--font-display); }
.r-fd-name span { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: var(--weight-ui); }
.r-fd-pf dl { display: grid; gap: var(--space-xs); }
.r-fd-pf dl div { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); transition: opacity var(--dur-long) var(--ease-out) calc(var(--k) * 220ms + 200ms); }
.r-fd-pf dt { color: var(--color-ink-2); } .r-fd-pf dd { margin: 0; font-weight: var(--weight-ui); }
.js .wait:not(.in) .r-fd-ev li { opacity: 0; transform: translateX(-12px); }
.js .wait:not(.in) .r-fd-pf dl div { opacity: 0; }

/* Batas biaya */
.r-pl { display: grid; gap: var(--space-sm); }
.r-pl-l { display: flex; justify-content: space-between; font-weight: var(--weight-ui); }
.r-pl input { width: 100%; margin: 0; accent-color: var(--color-ink); }
.r-pl-rows { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); }
.r-pl-rows li { display: grid; grid-template-columns: minmax(0, 7.5em) auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); transition: opacity var(--dur-short) var(--ease-out); }
.r-pl-n { display: grid; } .r-pl-n b { font-weight: var(--weight-ui); } .r-pl-n span { font-size: var(--text-xs); color: var(--color-muted); }
.r-pl-pill { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-ui); }
.p-tinggi { background: var(--color-success-soft); color: var(--color-success-ink); } .p-sedang { background: var(--color-accent-soft); color: var(--color-accent-ink); } .p-rendah { background: var(--color-paper-3); color: var(--color-ink-2); }
.r-pl-why { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-pl-st em { font-style: normal; font-size: var(--text-xs); font-weight: var(--weight-ui); white-space: nowrap; }
.r-pl-st .out { display: none; color: var(--color-muted); }
.r-pl-rows li.cut { opacity: 0.45; } .r-pl-rows li.cut .in { display: none; } .r-pl-rows li.cut .out { display: inline; }

@media (prefers-reduced-motion: reduce) { .r-lp-steps > li, .r-lp-res, .r-fd-ev li, .r-fd-pf dl div, .r-pl-rows li, .r-tg-w, .r-tg-rek button { transition: none; } .r-wab-msg p.r-flash { animation: none; } }
@media (max-width: 60rem) { .r-wab, .r-fd { grid-template-columns: minmax(0, 1fr); } .r-lp-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .r-pl-rows li { grid-template-columns: minmax(0, 1fr) auto; } .r-pl-why { grid-column: 1 / -1; } .r-pl-st { grid-column: 1 / -1; } }

/* Bab lebar: teks di atas, grafik selebar wadah (langkah berurutan butuh ruang mendatar) */
.r-chap.wide { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.r-chap.wide .r-vz-t { max-width: 46rem; }
/* HP sempit: chip syarat satu baris dan bisa digeser (tombol tidak patah dua baris, Hallmark 49a) */
.r-tg-w, .r-tg-rek button { white-space: nowrap; flex: none; }
@media (max-width: 40rem) { .r-tg-rek div, .r-tg-add div { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-right: calc(-1 * var(--space-md)); padding-right: var(--space-md); } .r-tg-rek div::-webkit-scrollbar, .r-tg-add div::-webkit-scrollbar { display: none; } }

/* Gambar promo di balon (#99): kepala gambar 1,91:1 di atas pesan, seperti WhatsApp */
.r-wab-l span { font-weight: var(--weight-body); color: var(--color-muted); }
.r-wab-img { margin: 0; overflow: hidden; border-radius: 14px 14px 4px 4px; background: var(--wa-bubble); }
.r-wab-img[hidden] { display: none; }
.r-wab-img img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.r-wab-img:not([hidden]) + .r-wab-msg { border-radius: 4px 4px 14px 14px; }
.r-wab-file { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font: var(--weight-ui) var(--text-xs)/1 var(--font-body); box-shadow: inset 0 0 0 1px var(--color-rule); cursor: pointer; }
.r-wab-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.r-wab-file.on { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-wab-file:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-wab-hint { font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.r-wab-chips button, .r-wab-file { white-space: nowrap; }

/* Alur satu putaran (#100). Tanpa skrip: daftar bernomor lengkap dengan penjelasan. Dengan skrip di layar lebar: cincin
   enam langkah, titik berputar searah jarum jam, penjelasan langkah aktif di tengah. HP: daftar, penjelasan di langkah aktif. */
.r-lm { position: relative; display: grid; gap: var(--space-md); }
.r-lm-ring { display: grid; gap: var(--space-xs); counter-reset: none; }
.r-lm-ring li { display: grid; gap: var(--space-2xs); }
.r-lm-ring button { display: inline-flex; align-items: center; gap: var(--space-sm); width: fit-content; min-height: 48px; padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: var(--weight-ui) var(--text-sm)/1.25 var(--font-body); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.r-lm-ring button b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--viz-card, var(--color-white)); font-weight: 700; }
.r-lm-ring button:focus-visible, .r-lm-play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.r-lm-ring li.on button { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-lm-ring li.on button b { background: var(--color-accent); color: var(--color-accent-ink); }
.r-lm-ring li.past button b { background: var(--color-accent-soft); }
.r-lm-d { padding: 0 0 var(--space-xs) calc(var(--space-xs) + 32px + var(--space-sm)); font-size: var(--text-sm); color: var(--color-ink-2); }
.r-lm-d p { margin-bottom: var(--space-2xs); }
.r-lm-hub, .r-lm-now, .r-lm-play { display: none; }
.r-lm-play { justify-self: start; min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: var(--weight-ui) var(--text-sm)/1 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; cursor: pointer; }
.js .r-lm-js .r-lm-play { display: inline-flex; align-items: center; }
.js .r-lm-js .r-lm-d { display: none; }
.js .r-lm-js li.on .r-lm-d { display: block; }
@media (min-width: 60.01rem) {
  .js .r-lm-js { --r: min(250px, 21vw); --a: 0deg; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: var(--space-md) 0; }
  .js .r-lm-js .r-lm-ring, .js .r-lm-js .r-lm-hub, .js .r-lm-js .r-lm-now { grid-area: 1 / 1; }
  .js .r-lm-js .r-lm-ring { position: relative; width: calc(var(--r) * 2 + 240px); height: calc(var(--r) * 2 + 96px); display: block; }
  .js .r-lm-js .r-lm-ring li { position: absolute; left: 50%; top: 50%; transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(-1 * var(--r))) rotate(calc(var(--i) * -360deg / var(--n))) translate(-50%, -50%); }
  .js .r-lm-js .r-lm-ring li.on button { transform: scale(1.06); }
  .js .r-lm-js li.on .r-lm-d { display: none; }
  .js .r-lm-js .r-lm-hub { display: block; align-self: center; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-rule); transform: rotate(var(--a)); transition: transform 1.2s var(--ease-in-out); pointer-events: none; }
  .js .r-lm-js .r-lm-dot { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 30%, transparent); }
  .js .r-lm-js .r-lm-now { display: grid; align-self: center; gap: var(--space-xs); width: min(320px, calc(var(--r) * 1.35)); text-align: center; justify-items: center; }
  .js .r-lm-js .r-lm-k { font-size: var(--text-xs); color: var(--color-muted); }
  .js .r-lm-js .r-lm-t { font: var(--display-weight) var(--text-xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
  .js .r-lm-js .r-lm-p { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
  .js .r-lm-js .r-lm-play { justify-self: center; }
}
@media (max-width: 60rem) { .r-lm-ring { border-left: 2px solid var(--color-rule); padding-left: var(--space-sm); } }
@media (prefers-reduced-motion: reduce) { .js .r-lm-js .r-lm-hub, .r-lm-ring button { transition: none; } }
/* Garis cincin dan titik lewat DI BAWAH label langkah */
@media (min-width: 60.01rem) {
  .js .r-lm-js .r-lm-hub { position: relative; z-index: 1; }
  .js .r-lm-js .r-lm-ring { z-index: 2; }
  .js .r-lm-js .r-lm-now { position: relative; z-index: 2; }
  .js .r-lm-js .r-lm-ring button { background: var(--color-paper); }
  .js .r-lm-js .r-lm-ring li.on button { background: var(--color-ink); }
}

/* ---------- Kit UI bersama halaman produk (#105 dst.): replika Pengaturan app dan layar tamu/staf ----------
   Panel pengaturan (fieldset berjudul), segmen, kartu pilihan, saklar, tombol, catatan kejadian, layar HP, label Segera.
   Dipakai loyalty, waitlist, form, reservasi, meja, insights. Gerak: transform dan opacity; tanpa skrip semua tampil. */
.r-ui { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-lg); align-items: start; }
.r-ui [hidden] { display: none !important; }
.r-ui button, .r-ui input { font: inherit; }
.r-ui button:focus-visible, .r-ui input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-ui-set { display: grid; gap: var(--space-sm); }
.r-ui-blk { display: grid; gap: var(--space-xs); min-width: 0; margin: 0; padding: var(--space-md); border: 0; border-radius: var(--radius-small); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-ui-blk legend { float: left; width: 100%; margin-bottom: var(--space-2xs); padding: 0; font-weight: var(--weight-ui); }
.r-ui-blk legend + * { clear: both; }
.r-ui-blk.off > :not(legend):not(.r-ui-hint) { opacity: 0.45; }
.r-ui-hint { font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
.r-ui-hint b { font-weight: var(--weight-ui); color: var(--color-ink); }
.r-ui-err { font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-error-ink); }
.r-ui-dirty { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-ui-cap { font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-ui-gv { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.r-ui-scr { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: 22px; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-ui input[type=text], .r-ui input[type=number], .r-ui-in { min-width: 0; height: 40px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-small); background: var(--viz-card); color: var(--color-ink); font-size: var(--text-sm); }
.r-ui input[aria-invalid=true] { border-color: var(--color-error); }
.r-ui input:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.r-ui-seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); width: fit-content; max-width: 100%; padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.r-ui-seg button { min-height: 36px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: var(--weight-ui); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-ui-seg button[aria-pressed=true] { background: var(--viz-card); color: var(--color-ink); box-shadow: 0 1px 3px color-mix(in oklab, var(--color-ink) 18%, transparent); }
.r-ui-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.r-ui-o { display: grid; gap: var(--space-3xs); align-content: start; min-height: 64px; padding: var(--space-sm); border: 0; border-radius: var(--radius-small); background: transparent; color: var(--color-ink); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-rule-2); transition: box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.r-ui-o b { font-size: var(--text-sm); font-weight: var(--weight-ui); }
.r-ui-o span { font-size: var(--text-xs); line-height: 1.4; color: var(--color-muted); }
.r-ui-o[aria-pressed=true] { background: var(--viz-card); box-shadow: inset 0 0 0 2px var(--color-ink); }
.r-ui-sw { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); min-height: 40px; font-size: var(--text-sm); cursor: pointer; }
.r-ui-sw input { position: absolute; left: 0; top: 50%; width: 40px; height: 24px; margin: calc(-1 * var(--space-sm)) 0 0; opacity: 0; cursor: pointer; }
.r-ui-swt { position: relative; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--color-rule-2); transition: background-color var(--dur-short) var(--ease-out); }
.r-ui-swt::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 2px color-mix(in oklab, var(--color-black) 30%, transparent); transition: transform var(--dur-short) var(--ease-out); }
.r-ui-sw input:checked + .r-ui-swt { background: var(--color-ink); }
.r-ui-sw input:checked + .r-ui-swt::after { transform: translateX(16px); }
.r-ui-sw input:focus-visible + .r-ui-swt { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-ui-sw input:disabled { cursor: not-allowed; }
.r-ui-sw input:disabled + .r-ui-swt { background: var(--color-paper-3); cursor: not-allowed; }
.r-ui-sw input:disabled ~ span:last-child { color: var(--color-muted); }
.r-ui-lnk { min-height: 36px; padding: 0 var(--space-2xs); border: 0; background: transparent; color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-ui); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; cursor: pointer; }
.r-ui .r-ui-pri, .r-ui-chips button[aria-pressed=true] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-ui-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-md); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-rule-2); font-size: var(--text-xs); font-weight: var(--weight-ui); white-space: nowrap; }
.r-ui-pill.pri { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-ui .r-flash { animation: ly-flash 700ms var(--ease-out); }
.r-ui-log { display: grid; gap: var(--space-2xs); }
.r-ui-log li { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); background: var(--color-paper-2); font-size: var(--text-xs); line-height: 1.4; }
.r-ui-log li:first-child { animation: ui-in 320ms var(--ease-out); }
.r-ui-log b { font-weight: var(--weight-ui); }
.r-ui-log li.ok { background: var(--color-success-soft); color: var(--color-success-ink); }
.r-ui-log li.warn { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.r-ui-log li.no { color: var(--color-ink-2); }
.r-ui-log li.info { background: transparent; box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-ui-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); align-items: start; }
.r-ui-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.r-ui-in { width: 100%; }
.r-ui-btns { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.r-ui-pri, .r-ui-btns button, .r-ui-chips button { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-ui); cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.r-ui-btns button:active, .r-ui-pri:active { transform: scale(0.97); }
.r-ui .r-ui-pri, .r-ui-btns button.r-ui-pri, .r-ui-chips button[aria-pressed=true] { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.r-ui .r-flash { animation: ui-flash 700ms var(--ease-out); }
@keyframes ui-flash { 30% { opacity: 0.3; } }
@keyframes ui-in { from { opacity: 0; transform: translateY(6px); } }
/* Segera: fitur yang belum ada di app (keputusan founder 27 Okt, daftar di notes/daftar-segera.md) */
.r-ui-soon { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: 0.75rem; font-weight: var(--weight-ui); vertical-align: middle; white-space: nowrap; }
@media (max-width: 60rem) { .r-ui { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .r-ui-opts, .r-ui-pair { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .r-ui *, .r-ui *::after { animation: none !important; transition: none !important; } }

/* ---------- #115 bab ringkas (standar Profil tamu, founder 27 Okt): HP tamu mini, papan staf mini. Dipakai semua halaman
   produk. Warna lewat token, gerak transform dan opacity; tanpa skrip semua tampil diam. ---------- */
.r-mini { display: grid; gap: var(--space-md); justify-items: center; min-width: 0; }
.r-mini [hidden] { display: none !important; }
.r-mini button { font: inherit; }
.r-mini .r-flash { animation: ui-flash 700ms var(--ease-out); }
.r-mini .land { animation: ui-in 420ms var(--ease-out); }
.r-mph { position: relative; display: grid; align-content: start; gap: var(--space-sm); width: min(100%, 340px); padding: var(--space-md); border-radius: 26px; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); overflow: hidden; }
.r-mph-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); }
.r-mph-top span { font-size: var(--text-xs); color: var(--color-muted); }
.r-mph-card { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: 18px; background: var(--color-white); box-shadow: 0 1px 2px color-mix(in oklab, var(--color-ink) 8%, transparent); }
.r-mph-btn { display: grid; place-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-ui); }
.r-mph-push { position: absolute; left: var(--space-sm); right: var(--space-sm); top: var(--space-sm); z-index: 2; display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 16px; background: var(--color-white); box-shadow: 0 12px 28px -14px color-mix(in oklab, var(--color-ink) 45%, transparent), inset 0 0 0 1px var(--color-rule); font-size: var(--text-xs); color: var(--color-ink-2); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); pointer-events: none; }
/* tanpa skrip notifikasi tampil diam di atas kartu; dengan skrip ia muncul hanya di adegan "1 grup lagi" (Hallmark 62) */
html:not(.js) .r-mph-push { position: static; }
.js .r-mph-push:not(.on) { opacity: 0; transform: translateY(-130%); }
.r-mph-push b { font-size: var(--text-sm); color: var(--color-ink); }
.r-mbd { display: grid; gap: var(--space-sm); width: 100%; padding: var(--space-md); border-radius: 18px; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-mbd-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); }
.r-mbd-top span { font-size: var(--text-xs); color: var(--color-muted); }
.r-mbd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.r-mbd-cols.one { grid-template-columns: minmax(0, 1fr); }
.r-mbd-col { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-sm); border-radius: 14px; background: var(--color-paper-2); }
.r-mbd-h { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); }
.r-mbd-h span { font-size: var(--text-xs); color: var(--color-muted); }
.r-mbd-list { display: grid; align-content: start; gap: var(--space-2xs); min-height: 136px; }
.r-mbd-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-white); font-size: var(--text-sm); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.r-mbd-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-mbd-list li small { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.js .r-mbd-list li.out { opacity: 0; transform: translateX(28px); }
.r-mbd-call { min-height: 40px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-ui); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.r-mbd-call:hover { background: color-mix(in oklab, var(--color-ink) 84%, var(--color-white)); }
.r-mbd-call:active { transform: translateY(1px); }
.r-mbd-tv { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: 12px; background: var(--color-night); color: var(--color-on-night); font-size: var(--text-sm); }
.r-mbd-tv span { font-size: var(--text-xs); color: var(--color-on-night-2); }
.r-mini .r-ui-seg { justify-content: center; }
.r-mini .r-ui-seg button { cursor: pointer; }
.r-mini .r-ui-seg button:hover { color: var(--color-ink); }
@media (max-width: 26rem) { .r-mph, .r-mbd { padding: var(--space-sm); } .r-mbd-list li small { display: none; } }
@media (prefers-reduced-motion: reduce) { .r-mini *, .r-mini *::after { animation: none !important; transition: none !important; } }
/* HP: pilihan kecil jadi satu baris kolom sama lebar (dulu terlipat jadi gumpalan pil dua baris) */
@media (max-width: 40rem) {
  .r-mini .r-ui-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: 16px; }
  .r-mini .r-ui-seg button { min-height: 44px; padding: var(--space-3xs) var(--space-xs); border-radius: 12px; line-height: 1.2; white-space: normal; }
}

/* ---------- Hallmark finish review 27 Okt ---------- */
/* gate 4: di dalam kartu bab (.r-ich) papan staf bukan kartu kedua (tanpa isi dan cincin; kolom dan baris tetap berisi) */
.r-ich .r-mbd { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* gate 18: tombol Jeda per kartu bergerak (dibuat wkUI.loop); kartu juga berhenti selama disorot atau difokus */
.r-ich:has([data-loop-pause]) { position: relative; }
.r-ich:has([data-loop-pause]) > .r-ich-h { padding-right: 44px; }
.r-loop-pause { position: absolute; top: var(--space-sm); right: var(--space-sm); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-loop-pause:hover { background: var(--color-paper-3); color: var(--color-ink); }
.r-loop-pause:active { transform: scale(0.96); }
.r-loop-pause:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-loop-pause svg { width: 14px; height: 14px; }
.r-loop-pause .pl, .r-loop-pause[aria-pressed=true] .pz { display: none; }
.r-loop-pause[aria-pressed=true] .pl { display: block; }
/* gate 49a/73 di HP: pilihan kecil ditumpuk satu per baris (label tidak patah), papan staf satu kolom */
@media (max-width: 40rem) {
  .r-mini .r-ui-seg { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .r-mini .r-ui-seg button { min-height: 40px; white-space: nowrap; }
}
@media (max-width: 26rem) { .r-mbd-cols { grid-template-columns: minmax(0, 1fr); } .r-mbd-list { min-height: 0; } .r-mbd-list li small { display: inline; } }

/* ---------- Loyalty & stempel (#105, #115 ringkas; loyalty.mjs + loyalty.js) ----------
   Kepala + lima kartu ringkas (satu kartu tiga layar, stempel saat duduk, level, Tukar Hadiah, laporan). Kartu stempel = muka kartu app: bahan ikut
   level (mutiara, perak, emas, hitam), warna brand hanya di inisial logo. Gerak: transform dan opacity, cap mendarat sekali per
   stempel; tanpa skrip semua bagian tampil di keadaan akhir. */
:root {
  /* bahan kartu (nilai app: GuestStampFace, hero-data bahan B) */
  --ly-mutiara-a: #fbfaf8; --ly-mutiara-b: #ebe7e1; --ly-mutiara-c: #f6f3ee; --ly-mutiara-d: #e4dfd8; --ly-mutiara-ink: #1d1d1f; --ly-mutiara-muted: #55555b;
  --ly-perak-a: #eef1f4; --ly-perak-b: #c5ccd4; --ly-perak-c: #f2f4f7; --ly-perak-d: #b8c0ca; --ly-perak-ink: #121417; --ly-perak-muted: #3b424b;
  --ly-emas-a: #f7e7bb; --ly-emas-b: #dcb86a; --ly-emas-c: #f4dfa6; --ly-emas-d: #d1a957; --ly-emas-ink: #21160a; --ly-emas-muted: #4a3610;
  --ly-hitam-a: #232326; --ly-hitam-b: #0f0f11; --ly-hitam-c: #1c1c1f; --ly-hitam-ink: #f5f5f7; --ly-hitam-muted: #a3a3aa;
  /* foil Diamond: biru saja (Hallmark 2a: tanpa gradasi ungu ke biru) */
  --ly-foil-a: #6fb0ff; --ly-foil-b: #e6f3ff; --ly-foil-d: #62d3ff;
  /* brand contoh Kopi Sore: satu-satunya warna brand di muka kartu */
  --ly-logo: #9a3b16; --ly-logo-ink: var(--color-white);
  --ly-sheen: color-mix(in oklab, var(--color-white) 14%, transparent);
  --ly-card-shadow: 0 18px 36px -20px color-mix(in oklab, var(--color-black) 60%, transparent), 0 2px 6px color-mix(in oklab, var(--color-black) 14%, transparent);
}


/* ---------- Kartu stempel ---------- */
.ly-card { --ly-ink: var(--ly-emas-ink); --ly-muted: var(--ly-emas-muted); --ly-glyph: var(--ly-emas-a);
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; justify-self: center; width: 100%; max-width: 340px; aspect-ratio: 1.586;
  padding: var(--space-sm) 14px; border-radius: 16px; overflow: hidden; color: var(--ly-ink); box-shadow: var(--ly-card-shadow); transition: color var(--dur-short) var(--ease-out); }
.ly-card.sm { max-width: 280px; padding: 10px var(--space-sm); }
.ly-card[data-material=mutiara] { --ly-ink: var(--ly-mutiara-ink); --ly-muted: var(--ly-mutiara-muted); --ly-glyph: var(--ly-mutiara-a); }
.ly-card[data-material=perak] { --ly-ink: var(--ly-perak-ink); --ly-muted: var(--ly-perak-muted); --ly-glyph: var(--ly-perak-a); }
.ly-card[data-material=hitam] { --ly-ink: var(--ly-hitam-ink); --ly-muted: var(--ly-hitam-muted); --ly-glyph: var(--ly-hitam-b); }
.ly-mat, .ly-pat { position: absolute; inset: 0; pointer-events: none; }
.ly-mat { z-index: -2; }
.ly-mat[data-material=mutiara] { background: linear-gradient(135deg, var(--ly-mutiara-a), var(--ly-mutiara-b), var(--ly-mutiara-c), var(--ly-mutiara-d)); }
.ly-mat[data-material=perak] { background: linear-gradient(135deg, var(--ly-perak-a), var(--ly-perak-b), var(--ly-perak-c), var(--ly-perak-d)); }
.ly-mat[data-material=emas] { background: linear-gradient(135deg, var(--ly-emas-a), var(--ly-emas-b), var(--ly-emas-c), var(--ly-emas-d)); }
.ly-mat[data-material=hitam] { background: linear-gradient(135deg, var(--ly-hitam-a), var(--ly-hitam-b), var(--ly-hitam-c)); }
.ly-card.swap .ly-mat2 { animation: ly-fade 600ms var(--ease-out) both; }
@keyframes ly-fade { from { opacity: 0; } }
.ly-pat { z-index: -1; background: repeating-linear-gradient(90deg, var(--ly-sheen) 0 1px, transparent 1px 4px); }
.ly-top, .ly-mid, .ly-bot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-width: 0; }
.ly-brand { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ly-logo { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--ly-logo); color: var(--ly-logo-ink); font: 800 10px/1 var(--font-body); }
.ly-bn { overflow: hidden; font: 700 12px/1.2 var(--font-body); white-space: nowrap; text-overflow: ellipsis; }
.ly-lv { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 700 11px/1 var(--font-body); }
.ly-lv.pop { animation: ly-pop 420ms var(--ease-out); }
@keyframes ly-pop { 40% { transform: scale(1.14); } }
.ly-emb { width: 7px; height: 7px; border-radius: 1px; background: var(--ly-ink); transform: rotate(45deg); }
.ly-lk { display: none; width: 12px; height: 12px; }
.ly-card.locked .ly-lk { display: block; } .ly-card.locked .ly-emb { display: none; }
.ly-card.locked .ly-holes { opacity: 0.4; }
/* Hallmark 2b (finish review 27 Okt): tag Diamond berwarna foil padat, bukan teks bergradasi */
.ly-card[data-material=hitam] .ly-lv span { color: var(--ly-foil-b); }
.ly-card[data-material=hitam] .ly-emb { background: var(--ly-foil-a); }
.ly-mid { align-items: center; }
.ly-cnt { display: grid; gap: 3px; flex: none; }
.ly-num { display: flex; align-items: baseline; }
.ly-num b { font: 600 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ly-card.sm .ly-num b { font-size: 24px; }
.ly-num > span { font: 700 14px/1 var(--font-display); color: var(--ly-muted); }
.ly-cnt small { font: 700 10px/1 var(--font-body); color: var(--ly-muted); }
.ly-holes { display: grid; grid-template-columns: repeat(var(--c, 5), minmax(0, 1fr)); gap: 5px; width: min(100%, 190px); }
.ly-hole { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklab, var(--ly-ink) 10%, transparent); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--color-black) 22%, transparent); color: var(--ly-glyph); }
.ly-hole svg { width: 62%; height: 62%; }
.ly-hole b { font: 800 9px/1 var(--font-body); color: var(--ly-ink); }
.ly-hole.goal { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ly-ink) 55%, transparent); }
.ly-hole.next { box-shadow: inset 0 0 0 2px var(--ly-ink); }
.ly-hole.on { background: var(--ly-ink); box-shadow: 0 1px 2px color-mix(in oklab, var(--color-black) 30%, transparent); }
.ly-card[data-material=hitam] .ly-hole.on { background: linear-gradient(100deg, var(--ly-foil-a), var(--ly-foil-b), var(--ly-foil-d)); }
.ly-hole.new { animation: ly-stamp 560ms var(--ease-out) both; }
@keyframes ly-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-12deg); } 60% { opacity: 1; transform: scale(0.92); } }
.ly-bot { font: 700 10.5px/1.2 var(--font-body); color: var(--ly-muted); }
.ly-bot > span:first-child { color: var(--ly-ink); }
.ly-rw { padding: 3px 7px; border-radius: var(--radius-pill); background: var(--ly-ink); color: var(--ly-glyph); }

/* ---------- Bagian bersama: panel pengaturan, layar tamu ---------- */
.r-ly-next p { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
.r-ly-next b { flex: none; font-weight: var(--weight-ui); font-variant-numeric: tabular-nums; }
.r-ly-bar { display: block; height: 6px; margin-top: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.r-ly-bar em { display: block; height: 100%; border-radius: inherit; background: var(--viz-c0); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform var(--dur-long) var(--ease-out); }
.r-ly-earn { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-ly-exp { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: var(--text-xs); animation: ui-in 360ms var(--ease-out); }
.r-ly-exp b { font-size: var(--text-sm); }
@keyframes ui-in { from { opacity: 0; transform: translateY(6px); } }

/* kontrol */

/* ---------- Kepala halaman ---------- */
.r-ly-hero { width: min(420px, 100%); margin: 0 auto; }
.r-ly-hero .r-ui-scr { background: var(--viz-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 30px 60px -40px color-mix(in oklab, var(--color-ink) 45%, transparent); }
.r-ly-heroh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
.r-ly-heroh span { font-size: var(--text-xs); color: var(--color-muted); }
.r-ly-hero .ly-card { max-width: none; }

/* angka kartu memakai angka tabel (Hallmark F6) */
.ly-num b { font-variant-numeric: tabular-nums; }
/* ---------- Bab ringkas #115 ---------- */
.r-lym-ph { width: min(100%, 360px); }
.r-lym-ph .ly-card { max-width: none; }
.r-lym-one { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-md); align-items: center; width: 100%; }
.r-lym-where { display: grid; gap: var(--space-xs); }
.r-lym-where li { padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-lym-where li.on { background: var(--color-ink); color: var(--color-paper); }
.r-lym-auto, .r-lym-rd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); align-items: center; width: 100%; }
.r-lym-tk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: 12px; background: var(--color-accent-soft); font-size: var(--text-sm); }
.r-lym-tk em { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-ui); white-space: nowrap; }
.r-lym-lv { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-md); align-items: center; width: 100%; }
.r-lym-12 { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-lym-12 b { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.r-lym-ladder { display: grid; gap: var(--space-xs); }
.r-lym-ladder li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3xs) var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.r-lym-ladder li span { justify-self: end; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.r-lym-ladder li small { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-ink-2); }
.r-lym-ladder li.past { background: var(--color-paper-3); }
.r-lym-ladder li.on { background: var(--color-accent-soft); box-shadow: inset 0 0 0 2px var(--color-ink); }
.r-lym-code .r-mph-card { justify-items: center; text-align: center; }
.r-lym-cl { font-size: var(--text-xs); color: var(--color-muted); }
.r-lym-cv { font: 700 var(--text-2xl)/1 var(--font-display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.r-lym-cd { font-size: var(--text-xs); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.r-lym-in { min-height: 44px; padding: var(--space-xs) var(--space-sm); border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--color-rule-2); font: 700 var(--text-lg)/1.6 var(--font-display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.r-lym-ok { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border-radius: 12px; background: var(--color-success-soft); color: var(--color-success-ink); font-size: var(--text-sm); }
.r-lym-ok small { font-size: var(--text-xs); }
.r-lym-ok.done { background: var(--color-paper-2); color: var(--color-ink); }
.r-lym-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.r-lym-kpi div { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); }
.r-lym-kpi dt { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-lym-kpi dd { margin: 0; font: 700 var(--text-xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.r-lym-pos { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; align-items: end; height: 132px; }
.r-lym-pos li { display: grid; grid-template-rows: 1fr auto; gap: var(--space-2xs); height: 100%; text-align: center; }
.r-lym-pos li i { align-self: end; height: 100%; border-radius: 4px 4px 0 0; background: var(--color-paper-3); transform-origin: bottom; transform: scaleY(var(--h, 0)); }
.r-lym-pos li.near i { background: var(--color-ink); }
.r-lym-pos li small { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.r-lym-pos li.goal small { color: var(--color-ink); font-weight: var(--weight-ui); text-decoration: underline; text-underline-offset: 3px; }
.js .r-lym-pos li i { transition: transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--k) * 40ms); }
@media (max-width: 40rem) { .r-lym-one, .r-lym-auto, .r-lym-rd, .r-lym-lv { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .ly-card, .ly-card * { animation: none !important; transition: none !important; }
}

/* ---------- Peta ekosistem 3D (#111; eco.mjs + p-eco.js) ----------
   Lima tahap cerita kiri ke kanan di atas bidang miring berperspektif: ubin produk timbul (wajah + sisi tebal), Profil tamu
   di tengah lebih tinggi dan berdenyut, titik data mengalir di jalur cerita, lengkung "datang lagi" di atas. Gerak hanya
   transform, opacity, dan garis jalur (stroke); tanpa skrip semua tampil diam. HP: daftar tahap tegak tanpa bidang 3D. */
:root {
  --eco-face: var(--color-white); --eco-side: color-mix(in oklab, var(--color-ink) 16%, var(--color-paper)); --eco-line: var(--color-rule-2);
  --eco-hot: var(--color-accent); --eco-hub: var(--color-accent-soft); --eco-hub-side: color-mix(in oklab, var(--color-accent) 55%, var(--color-ink));
  --eco-floor: color-mix(in oklab, var(--color-ink) 7%, transparent); --eco-dot: color-mix(in oklab, var(--color-ink) 45%, transparent);
  --eco-shadow: color-mix(in oklab, var(--color-ink) 28%, transparent);
}
.r-eco { display: grid; gap: var(--space-md); }
.r-eco-scene { position: relative; perspective: 1600px; perspective-origin: 50% 20%; }
.r-eco-map { position: relative; aspect-ratio: 1000 / 500; transform-style: preserve-3d; transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms var(--ease-out); }
.r-eco-floor { position: absolute; inset: 4% -2% -4%; border-radius: var(--radius-card); background-image: linear-gradient(var(--eco-floor) 1px, transparent 1px), linear-gradient(90deg, var(--eco-floor) 1px, transparent 1px); background-size: 40px 40px; transform: translateZ(-40px); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, var(--color-black) 45%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 50%, var(--color-black) 45%, transparent 78%); pointer-events: none; }
.r-eco-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r-eco-loopm { display: none; }

/* jalur */
.r-eco-e { fill: none; stroke: var(--eco-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; marker-end: url(#eco-ah); transition: stroke var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), stroke-width var(--dur-short) var(--ease-out); }
.r-eco-e.side { stroke-width: 1.6; stroke-dasharray: 5 6; opacity: 0.8; }
.r-eco-e.loop { stroke-width: 2.5; stroke-dasharray: 2 7; }
.r-eco-e.on, .r-eco-e.lit { stroke: var(--eco-hot); stroke-width: 3; marker-end: url(#eco-ah-on); }
.r-eco-ah { fill: var(--eco-line); }
.r-eco-ah.on { fill: var(--eco-hot); }
.r-eco-loopt { fill: var(--color-ink-2); font: var(--weight-ui) 13px var(--font-body); }
.r-eco-dot { fill: var(--eco-dot); }
.r-eco-dot.on { fill: var(--eco-hot); }
.r-eco.focus .r-eco-e:not(.lit) { opacity: 0.22; }
.r-eco.focus .r-eco-dot { opacity: 0.25; }

/* tahap */
.r-eco-st { position: absolute; top: 0; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-3xs); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: var(--text-xs); font-weight: var(--weight-ui); white-space: nowrap; cursor: pointer; transform: translate(-50%, -30%) translateZ(10px); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-eco-st b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-eco-st[aria-pressed=true] { background: var(--color-ink); color: var(--color-paper); }
.r-eco-st[aria-pressed=true] b { background: var(--eco-hot); box-shadow: none; }

/* ubin produk: wajah + sisi tebal + bayangan jatuh */
.r-eco-n { position: absolute; z-index: 1; display: grid; place-items: center; min-width: 136px; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--color-ink); font: var(--weight-ui) var(--text-sm)/1.15 var(--font-body); cursor: pointer; transform: translate(-50%, -50%) translateZ(30px); transform-style: preserve-3d; transition: transform 600ms var(--ease-out), opacity 500ms var(--ease-out); transition-delay: calc(var(--s, 0) * 1ms); }
.r-eco-face { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; min-height: 48px; padding: 0 var(--space-md); border-radius: 16px; background: linear-gradient(180deg, var(--eco-face), color-mix(in oklab, var(--eco-face) 92%, var(--color-ink))); box-shadow: 0 6px 0 var(--eco-side), 0 22px 28px -16px var(--eco-shadow), inset 0 0 0 1px var(--color-rule); white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.r-eco-face em { padding: 1px var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: 0.7rem; font-style: normal; }
.r-eco-n:hover .r-eco-face { transform: translateY(-3px); box-shadow: 0 9px 0 var(--eco-side), 0 28px 30px -16px var(--eco-shadow), inset 0 0 0 1px var(--color-rule-2); }
.r-eco-n:active .r-eco-face { transform: translateY(3px); box-shadow: 0 3px 0 var(--eco-side), 0 14px 20px -14px var(--eco-shadow), inset 0 0 0 1px var(--color-rule-2); }
.r-eco-n[aria-pressed=true] .r-eco-face { background: linear-gradient(180deg, color-mix(in oklab, var(--color-ink) 88%, var(--color-white)), var(--color-ink)); color: var(--color-paper); box-shadow: 0 6px 0 var(--color-black), 0 24px 30px -16px var(--eco-shadow); }
.r-eco-n[aria-pressed=true] .r-eco-face em { background: color-mix(in oklab, var(--color-white) 18%, transparent); color: var(--color-paper); }
.r-eco-n:focus-visible { outline: none; }
.r-eco-n:focus-visible .r-eco-face, .r-eco-st:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.r-eco-n.hub { min-width: 176px; transform: translate(-50%, -50%) translateZ(60px); }
.r-eco-n.hub .r-eco-face { min-height: 62px; padding: 0 var(--space-lg); background: linear-gradient(180deg, var(--eco-hub), color-mix(in oklab, var(--eco-hub) 80%, var(--color-accent))); font-size: var(--text-md); font-weight: 700; box-shadow: 0 8px 0 var(--eco-hub-side), 0 30px 36px -18px var(--eco-shadow), inset 0 0 0 2px var(--eco-hot); }
/* halaman Profil tamu sendiri: pusat tetap berwarna aksen, teks tinta (putih di aksen muda tidak terbaca) */
.r-eco-n.hub[aria-pressed=true] .r-eco-face { color: var(--color-ink); box-shadow: 0 8px 0 var(--eco-hub-side), 0 0 0 3px var(--color-ink), 0 28px 34px -16px var(--eco-shadow); }
.r-eco-n.hub::before { content: ''; position: absolute; inset: -14px -18px; border-radius: 26px; box-shadow: 0 0 0 2px var(--eco-hot); opacity: 0; pointer-events: none; animation: eco-pulse 2.8s var(--ease-out) infinite; }
@keyframes eco-pulse { 0% { opacity: 0.55; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.12); } }
.r-eco-ai { position: absolute; top: -16px; right: -12px; width: 30px; height: 30px; fill: var(--eco-hot); filter: drop-shadow(0 4px 6px var(--eco-shadow)); transform-origin: 50% 50%; animation: r-eco-ai 2.6s var(--ease-in-out) infinite; }
.r-eco-ai .s2 { transform-origin: 80% 80%; animation: r-eco-ai2 2.6s var(--ease-in-out) infinite; }
@keyframes r-eco-ai { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.18) rotate(18deg); } }
@keyframes r-eco-ai2 { 0%, 100% { opacity: 0.45; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }
.r-eco-face { animation: eco-float 6s var(--ease-in-out) infinite; animation-delay: calc(var(--s, 1) * -1.3s); }
@keyframes eco-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.r-eco.focus .r-eco-n:not(.lit) { opacity: 0.4; }
/* simpul pusat tetap terbaca saat tahap lain menyala: semua panah menuju ke sini */
.r-eco.focus .r-eco-n.hub:not(.lit) { opacity: 0.8; }
.r-eco.focus .r-eco-n.lit .r-eco-face { box-shadow: 0 6px 0 var(--eco-side), 0 0 0 3px var(--eco-hot), 0 26px 30px -16px var(--eco-shadow); }

/* muncul: simpul naik per tahap, jalur cerita tergambar */
.js .r-eco.pre .r-eco-n { opacity: 0; transform: translate(-50%, -20%) translateZ(30px); }
.js .r-eco.pre .r-eco-n.hub { transform: translate(-50%, -20%) translateZ(60px); }
.js .r-eco.pre .r-eco-e { opacity: 0; }
.r-eco.drawing .r-eco-n { transition-delay: calc(var(--s, 1) * 160ms); }
.r-eco.drawing .r-eco-e.main { stroke-dasharray: var(--len) var(--len); animation: eco-draw 1.1s var(--ease-out) both; animation-delay: calc(300ms + var(--k) * 70ms); }
@keyframes eco-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* cerita dan panel */
.r-eco-story { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.r-eco-say { flex: 1 1 280px; font: var(--display-weight) var(--text-lg)/1.35 var(--font-display); letter-spacing: var(--tracking-display); }
.r-eco-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.r-eco-pt { display: grid; gap: var(--space-xs); align-content: start; }
.r-eco-t { font: var(--display-weight) var(--text-xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.r-eco-d { color: var(--color-ink-2); }
.r-eco-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.r-eco-io > div > p { margin-bottom: var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); }
.r-eco-io ul { display: grid; gap: var(--space-xs); }
.r-eco-io li { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); }
.r-eco-io li b { font-weight: var(--weight-ui); }
.r-eco-io li span { color: var(--color-ink-2); }

@media (max-width: 60rem) {
  .r-eco-n { min-width: 112px; font-size: var(--text-xs); }
  .r-eco-face { min-height: 42px; padding: 0 var(--space-sm); }
  .r-eco-n.hub { min-width: 140px; } .r-eco-n.hub .r-eco-face { min-height: 52px; font-size: var(--text-sm); }
  .r-eco-panel, .r-eco-io { grid-template-columns: minmax(0, 1fr); }
}
/* HP: tahap tegak, tanpa bidang 3D dan tanpa garis (ubin tetap timbul) */
@media (max-width: 40rem) {
  .r-eco-scene { perspective: none; }
  .r-eco-map { display: flex; flex-wrap: wrap; gap: var(--space-xs); aspect-ratio: auto; transform: none; padding-left: var(--space-md); }
  .r-eco-map::before { content: ''; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; background: var(--eco-line); }
  .r-eco-floor, .r-eco-svg { display: none; }
  .r-eco-st { position: relative; top: auto; left: auto !important; flex-basis: 100%; justify-content: flex-start; margin-top: var(--space-sm); padding-left: 0; transform: none; order: calc(var(--s) * 10); }
  .r-eco-st b { margin-left: calc(-1 * var(--space-md) - 1px); }
  .r-eco-n, .r-eco-n.hub { position: relative; left: auto !important; top: auto !important; min-width: 0; transform: none; order: calc(var(--s) * 10 + 1); }
  .js .r-eco.pre .r-eco-n, .js .r-eco.pre .r-eco-n.hub { transform: translateY(10px); }
  .r-eco-n.hub::before { inset: -6px; }
  .r-eco-ai { top: -12px; right: -10px; width: 24px; height: 24px; }
  .r-eco-loopm { display: block; order: 99; flex-basis: 100%; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-2); }
}
@media (prefers-reduced-motion: reduce) {
  .r-eco-map, .r-eco-n, .r-eco-face, .r-eco-e { transition: none; }
  .r-eco-face, .r-eco-n.hub::before, .r-eco-ai, .r-eco-ai .s2 { animation: none; }
  .r-eco-n.hub::before { opacity: 0; }
}

/* ---------- Halaman Custom Form (#109, #115 ringkas; p-form.mjs + p-form.js) ----------
   Kepala tiga momen, momen Waitlist/Reservasi, builder + pratinjau HP, rantai jawaban ke CRM, tamu balik, ulasan,
   persetujuan bertanda tangan, kartu Segera. Warna lewat token; gerak transform dan opacity; tanpa skrip semua tampil. */
:root { --cf-mark: var(--viz-c0); --cf-mark-soft: color-mix(in oklab, var(--viz-c0) 16%, transparent); --cf-star: var(--viz-c0); }

/* bersama */
.r-cf-chips, .r-cf-scale, .r-cf-date { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.r-cf-chips i, .r-cf-scale i, .r-cf-date i { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); font-style: normal; }
.r-cf-scale i { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; }
.r-cf-date i { min-width: 52px; border-radius: var(--radius-small); text-align: center; }
.r-cf-date i.ph { color: var(--color-muted); }
.r-cf-chips i.on, .r-cf-scale i.on { background: var(--color-ink); color: var(--color-paper); }
.r-cf-q { display: grid; gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--radius-small); box-shadow: inset 0 0 0 1px var(--color-rule); font-size: var(--text-sm); }
.r-cf-q > p:first-child { font-weight: var(--weight-ui); }
.r-cf-q small { font-size: var(--text-xs); font-weight: var(--weight-body); color: var(--color-muted); }
.r-cf-q.pick { cursor: pointer; transition: box-shadow var(--dur-short) var(--ease-out); }
.r-cf-q.pick:hover { box-shadow: inset 0 0 0 2px var(--cf-mark); }
.r-cf-q.pick:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.r-cf-hello { font: var(--display-weight) var(--text-lg)/1.25 var(--font-display); letter-spacing: var(--tracking-display); }
.r-cf-f { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); box-shadow: inset 0 0 0 1px var(--color-rule); font-size: var(--text-sm); }
.r-cf-f > span { font-size: var(--text-xs); color: var(--color-muted); }
.r-cf-phone { align-content: start; min-height: 320px; background: var(--viz-card); }
.r-cf-stars { display: flex; gap: var(--space-2xs); }
.r-cf-stars i, .r-cf-starsel button { width: 22px; height: 22px; background: var(--color-rule-2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.r-cf-stars i.on, .r-cf-starsel button.on { background: var(--cf-star); }
.r-cf-ends { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-muted); }
[data-ch^=cf] .land, [data-ch^=cf].land { animation: ui-in 420ms var(--ease-out); }

/* kepala */
.r-cf-hero { display: grid; gap: var(--space-md); width: min(720px, 100%); margin: 0 auto; }
.r-cf-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.r-cf-strip li { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-cf-strip b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--viz-card); color: var(--color-ink); font-size: var(--text-xs); }
.r-cf-strip li.on { background: var(--color-ink); color: var(--color-paper); }
.r-cf-hgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.r-cf-hphone { min-height: 0; background: var(--viz-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 30px 60px -40px color-mix(in oklab, var(--color-ink) 45%, transparent); }
.r-cf-hphone .r-cf-q { animation: cf-swap 420ms var(--ease-out); }
@keyframes cf-swap { from { opacity: 0.4; transform: translateY(6px); } }
.r-cf-hpf { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-small); background: var(--viz-card); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-cf-hpfh { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
.r-cf-hpfh span { font-size: var(--text-xs); color: var(--color-muted); }
.r-cf-hpf dl { display: grid; gap: var(--space-2xs); }
.r-cf-hpf dl div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-small); background: var(--color-paper-2); font-size: var(--text-sm); transition: opacity var(--dur-long) var(--ease-out); }
.r-cf-hpf dt { color: var(--color-ink-2); }
.r-cf-hpf dd { margin: 0; font-weight: var(--weight-ui); }
.js .r-cf-hero.in .r-cf-hpf dl div:not(.in) { opacity: 0.3; }

/* #115 kartu ringkas */
.r-cfm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.r-cfm-ph { width: min(100%, 360px); }
.r-cfm-f { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--color-rule); font-size: var(--text-sm); }
.r-cfm-f span { font-size: var(--text-xs); color: var(--color-muted); }
.r-cf-date i.on { background: var(--color-ink); color: var(--color-paper); }
.r-cfm-ok { justify-items: start; background: var(--color-ink); color: var(--color-paper); }
.r-cfm-ok span { font-size: var(--text-sm); color: var(--color-on-night-2); }
.r-cfm-chain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); align-items: center; width: 100%; }
.r-cfm-dl { display: grid; gap: var(--space-2xs); }
.r-cfm-dl div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out); }
.r-cfm-dl dt { color: var(--color-ink-2); }
.r-cfm-dl dd { margin: 0; font-weight: var(--weight-ui); }
.js .r-cfm-dl div:not(.on) dd { color: var(--color-muted); }
.r-cfm-dl div.on { background: var(--color-accent-soft); }
.r-cfm-sent { font-size: var(--text-sm); }
.r-cfm-sent em { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); font-style: normal; font-weight: var(--weight-ui); }
.r-cfm-n { display: flex; align-items: baseline; gap: var(--space-xs); }
.r-cfm-n b { font: 700 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.r-cfm-n span, .r-cfm-auto { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-cfm-auto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.r-cfm-hint { font-size: var(--text-sm); }
.r-cfm-ret { display: grid; gap: var(--space-2xs); }
.r-cfm-ret li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-white); font-size: var(--text-sm); }
.r-cfm-ret li span { display: grid; gap: var(--space-3xs); min-width: 0; }
.r-cfm-ret li small { font-size: var(--text-xs); color: var(--color-muted); }
.r-cfm-ret li em { padding: 3px var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-ui); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-cfm-ret li.done[data-st=skip] em { background: var(--color-success-soft); color: var(--color-success-ink); }
.r-cfm-ret li.done[data-st=ask] em { background: var(--color-ink); color: var(--color-paper); }
.r-cfm-doc { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.r-cfm-doc span { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-cfm-sign { display: grid; gap: var(--space-2xs); margin: 0; padding: var(--space-xs); border-radius: 10px; background: var(--color-paper-2); }
.r-cfm-sign svg { width: 100%; height: 64px; }
.r-cfm-sign path { fill: none; stroke: var(--color-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .r-cfm-sign path:not(.on) { stroke-dashoffset: 1; }
.js .r-cfm-sign path { transition: stroke-dashoffset 1.6s var(--ease-in-out); }
.r-cfm-sign figcaption { font-size: var(--text-xs); color: var(--color-muted); }
/* 5. segera */
.r-cf-soon { display: grid; gap: var(--space-2xs); width: 100%; }
.r-cf-soon li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); }
.r-cf-soon p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.r-cf-soon b { font-weight: var(--weight-ui); }
.r-cf-soon span { font-size: var(--text-xs); color: var(--color-ink-2); }
@media (max-width: 40rem) { .r-cfm-chain, .r-cf-hgrid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .r-cfm-sign path { transition: none; } }

/* ---------- Halaman Grup & multi-brand (/untuk/grup, founder 27 Okt #138-#140): tema gelap premium ala Apple iPhone Pro ----------
   Satu halaman gelap atas permintaan founder (rujukan apple.com/iphone-18-pro): judul besar, produk menyala di panggung gelap,
   kartu app tetap terang seperti layar. Teks di atas gelap memakai --color-on-night (kontras >= 4.5:1). Warna brand contoh = token. */
:root { --gr-c1: oklch(50% 0.09 55); --gr-c2: oklch(54% 0.16 28); --gr-c3: oklch(50% 0.08 190); }
[data-c="gr1"] { --c: var(--gr-c1); }
[data-c="gr2"] { --c: var(--gr-c2); }
[data-c="gr3"] { --c: var(--gr-c3); }

.r-page.r-pro { background: var(--color-night); color: var(--color-on-night); }
.r-pro .r-h1, .r-pro .r-h2, .r-pro .r-crumbs a, .r-pro .r-crumbs [aria-current], .r-pro .r-tlink, .r-pro .r-rel p, .r-pro .r-faq summary { color: var(--color-on-night); }
.r-pro .r-sub, .r-pro .r-lead, .r-pro .r-note, .r-pro .r-crumbs, .r-pro .r-checks li > span, .r-pro .r-faq p, .r-pro .r-end-note { color: var(--color-on-night-2); }
.r-pro .r-btn-line { color: var(--color-on-night); border-color: var(--color-night-rule); }
.r-pro .r-btn-line:hover { border-color: var(--color-on-night-2); }
#wksite .r-pro :focus-visible { outline-color: var(--color-focus-night); }
#wksite .r-pro .r-ich :focus-visible { outline-color: var(--color-focus); }
.r-pro .r-faq details, .r-pro .r-faq details:first-child { border-color: var(--color-night-rule); }
.r-pro .r-faq summary i::before, .r-pro .r-faq summary i::after { background: var(--color-on-night-2); }
.r-pro .r-end-b { background: var(--color-night-2); box-shadow: inset 0 0 0 1px var(--color-night-rule); }
/* kartu app terang di panggung gelap: warna teks kembali ke tinta (tidak mewarisi teks terang halaman) */
.r-pro .r-ich { color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-rule), 0 48px 120px -48px color-mix(in oklab, var(--color-on-night) 22%, transparent); }

/* Kepala: judul besar di panggung gelap, cahaya lembut dari atas (netral, satu warna) */
.r-pro .r-phero { position: relative; isolation: isolate; padding-bottom: clamp(var(--space-2xl), 7vw, var(--space-4xl)); }
.r-pro .r-phero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 55% at 50% 30%, color-mix(in oklab, var(--color-on-night) 9%, transparent), transparent 72%); }
/* heroSplit (Hallmark 44d, 27 Okt): cahaya latar pindah ke pembungkus hero + panggung, jarak bawah pindah ke bagian panggung; rupa sama */
.r-pro .r-hero-wrap { position: relative; isolation: isolate; }
.r-pro .r-hero-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 55% at 50% 30%, color-mix(in oklab, var(--color-on-night) 9%, transparent), transparent 72%); }
.r-pro .r-phero-split { padding-bottom: 0; }
.r-pro .r-phero-split::before { content: none; }
.r-pro .r-hero-more { display: flow-root; padding-bottom: clamp(var(--space-2xl), 7vw, var(--space-4xl)); }
/* di dalam hero (kolom flex) panggung adalah konteks format sendiri; di luar hero dibuat sama supaya margin diagram tidak menyatu */
.r-pro .r-hero-more .r-pstage { display: flow-root; }
/* hero kini di dalam pembungkus, jadi bagian sesudahnya terbaca :first-of-type dan kehilangan garis atas (pages.css); garis dikembalikan */
.r-page .r-hero-wrap + .r-ps:first-of-type { border-top: 1px solid var(--color-rule); }
.r-pro .r-phero .r-h1 { max-width: min(12ch, 100%); font-size: clamp(3rem, min(7.4vw, 11vh), 6.75rem); line-height: 0.98; letter-spacing: -0.05em; }
.r-pro .r-phero .r-sub { max-width: 32ch; }

/* Ekosistem tiga lapis: Organization (inti terang), Brand, Cabang, dengan produk Welkam di tiap lapis */
.r-grh { position: relative; display: grid; gap: var(--space-xl); width: min(1040px, 100%); margin: clamp(var(--space-xl), 5vw, var(--space-3xl)) auto 0; text-align: center; }
.r-grh-tier { position: relative; display: grid; justify-items: center; gap: var(--space-md); }
.r-grh-tier + .r-grh-tier::before { content: ""; position: absolute; left: 50%; top: calc(var(--space-xl) * -1); width: 1px; height: var(--space-xl); background: var(--color-night-rule); }
.r-grh-lv { font-size: var(--text-sm); color: var(--color-on-night-2); }
.r-grh-core { display: grid; gap: var(--space-3xs); padding: var(--space-lg) var(--space-2xl); border-radius: 20px; background: var(--color-on-night); color: var(--color-night); box-shadow: 0 0 0 1px var(--color-night-rule), 0 32px 96px -24px color-mix(in oklab, var(--color-accent) 45%, transparent); }
.r-grh-core b { font: var(--display-weight) clamp(1.75rem, 3vw, 2.5rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.r-grh-core small { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-grh-brands, .r-grh-outs, .r-grh-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.r-grh-brands { gap: var(--space-sm); }
.r-grh-brands li { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm); border-radius: var(--radius-card); background: var(--color-night-2); box-shadow: inset 0 0 0 1px var(--color-night-rule); }
.r-grh-brands i, .r-grb-top i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c); color: var(--color-white); font: var(--display-weight) var(--text-md)/1 var(--font-display); font-style: normal; }
.r-grh-brands b { font: var(--display-weight) var(--text-lg)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-on-night); }
.r-grh-outs { max-width: 760px; }
.r-grh-outs li { padding: 6px var(--space-sm); border-radius: var(--radius-small); font-size: var(--text-sm); color: var(--color-on-night-2); box-shadow: inset 0 0 0 1px var(--color-night-rule); }
.r-grh-apps li { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 6px 14px 6px 6px; border-radius: var(--radius-card); background: var(--color-night-2); font-size: var(--text-sm); font-weight: var(--weight-ui); color: var(--color-on-night); }
.r-grh-apps i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--color-night-3); color: var(--color-on-night); }
.r-grh-apps svg { width: 18px; height: 18px; }
.r-grh-cap { font-size: var(--text-xs); color: var(--color-on-night-2); }
@media (prefers-reduced-motion: no-preference) {
  .r-grh-tier { animation: r-grh-in 760ms var(--ease-out) both; }
  .r-grh-tier[data-t="brand"] { animation-delay: 160ms; }
  .r-grh-tier[data-t="outlet"] { animation-delay: 320ms; }
  @keyframes r-grh-in { from { opacity: 0; transform: translateY(18px); } }
}

/* Pelanggan, Semua brand */
.r-grg-hint { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.r-grg { width: 100%; margin-top: var(--space-sm); border-collapse: collapse; font-size: var(--text-sm); }
.r-grg th, .r-grg td { padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; border-top: 1px solid var(--color-rule); text-align: left; vertical-align: top; }
.r-grg thead th { border-top: 0; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-muted); }
.r-grg tbody th { font-weight: var(--weight-ui); color: var(--color-ink); }
.r-grg td:last-child, .r-grg thead th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.r-grg-bs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.r-grg-bs em { padding: 1px var(--space-xs); border-radius: var(--radius-small); background: var(--color-paper-2); font-size: var(--text-xs); font-style: normal; color: var(--color-ink-2); }

/* Tiap brand punya wajahnya: tiga HP berwarna brand, seperti deretan warna produk */
.r-grb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.r-grb-ph { display: grid; gap: var(--space-sm); padding: var(--space-sm); }
.r-grb-top { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.r-grb-top i { width: 28px; height: 28px; border-radius: 8px; font-size: var(--text-sm); }
.r-grb-top b { min-width: 0; font-size: var(--text-sm); line-height: 1.2; overflow-wrap: break-word; }
.r-grb-tk { display: grid; justify-items: center; gap: var(--space-3xs); padding: var(--space-md) var(--space-xs); border-radius: 12px; background: var(--c); color: var(--color-white); }
.r-grb-tk small { font-size: var(--text-xs); opacity: 0.9; }
.r-grb-tk b { font: var(--display-weight) clamp(1.5rem, 2.6vw, 2.25rem)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.r-grb-row { display: flex; justify-content: space-between; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.r-grb-row b { font-variant-numeric: tabular-nums; color: var(--color-ink); }

/* RBAC: Tim & Peran */
.r-grr { display: grid; gap: 0; margin-top: var(--space-xs); }
.r-grr li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.r-grr li span { color: var(--color-muted); text-align: right; }
.r-grr li.mine b { color: var(--color-ink); }
.r-grr li.mine span { color: var(--color-ink-2); }
.r-grr-perm { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-small); background: var(--color-paper-2); }
.r-grr-perm li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-2); }
.r-grr-perm b { flex: none; font-weight: var(--weight-ui); }
.r-grr-perm b.on { color: var(--color-success-ink); }
.r-grr-perm b.off { color: var(--color-muted); }

@media (max-width: 600px) {
  .r-grh { gap: var(--space-lg); }
  .r-grh-tier + .r-grh-tier::before { top: calc(var(--space-lg) * -1); height: var(--space-lg); }
  .r-grh-core { padding: var(--space-md) var(--space-xl); }
  .r-grh-brands li { padding-right: var(--space-md); }
  .r-grb { gap: var(--space-xs); }
  .r-grb-ph { padding: var(--space-xs); }
}

/* ---------- Halaman Insights (#105, #110; p-insights.mjs + p-insights.js) ----------
   Tiga level (Organization, Brand, Outlet): kepala tiga kartu, lalu lima kartu ringkas #115 (sudut pandang, Pecah per Brand,
   cabang yang perlu dicek, staf per jam, laporan + Excel). Batang = satu warna urut; naik/turun memakai warna status
   dengan panah dan teks (bukan warna saja). Gerak transform dan opacity; tanpa skrip semua tampil. */
:root { --in-bar: var(--viz-c0); --in-bar-2: var(--viz-c1); --in-up: var(--color-success-ink); --in-dn: var(--color-error-ink); --in-tg: oklch(96% 0.02 235); --in-tg-ink: oklch(32% 0.06 245); }

/* kepala */
.r-in-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); width: min(980px, 100%); margin: 0 auto; }
.r-in-hc { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-md); border-radius: var(--radius-card); background: var(--viz-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 24px 48px -36px color-mix(in oklab, var(--color-ink) 45%, transparent); transition: box-shadow var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.r-in-hc.on { box-shadow: inset 0 0 0 2px var(--color-ink), 0 24px 48px -30px color-mix(in oklab, var(--color-ink) 50%, transparent); transform: translateY(-4px); }
.r-in-hk { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.r-in-hk b { font: var(--display-weight) var(--text-lg)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.r-in-hk span, .r-in-ht { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-in-hb { display: grid; gap: var(--space-2xs); }
.r-in-hb li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); }
.r-in-hb i { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--in-bar); transform: scaleX(var(--w)); transform-origin: left; }
.r-in-hb b { font-variant-numeric: tabular-nums; }
.r-in-hl { display: grid; gap: var(--space-3xs); }
.r-in-hl li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: var(--space-xs); padding: var(--space-3xs) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-xs); }
.r-in-hl b { font-variant-numeric: tabular-nums; }
.r-in-hl em, .r-in-lb em { font-style: normal; font-weight: var(--weight-ui); text-align: right; font-variant-numeric: tabular-nums; }
[data-ch^=in] .up { color: var(--in-up); } [data-ch^=in] .dn { color: var(--in-dn); }
.r-in-tg { display: grid; gap: var(--space-3xs); padding: var(--space-sm); border-radius: 4px 14px 14px 14px; background: var(--in-tg); color: var(--in-tg-ink); font-size: var(--text-xs); line-height: 1.45; }
.r-in-tg.big { font-size: var(--text-sm); }


@media (max-width: 60rem) { .r-in-hero { grid-template-columns: minmax(0, 1fr); width: min(460px, 100%); } }
/* ---------- #115 kartu ringkas ---------- */
.r-inm-tree { gap: var(--space-sm); }
.r-inm-node { display: grid; gap: 1px; padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.r-inm-node small { font-size: var(--text-xs); color: var(--color-muted); }
.r-inm-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.r-inm-br { display: grid; gap: var(--space-2xs); align-content: start; }
.r-inm-outs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.r-inm-node.outlet { display: inline-block; padding: 3px var(--space-xs); font-size: var(--text-xs); }
.r-inm-tree[data-in-at=org] .r-inm-node.org,
.r-inm-tree[data-in-at=brand] .r-inm-br.focus .r-inm-node.brand,
.r-inm-tree[data-in-at=outlet] .r-inm-node.outlet.focus { background: var(--color-ink); color: var(--color-paper); }
.r-inm-tree[data-in-at=org] .r-inm-node.org small, .r-inm-tree[data-in-at=brand] .r-inm-br.focus .r-inm-node.brand small { color: var(--color-on-night-2); }
.r-inm-tree[data-in-at=brand] .r-inm-br:not(.focus), .r-inm-tree[data-in-at=outlet] .r-inm-br:not(.focus) { opacity: 0.45; }
.r-inm-tree[data-in-at=brand] .r-inm-node.org, .r-inm-tree[data-in-at=outlet] .r-inm-node.org, .r-inm-tree[data-in-at=outlet] .r-inm-node.brand { opacity: 0.45; }
.r-inm-tree[data-in-at=org] .r-inm-node.brand { background: var(--color-accent-soft); }
.r-inm-goal { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-accent-soft); font-size: var(--text-sm); }
.r-inm-metric { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); }
.r-inm-metric small { font-size: var(--text-xs); color: var(--color-muted); }
.r-inm-bars { display: grid; gap: var(--space-sm); }
.r-inm-bars li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 56px; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.r-inm-bars i { display: block; height: 14px; border-radius: 7px; background: var(--in-bar); transform-origin: left center; transform: scaleX(var(--w, 0)); transition: transform var(--dur-long) var(--ease-out); }
.r-inm-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.r-inm-rank { display: grid; gap: var(--space-2xs); }
.r-inm-rank li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); transition: opacity var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.r-inm-rank li span { color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.r-inm-rank li em { font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-ui); white-space: nowrap; }
.r-inm-rank li.dim { opacity: 0.5; }
.r-inm-rank li.on { box-shadow: inset 0 0 0 2px var(--color-ink); background: var(--color-white); }
.r-inm-detail { display: grid; gap: var(--space-2xs); padding: var(--space-sm); border-radius: 12px; background: var(--color-error-soft); font-size: var(--text-sm); }
.r-inm-detail dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.r-inm-detail dt { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-inm-detail dd { margin: 0; font-weight: var(--weight-ui); color: var(--color-error-ink); font-variant-numeric: tabular-nums; }
.r-inm-hours { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xs); align-items: end; height: 140px; }
.r-inm-hours li { display: grid; grid-template-rows: 1fr auto; gap: var(--space-2xs); height: 100%; text-align: center; }
.r-inm-hours li i { align-self: end; height: 100%; border-radius: 4px 4px 0 0; background: var(--color-paper-3); transform-origin: bottom; transform: scaleY(var(--h, 0)); transition: background-color var(--dur-short) var(--ease-out); }
.r-inm-hours li.over i { background: var(--color-error); }
.r-inm-hours li small { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.r-inm-staff { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.r-inm-step { display: inline-flex; align-items: center; gap: var(--space-xs); }
.r-inm-step b { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.r-inm-step button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; }
.r-inm-step button:hover { background: var(--color-paper-3); }
.r-inm-step button:active { transform: scale(0.96); }
.r-inm-step svg { width: 16px; height: 16px; }
.r-inm-rep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); align-items: center; width: 100%; }
.r-inm-tg .r-mph-card { gap: var(--space-3xs); border-radius: 4px 16px 16px 16px; background: var(--in-tg); color: var(--in-tg-ink); font-size: var(--text-sm); }
.r-inm-xls { display: grid; gap: var(--space-2xs); }
.r-inm-xls li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); transition: opacity var(--dur-short) var(--ease-out); }
.js .r-inm-xls li:not(.on) { opacity: 0.35; }
.r-inm-xls li i { padding: var(--space-3xs) 6px; border-radius: 6px; background: var(--color-success-soft); color: var(--color-success-ink); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-ui); }
@media (max-width: 40rem) { .r-inm-rep { grid-template-columns: minmax(0, 1fr); } .r-inm-brands { grid-template-columns: minmax(0, 1fr); } .r-inm-bars li { grid-template-columns: 84px minmax(0, 1fr) 48px; } }
@media (prefers-reduced-motion: reduce) { .r-in-hc, .r-inm-bars i, .r-inm-hours i { transition: none; } .r-in-hc.on { transform: none; } }

/* ---------- Halaman Meja & TV ringkas (#115; p-meja.mjs + p-meja.js) ----------
   Empat kartu: dudukkan, denah, gabung meja, Layar TV + Coba suara. Warna status meja mengikuti FlowUnitCard app: Kosong =
   sukses, Terisi = warna utama, Perlu dibersihkan = kuning. Warna lewat token; gerak transform dan opacity. */
.r-mjm-two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-sm); align-items: start; }
.r-mjm-wl { display: grid; gap: var(--space-2xs); }
.r-mjm-wl li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); }
.r-mjm-wl li span { font-size: var(--text-xs); color: var(--color-ink-2); }
.r-mjm-wl li.pick { background: var(--color-ink); color: var(--color-paper); }
.r-mjm-wl li.pick span { color: var(--color-on-night-2); }
.r-mjm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.r-mjm-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-mjm-t { display: grid; align-content: center; gap: var(--space-3xs); min-height: 58px; padding: var(--space-xs); border-radius: 10px; background: var(--color-success-soft); box-shadow: inset 0 0 0 1.5px var(--color-success); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.r-mjm-t small { overflow: hidden; font-size: var(--text-xs); color: var(--color-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.r-mjm-t[data-st=busy] { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.r-mjm-t[data-st=clean] { background: color-mix(in oklab, var(--color-gold) 18%, var(--color-white)); box-shadow: inset 0 0 0 1.5px var(--color-gold); }
.r-mjm-t.fit { box-shadow: inset 0 0 0 2.5px var(--color-ink); }
.r-mini .r-mjm-t.r-flash { animation: mj-pop 520ms var(--ease-out); }
@keyframes mj-pop { 40% { transform: scale(1.06); } }
.r-mjm-kpi { display: inline-flex; flex-wrap: wrap; gap: var(--space-sm); }
.r-mjm-kpi b { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.r-mjm-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-2); }
.r-mjm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.r-mjm-legend span::before { content: ''; width: 12px; height: 12px; border-radius: 4px; background: var(--color-success-soft); box-shadow: inset 0 0 0 1.5px var(--color-success); }
.r-mjm-legend .busy::before { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.r-mjm-legend .clean::before { background: color-mix(in oklab, var(--color-gold) 18%, var(--color-white)); box-shadow: inset 0 0 0 1.5px var(--color-gold); }

/* 3. gabung meja */
.r-mjm-grp { display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.r-mjm-grp span { color: var(--color-on-night-2); }
.r-mjm-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-xs); border-radius: 14px; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.r-mjm-pair .r-mjm-t { min-height: 84px; }
.r-mjm-pair.joined { background: var(--color-paper-2); box-shadow: inset 0 0 0 2px var(--color-accent); }

/* 4. Layar TV + Coba suara (tombol .r-tvplay ditambahkan mesin suara pages.js) */
.r-mjm-tv { display: grid; gap: var(--space-sm); justify-items: center; width: 100%; }
.r-mjm-scr { display: grid; gap: var(--space-sm); width: 100%; padding: var(--space-md) var(--space-lg); border-radius: 16px; background: var(--color-night); color: var(--color-on-night); box-shadow: 0 0 0 6px var(--color-night-2); }
.r-mjm-scrh { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-on-night-2); }
.r-mjm-scrh b { color: var(--color-on-night); }
.r-mjm-now { display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-sm) 0; text-align: center; }
.r-mjm-now small { font-size: var(--text-sm); color: var(--color-on-night-2); }
.r-mjm-now b { font: 700 clamp(56px, 7vw, 88px)/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.r-mjm-now span { font-size: var(--text-md); }
.r-mjm-next { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); font-size: var(--text-sm); }
.r-mjm-next small { color: var(--color-on-night-2); }
.r-mjm-next i { padding: var(--space-3xs) var(--space-xs); border-radius: 8px; background: var(--color-night-3); font-style: normal; font-variant-numeric: tabular-nums; }
.r-mjm-tv.r-tv-say .r-mjm-now b { animation: mj-say 900ms var(--ease-out); }
@keyframes mj-say { 30% { transform: scale(1.08); } }
.r-mjm-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); }
.r-mjm-langs i { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); font-style: normal; cursor: pointer; }
.r-mjm-langs i:hover { color: var(--color-ink); background: var(--color-paper-3); }
.r-mjm-langs i[aria-pressed=true] { background: var(--color-ink); color: var(--color-paper); }
#wksite .r-mjm-tv .r-tvplay { position: static; transform: none; }
#wksite .r-mjm-tv .r-tvplay:active { transform: scale(0.97); }

@media (max-width: 40rem) { .r-mjm-two { grid-template-columns: minmax(0, 1fr); } .r-mjm-grid.four { grid-template-columns: repeat(3, minmax(0, 1fr)); } .r-mjm-scr { padding: var(--space-sm) var(--space-md); } }
@media (prefers-reduced-motion: reduce) { .r-mjm-tv *, .r-mjm-pair { animation: none !important; transition: none !important; } }

/* ---------- Halaman Reservasi ringkas (#115; p-reservasi.mjs + p-reservasi.js) ----------
   Lima kartu: booking di HP, kuota per jam, hari-H, geser jadwal, profil + stempel. Kerangka HP dan papan dari ui.css
   (.r-mph, .r-mbd). Warna lewat token; gerak transform dan opacity; tanpa skrip semua tampil diam. */

/* 1. booking di HP */
.r-rsm-sum { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.r-rsm-sum span { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); }
.r-rsm-h { margin-top: 0; font-size: var(--text-xs); font-weight: var(--weight-ui); color: var(--color-ink-2); }
.r-rsm-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.r-rsm-times li { display: grid; gap: 1px; padding: 6px var(--space-2xs); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--color-rule-2); text-align: center; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.r-rsm-times li b { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.r-rsm-times li small { font-size: var(--text-xs); color: var(--color-muted); }
.r-rsm-times li.full { background: var(--color-paper-2); box-shadow: none; color: var(--color-muted); }
.r-rsm-times li.full b { text-decoration: line-through; }
.r-rsm-times li.on { background: var(--color-ink); box-shadow: none; color: var(--color-paper); }
.r-rsm-times li.on small { color: var(--color-on-night-2); }
.r-rsm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.r-rsm-chips span { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-rule-2); font-size: var(--text-xs); transition: background-color var(--dur-short) var(--ease-out); }
.r-rsm-chips span.on { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.r-rsm-ok { justify-items: start; background: var(--color-ink); color: var(--color-paper); }
.r-rsm-ok p { font-size: var(--text-xs); color: var(--color-on-night-2); }
.r-rsm-ok b { font: 700 var(--text-xl)/1.1 var(--font-display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.r-rsm-ok span { font-size: var(--text-sm); }
.r-rsm-ok em { margin-top: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-ui); }

/* 2. kuota per jam */
.r-rsm-cal { display: grid; gap: var(--space-xs); }
.r-rsm-cal li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 96px; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.r-rsm-cal li b { font-variant-numeric: tabular-nums; }
.r-rsm-cal li small { font-size: var(--text-xs); color: var(--color-ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.r-rsm-bar { position: relative; height: 12px; border-radius: 6px; background: var(--color-paper-2); overflow: hidden; }
.r-rsm-bar i { position: absolute; inset: 0; border-radius: 6px; background: var(--color-accent); transform-origin: left center; transform: scaleX(var(--f, 0)); transition: transform var(--dur-long) var(--ease-out); }
.r-rsm-cal li.full .r-rsm-bar i { background: var(--color-ink); }
.r-rsm-cal li.full small { color: var(--color-ink); font-weight: var(--weight-ui); }
.r-rsm-new { min-height: 2.9em; padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }

/* 3. hari-H */
.r-rsm-day { display: grid; gap: var(--space-xs); }
.r-rsm-day li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out); }
.r-rsm-day li > b { font-variant-numeric: tabular-nums; }
.r-rsm-day li span { display: grid; gap: var(--space-3xs); min-width: 0; }
.r-rsm-day li span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-rsm-day li span small { font-size: var(--text-xs); color: var(--color-muted); }
.r-rsm-day li em { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-ink-2); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-ui); white-space: nowrap; }
.r-rsm-day li[data-st=arrived] em { background: var(--color-success-soft); color: var(--color-success-ink); }
.r-rsm-day li[data-st=gone] em { background: var(--color-error-soft); color: var(--color-error-ink); }

/* 4. geser jadwal */
.r-rsm-when { display: grid; gap: var(--space-3xs); }
.r-rsm-when b { font-size: var(--text-md); }
.r-rsm-when span { font-size: var(--text-xs); color: var(--color-muted); }
.r-rsm-left { display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); }
.r-rsm-alt { display: grid; gap: var(--space-2xs); }
.r-rsm-alt li { padding: var(--space-xs) var(--space-sm); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--color-rule-2); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out); }
.r-rsm-alt li.on { background: var(--color-accent-soft); box-shadow: inset 0 0 0 2px var(--color-ink); }

/* 5. profil + stempel */
.r-rsm-pf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-md); width: 100%; align-items: start; }
.r-rsm-visits { display: grid; gap: var(--space-2xs); }
.r-rsm-visits li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); }
.r-rsm-visits li span { color: var(--color-ink-2); }
.r-rsm-visits li.new { background: var(--color-accent-soft); }
.r-rsm-stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.r-rsm-stamps li { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--color-rule-2); transition: background-color var(--dur-short) var(--ease-out); }
.r-rsm-stamps li.on { background: var(--color-accent); box-shadow: none; }

@media (max-width: 40rem) { .r-rsm-pf { grid-template-columns: minmax(0, 1fr); } .r-rsm-cal li { grid-template-columns: 44px minmax(0, 1fr) 84px; } }

/* ---------- WhatsApp CRM ringkas (#115; p-wa.mjs + p-wa.js) ----------
   Kartu target (kalimat + hitungan) dan pratinjau pesan resmi; gaya balon pesan dan kalimat target dari wa.css. */
.r-wtm-n { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-3xs) var(--space-xs); }
.r-wtm-n b { font: 700 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.r-wtm-n span { font-size: var(--text-sm); }
.r-wtm-n small { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-ink-2); }
.r-wtm-rek { width: 100%; }
.r-wtm-ph { width: min(100%, 380px); }
.r-mini .r-wtm-rek { display: grid; grid-auto-flow: row; grid-auto-columns: auto; width: 100%; border-radius: 16px; }
.r-mini .r-wtm-rek button { min-height: 40px; border-radius: 12px; text-align: left; }
.r-wtm-ph .r-wab-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-wtm-fun { display: grid; gap: var(--space-xs); }
.r-wtm-fun li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.r-wtm-fun i { display: block; height: 14px; border-radius: 7px; background: var(--color-paper-3); transform-origin: left center; transform: scaleX(var(--w, 0)); transition: transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--k) * 80ms); }
.r-wtm-fun li.hot i { background: var(--color-wa); }
.r-wtm-fun b { text-align: right; font-variant-numeric: tabular-nums; }
.r-mini.wait .r-wtm-fun i { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .r-wtm-fun i { transition: none; } }
/* kartu pesan setinggi bab Profil tamu: jarak antarparagraf dan bingkai sedikit lebih rapat */
.r-wtm-ph { padding: var(--space-sm); gap: 6px; }
.r-wtm-ph .r-wab-msg { gap: 6px; line-height: 1.45; }
.r-rcm { display: grid; gap: var(--space-md); width: 100%; }
.r-rcm-dl { display: grid; gap: var(--space-xs); }
.r-rcm-dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); font-size: var(--text-sm); }
.r-rcm-dl dt { font-weight: var(--weight-ui); }
.r-rcm-dl dd { margin: 0; color: var(--color-ink-2); }
.r-rcm-s { font-size: var(--text-sm); }
.r-rcm-ph { justify-self: center; }
.r-rcm-ph .r-wab-img img { width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 40rem) { .r-rcm-dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }
@media (min-width: 60rem) { .r-rcm { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } .r-rcm-dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }

/* ---------- Halaman Waitlist ringkas (#115; p-waitlist.mjs + p-waitlist.js) ----------
   Enam kartu: tiket di HP, papan per rombongan, QR Dinamis + lokasi, tidak hadir, ulasan, Hadiah Menunggu. Kerangka HP dan
   papan dari ui.css (.r-mph, .r-mbd). Warna lewat token; gerak transform dan opacity; tanpa skrip semua tampil diam. */

/* 1. tiket di HP tamu */
.r-wlm-tk { min-height: 300px; }
.r-wlm-tkc { justify-items: start; transition: background-color var(--dur-short) var(--ease-out); }
.r-wlm-tkl { font-size: var(--text-xs); color: var(--color-muted); }
.r-wlm-tkn { font: 700 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.r-wlm-tkm { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-wlm-pos { margin-top: var(--space-xs); font-size: var(--text-md); }
.r-wlm-pos b { font: 700 var(--text-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.r-wlm-dots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); width: 100%; }
.r-wlm-dots li { height: 6px; border-radius: 3px; background: var(--color-paper-3); transition: background-color var(--dur-short) var(--ease-out); }
.r-wlm-dots li.on { background: var(--color-accent); }
.r-wlm-tk[data-wl-state=called] .r-wlm-tkc { background: var(--color-accent-soft); }
.r-wlm-called { justify-items: start; background: var(--color-ink); color: var(--color-paper); }
.r-wlm-called b { font: 700 var(--text-xl)/1.1 var(--font-display); }
.r-wlm-called span { font-size: var(--text-sm); color: var(--color-on-night-2); }

/* 3. QR Dinamis + lokasi */
.r-wlm-gate { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--space-md); width: 100%; align-items: center; }
.r-wlm-qr { display: grid; gap: var(--space-xs); justify-items: center; margin: 0; padding: var(--space-md); border-radius: 18px; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-rule); }
.r-wlm-qr svg { width: 100%; max-width: 168px; aspect-ratio: 1; fill: var(--color-ink); }
.r-wlm-qr figcaption { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.r-wlm-ring { position: relative; flex: none; width: 16px; height: 16px; }
.r-wlm-ring i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--color-accent) calc(var(--p, 1) * 360deg), var(--color-paper-3) 0); -webkit-mask: radial-gradient(farthest-side, transparent 52%, var(--color-black) 54%); mask: radial-gradient(farthest-side, transparent 52%, var(--color-black) 54%); }
.r-wlm-map { display: grid; gap: var(--space-xs); }
.r-wlm-geo { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background-color: var(--color-paper-2); background-image: linear-gradient(var(--color-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-rule) 1px, transparent 1px); background-size: 28px 28px; }
.r-wlm-rad { position: absolute; left: 34%; top: 50%; width: 48%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: color-mix(in oklab, var(--color-accent) 16%, transparent); box-shadow: inset 0 0 0 2px var(--color-accent); }
.r-wlm-pin { position: absolute; left: 34%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--color-ink); box-shadow: 0 0 0 4px var(--color-white); }
.r-wlm-g { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--color-white); }
.r-wlm-g.near { left: 43%; top: 37%; background: var(--color-success); }
.r-wlm-g.far { left: 88%; top: 76%; background: var(--color-error); }
.r-wlm-geo span { position: absolute; left: var(--space-xs); bottom: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-white); font-size: var(--text-xs); color: var(--color-ink-2); }
.r-wlm-who { display: grid; gap: var(--space-2xs); }
.r-wlm-who li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-rule); font-size: var(--text-sm); }
.r-wlm-who li span { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-success-ink); }
.r-wlm-who li span svg { width: 14px; height: 14px; }
.r-wlm-who li.far span { color: var(--color-error-ink); }
.r-wlm-who li.far[data-rule=online] span { color: var(--color-ink-2); }
.r-wlm-who li.far[data-rule=tanda] span { color: var(--color-accent-ink); }

/* 4. tidak hadir */
.r-wlm-nsl { display: grid; gap: var(--space-xs); }
.r-wlm-nsl li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: 12px; background: var(--color-paper-2); font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out); }
.r-wlm-nsl li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-wlm-nsl li em { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-ink-2); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-wlm-nsl li[data-st=called] { background: var(--color-accent-soft); }
.r-wlm-nsl li[data-st=called] em { background: var(--color-ink); color: var(--color-paper); }
.r-wlm-nsl li[data-st=gone] { color: var(--color-ink-2); }
.r-wlm-nsl li[data-st=gone] em { background: var(--color-error-soft); color: var(--color-error-ink); }
.r-wlm-nsl li[data-st=cand] em { background: var(--color-accent-soft); color: var(--color-accent-ink); box-shadow: inset 0 0 0 1px var(--color-accent); }
.r-wlm-nsr { min-height: 2.9em; font-size: var(--text-sm); color: var(--color-ink-2); }

/* 5. ulasan */
.r-wlm-rv { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-md); width: 100%; align-items: center; }
.r-wlm-rvp { width: 100%; min-height: 236px; }
.r-wlm-rvq { font-weight: var(--weight-ui); }
.r-wlm-stars { display: flex; gap: var(--space-2xs); }
.r-wlm-stars svg { width: 28px; height: 28px; fill: var(--color-paper-3); transition: fill var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.r-wlm-stars svg.on { fill: var(--color-gold); transform: scale(1.06); }
.r-wlm-cmp { display: grid; gap: var(--space-2xs); padding: var(--space-sm); border-radius: 12px; background: var(--color-paper-2); font-size: var(--text-sm); }
.r-wlm-cmp p { font-size: var(--text-xs); color: var(--color-muted); }
.r-wlm-thx { font-size: var(--text-sm); color: var(--color-ink-2); }
.r-wlm-thx b { color: var(--color-ink); }
.r-wlm-inbox ol { display: grid; gap: var(--space-2xs); }
.r-wlm-inbox li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--color-paper-2); font-size: var(--text-sm); }
.r-wlm-inbox li span { font-size: var(--text-xs); color: var(--color-muted); }
.r-wlm-inbox li.bad span { color: var(--color-error-ink); }

/* 6. Hadiah Menunggu (baris = TicketHadiahTier: menit, nama + status, Pilih atau Terkunci) */
.r-wlm-hm { width: min(100%, 400px); }
.r-wlm-hmh { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.r-wlm-pill { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-wlm-tiers { display: grid; gap: var(--space-2xs); }
.r-wlm-tiers li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); min-height: 56px; padding: var(--space-xs) var(--space-sm); border-radius: 12px; background: var(--color-paper-2); transition: background-color var(--dur-short) var(--ease-out); }
.r-wlm-min { display: grid; justify-items: center; gap: var(--space-3xs); line-height: 1; }
.r-wlm-min b { font: 700 var(--text-md)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.r-wlm-min small { font-size: var(--text-xs); color: var(--color-muted); }
.r-wlm-tn { display: grid; gap: var(--space-3xs); min-width: 0; }
.r-wlm-tn b { font-size: var(--text-sm); }
.r-wlm-tn em { justify-self: start; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-ink-2); font-size: var(--text-xs); font-style: normal; }
.r-wlm-tn small { font-size: var(--text-xs); color: var(--color-muted); }
.r-wlm-tiers li[data-st=open], .r-wlm-tiers li[data-st=chosen] { background: var(--color-accent-soft); }
.r-wlm-tiers li[data-st=chosen] { box-shadow: inset 0 0 0 2px var(--color-ink); }
.r-wlm-tiers li[data-st=next] small { color: var(--color-ink-2); }
.r-wlm-tiers button { min-height: 32px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); font-weight: var(--weight-ui); cursor: pointer; }
.r-wlm-tiers button:hover { background: color-mix(in oklab, var(--color-ink) 84%, var(--color-white)); }
.r-wlm-tiers button[aria-pressed=true] { background: var(--color-white); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.r-wlm-lock { font-size: var(--text-xs); color: var(--color-muted); }
.r-wlm-next { min-height: 1.4em; font-size: var(--text-xs); color: var(--color-ink-2); }

@media (max-width: 40rem) { .r-wlm-gate, .r-wlm-rv { grid-template-columns: minmax(0, 1fr); } }
/* HP: baris hadiah lebih lega (kolom menit sempit, kunci jadi teks kecil di bawah tombol) */
@media (max-width: 40rem) {
  .r-wlm-hm .r-mph-card { padding: var(--space-sm); }
  .r-wlm-tiers li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-xs); padding: var(--space-xs); }
  .r-wlm-tn em { white-space: nowrap; }
}

/* Hallmark gate 4: kotak QR di dalam kartu bab tanpa isi dan cincin */
.r-ich .r-wlm-qr { padding: 0; background: transparent; box-shadow: none; }

/* Hallmark lantai (tools/hallmark-css.mjs): 278 warna literal jadi token (540 pemakaian), 358 jarak jadi token jarak, 21 keadaan tersembunyi digerbangi html.js. Nilai sama persis. */
:root { --lc-fd0f3f6: #FAF7F1; --lc-bf5c0e1: #F3EEE5; --lc-c659d63: #FFFFFF; --lc-144eefb: #17130E; --lc-de3acc2: #4B4339; --lc-e6af4de: #7B7266; --lc-dad0c40: rgba(23, 19, 14, 0.10); --lc-560abd1: rgba(23, 19, 14, 0.16); --lc-5ea75f0: #F5A91E; --lc-12e0fda: #E8960A; --lc-0a4b996: #4A2E06; --lc-21690bc: #FDEFD0; --lc-d2f445c: #A8680A; --lc-9b737fd: #16110B; --lc-51f965e: #221B12; --lc-1f02e66: rgba(250, 247, 241, 0.14); --lc-2d94e29: rgba(250, 247, 241, 0.72); --lc-36a068a: #1FA855; --lc-25c2492: #DCF8E6; --lc-81e84bd: #2E8B57; --lc-989217b: #C0341B; --lc-298cc7d: rgba(23, 19, 14, 0.06); --lc-02de4dc: rgba(23, 19, 14, 0.05); --lc-9e89c18: rgba(23, 19, 14, 0.22); --lc-3e4d4cb: rgba(40, 26, 6, 0.38); --lc-2475aa4: rgba(40, 26, 6, 0.18); --lc-f63cd00: #2E2118; --lc-2db9f7b: #534032; --lc-707a6ec: #6B5440; --lc-247330f: rgba(46, 33, 24, 0.08); --lc-40fc5f8: #EDDCC6; --lc-709dd8b: #F6F2EC; --lc-ec40b3b: #FBF6EF; --lc-acc9561: #222222; --lc-e7025a2: #6A6A6A; --lc-0069cf0: #EBEBEB; --lc-e50e19e: #F7F7F7; --lc-97eb2c1: rgba(23, 19, 14, 0.36); --lc-e812d35: rgba(23, 19, 14, 0.08); --lc-09fa70d: rgba(255, 255, 255, 0.78); --lc-d14f901: #fff; --lc-67cac16: rgba(0, 0, 0, 0.08); --lc-1f9ef8f: #F4A91F; --lc-6bdafb7: rgba(46, 33, 24, 0.1); --lc-f49aa7d: #DEE8D4; --lc-2aa32ee: #4F6B3C; --lc-9f7a728: rgba(46, 33, 24, 0.25); --lc-5df1ed2: #7E9A6B; --lc-d6b0f8e: #FCCF4F; --lc-ace40bf: #FFF8E6; --lc-47699a1: #B5820A; --lc-6bc1d56: #FBBF24; --lc-c5812dd: rgba(251, 191, 36, 0.6); --lc-5198670: #F6B739; --lc-1679459: #E7DBD0; --lc-bd327f2: #463122; --lc-5f58bf7: #FDECC4; --lc-c016eb5: #8A5710; --lc-c0ad6e2: #D98E12; --lc-202b496: #EB9C8C; --lc-e83023a: #A22916; --lc-d75c502: #F5F0EB; --lc-3112708: #E8EFE2; --lc-eab689e: rgba(46, 33, 24, 0.35); --lc-d61e80f: #E3F4E8; --lc-b275e50: #23744A; --lc-2de74e6: #F9C95C; --lc-6ede79f: #D9CFBE; --lc-4bbff15: #FEF7E8; --lc-3e95c0f: #FBDC93; --lc-47677e8: #5C4630; --lc-bc7db1e: #E8A33A; --lc-a92f702: #B5432A; --lc-e92bbe0: #B0700E; --lc-897e618: #1E8A8A; --lc-b8a990e: #BE0909; --lc-29c308b: #120D09; --lc-886bf73: #FFF6E2; --lc-39aefed: #0A0706; --lc-a0c5c4a: rgba(255, 246, 226, 0.7); --lc-3c09eb9: #9BE3B4; --lc-2838416: rgba(255, 246, 226, 0.07); --lc-d337f9e: rgba(255, 246, 226, 0.65); --lc-ee05572: #121212; --lc-65da196: #2E2E2E; --lc-05b44f3: #0A0A0A; --lc-cbf9b29: #9E2A10; --lc-d8c1bd0: #FFE7B8; --lc-f19eb1b: rgba(0, 0, 0, 0.25); --lc-0bb769f: #7F2011; --lc-06efbaa: #9A9A9A; --lc-b907f8d: #F6B53E; --lc-cdddffc: #111; --lc-8fa6259: rgba(244, 169, 31, 0.3); --lc-1c81215: #8C6824; --lc-98f792b: #EED4A3; --lc-d3b5db3: #FFF1CF; --lc-80f33e4: #8A5A00; --lc-520f78c: rgba(17, 17, 17, 0.45); --lc-e88a409: #21160A; --lc-cbcf105: #F7E7BB; --lc-74d5943: #DCB86A; --lc-672eba4: #F4DFA6; --lc-85e3727: #D1A957; --lc-d28dc1a: rgba(0, 0, 0, 0.45); --lc-711557d: rgba(0, 0, 0, 0.16); --lc-ddaf538: rgba(255, 255, 255, 0.12); --lc-c6ddfa7: rgba(120, 80, 0, 0.03); --lc-28b516d: rgba(255, 255, 255, 0.45); --lc-121869e: #4A3610; --lc-a0f4850: rgba(33, 22, 10, 0.09); --lc-325b858: rgba(0, 0, 0, 0.28); --lc-911c393: rgba(255, 255, 255, 0.4); --lc-1b4f759: rgba(0, 0, 0, 0.35); --lc-569da71: #956714; --lc-2eddbc6: #E9E0D2; --lc-aa7c1b0: rgba(0, 0, 0, 0.1); --lc-92e07b2: #027EB5; --lc-ee1be53: rgba(250, 250, 250, 0.97); --lc-cb48e6e: #333; --lc-1b67487: rgba(0, 0, 0, 0.3); --lc-1762a7f: rgba(245, 169, 30, 0.45); --lc-af085da: #A30808; --lc-8cb405e: #F7E1E1; --lc-204f097: #FBFAF8; --lc-da0afae: #EBE7E1; --lc-da6d4c6: #F6F3EE; --lc-eb5dcb0: #E4DFD8; --lc-2fc8193: #1D1D1F; --lc-46ea816: rgba(255, 236, 250, 0.55); --lc-ce0bc30: rgba(220, 240, 255, 0.6); --lc-70b244e: #55555B; --lc-7dd6946: rgba(29, 29, 31, 0.09); --lc-7adc1a2: #FEF5E4; --lc-6c2ae4f: #E4F3E8; --lc-bec8699: #FDE7D2; --lc-e6b5346: #A0521A; --lc-e4ee0e2: #E07B2E; --lc-8fc3840: #222; --lc-384d0ca: #EFE7DD; --lc-ca46cb7: #FFF4DC; --lc-e66e271: rgba(255, 255, 255, 0.85); --lc-37118c7: #f43f5e; --lc-7437b68: #f59e0b; --lc-41fbf18: #84cc16; --lc-7b66c35: #06b6d4; --lc-8e1a301: #6366f1; --lc-70a9309: #d946ef; --lc-8d8d64b: #0E0B08; --lc-b6fd96f: #5A4330; --lc-870b6f4: #2A1E14; --lc-311d3d5: #FFFDF8; --lc-6ed8d25: #1A1410; --lc-014102c: #FFD60A; --lc-914e255: rgba(0, 0, 0, .3); --lc-80207c7: #25D366; --lc-25a20ef: #6B4A06; --lc-e1eaef6: rgba(46, 33, 24, .045); --lc-01b6570: #8A3F0F; --lc-26a5a36: #F9C9A0; --lc-0a318b2: rgba(23, 19, 14, 0.38); --lc-98cd3e1: rgba(245, 169, 30, 0.3); --lc-898d60b: #5BE38F; --lc-ab09b31: #FFE6B3; --lc-c9059b4: #7A4B00; --lc-45469a1: #ECE8E1; --lc-1e62a97: #6E655A; --lc-afc4704: #9ED7B0; --lc-9adff52: #F7C766; --lc-d999514: #CFC7BB; --lc-1187a23: #1B140C; --lc-30b4c6f: #2A2117; --lc-ffbe15f: rgba(245, 169, 30, 0.12); --lc-7270fe3: rgba(255, 246, 226, 0.08); --lc-27bee0e: #D9D2C6; --lc-0348a30: #7FB5FF; --lc-da9a8cb: #2A1F14; --lc-ecb571a: #5A3B16; --lc-9c7810a: #F7D774; --lc-4d2f9c9: #E3A21B; --lc-73e5e6f: rgba(255, 244, 220, 0.3); --lc-d8f6fdf: #FFE19A; --lc-fcd45a6: #E39B12; --lc-6095e11: rgba(255, 244, 220, 0.85); --lc-7ac072c: #ECE5DA; --lc-011607f: rgba(0, 0, 0, 0.06); --lc-e4648b3: #1E8A4A; --lc-b2b0c5b: #1E7A45; --lc-ec9cf78: #F7CF7A; --lc-a28e5c5: #EEF3FF; --lc-5694bf3: #2B4A8C; --lc-be2c114: #F7F3EC; --lc-dce31e2: rgba(255, 246, 226, 0.75); --lc-414b319: rgba(0, 0, 0, .16); --lc-5c2967d: #8C3A12; --lc-f4c2627: #E0823A; --lc-ae61b20: #9C6B2A; --lc-5c55a88: #F0C27A; --lc-4b4f813: #5A2D1A; --lc-7fcfd89: #A8653C; --lc-b5691ea: #4A3221; --lc-c020332: #C9A27E; --lc-09d4de0: rgba(33, 22, 10, .82); --lc-633fdd2: #F6E3B4; --lc-71398ca: #127A3B; --lc-2143802: #7BD69B; --lc-598b32b: #000; --lc-a56d7d6: rgba(23, 19, 14, .07); --lc-5b6326b: #F2C39E; --lc-4ce5e46: #FDE4E1; --lc-3cec153: #B4231A; --lc-27769d2: rgba(250, 247, 241, .7); --lc-75fac51: rgba(250, 247, 241, .14); --lc-496c274: #E7F8EE; --lc-4d35c21: #14532D; --lc-e88a409: #21160a; --lc-121869e: #4a3610; --lc-cbcf105: #f7e7bb; --lc-74d5943: #dcb86a; --lc-672eba4: #f4dfa6; --lc-85e3727: #d1a957; --lc-a39d5ce: rgba(0, 0, 0, .45); --lc-2fc8193: #1d1d1f; --lc-70b244e: #55555b; --lc-204f097: #fbfaf8; --lc-da0afae: #ebe7e1; --lc-da6d4c6: #f6f3ee; --lc-eb5dcb0: #e4dfd8; --lc-29b0eb4: #121417; --lc-26dbda2: #3b424b; --lc-8fd095a: #eef1f4; --lc-5ee4c76: #c5ccd4; --lc-c659925: #f2f4f7; --lc-6d319d2: #b8c0ca; --lc-99b49b4: #f5f5f7; --lc-9892f27: #a3a3aa; --lc-1a8eb93: #141414; --lc-0f59067: #232326; --lc-b2b88b3: #0f0f11; --lc-80f8e00: #1c1c1f; --lc-6f75f37: rgba(255, 255, 255, .12); --lc-e0bfea0: rgba(120, 80, 0, .03); --lc-f4d0a0f: rgba(255, 255, 255, .05); --lc-25768e1: rgba(255, 255, 255, .45); --lc-d64a4ac: #6fb0ff; --lc-b4c40c2: #e6f3ff; --lc-60202db: #a493ff; --lc-ffb5b5d: #62d3ff; --lc-095d608: #a9d2ff; --lc-be0490b: rgba(0, 0, 0, .25); --lc-2fa0cc6: rgba(0, 0, 0, .35); --lc-63935d8: rgba(23, 19, 14, .93); --lc-cf53d40: rgba(46, 139, 87, .45); --lc-7d82e9c: #EEF8F2; --lc-bb3ac26: #E5604D; --lc-c2a936b: #F2B33D; --lc-de6c7ea: #4CB866; --lc-bd0b8ee: #FBF9F5; --lc-187b710: #ECEEF2; --lc-0cdcc93: #4B5563; --lc-bf94728: #EDE7FB; --lc-4ba0b0b: #5B3FB0; --lc-dd83b12: #FDE4DE; --lc-90f4d20: rgba(23, 19, 14, .28); --lc-e2e1973: rgba(23, 19, 14, .3); --lc-5a29650: rgba(23, 19, 14, .16); --lc-8e6839e: rgba(23, 19, 14, .32); --lc-d74378d: #E2F2E8; --lc-5e780db: #16733A; --lc-91ba196: #3B6FD8; --lc-667d6aa: #FCE3B0; --lc-c228056: #F7C463; --lc-00bc52f: #9AA0A6; --lc-4b14463: rgba(245, 169, 30, .22); --lc-97933bc: rgba(245, 169, 30, .3); --lc-79c8a54: rgba(245, 169, 30, .1); --lc-f0604bb: oklch(96.6% 0.006 85 / 0); --lc-d00f63d: oklch(99.2% 0.003 85 / 0); --wk-js-hide: 1; --wk-js-vis: visible; }
html.js { --wk-js-hide: 0; --wk-js-vis: hidden; }