/* sellby landing · Buku Kasbon Toko · tone: playful, tulis tangan · tokens dari app (SellbyTheme.kt) + tint buku di :root */

:root {
  --teal: #0EA5C6;
  --teal-deep: #0E7490;
  --lime: #8CE623;
  --lime-edge: #6DBA14;
  --ink: #0F172A;
  --ink-2: #475569;
  --red: #DC2626; /* aksen: tanda x dan hal yang hilang */
  --line: #E2E8F0;
  --key: #E2E8F0;
  --paper: #FFFFFF;
  --paper-2: #F8FAFC;
  --wa-bg: #EFE7DE;
  --wa-out: #D9FDD3;
  --wa-in: #FFFFFF;
  /* tint buku */
  --rule: #D6ECF2;
  --margin: #8FD3E4;
  --tape: #BFE6F0;
  --wash: #CDEFF7;
  --shade: #64748B;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --u: 24px; /* satu baris buku */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;

  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='8' viewBox='0 0 140 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8L6 2L11 7L19 1L24 6L33 3L38 8L47 0L53 5L60 2L66 8L75 3L81 7L88 1L95 6L102 2L109 8L118 3L124 7L131 1L140 6V8Z'/%3E%3C/svg%3E");
  --zig-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='8' viewBox='0 0 140 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0L6 6L11 1L19 7L24 2L33 5L38 0L47 8L53 3L60 6L66 0L75 5L81 1L88 7L95 2L102 6L109 0L118 5L124 1L131 7L140 2V0Z'/%3E%3C/svg%3E");
  --rule-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24' preserveAspectRatio='none'%3E%3Crect y='23' width='8' height='1.5'/%3E%3C/svg%3E");
  --tape-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24' viewBox='0 0 72 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H72L70 6L72 12L70 18L72 24H0L2 18L0 12L2 6Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--paper-2); -webkit-text-size-adjust: 100%; scrollbar-color: var(--teal) var(--paper-2); }
body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font: 400 16px/24px var(--font);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--teal);
}
::selection { background: var(--wash); color: var(--ink); }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--teal-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* satu tebal pena untuk semua coretan */
.pen, .scribble, .ring { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.hand { font-family: var(--hand); font-weight: 700; }

.page {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  border-inline: 1px solid var(--line);
  min-height: 100vh;
}
/* garis tepi buku: level halaman, bukan border kartu */
.page::before { content: ""; position: absolute; z-index: 0; left: 24px; top: 0; bottom: 0; width: 2px; background: var(--margin); }

.entry { position: relative; padding: 48px 16px 48px 40px; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(24px, 8.2vw, 38px); line-height: clamp(36px, 11vw, 48px); letter-spacing: -0.01em; }
h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; }
h3 { font-size: 20px; line-height: 24px; }
.sub { color: var(--ink-2); margin-top: var(--s3); }
.muted { color: var(--ink-2); font-size: 11px; font-style: italic; margin-top: var(--s2); } /* catatan kaki: tetap di garis buku (line-height 24px dari .ruled) */
.lost { color: var(--red); }
.hl-lime { background: linear-gradient(transparent 55%, var(--lime) 55%); color: inherit; padding: 0 2px; }
.lead { font-size: 20px; margin-top: var(--s3); line-height: 28px; }

/* notebook: garis buku tiap 24px di blok .ruled; isi memakai kelipatan 24 supaya tulisan duduk di garis */
.ruled { position: relative; isolation: isolate; line-height: var(--u); }
.ruled::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rule);
  -webkit-mask: var(--rule-row) 0 0 / 100% var(--u) repeat-y; mask: var(--rule-row) 0 0 / 100% var(--u) repeat-y;
}

