/* Retro — poster, stiker, pola kotak-kotak, garis tebal yang membulat */
.fam-retro { --bw: 2px; --card: color-mix(in oklab, var(--bg) 55%, #fff); }
.fam-retro .display { font-weight: 400; line-height: 1.04; }
.fam-retro .h1, .fam-retro .h2 { font-weight: 400; }
.fam-retro .h2 { text-shadow: 2px 2px 0 var(--accent); }
.fam-retro .display { text-shadow: 3px 3px 0 var(--accent); }
.fam-retro .display em, .fam-retro .h2 em { font-style: normal; color: var(--primary-text); }
.fam-retro .eyebrow { padding: .35rem .85rem; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); letter-spacing: .06em; font-weight: 800; transform: rotate(-2deg); }
.fam-retro .btn { border: var(--bw) solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; }
.fam-retro .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.fam-retro .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.fam-retro .btn--ghost { --btn-bg: var(--card); }
.fam-retro .icon-btn { border: var(--bw) solid var(--ink); border-radius: 999px; }

/* header berbentuk tiket */
.fam-retro .hdr { padding: 10px 0 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.fam-retro .hdr__in { position: relative; min-height: 62px; padding-inline: 14px 10px; border: var(--bw) solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.fam-retro .hdr__in::before, .fam-retro .hdr__in::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 999px; background: var(--bg); border: var(--bw) solid var(--ink); }
.fam-retro .hdr__in::before { left: -9px; clip-path: inset(0 0 0 50%); }
.fam-retro .hdr__in::after { right: -9px; clip-path: inset(0 50% 0 0); }
.fam-retro .hdr .mnav { margin: 10px var(--gutter) 0; border: var(--bw) solid var(--ink); border-radius: 18px; }
.fam-retro .brand__mark { border: var(--bw) solid var(--ink); border-radius: 999px; }
.fam-retro .brand__name { font-family: var(--font-head), cursive; font-weight: 400; font-size: 1.2rem; }
.fam-retro .nav__a.is-active::after { height: 3px; border-radius: 3px; }

.fam-retro .hero--poster .eyebrow { background: var(--accent); color: var(--on-accent); }

/* kotak-kotak pada teks berjalan */
.fam-retro .marquee { border-block: 0; padding-block: 14px; background: var(--primary); color: var(--on-primary); position: relative; }
.fam-retro .marquee::before, .fam-retro .marquee::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: repeating-conic-gradient(var(--ink) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; }
.fam-retro .marquee::before { top: 0; }
.fam-retro .marquee::after { bottom: 0; }
.fam-retro .marquee__item { font-family: var(--font-head), cursive; font-weight: 400; font-size: 1.15rem; }
.fam-retro .marquee__item::after { content: "★"; color: currentColor; }

.fam-retro .badge { border: var(--bw) solid var(--ink); background: var(--primary); color: var(--on-primary); transform: rotate(-4deg); }

.fam-retro .feat, .fam-retro .tcard, .fam-retro .step, .fam-retro .cinfo { border: var(--bw) solid var(--ink); border-radius: var(--r-lg); background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.fam-retro .feat:nth-child(odd) { transform: rotate(-.6deg); }
.fam-retro .feat:nth-child(even) { transform: rotate(.6deg); }
.fam-retro .feat__ic { border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.fam-retro .step__n { border: var(--bw) solid var(--ink); font-family: var(--font-head), cursive; font-size: 1.3rem; }
.fam-retro .stats { border: var(--bw) solid var(--ink); background: var(--ink); gap: var(--bw); border-radius: var(--r-lg); }
.fam-retro .stat__v { font-family: var(--font-head), cursive; font-weight: 400; }
.fam-retro .sec--steps, .fam-retro .sec--testimonials { background: var(--tint-2); }
.fam-retro .cat { border: var(--bw) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.fam-retro .cta { border: var(--bw) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--accent); color: var(--on-accent); }
.fam-retro .cta::after, .fam-retro .cta .cta__bg { display: none; }
.fam-retro .cta .lead { color: color-mix(in oklab, var(--on-accent) 80%, var(--accent)); }
.fam-retro .cta .btn--light { --btn-bg: var(--ink); --btn-ink: var(--bg); }
.fam-retro .cta .h2 { text-shadow: 2px 2px 0 var(--card); }
.fam-retro .faq { border-top: var(--bw) solid var(--ink); }
.fam-retro .faq__i { border-bottom: var(--bw) dashed var(--ink); }
.fam-retro .chip { border: var(--bw) solid var(--ink); font-weight: 700; }
.fam-retro .chip.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--ink); }
.fam-retro .input, .fam-retro .select, .fam-retro .textarea, .fam-retro .qty, .fam-retro .opt__v span { border: var(--bw) solid var(--ink); }
.fam-retro .gitem { border: var(--bw) solid var(--ink); border-radius: var(--r); }
.fam-retro .wa-float { border: var(--bw) solid #111; box-shadow: 3px 3px 0 #111; }
.fam-retro .ftr--card .ftr__panel { background: var(--ink); color: var(--bg); --muted: color-mix(in oklab, var(--bg) 62%, var(--ink)); --line: color-mix(in oklab, var(--bg) 18%, var(--ink)); }
.fam-retro .ftr--card .ftr__links a { color: color-mix(in oklab, var(--bg) 86%, var(--ink)); }
.fam-retro .ftr--card .brand__name { color: var(--bg); }
.fam-retro .ftr--card .socials a { border-color: color-mix(in oklab, var(--bg) 30%, var(--ink)); }
.fam-retro .ftr--card .ftr__cta { border: var(--bw) solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.fam-retro .phead--band { background: var(--accent); color: var(--on-accent); border-block: var(--bw) solid var(--ink); }
.fam-retro .phead--band::after { background: var(--primary); border: var(--bw) solid var(--ink); }
.fam-retro .phead--band .h1 { text-shadow: 3px 3px 0 color-mix(in oklab, var(--ink) 30%, transparent); }