/* Nota — kertas struk kasir di atas meja berwarna: huruf mesin ketik, garis putus-putus, cap merah */
.fam-nota {
  --paper: #fffdf7; --paper-ink: #1c1b19;
  --card: var(--paper);
  background-image: radial-gradient(color-mix(in oklab, var(--ink) 10%, transparent) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.fam-nota .display, .fam-nota .h1, .fam-nota .h2 { text-transform: uppercase; letter-spacing: -.03em; }
.fam-nota .display em, .fam-nota .h1 em, .fam-nota .h2 em { font-style: normal; background: var(--primary); color: var(--on-primary); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fam-nota .eyebrow { padding: 3px 8px; border: 2px solid currentColor; font-family: var(--font-head), monospace; letter-spacing: .06em; color: var(--ink); }
.fam-nota .lead { color: color-mix(in oklab, var(--ink) 78%, var(--bg)); }
.fam-nota .brand__mark { border-radius: 0; }

.fam-nota .btn { border-radius: 0; border: 2px solid var(--paper-ink); font-family: var(--font-head), monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; box-shadow: 3px 3px 0 var(--paper-ink); }
.fam-nota .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--paper-ink); }
.fam-nota .btn--ghost { --btn-bg: var(--paper); --btn-ink: var(--paper-ink); }
.fam-nota .btn--light { --btn-bg: var(--paper); --btn-ink: var(--paper-ink); }
.fam-nota .input, .fam-nota .select, .fam-nota .textarea, .fam-nota .catbtn, .fam-nota .qty, .fam-nota .opt__v span { border-radius: 0; border: 2px solid var(--line-strong); }
.fam-nota .badge { border-radius: 0; font-family: var(--font-head), monospace; text-transform: uppercase; }
.fam-nota .icon-btn { border-radius: 0; }
.fam-nota .link-arrow { font-family: var(--font-head), monospace; text-transform: uppercase; }

/* kartu produk: potongan struk */
.pcard--receipt { --s: 7px; padding: 12px 12px calc(14px + var(--s)); border-radius: 0; background: var(--paper); color: var(--paper-ink); --ink: var(--paper-ink); --muted: #5d5a53; --line: rgb(0 0 0 / .14); --line-strong: rgb(0 0 0 / .3); --surface-2: #ece7d9;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--s)) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--s)) no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--s)) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--s)) no-repeat; }
.pcard--receipt:hover { transform: translateY(-3px); }
.pcard--receipt { transition: transform .2s ease; }
.pcard--receipt .pcard__media { aspect-ratio: 1; border-radius: 0; }
.pcard--receipt .pcard__media img { filter: saturate(.85) contrast(1.05); }
.pcard--receipt .pcard__body { padding: .7rem 0 0; gap: .2rem; }
.pcard--receipt .pcard__cat { font-family: var(--font-head), monospace; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.pcard--receipt .pcard__name { font-family: var(--font-head), monospace; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(.92rem, .88rem + .25vw, 1.05rem); }
.pcard--receipt .pcard__foot { padding-top: .5rem; border-top: 2px dashed var(--line-strong); }
.pcard--receipt .price__now { font-family: var(--font-head), monospace; font-weight: 700; letter-spacing: -.02em; }
.pcard--receipt .pcard__add, .pcard--receipt .pcard__go { border-radius: 0; background: var(--paper-ink); color: var(--paper); }
.pcard--receipt .badge { background: var(--primary); color: var(--on-primary); }
@media (max-width: 559px) { .pcard--receipt .pcard__add { box-shadow: none; } }

/* blok isi: struk */
.fam-nota .feat, .fam-nota .tcard, .fam-nota .step, .fam-nota .cinfo, .fam-nota .fstrip__i, .fam-nota .pd__box, .fam-nota .faq-wrap > .faq, .fam-nota .stat {
  --s: 7px; border: 0; border-radius: 0; background: var(--paper); color: var(--paper-ink); --ink: var(--paper-ink); --muted: #5d5a53; --line: rgb(0 0 0 / .14); --line-strong: rgb(0 0 0 / .3); --bg: var(--paper);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--s)) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--s)) no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--s)) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--s)) no-repeat;
  padding-bottom: calc(clamp(20px, 2.5vw, 28px) + var(--s));
}
.fam-nota .faq-wrap > .faq { padding: 6px 20px calc(16px + var(--s)); }
.fam-nota .fstrip__i { padding-bottom: calc(12px + var(--s)); }
.fam-nota .feat__t, .fam-nota .step__t, .fam-nota .faq__q { font-family: var(--font-head), monospace; text-transform: uppercase; letter-spacing: -.01em; }
.fam-nota .feat__ic, .fam-nota .step__n { border-radius: 0; background: var(--paper-ink); color: var(--paper); }
.fam-nota .faq__i { border-bottom: 2px dashed var(--line-strong); }
.fam-nota .faq__i:last-child { border-bottom: 0; }
.fam-nota .faq { border-top: 0; }
.fam-nota .stats { border: 0; gap: 14px; background: none; overflow: visible; }
.fam-nota .stat__v { font-family: var(--font-head), monospace; color: var(--primary); }
.fam-nota .tcard::before { content: "*** ULASAN ***"; font-family: var(--font-head), monospace; font-weight: 700; font-size: .78rem; color: var(--muted); }
.fam-nota .avatar { border-radius: 0; background: var(--paper-ink); color: var(--paper); }
.fam-nota .cat { border-radius: 0; }
.fam-nota .cat__name { font-family: var(--font-head), monospace; text-transform: uppercase; }
.fam-nota .about__img, .fam-nota .gitem, .fam-nota .pd__main, .fam-nota .ahero__img, .fam-nota .feats-split__img, .fam-nota .map { border-radius: 0; }
.fam-nota .about__img, .fam-nota .ahero__img, .fam-nota .pd__main { padding: 10px; background: #fff; box-shadow: 0 16px 30px -18px rgb(0 0 0 / .5); }
.fam-nota .cta { border-radius: 0; background: var(--paper-ink); }
.fam-nota .cta .h2 em { background: var(--accent); color: var(--on-accent); }
.fam-nota .sec-head .h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }

/* cap "LUNAS" di struk hero */
.fam-nota .rc__photo::after { content: "LUNAS"; position: absolute; right: 14px; bottom: 6px; padding: 4px 12px; border: 3px solid var(--primary); border-radius: 6px; color: var(--primary); font-family: var(--font-head), monospace; font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; transform: rotate(-12deg); opacity: .78; pointer-events: none; }

/* kepala halaman: potongan struk di tengah */
.phead--receipt .phead__in { --s: 7px; max-width: 760px; padding: 22px clamp(16px, 4vw, 30px) calc(22px + var(--s)); background: var(--paper); color: var(--paper-ink); --ink: var(--paper-ink); --muted: #5d5a53; text-align: center; justify-items: center;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--s)) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--s)) no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--s)) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--s)) no-repeat; }
.phead--receipt .crumbs { justify-content: center; font-family: var(--font-head), monospace; text-transform: uppercase; font-size: .8rem; }
.phead--receipt .h1 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); }
.phead--receipt .phead__in::after { content: ""; width: 100%; height: 0; border-top: 2px dashed rgb(0 0 0 / .3); }

/* galeri: foto instan dijepit */
.fam-nota.page-gallery .gmason .gitem { padding: 8px 8px 26px; background: #fff; border-radius: 0; box-shadow: 0 10px 22px -12px rgb(0 0 0 / .5); }
.fam-nota.page-gallery .gmason .gitem:nth-child(odd) { transform: rotate(-1.5deg); }
.fam-nota.page-gallery .gmason .gitem:nth-child(even) { transform: rotate(1.5deg); }