/* ikon app (SVG tanpa fill) via mask, supaya warna ikut teks */
.ico { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico.sm { width: 18px; height: 18px; }
.i-invoice { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015.89%2015.88'%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cg%3E%3Cpath%20d='M12.49,7.96c-1.65-.12-3.19.75-3.97,2.13-.85,1.49-.74,3.3.3,4.67H1.32c-.67,0-1.31-.47-1.31-1.18V1.53C0,1.06.26.68.61.47c.38-.23.88-.25,1.25,0s.8.31,1.16.01c.76-.64,1.87-.66,2.64-.02.35.29.82.29,1.17,0,.76-.63,1.86-.63,2.62,0,.36.31.81.26,1.18,0s.87-.24,1.25-.01c.36.21.61.6.61,1.06v6.43ZM3.86,4.54c0-.37-.3-.68-.68-.68s-.68.3-.68.68.3.68.68.68.68-.3.68-.68ZM9.42,3.97h-4.2c-.33,0-.56.27-.56.58,0,.28.24.56.56.56h4.18c.33,0,.58-.25.59-.56s-.22-.57-.57-.57ZM3.86,7.49c0-.37-.3-.68-.68-.68s-.68.3-.68.68.3.68.68.68.68-.3.68-.68ZM9.42,6.92h-4.2c-.33,0-.56.27-.56.57,0,.28.24.56.56.56h4.22c.32,0,.55-.28.55-.56,0-.3-.23-.57-.57-.57ZM3.86,10.32c0-.37-.3-.68-.68-.68s-.68.3-.68.68.3.68.68.68.68-.3.68-.68ZM6.8,9.76h-1.58c-.32,0-.56.27-.56.57,0,.29.24.56.56.56h1.6c.32,0,.56-.26.56-.56,0-.31-.24-.57-.58-.57Z'/%3E%3Cpath%20d='M15.89,12.2c0,2.04-1.65,3.69-3.69,3.69s-3.69-1.65-3.69-3.69,1.65-3.69,3.69-3.69,3.69,1.65,3.69,3.69ZM10.68,12.6l.75.75c.22.22.57.22.79,0l1.51-1.5c.23-.23.22-.6,0-.81s-.57-.22-.8.01l-1.11,1.11-.36-.36c-.23-.23-.59-.2-.8.02s-.22.56.01.79Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.i-ongkir { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016.67%2015.15'%3E%3Cdefs%3E%3Cstyle%3E%20.cls-1%20%7B%20fill:%20none;%20%7D%20%3C/style%3E%3C/defs%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cg%3E%3Cg%3E%3Cpath%20class='cls-1'%20d='M14.62,7.42c-.12-.27-.37-.43-.67-.43h-1.46c-.21,0-.35.18-.35.38v1.43c0,.19.15.36.35.36h2.39c.15,0,.24-.11.29-.19.05-.09.06-.21.01-.32l-.56-1.23Z'/%3E%3Cpath%20d='M10.14,11.7h-5.34c.32.22.54.68.58,1.09h4.76c.22,0,.37-.17.37-.4v-.33c0-.21-.15-.36-.37-.36Z'/%3E%3Cpath%20d='M0,11.7c0,.68.39,1.18,1.09,1.08.02-.4.22-.84.63-1.08H0Z'/%3E%3Cpath%20d='M16.54,9.53l-1.46-3.19c-.23-.51-.75-.8-1.3-.8h-2.18c-.22,0-.37.15-.37.38v5.69c.55-.58,1.37-.69,2.13-.42.71.25,1.26.74,1.5,1.6h.75c.46,0,.85-.31,1-.74.01-.04.03-.07.06-.08v-2.07l-.12-.36ZM15.17,8.97c-.04.08-.14.19-.29.19h-2.39c-.2,0-.35-.17-.35-.36v-1.43c0-.2.14-.38.35-.38h1.46c.3,0,.55.16.67.43l.56,1.23c.05.1.04.23-.01.32Z'/%3E%3Ccircle%20cx='12.68'%20cy='13.42'%20r='1.73'/%3E%3Ccircle%20cx='3.2'%20cy='13.42'%20r='1.73'/%3E%3Cpath%20d='M10.51,2.13v-.64c0-.82-.67-1.49-1.49-1.49h-2.91s-5,0-5,0C.48,0,0,.48,0,1.13v7.67s0,0,0,0c0,.32,0,.52,0,.72h.53c.22,0,.38.18.37.38,0,.19-.16.35-.37.35H0c0,.45,0,.32,0,.73h10.14c.22,0,.37-.16.37-.38V2.13s0,0,0,0Z'/%3E%3C/g%3E%3Cpath%20d='M13.98,4.76c-.22-.54-1.05-2.23-2.65-2.34-.09,0-.17.07-.16.16l.04,2.05c0,.21.17.38.38.38h2.23c.12,0,.21-.12.17-.24Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.i-status { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016.77%2016.76'%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cg%3E%3Cpath%20d='M2.54,8.17c1.6.51,3.34.08,4.52-1.1,1.17-1.17,1.63-2.92,1.11-4.54,4.25-.86,8.27,2.21,8.58,6.51s-3.27,7.98-7.63,7.7c-4.29-.27-7.43-4.27-6.58-8.58ZM13.19,10.18c.36,0,.59-.31.58-.61s-.26-.58-.6-.58h-2.99s0-2.99,0-2.99c0-.35-.29-.61-.61-.6s-.58.26-.58.6v3.59c0,.33.27.6.6.6h3.6Z'/%3E%3Cpath%20d='M7.78,3.89c0,2.15-1.74,3.89-3.89,3.89S0,6.04,0,3.89,1.74,0,3.89,0s3.89,1.74,3.89,3.89ZM4.49,3.58v-1.18c0-.35-.29-.61-.61-.6s-.58.26-.58.6v1.2c0,.35.29.61.61.6s.58-.26.58-.61ZM4.49,5.39c0-.33-.27-.6-.6-.6s-.6.27-.6.6.27.6.6.6.6-.27.6-.6Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.i-produk { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2015.72'%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cg%3E%3Cpath%20d='M0,12v-7.39c0-.34.34-.58.66-.46l6.84,2.56v9s-4.67-1.75-6.64-2.48C.34,13.04,0,12.55,0,12ZM3.99,12.93v-1.06s-1.99-.75-1.99-.75v1.06s1.99.74,1.99.74Z'/%3E%3Cpath%20d='M1.07,2.53L7.48.1c.33-.13.7-.13,1.03,0l6.52,2.45c.34.13.34.6,0,.73l-2.04.76-2.99-1.34-1.99.85,2.98,1.24-2.99,1.12S3.25,4.12,1.07,3.32c-.37-.14-.37-.65,0-.79Z'/%3E%3Cpath%20d='M8.5,6.72l2.5-.94v2.5s2-.75,2-.75v-2.51s2.35-.88,2.35-.88c.32-.12.65.12.65.45v7.02c0,.78-.48,1.47-1.21,1.74l-6.29,2.36V6.72Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.i-cart { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.6%2016.23'%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cpath%20d='M5.17,12.93h9.22c1.1,0,1.91.89,1.77,1.85s-1.18,1.62-2.22,1.39-1.66-1.26-1.25-2.22h-3.6c.31.72.06,1.48-.57,1.93s-1.54.46-2.19.02-.9-1.22-.59-1.94h-.8c-.97-.11-1.66-.86-1.65-1.73s.74-1.6,1.73-1.66L3.83,2.2c-.1-.69-.73-1.17-1.47-1.18H.53C.23,1.01.01.78,0,.53S.2,0,.51,0h1.97c1.27.05,2.3.91,2.47,2.04l.11.68h13.01c.35,0,.58.3.53.61l-1.02,5.8c-.16.94-.99,1.57-2.02,1.65l-10.48.83c-.4.03-.66.37-.64.7.02.34.31.63.74.63ZM8.79,8.4l-.36-3.43c-.03-.29-.33-.48-.61-.45s-.53.26-.5.54l.36,3.45c.03.3.33.48.62.45s.53-.26.5-.56ZM11.88,8.43v-3.39c0-.3-.27-.52-.58-.52-.29,0-.55.22-.55.51v3.42c0,.31.27.53.58.52s.54-.22.54-.54ZM14.97,8.47l.35-3.4c.03-.3-.22-.53-.53-.55-.27-.01-.56.16-.58.45l-.36,3.45c-.03.3.23.54.53.55s.56-.18.59-.5ZM8.1,14.58c0-.34-.3-.62-.68-.62s-.68.28-.68.62.3.62.68.62.68-.28.68-.62ZM15.05,14.57c0-.34-.3-.62-.68-.62s-.68.28-.68.62.3.62.68.62.68-.28.68-.62Z'/%3E%3C/g%3E%3C/svg%3E"); }
.i-setting { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016.94%2016.05'%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cpath%20d='M11.65,15.87c-.49.21-.99.08-1.3-.34-.43-.57-1.1-.89-1.81-.88s-1.35.38-1.77.97c-.26.36-.73.51-1.15.37-.91-.32-1.72-.8-2.47-1.4-.4-.32-.52-.81-.31-1.28.3-.66.26-1.41-.15-2.07-.33-.53-.93-.94-1.62-1.01-.51-.05-.89-.42-.96-.92-.14-.97-.13-1.93.07-2.89.1-.48.49-.78.96-.83.68-.07,1.27-.48,1.6-.99.4-.63.45-1.35.19-2.01-.18-.47-.03-.95.36-1.24.69-.53,1.42-.94,2.23-1.25.44-.17.92-.07,1.21.3.43.54,1.06.85,1.73.86.68,0,1.32-.3,1.75-.84.27-.33.71-.49,1.12-.35.93.32,1.76.81,2.51,1.43.37.3.51.76.34,1.22-.24.65-.19,1.35.2,1.98.31.5.88.9,1.53.99.49.07.82.44.9.92.16.95.16,1.88-.01,2.82-.09.48-.43.84-.92.9-.68.08-1.26.49-1.58,1.01-.41.65-.43,1.38-.16,2.05.18.45,0,.91-.35,1.2-.66.53-1.35.95-2.15,1.29ZM11.29,8.02c0-1.56-1.26-2.82-2.82-2.82s-2.82,1.26-2.82,2.82,1.26,2.82,2.82,2.82,2.82-1.26,2.82-2.82Z'/%3E%3C/g%3E%3C/svg%3E"); }
.i-shift { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M14.68,21.14h-5.36c-1.48,0-2.68-1.2-2.68-2.68v-3.67h-.82c-.38,0-.74-.07-1.1-.21-.8-.32-1.25-1.06-1.13-1.86.07-.44.27-.86.59-1.24l5.68-6.75c.27-.32.6-.57.99-.75,1.11-.52,2.45-.21,3.25.74l5.71,6.78c.18.22.33.46.44.73.1.16.16.35.16.54v.4c0,.22-.08.44-.21.61-.35.63-1.1,1.01-2.04,1.01h-.83v3.67c0,1.48-1.2,2.68-2.68,2.68ZM5.71,12.79s.07,0,.11,0h1.82c.55,0,1,.45,1,1v4.67c0,.37.3.68.68.68h5.36c.37,0,.68-.3.68-.68v-4.67c0-.55.45-1,1-1h1.83s.08,0,.11,0l-5.7-6.78c-.19-.23-.55-.37-.88-.22-.13.06-.22.13-.31.23l-5.68,6.75s0,0,0,.01Z'/%3E%3C/svg%3E"); }
.i-delete { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M19.48,4.93h-10c-.92,0-1.8.4-2.36,1.06l-4.03,4.79c-.83.99-.83,2.37,0,3.36l4.03,4.79c.56.66,1.44,1.06,2.36,1.06h10c1.64,0,2.98-1.23,2.98-2.74V7.67c0-1.51-1.34-2.74-2.98-2.74ZM20.66,7.67v9.58c0,.52-.53.94-1.18.94h-10c-.39,0-.76-.16-.98-.42l-4.03-4.79c-.27-.31-.27-.72,0-1.04l4.03-4.79c.22-.26.59-.42.98-.42h10c.65,0,1.18.42,1.18.94Z'/%3E%3Cpath%20d='M18.26,9.19h0c-.37-.37-.97-.37-1.33,0l-2.18,2.18-2.18-2.18c-.37-.37-.97-.37-1.33,0-.37.37-.37.97,0,1.33l2.18,2.18-2.18,2.18c-.37.37-.37.97,0,1.33.36.36.97.36,1.33,0l2.18-2.18,2.18,2.18c.18.18.42.28.67.28s.49-.1.67-.28c.37-.37.37-.97,0-1.33l-2.18-2.18,2.18-2.18c.37-.37.37-.97,0-1.33Z'/%3E%3C/svg%3E"); }
.i-smile { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018.55%2018.58'%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cg%3E%3Cpath%20d='M10.05,0s.06.05.1.04c.13-.03.22.02.32.03,4.35.56,7.72,4.11,8.08,8.48v1.46c-.37,4.56-3.98,8.17-8.54,8.54-.48.04-.98.04-1.46,0C4.2,18.2.66,14.85.08,10.51c-.02-.13-.07-.24-.04-.39,0-.03-.02-.07-.04-.07v-1.53s.06-.36.06-.36C.59,3.93,3.93.59,8.16.06c.12-.01.25-.02.37-.06h1.52ZM16.88,9.29c0-4.19-3.4-7.59-7.59-7.59S1.7,5.09,1.7,9.29s3.4,7.59,7.59,7.59,7.59-3.4,7.59-7.59Z'/%3E%3Cg%3E%3Ccircle%20cx='5.69'%20cy='7.49'%20r='1.12'/%3E%3Ccircle%20cx='12.89'%20cy='7.49'%20r='1.12'/%3E%3C/g%3E%3Cpath%20d='M13.36,12.03c.07-.18.07-.34-.02-.5-.08-.13-.23-.24-.42-.24h-7.24c-.2,0-.34.12-.42.24-.1.17-.08.33-.01.5.41,1.04,1.22,1.87,2.23,2.33,2.29,1.04,4.94-.02,5.89-2.34Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.i-numpad { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_2'%20data-name='Layer%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016.09%2016.06'%3E%3Cg%20id='Layer_1-2'%20data-name='Layer%201'%3E%3Cg%3E%3Cpath%20d='M4.02,8.02c-2.22,0-4.02,1.8-4.02,4.02s1.8,4.02,4.02,4.02,4.02-1.8,4.02-4.02-1.8-4.02-4.02-4.02ZM4.02,9.05c1.65,0,2.99,1.34,2.99,2.99s-1.34,2.99-2.99,2.99-2.99-1.34-2.99-2.99,1.34-2.99,2.99-2.99Z'/%3E%3Cpath%20d='M4.48.03c-.3-.03-.6-.03-.9,0C1.81.25.4,1.57.08,3.29l-.06.28v.87s0,.03,0,.03c.25,2.06,1.96,3.58,4,3.58.04,0,.08,0,.12,0,2.09-.06,3.8-1.75,3.89-3.84C8.15,2.07,6.61.28,4.48.03ZM1.04,4.03c0-1.65,1.34-2.99,2.99-2.99s2.99,1.34,2.99,2.99-1.34,2.99-2.99,2.99-2.99-1.34-2.99-2.99Z'/%3E%3Cpath%20d='M12.06,8.03s-.1,0-.15,0c-2.09.07-3.79,1.77-3.87,3.86-.08,2.11,1.46,3.9,3.6,4.16h.9s.24-.05.24-.05c1.74-.32,3.06-1.72,3.28-3.49.04-.3.04-.6,0-.9-.24-2.07-1.95-3.58-4-3.58ZM15.05,12.05c0,1.65-1.34,2.99-2.99,2.99s-2.99-1.34-2.99-2.99,1.34-2.99,2.99-2.99,2.99,1.34,2.99,2.99Z'/%3E%3Cpath%20d='M12.06,0C9.84,0,8.04,1.81,8.04,4.02s1.8,4.02,4.02,4.02,4.02-1.8,4.02-4.02S14.28,0,12.06,0ZM12.06,1.03c1.65,0,2.99,1.34,2.99,2.99s-1.34,2.99-2.99,2.99-2.99-1.34-2.99-2.99,1.34-2.99,2.99-2.99Z'/%3E%3Cpath%20d='M3.41,3.35v-.65h1.13v2.97h-.73v-2.33h-.4Z'/%3E%3Cpath%20d='M11.18,5.01c.27-.22.48-.4.63-.54.15-.14.28-.29.39-.44.11-.15.16-.31.16-.45,0-.11-.03-.2-.08-.26-.05-.06-.13-.09-.23-.09s-.18.04-.24.12c-.06.08-.09.19-.09.33h-.67c0-.23.05-.42.15-.58.09-.16.22-.27.37-.34.15-.07.32-.11.51-.11.32,0,.57.08.73.25.16.17.25.38.25.65,0,.29-.1.56-.3.81-.2.25-.45.49-.76.73h1.1v.57h-2.05v-.52c.09-.07.13-.11.13-.1Z'/%3E%3Cpath%20d='M3.32,10.81c.18-.16.42-.24.73-.24.2,0,.38.04.52.11.15.07.26.17.33.29.07.12.11.26.11.41,0,.18-.04.33-.13.44-.09.11-.19.19-.31.23v.02c.15.05.28.14.37.26s.13.27.13.46c0,.17-.04.32-.12.45-.08.13-.19.23-.34.3-.15.07-.32.11-.53.11-.33,0-.59-.08-.78-.24s-.3-.4-.31-.72h.68c0,.12.04.21.1.28.06.07.16.1.29.1.11,0,.19-.03.25-.09.06-.06.09-.14.09-.24,0-.13-.04-.22-.12-.28-.08-.06-.21-.09-.4-.09h-.13v-.57h.13c.14,0,.25-.02.34-.07s.13-.13.13-.25c0-.1-.03-.17-.08-.23-.05-.05-.13-.08-.22-.08-.1,0-.18.03-.23.09-.05.06-.08.14-.09.23h-.68c.01-.29.11-.51.29-.67Z'/%3E%3Cpath%20d='M10.87,13.08v-.56l1.29-1.84h.78v1.8h.33v.6h-.33v.53h-.7v-.53h-1.37ZM12.29,11.45l-.68,1.03h.68v-1.03Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.i-wifi-off { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M1.5%208.5a15%2015%200%200%201%2021%200'/%3E%3Cpath%20d='M5%2012.5a10%2010%200%200%201%2014%200'/%3E%3Cpath%20d='M8.5%2016a5%205%200%200%201%207%200'/%3E%3Ccircle%20cx='12'%20cy='19.5'%20r='1.2'%20fill='black'%20stroke='none'/%3E%3Cpath%20d='M3%203l18%2018'/%3E%3C/svg%3E"); }
.i-enter { --i: url("data:image/svg+xml,%3Csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3.03,14.04c-.27-.53-.28-1.05-.01-1.55l4.31-4.28c.52-.51,1.32-.36,1.77.09.5.5.57,1.29.07,1.8l-1.73,1.81h9.81c.73,0,1.26-.56,1.26-1.25l.02-4.07c0-.63.45-1.09,1.05-1.2.75-.14,1.6.38,1.6,1.2v4.1c.01,2.01-1.58,3.86-3.66,3.87l-10.08.06,1.74,1.8c.5.52.43,1.3-.07,1.8-.44.45-1.25.6-1.77.09l-4.3-4.26Z'/%3E%3C/svg%3E"); }
.i-calculator { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill-rule='evenodd'%20d='M3%20.8h10a2%202%200%200%201%202%202v10.4a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2V2.8a2%202%200%200%201%202-2zM3.5%203h9v2.6h-9zM3.5%207h2.4v1.8H3.5zM6.8%207h2.4v1.8H6.8zM10.1%207h2.4v1.8h-2.4zM3.5%209.4h2.4v1.8H3.5zM6.8%209.4h2.4v1.8H6.8zM10.1%209.4h2.4v4.2h-2.4zM3.5%2011.8h2.4v1.8H3.5zM6.8%2011.8h2.4v1.8H6.8z'/%3E%3C/svg%3E"); }

/* selotip, foto tempel, stiker */
.tape {
  position: absolute; z-index: 2; top: -11px; left: 18px; width: 68px; height: 22px;
  background: var(--tape); transform: rotate(-5deg);
  -webkit-mask: var(--tape-shape) center / 100% 100% no-repeat; mask: var(--tape-shape) center / 100% 100% no-repeat;
}
.tape-b { left: auto; right: 18px; transform: rotate(4deg); }
.tilt-l { transform: rotate(-1deg); }
.tilt-r { transform: rotate(1deg); }
.taped { position: relative; margin: var(--u) 0; }
.taped img { width: 100%; height: auto; border: 6px solid var(--paper); border-radius: 2px; box-shadow: 0 8px 16px -10px var(--shade), 0 0 0 1px var(--line); }
.sticker { filter: drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper)) drop-shadow(0 2px 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper)) drop-shadow(0 5px 5px var(--shade)); }

html { scroll-behavior: smooth; } /* tautan anchor meluncur; reduced-motion mematikannya di bawah */

/* tombol: satu-satunya warna jenuh, terasa seperti satu tombol keyboard */
.key {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 0 var(--s4);
  background: var(--lime); color: var(--ink);
  border-radius: 14px; font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 14px -8px var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
button.key, a.key { gap: var(--s2); border: 0; font-family: inherit; cursor: pointer; }
/* muka tombol: lip bawah lebih gelap, seperti keycap */
.key::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--lime-edge); transition: height var(--dur) var(--ease); }
.key:active { transform: translateY(2px); box-shadow: 0 4px 8px -6px var(--ink); }
.key:active::after { height: 2px; }
.key-sm { width: auto; min-height: 44px; font-size: 15px; font-weight: 600; border-radius: 12px; padding: 0 var(--s4); }

/* header */
.top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); background: var(--paper); border-bottom: 2px solid var(--margin); }
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); }
.brand-logo { width: 28px; height: 28px; border-radius: 6px; }
.wordmark { font-weight: 800; letter-spacing: -0.03em; font-size: 20px; line-height: 1; }
.wordmark .dot { color: var(--teal); }
.wordmark.big { font-size: clamp(38px, 12vw, 48px); }

/* hero */
.hero { padding-top: 32px; }
.pen { position: relative; }
h1 .pen { display: inline; color: var(--ink); }
.scribble { position: absolute; left: 0; bottom: -6px; width: 100%; height: 12px; color: var(--teal); stroke-width: 3; animation: ink 700ms var(--ease) 250ms both; }
.scribble path, .ring path { vector-effect: non-scaling-stroke; }
@keyframes ink { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero .taped { margin-top: var(--s5); }
.realita { margin-top: var(--s7); }
.h-write { margin-bottom: 0; line-height: 48px; }
.todo li, .got li { display: flex; gap: var(--s3); align-items: flex-start; }
.mark { flex: none; width: 24px; height: 24px; }
.todo .mark { color: var(--red); }
.ok { color: var(--teal-deep); }
.mark.ok { color: var(--teal-deep); }

/* cerita: kertas sobek */
.cerita { padding-left: 16px; }
.cerita p + p { margin-top: var(--u); } /* satu baris kosong antar paragraf, tetap di garis buku */
.slip {
  position: relative; z-index: 1; padding: var(--s5) var(--s4); background: var(--paper-2);
  box-shadow: 0 10px 18px -12px var(--shade), 0 0 0 1px var(--line);
}
.slip::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--paper-2); -webkit-mask: var(--zig) 0 0 / 140px 8px repeat-x; mask: var(--zig) 0 0 / 140px 8px repeat-x; }
.slip h2 { margin-bottom: var(--u); line-height: 48px; margin-top: -4px; }

/* kenalan */
.drumroll { font-size: 20px; line-height: 28px; }
.intro { display: flex; align-items: center; gap: var(--s4); margin: var(--s5) 0 var(--s4); }
.intro img { width: clamp(100px, 32vw, 136px); height: auto; flex: none; transform: rotate(-4deg); }
.intro img { transform-origin: 50% 90%; animation: wave 0.9s step-end infinite; } /* dadah: dua pose saja, serong kiri lalu serong kanan */
@keyframes wave { 0% { transform: rotate(-10deg); } 50% { transform: rotate(5deg); } }
.tagline { font-size: 18px; line-height: 24px; color: var(--teal-deep); margin-top: var(--s2); }
.headline { font-size: 30px; line-height: 40px; }
.hl { box-shadow: inset 0 -0.42em 0 var(--wash); }
.kenalan .sub { margin-top: var(--s2); }
.feat-title { margin-top: var(--s7); font-size: 30px; line-height: 40px; }
.worth { position: relative; display: inline-block; white-space: nowrap; }
.worth mark { padding: 0 6px; background: linear-gradient(transparent 50%, var(--lime) 50%); transform: rotate(-1.5deg); display: inline-block; }
.doodle-w { position: absolute; top: -14px; right: -22px; width: 24px; height: 24px; color: var(--teal); stroke-width: 2; transform: rotate(14deg); }
.feat { margin-top: var(--s3); }
.feat li { display: flex; gap: var(--s3); align-items: center; min-height: 48px; font-family: var(--hand); font-weight: 700; font-size: 18px; line-height: 24px; }
.feat .ico { color: var(--ink); }

/* cocok: maskot menulis, dibalik menghadap kiri */
.cocok-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.cocok-head img { width: clamp(104px, 30vw, 136px); height: auto; flex: none; transform: scaleX(-1) rotate(4deg); }

/* cocok */
.cocok h2 { overflow-wrap: break-word; }
.note { color: var(--teal-deep); margin-top: var(--s5); font-size: clamp(13px, 4.3vw, 18px); white-space: nowrap; line-height: 24px; transform: rotate(-1.5deg); transform-origin: left center; }
.c-red { color: #B0283A; } /* merah hati, tidak menyilaukan */
.c-green { color: #1F7A4D; font-weight: 700; } /* hijau tua, nyaman di mata */
.dbl { position: relative; display: inline-block; white-space: nowrap; padding-bottom: 16px; } /* garis bawah ganda gaya coretan tangan; nowrap supaya garis tidak terbelah dua baris */
.dbl svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; stroke-width: 2.5; }
.dbl path { vector-effect: non-scaling-stroke; }
.nb { white-space: nowrap; }
.roles { margin-top: var(--s5); }
.roles li { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s1) 0; }
.roles strong { order: 0; font-family: var(--hand); font-size: clamp(12.5px, 4.2vw, 18px); line-height: 24px; white-space: nowrap; }
.roles li::before { content: ""; order: 1; flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted var(--margin); transform: translateY(-4px); }
.roles span { order: 2; font-size: clamp(11.5px, 3.5vw, 13px); color: var(--ink-2); line-height: 20px; text-align: right; white-space: nowrap; }

/* offline + harga: maskot bicara */
.say-row { display: flex; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s5); }
.mascot-sm { width: 96px; height: auto; flex: none; transform: rotate(3deg); }
.say { position: relative; padding: var(--s3) var(--s4); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 18px; font-size: 18px; line-height: 24px; margin-bottom: var(--s5); }
.say::before { content: ""; position: absolute; left: -9px; bottom: 14px; width: 14px; height: 14px; background: var(--paper); border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); }
.offline h2, .harga h2 { line-height: 40px; }
.offline .lines { margin-top: var(--u); }
.offline .lines h3 + p + h3 { margin-top: var(--u); } /* spasi satu baris buku antar dua bagian */

/* testimoni */
.testimoni { padding-left: 40px; }
.quote:nth-of-type(2) { margin-left: var(--s5); }
.quote:nth-of-type(3) { margin-right: var(--s5); }
.testimoni h2 { line-height: 36px; }
.testi-title { font-size: clamp(24px, 7vw, 32px); line-height: 40px; }
.testi-title .pen { display: inline; color: var(--ink); background: linear-gradient(transparent 55%, var(--wash) 55%); }
.testi-tag { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4); padding: var(--s1) var(--s4) var(--s1) var(--s3); background: var(--teal-deep); color: var(--paper); font-size: clamp(14px, 4.3vw, 18px); line-height: 28px; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 5px 8px -5px var(--shade); }
.testi-tag .pen { flex: none; width: 20px; height: 20px; color: var(--lime); stroke-width: 2.2; }
.quote { position: relative; margin-top: var(--s6); padding: var(--s5) var(--s4) var(--s4); background: var(--paper); box-shadow: 0 10px 18px -12px var(--shade), 0 0 0 1px var(--line); }
.quote header { display: flex; gap: var(--s3); align-items: center; }
.quote header img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.who { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.who .ok { flex: none; }
.meta { font-size: 13px; color: var(--ink-2); line-height: 18px; }
.rate { margin-top: var(--s3); font-size: 14px; font-weight: 700; display: flex; gap: var(--s2); align-items: center; }
.stars { display: flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; fill: var(--teal); stroke: none; }
blockquote { margin: var(--s2) 0 0; font-size: 17px; line-height: 26px; }
.vn { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s3); background: var(--paper-2); border-radius: 14px; }
.play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--teal-deep); color: var(--paper); display: grid; place-items: center; cursor: pointer; }
.vn-main { flex: 1; min-width: 0; }
.vn-label { font-size: 12px; color: var(--ink-2); font-weight: 600; line-height: 16px; }
.bar { height: 4px; border-radius: 2px; background: var(--line); margin: 6px 0; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--teal-deep); }
.vn-time { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 16px; }
.speed { flex: none; min-width: 48px; height: 44px; padding: 0 var(--s2); border: 0; border-radius: 10px; background: var(--paper); font-size: 13px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }

