/* Piksel — layar game 8-bit: huruf piksel, bingkai bertangga, kotak dialog RPG */
.fam-piksel {
  --px: 4px; --pxc: var(--ink);
  --pixel: 0 calc(var(--px) * -1) 0 var(--pxc), 0 var(--px) 0 var(--pxc), calc(var(--px) * -1) 0 0 var(--pxc), var(--px) 0 0 var(--pxc);
  --card: color-mix(in oklab, var(--bg) 88%, var(--ink));
  background-image: linear-gradient(color-mix(in oklab, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
.fam-piksel .display { text-transform: uppercase; line-height: 1.15; letter-spacing: 0; }
.fam-piksel .h1, .fam-piksel .h2 { text-transform: uppercase; line-height: 1.2; letter-spacing: 0; }
.fam-piksel .h2 { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.2rem); }
.fam-piksel .h3, .fam-piksel .feat__t, .fam-piksel .step__t { font-family: var(--font-head), monospace; font-weight: 400; text-transform: uppercase; font-size: 1rem; line-height: 1.35; }
.fam-piksel .display em, .fam-piksel .h1 em, .fam-piksel .h2 em { font-style: normal; color: var(--accent-text); }
.fam-piksel .eyebrow { padding: 4px 8px; background: var(--primary); color: var(--on-primary); font-family: var(--font-head), monospace; font-weight: 400; letter-spacing: .02em; }
.fam-piksel .eyebrow::before { content: "★"; }
.fam-piksel .brand__mark { border-radius: 0; font-family: var(--font-head), monospace; font-weight: 400; }
.fam-piksel .brand__name { font-family: var(--font-head), monospace; text-transform: uppercase; font-weight: 400; }

.fam-piksel .btn { border: 0; border-radius: 0; margin: var(--px); box-shadow: var(--pixel), inset 0 -4px 0 rgb(0 0 0 / .22); text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.fam-piksel .btn:hover { transform: translateY(-2px); }
.fam-piksel .btn:active { transform: translateY(2px); box-shadow: var(--pixel), inset 0 4px 0 rgb(0 0 0 / .22); }
.fam-piksel .btn--ghost { --btn-bg: var(--card); }
.fam-piksel .btn-row { gap: calc(.75rem + var(--px)); }
.fam-piksel .icon-btn, .fam-piksel .input, .fam-piksel .select, .fam-piksel .textarea, .fam-piksel .catbtn, .fam-piksel .qty, .fam-piksel .opt__v span { border: 0; border-radius: 0; background: var(--card); box-shadow: var(--pixel); }
.fam-piksel .opt__v input:checked + span { background: var(--primary); color: var(--on-primary); }
.fam-piksel .badge { border-radius: 0; font-family: var(--font-head), monospace; font-weight: 400; text-transform: uppercase; }
.fam-piksel .link-arrow { font-family: var(--font-head), monospace; text-transform: uppercase; font-weight: 400; font-size: .85rem; }
.fam-piksel .chip { border-radius: 0; }

/* kartu produk: slot inventaris */
.pcard--slot { padding: 8px; border-radius: 0; margin: var(--px); background: var(--card); box-shadow: var(--pixel); }
.pcard--slot .pcard__media { aspect-ratio: 1; border-radius: 0; background: repeating-conic-gradient(color-mix(in oklab, var(--ink) 8%, transparent) 0 25%, transparent 0 50%) 0 0 / 16px 16px, var(--surface-2); }
.pcard--slot .pcard__media img { image-rendering: auto; }
.pcard--slot:hover .pcard__media img { transform: scale(1.06); }
.pcard--slot .badge { background: var(--accent); color: var(--on-accent); }
.pcard--slot .pcard__body { padding: .7rem .2rem 0; }
.pcard--slot .pcard__cat { font-family: var(--font-head), monospace; font-weight: 400; font-size: .72rem; color: var(--accent-text); }
.pcard--slot .pcard__name { font-family: var(--font-body), sans-serif; font-weight: 800; letter-spacing: -.01em; }
.pcard--slot .price__now { font-family: var(--font-head), monospace; font-weight: 400; color: var(--primary-text); }
.pcard--slot .price__now::before { content: "◆ "; color: var(--accent-text); font-size: .8em; }
.pcard--slot .pcard__cta { margin: .7rem 0 0; border-radius: 0; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22); text-transform: uppercase; }
.pcard--slot .pcard__cta--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
.pgrid:has(> .pcard--slot) { gap: 18px; }
@media (min-width: 720px) { .pgrid:has(> .pcard--slot) { gap: 22px; } }

/* kotak isi: dialog RPG */
.fam-piksel .feat, .fam-piksel .step, .fam-piksel .cinfo, .fam-piksel .fstrip__i, .fam-piksel .pd__box, .fam-piksel .map { border: 0; border-radius: 0; margin: var(--px); background: var(--card); box-shadow: var(--pixel); }
.fam-piksel .tcard { position: relative; border: 0; border-radius: 0; margin: var(--px); background: var(--ink); color: var(--bg); box-shadow: 0 0 0 3px var(--bg), 0 0 0 7px var(--ink); --muted: color-mix(in oklab, var(--bg) 72%, var(--ink)); }
.fam-piksel .tcard::after { content: "▼"; position: absolute; right: 14px; bottom: 10px; font-size: .72rem; animation: g4blink 1s steps(1) infinite; }
.fam-piksel .tcard .avatar { border-radius: 0; background: var(--primary); color: var(--on-primary); font-family: var(--font-head), monospace; }
.fam-piksel .twall .tcard { margin-bottom: 26px; }
.fam-piksel .feat__ic, .fam-piksel .step__n { border-radius: 0; }
.fam-piksel .step__n { font-family: var(--font-head), monospace; font-weight: 400; }
.fam-piksel .stats { border: 0; gap: 14px; background: none; overflow: visible; border-radius: 0; }
.fam-piksel .stat { margin: var(--px); box-shadow: var(--pixel); background: var(--card); }
.fam-piksel .stat__v { font-family: var(--font-head), monospace; font-weight: 400; }
.fam-piksel .faq { gap: 12px; border: 0; }
.fam-piksel .faq__i { margin: var(--px); padding-inline: 16px; border: 0; background: var(--card); box-shadow: var(--pixel); }
.fam-piksel .faq__q .ic { color: var(--accent-text); }
.fam-piksel .crail__img { border-radius: 0; box-shadow: var(--pixel); border: 0; }
.fam-piksel .cat { border-radius: 0; margin: var(--px); box-shadow: var(--pixel); }
.fam-piksel .cat__name { font-family: var(--font-head), monospace; font-weight: 400; text-transform: uppercase; font-size: .95rem; }
.fam-piksel .gitem, .fam-piksel .about__img, .fam-piksel .pd__main, .fam-piksel .promo, .fam-piksel .about-banner, .fam-piksel .feats-split__img { border-radius: 0; }
.fam-piksel .about-banner { box-shadow: var(--pixel); margin: var(--px); }
.fam-piksel .cta { border-radius: 0; margin: var(--px); box-shadow: var(--pixel), 0 0 0 10px var(--primary); }
.fam-piksel .cta .h2 { text-shadow: 3px 3px 0 var(--primary); }
.fam-piksel .promo--banner { box-shadow: var(--pixel); margin: var(--px); }
.fam-piksel .wa-float { border-radius: 0; box-shadow: 0 -4px 0 #0d5d2c, 0 4px 0 #0d5d2c, -4px 0 0 #0d5d2c, 4px 0 0 #0d5d2c; }

/* kepala halaman: papan level */
.phead--level .phead__in { gap: .7rem; }
.phead--level .h1 { text-transform: uppercase; font-size: clamp(1.7rem, 1.1rem + 3vw, 3.2rem); line-height: 1.15; }
.phead--level .h1::before { content: "Level · "; display: block; width: fit-content; margin-bottom: .6rem; padding: 4px 8px; background: var(--accent); color: var(--on-accent); font-size: .8rem; }
.phead--level .phead__in::after { content: ""; display: block; width: min(100%, 320px); height: 14px; margin-top: .4rem; background: repeating-linear-gradient(90deg, var(--primary) 0 12px, transparent 12px 15px) 3px 3px / calc(100% - 6px) 8px no-repeat, var(--ink); }
.fam-piksel .crumbs { font-family: var(--font-head), monospace; font-size: .76rem; text-transform: uppercase; }

.fam-piksel.page-gallery .gmason .gitem { box-shadow: var(--pixel); margin: var(--px) var(--px) 18px; }
.fam-piksel .btn--block { width: calc(100% - var(--px) * 2); }
.fam-piksel .go .btn--ghost { --btn-bg: transparent; --btn-ink: var(--bg); box-shadow: 0 -4px 0 var(--bg), 0 4px 0 var(--bg), -4px 0 0 var(--bg), 4px 0 0 var(--bg); }