/* harga: nota kasbon yang ditempel, lengkap dengan stempel dan coretan pesta */
.price { position: relative; margin-top: var(--s6); padding: var(--s6) var(--s4) var(--s5); background: var(--wash); border: 2px dashed var(--teal); border-radius: 4px; box-shadow: 0 10px 18px -12px var(--shade); }
.price .tape { top: -12px; }
.price-label { font-size: 24px; line-height: 28px; color: var(--teal-deep); padding-right: 92px; }
.stamp { position: absolute; z-index: 2; top: -22px; right: -8px; width: 96px; height: 96px; display: grid; place-content: center; text-align: center; background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 48% 52% 50% 50% / 52% 46% 54% 48%; transform: rotate(8deg); box-shadow: 0 6px 8px -4px var(--shade); line-height: 1.1; }
.stamp span { font-size: 15px; letter-spacing: 0.06em; }
.stamp b { font-size: 17px; font-weight: 800; font-family: var(--font); letter-spacing: -0.02em; }
.doodle { position: absolute; width: 22px; height: 22px; stroke-width: 2; pointer-events: none; }
.d-1 { right: -9px; top: 132px; color: var(--lime-edge); transform: rotate(14deg); }
.d-2 { left: -10px; bottom: 120px; color: var(--teal); }
.d-3 { right: 12px; bottom: -11px; color: var(--red); width: 18px; height: 18px; transform: rotate(-12deg); }
.was { margin-top: var(--s3); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.was s { text-decoration-thickness: 2.5px; text-decoration-color: var(--ink); }
.now { white-space: nowrap; margin-top: var(--s2); font-size: clamp(32px, 10.5vw, 52px); font-weight: 800; line-height: 72px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.now .rp { font-size: clamp(16px, 5vw, 26px); font-weight: 700; }
.ring-wrap { position: relative; display: inline-block; padding: 0 clamp(20px, 7.5vw, 34px); }
.ring { position: absolute; left: -6px; top: -2px; width: calc(100% + 12px); height: calc(100% + 4px); color: var(--teal-deep); stroke-width: 3; pointer-events: none; }
.early { margin-top: var(--s3); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 20px; }
.count { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s2); }
.cd { display: grid; justify-items: center; padding: var(--s2) 0 var(--s1); background: var(--teal-deep); color: var(--paper); border-radius: 8px; box-shadow: 0 4px 0 -1px var(--ink); font-variant-numeric: tabular-nums; }
.cd b { font-size: 24px; font-weight: 800; line-height: 28px; }
.cd span { font-size: 12px; line-height: 16px; font-weight: 600; }
.cd-s { background: var(--lime); color: var(--ink); }
.until { margin-top: var(--s3); color: var(--ink-2); font-size: 13px; line-height: 18px; }
.once { color: var(--teal-deep); font-size: 22px; line-height: 28px; margin-top: var(--s4); }
.trial { margin-top: var(--s3); color: var(--ink-2); font-size: 15px; line-height: 22px; }
.harga .taped { margin-top: var(--s5); margin-bottom: var(--s5); }
.got-title { margin-top: var(--s7); margin-bottom: var(--s3); line-height: 28px; }
.got { margin-bottom: var(--s6); }

/* dashboard: tiruan layar app (1dp app = --dp), semua ukuran ikut lebar kartu lewat container query */
.dashboard .sub { margin-top: var(--s2); }
.dash-title { line-height: 36px; }
.dash-fig { margin-top: var(--s6); margin-bottom: 0; }
.dash { container-type: inline-size; --dp: calc(100cqw / 340); position: relative; overflow: hidden; border-radius: 16px; background: var(--paper); box-shadow: 0 16px 28px -16px var(--ink), 0 0 0 1px var(--line); color: var(--ink); }
.dash p { margin: 0; line-height: 1.2; }
.dash-top { background: linear-gradient(var(--teal) calc(70 * var(--dp)), var(--paper) 0); padding: calc(14 * var(--dp)) calc(16 * var(--dp)) 0; }
.d-greet { position: relative; height: calc(123 * var(--dp)); border-radius: calc(24 * var(--dp)); background: linear-gradient(90deg, #1290B6, #2279AF); color: var(--paper); }
.d-greet-text { position: absolute; inset: 0 calc(105 * var(--dp)) 0 calc(18 * var(--dp)); display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--dp)); }
.d-name { font-size: calc(16.5 * var(--dp)); font-weight: 800; line-height: 1.15; }
.d-say { font-size: calc(12.5 * var(--dp)); font-weight: 500; line-height: 1.3; }
.dash .d-greet img { border: 0; border-radius: 0; box-shadow: none; position: absolute; right: calc(12 * var(--dp)); bottom: 0; height: calc(114 * var(--dp)); width: auto; }
.d-body { padding: calc(12 * var(--dp)) calc(16 * var(--dp)) calc(18 * var(--dp)); display: grid; gap: calc(10 * var(--dp)); }
.d-date { display: flex; justify-content: space-between; align-items: center; padding: calc(9.5 * var(--dp)) calc(16 * var(--dp)); border: calc(1.4 * var(--dp)) solid var(--teal); border-radius: 99px; color: var(--teal); font-size: calc(13 * var(--dp)); font-weight: 700; }
.d-date svg { width: calc(16 * var(--dp)); fill: currentColor; }
.d-cards { display: grid; grid-template-columns: 42fr 58fr; gap: calc(10 * var(--dp)); }
.d-card { position: relative; aspect-ratio: auto; height: calc((100cqw - calc(32 * var(--dp)) - calc(10 * var(--dp))) * 0.5); padding: calc(14 * var(--dp)); border-radius: calc(20 * var(--dp)); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.d-sales { background: linear-gradient(135deg, var(--teal), #1390B7); }
.d-omzet { background: #142C69; }
.d-row { display: flex; justify-content: space-between; align-items: flex-start; }
.d-ico { display: grid; place-items: center; width: calc(26 * var(--dp)); height: calc(26 * var(--dp)); border-radius: 50%; background: #142C69; }
.d-ico svg { width: calc(12 * var(--dp)); fill: var(--paper); }
.d-badge { padding: calc(1 * var(--dp)) calc(7 * var(--dp)); border-radius: 99px; background: #D4F97A; color: #1E5B09; font-size: calc(9 * var(--dp)); font-weight: 800; line-height: calc(11 * var(--dp)); white-space: nowrap; }
.d-switch { display: flex; padding: calc(2 * var(--dp)); border-radius: 99px; background: rgb(255 255 255 / 0.14); font-size: calc(10 * var(--dp)); font-weight: 700; }
.d-switch i { padding: calc(3 * var(--dp)) calc(8 * var(--dp)); border-radius: 99px; font-style: normal; color: rgb(255 255 255 / 0.75); }
.d-switch .on { background: var(--paper); color: #142C69; }
.d-foot { display: grid; gap: calc(3 * var(--dp)); }
.d-lbl { font-size: calc(13 * var(--dp)); font-weight: 500; opacity: 0.85; }
.d-num { font-size: calc(20 * var(--dp)); font-weight: 700; white-space: nowrap; }
.d-num small { font-size: calc(11 * var(--dp)); font-weight: 400; opacity: 0.6; }
.d-more { margin-top: calc(4 * var(--dp)); text-align: right; font-size: calc(11 * var(--dp)); font-weight: 700; }
.d-range { font-size: calc(11 * var(--dp)); opacity: 0.55; }
.d-status { display: grid; grid-template-columns: repeat(4, 1fr); padding: calc(14 * var(--dp)) calc(8 * var(--dp)); border-radius: calc(20 * var(--dp)); background: linear-gradient(90deg, var(--teal), #53B514); color: var(--paper); text-align: center; }
.d-status p { display: grid; gap: calc(4 * var(--dp)); }
.d-status p + p { border-left: 1px solid rgb(255 255 255 / 0.25); }
.d-status span { font-size: calc(11.5 * var(--dp)); font-weight: 600; }
.d-status b { font-size: calc(16.5 * var(--dp)); font-weight: 600; }
.d-status small { font-size: calc(9 * var(--dp)); opacity: 0.7; }
.d-btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--dp)); }
.d-btns span { padding: calc(11 * var(--dp)) 0; border-radius: 99px; background: var(--teal); color: var(--paper); text-align: center; font-size: calc(12.5 * var(--dp)); font-weight: 700; }

/* footer: sampul belakang */
.foot { position: relative; z-index: 1; margin-top: 8px; padding: var(--s7) var(--s4) var(--s5); background: var(--teal-deep); color: var(--paper); display: grid; gap: var(--s1); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--teal-deep); -webkit-mask: var(--zig) 0 0 / 140px 8px repeat-x; mask: var(--zig) 0 0 / 140px 8px repeat-x; }
.foot .brand { color: var(--paper); margin-bottom: var(--s2); }
.foot .wordmark .dot { color: var(--wash); }
.foot .hand { font-family: var(--font); font-size: 20px; line-height: 28px; }
.foot .small { font-size: 14px; text-align: center; margin-top: var(--s4); }
.foot .links { margin-top: var(--s2); display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; }
.foot a { color: var(--paper); }
.foot .links a { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; }
.foot .links img { width: 24px; height: 24px; flex: none; }
.foot :focus-visible { outline-color: var(--paper); }

/* bar CTA melayang */
.cta-bar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 10; padding: var(--s2) var(--s4) var(--s3); background: var(--paper); border-top: 2px dashed var(--margin); display: grid; gap: var(--s1); }
.cta-bar p { font-size: 13px; font-weight: 600; text-align: center; line-height: 20px; }
.cta-bar .key { min-height: 44px; font-size: 16px; }

/* demo: sampul buku (teal-deep), perangkat ditempel selotip */
.demo { position: relative; z-index: 1; margin-top: 8px; padding: var(--s7) var(--s4) var(--s7); background: var(--teal-deep); color: var(--paper); }
.demo::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--teal-deep); -webkit-mask: var(--zig) 0 0 / 140px 8px repeat-x; mask: var(--zig) 0 0 / 140px 8px repeat-x; }
.demo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--teal-deep); -webkit-mask: var(--zig-down) 0 0 / 140px 8px repeat-x; mask: var(--zig-down) 0 0 / 140px 8px repeat-x; }
.demo h2 { line-height: 36px; }
.demo .sub { color: var(--paper); margin-bottom: var(--s5); } /* jarak ke solatip di atas perangkat */
.demo :focus-visible { outline-color: var(--paper); }
#demo-root { margin-top: var(--s3); }


.device { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--wa-bg); }
.chat-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--paper); border-bottom: 1px solid var(--line); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.chat-name { font-weight: 700; font-size: 15px; }
.chat-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.chat-status { font-size: 12px; color: var(--ink-2); }
.chat-body { flex: 1; overflow-y: auto; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); scroll-behavior: smooth; }
.bubble { max-width: 82%; padding: 8px 12px 6px; border-radius: 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.bubble p { white-space: pre-wrap; }
.bubble time { display: block; text-align: right; font-size: 11px; color: var(--ink-2); }
.bubble.in { align-self: flex-start; background: var(--wa-in); border-bottom-left-radius: 4px; }
.proof { display: grid; justify-items: center; gap: 2px; margin-bottom: var(--s2); padding: var(--s3) var(--s4); border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); text-align: center; }
.proof i { width: 28px; height: 28px; border-radius: 50%; background: #16A34A; color: var(--paper); display: grid; place-items: center; font-style: normal; font-weight: 800; }
.proof b { font-size: 13px; color: #15803D; }
.proof strong { font-size: 20px; margin-bottom: var(--s1); }
.proof dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); width: 100%; margin: 0; font-size: 12px; text-align: left; }
.proof dt { color: var(--ink-2); }
.proof dd { margin: 0; text-align: right; font-weight: 600; }
.bubble.typing { display: flex; gap: 4px; padding: 12px 14px; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: typing 1s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: 150ms; }
.bubble.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.bubble.out { align-self: flex-end; background: var(--wa-out); border-bottom-right-radius: 4px; }

.panel { position: relative; display: flex; flex-direction: column; flex: 0 0 60%; min-height: 0; border-top: 1px solid var(--line); background: var(--paper); }
.grab { flex: none; width: 30px; height: 3px; margin: 6px auto; border-radius: 2px; background: #CBD5E1; }
.panel[hidden] { display: none; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s1) var(--s4) var(--s3); }
.round-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--teal); color: var(--paper); display: grid; place-items: center; cursor: pointer; }

.kb { flex: none; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: var(--s2); }
.toolbar { display: flex; align-items: center; justify-content: space-around; padding: var(--s1) var(--s1); }
.toolbar button { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; color: var(--ink); cursor: pointer; }
.toolbar button:disabled { cursor: default; opacity: 1; color: var(--ink); }
.toolbar button.locked { opacity: 0.35; cursor: default; } /* demo berurutan: fitur lain terkunci sampai gilirannya */
.toolbar .sep { width: 1px; height: 24px; background: var(--ink); }

/* demo: isi panel, penutup skenario */
.p-title { text-align: center; color: var(--teal-deep); font-size: 13px; font-weight: 700; margin: var(--s3) 0 var(--s2); }
.p-label { color: var(--ink-2); font-size: 11px; font-weight: 700; margin: 0 0 var(--s1); }
.field { background: var(--key); border-radius: 8px; padding: 9px 10px; min-height: 36px; font-size: 13px; line-height: 18px; color: #1E293B; }

/* states: hover hanya di perangkat yang punya hover; press = scale kecil (transform saja) */
button, .cta { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.cta:active, .round-btn:active, .play:active, .speed:active, .prow button:active, .tbar button:active, .abtn:active, .confirm button:active, .channels button:active, .pays button:active, .toolbar button:active { transform: scale(0.97); }
@media (hover: hover) {
  .cta:hover, .round-btn:hover, .play:hover, .prow button:hover:not(:disabled) { opacity: 0.88; }
  .top-link:hover { color: var(--ink); }
  .toolbar button:hover:not(:disabled) { background: var(--paper-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* demo: override untuk sampul teal dan perangkat bertempel */
.device { position: relative; display: flex; flex-direction: column; height: clamp(420px, calc(100svh - 185px), 640px); overflow: visible; border: 0; border-radius: 16px; background: var(--paper); box-shadow: 0 16px 28px -16px var(--ink); color: var(--ink); }
.device .tape { top: -12px; z-index: 3; }
.chat { border-radius: 16px 16px 0 0; overflow: hidden; }
.kb { border-radius: 0 0 16px 16px; }
.device :focus-visible { outline-color: var(--teal); }

/* kontras: teks putih memakai teal-deep (5,4:1), bukan teal terang (2,9:1) */
.avatar, .round-btn, .prow button { background: var(--teal-deep); }

/* lingkaran harga digambar saat masuk layar (hanya browser yang mendukung scroll-driven animation) */
@supports (animation-timeline: view()) {
  .stamp { animation: slap linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  .ring { animation: ink linear both; animation-timeline: view(); animation-range: entry 15% cover 40%; }
}

@keyframes slap { from { transform: scale(1.7) rotate(-10deg); opacity: 0.2; } to { transform: scale(1) rotate(8deg); opacity: 1; } }

/* layar sempit: selip testimoni tanpa offset/miring supaya tidak terjepit */
@media (max-width: 380px) {
  .quote:nth-of-type(2), .quote:nth-of-type(3) { margin-left: 0; margin-right: 0; }
  .quote { transform: none; }
}

/* demo: panel bergaya app, composer chat, panduan tangan + tooltip */
.field[data-f] { cursor: pointer; }
.field[data-ph]:empty::before { content: attr(data-ph); color: var(--ink-2); }
.field + .field, .p-title + .field { margin-top: var(--s2); }
.field.typing-on::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--teal); vertical-align: text-bottom; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.composer { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--wa-bg); }
.draft { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 6px var(--s3); border-radius: 20px; background: var(--paper); font-size: 13px; line-height: 17px; white-space: pre-line; }
.draft:empty::before { content: attr(data-ph); color: var(--ink-2); }
.send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--teal-deep); color: var(--paper); display: grid; place-items: center; cursor: pointer; }
.guide { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; border-radius: 16px; }
.guide[hidden] { display: none; }
.g-tip { position: absolute; left: 0; top: 0; width: max-content; max-width: 260px; padding: 8px 12px; border-radius: 12px; background: #1E293B; color: #fff; font-size: 13px; line-height: 17px; font-weight: 600; transition: transform 250ms var(--ease); }
.g-tip::after { content: ""; position: absolute; left: var(--ax, 50%); margin-left: -7px; border: 7px solid transparent; }
.g-tip.up::after { top: 100%; border-top-color: #1E293B; border-bottom-width: 0; }
.g-tip.down::after { bottom: 100%; border-bottom-color: #1E293B; border-top-width: 0; }
/* tooltip cerita: kepala maskot + efek denyut/melayang supaya terlihat. `translate`/`rotate` terpisah dari `transform` yang dipakai JS untuk posisi */
.g-story { display: flex; align-items: center; gap: var(--s2); max-width: 280px; background: var(--teal-deep); animation: story-ping 1.8s ease-out infinite, story-float 2.4s ease-in-out infinite; }
.g-story[hidden] { display: none; }
.g-story::before { content: ""; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--paper) url("assets/sellby_cat_wave_hd.webp") -11px 4px / 62px auto no-repeat; animation: story-wiggle 2.4s ease-in-out infinite; }
@keyframes story-ping { 0% { box-shadow: 0 0 0 0 rgba(14, 116, 144, 0.4); } 70%, 100% { box-shadow: 0 0 0 7px rgba(14, 116, 144, 0); } }
@keyframes story-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes story-wiggle { 0%, 75%, 100% { rotate: 0deg; } 82% { rotate: -12deg; } 90% { rotate: 12deg; } 96% { rotate: -6deg; } }
.g-story.up::after { border-top-color: var(--teal-deep); }
.g-story.down::after { border-bottom-color: var(--teal-deep); }
.g-hand { position: absolute; left: 0; top: 0; width: 32px; height: 32px; transition: transform 250ms var(--ease), opacity var(--dur); }
.g-hand.off { opacity: 0; }
.g-hand svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.35)); animation: tap 1.4s ease-in-out infinite; }
@keyframes tap { 0%, 55%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-5px); } 40% { transform: translateY(2px) scale(0.94); } }
.guide-target { outline: 2px solid var(--teal); outline-offset: 2px; }
.toolbar button.guide-target { outline-offset: -2px; }

/* demo: panel meniru app asli (PanelShell): grab bar di atas, judul + tombol bulat di dasar tepat di atas toolbar */
.p-head { flex: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border-top: 1px solid var(--line); }
.p-head .round-btn:disabled { background: var(--teal-deep); opacity: 0.4; cursor: default; }
.p-text { text-align: center; line-height: 1.25; }
.p-text strong { display: block; color: var(--teal-deep); font-size: 14px; font-weight: 600; }
.p-text span { display: block; font-size: 11px; color: var(--shade); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pills { display: flex; gap: 6px; margin-bottom: var(--s2); }
.pills span { flex: 1; text-align: center; padding: 6px 2px; border-radius: 16px; background: var(--key); color: var(--shade); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pills.s span:first-child { flex: 1.6; }
.pills .on { background: var(--teal-deep); color: var(--paper); }
.srow { display: flex; gap: 6px; margin-bottom: var(--s2); }
.srow .field { flex: 1; min-height: 32px; padding: 7px 10px; }
.filter { display: flex; align-items: center; white-space: nowrap; padding: 0 10px; border-radius: 8px; background: var(--key); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.filter::after { content: "▾"; margin-left: 4px; }
.empty { text-align: center; color: #94A3B8; font-size: 12px; font-style: italic; padding: var(--s3) 0; }
.card { padding: 10px 14px; border: 1.1px solid #CBD5E1; border-radius: 16px; background: var(--paper); }
.c-top { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--shade); }
.c-top span { flex: 1; }
.card em { font-style: normal; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.b-wa { background: #ECFCCB; color: #4D7C0F; }
.b-pending { background: #FFF3E0; color: #C2410C; }
.b-lunas { background: #ECFCCB; color: #4D7C0F; }
.c-main { display: flex; align-items: flex-end; gap: var(--s2); margin-top: 2px; }
.c-main > div { flex: 1; min-width: 0; }
.c-main strong { display: block; font-size: 16px; }
.c-main span { display: block; font-size: 11px; color: var(--shade); }
.c-main > b { color: var(--teal-deep); font-size: 15px; }
.dash { border: 0; border-top: 1px dashed #CBD5E1; margin: 6px 0; }
.o-act { display: flex; gap: 6px; }
.abtn { flex: 1; min-height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--paper); font: inherit; font-size: 12px; font-weight: 700; }
.abtn.red { background: var(--red); }
.abtn.slate { background: var(--ink-2); }
.abtn.teal { background: var(--teal-deep); }
.abtn.lime { background: var(--lime); color: var(--ink); cursor: pointer; }
.abtn.yellow { background: #FACC15; color: var(--ink); cursor: pointer; }
.channels { display: flex; justify-content: center; gap: 10px; }
.channels button { width: 40px; height: 40px; padding: 6px; border-radius: 50%; border: 1.2px solid #CBD5E1; background: var(--paper); cursor: pointer; filter: grayscale(1); }
.channels button[aria-pressed="true"] { border: 2.5px solid var(--teal); filter: none; }
.channels img { width: 100%; height: 100%; }
.pays { display: flex; justify-content: center; gap: 10px; }
.pays button { width: 44px; height: 44px; padding: 8px; border-radius: 50%; border: 1.2px solid #CBD5E1; background: var(--paper); cursor: pointer; }
.pays button[aria-pressed="true"] { border: 2.5px solid var(--teal); }
.pays img { width: 100%; height: 100%; object-fit: contain; }
.prow { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.prow > div { flex: 1; min-width: 0; }
.prow strong, .prow b { display: block; font-size: 12px; }
.prow b { color: var(--teal-deep); }
.prow button { min-height: 36px; padding: 0 var(--s4); border: 0; border-radius: 16px; color: var(--paper); font-size: 12px; font-weight: 700; cursor: pointer; }
.irow { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); padding: 8px 12px; border-radius: 10px; background: #FEF9C3; font-size: 12px; font-weight: 700; }
button.sugg { display: flex; justify-content: space-between; gap: var(--s2); width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #CBD5E1; border-radius: 10px; background: var(--paper-2); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.sugg span { color: var(--shade); }
button.irow { width: 100%; border: 0; font: inherit; font-size: 12px; font-weight: 700; text-align: left; color: inherit; cursor: pointer; }
.irow b { color: var(--teal-deep); }
.sum { margin-top: var(--s2); padding: 8px 12px; border-radius: 10px; background: #F1F5F9; font-size: 11px; }
.sum p { display: flex; justify-content: space-between; gap: var(--s2); }
.sum p + p { margin-top: 3px; }
.sum .t { padding-top: 3px; border-top: 1px solid #CBD5E1; font-weight: 700; color: var(--teal-deep); }
.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s2); }
.tbar { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding: 8px 14px; border-radius: 10px; background: var(--teal-deep); color: var(--paper); }
.tbar > div { flex: 1; }
.tbar span { display: block; font-size: 10px; }
.tbar strong { font-size: 15px; }
.tbar button { min-height: 40px; padding: 0 var(--s4); border: 0; border-radius: 16px; background: var(--lime); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tbar button:disabled { opacity: 0.5; cursor: default; }
.scrim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0 22px; background: rgba(0, 0, 0, 0.45); }
.confirm { width: 100%; padding: 16px; border-radius: 18px; background: var(--paper); text-align: center; }
.confirm i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); font: 700 12px/1 var(--font); font-style: normal; }
.confirm h4 { margin: 6px 0 4px; font-size: 15px; }
.confirm p { margin-bottom: 10px; font-size: 12px; color: var(--shade); }
.confirm div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm button { min-height: 40px; border: 0; border-radius: 16px; background: var(--key); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 700; }
.confirm .lime { background: var(--lime); color: var(--ink); cursor: pointer; }

/* pop-up "Coming Soon": dialog bawaan browser (fokus, Esc, dan backdrop sudah diurus) */
.soon { width: min(320px, calc(100% - 2 * var(--s4))); padding: var(--s5); border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 16px 28px -12px var(--ink); }
.soon::backdrop { background: rgba(15, 23, 42, 0.55); }
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; } /* pop-up terbuka: halaman tidak bisa digulir, gutter menjaga layout tidak melompat */
.soon img { width: 96px; height: auto; margin: 0 auto var(--s3); }
.soon h2 { font-size: 22px; line-height: 28px; margin-bottom: var(--s4); }
.soon :focus-visible { outline-color: var(--teal); }
.done p { margin-bottom: var(--s4); font-size: 15px; color: var(--ink-2); }
.done .key { width: 100%; }
.done [hidden] { display: none; }
.done .again { display: block; margin: var(--s2) auto 0; min-height: 44px; padding: 0 var(--s4); background: none; border: 0; font: inherit; font-weight: 600; color: var(--teal-deep); text-decoration: underline; cursor: pointer; }