/* Komik — panel bergaris tebal, titik halftone, balon kata, ledakan efek suara */
.fam-komik {
  --bw: 3px; --card: #fff;
  --halftone: radial-gradient(circle, color-mix(in oklab, var(--ink) 16%, transparent) 1.2px, transparent 1.6px);
}
.fam-komik.is-dark { --card: color-mix(in oklab, var(--bg) 85%, #fff); }
.fam-komik .display, .fam-komik .h1, .fam-komik .h2 { text-transform: uppercase; letter-spacing: .02em; }
.fam-komik .display { line-height: .98; }
.fam-komik .h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); text-shadow: 3px 3px 0 var(--accent); }
.fam-komik .h3, .fam-komik .feat__t, .fam-komik .step__t { font-family: var(--font-head), sans-serif; font-weight: 400; letter-spacing: .03em; font-size: 1.35rem; }
.fam-komik .display em, .fam-komik .h1 em, .fam-komik .h2 em { font-style: normal; color: var(--primary-text); }
.fam-komik .eyebrow { padding: .35rem .7rem; border: var(--bw) solid var(--ink); background: #fff8c4; color: #111; font-weight: 800; letter-spacing: .04em; box-shadow: 3px 3px 0 var(--ink); }
.fam-komik .sec-head--center .eyebrow { margin-inline: auto; }

.fam-komik .btn { border: var(--bw) solid var(--ink); border-radius: var(--r-sm); box-shadow: 4px 4px 0 var(--ink); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.fam-komik .btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 6px 6px 0 var(--ink); }
.fam-komik .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.fam-komik .btn--ghost { --btn-bg: var(--card); --btn-ink: #111; }
.fam-komik .btn--light { --btn-bg: var(--accent); --btn-ink: var(--on-accent); }
.fam-komik .icon-btn, .fam-komik .input, .fam-komik .select, .fam-komik .textarea, .fam-komik .catbtn, .fam-komik .qty, .fam-komik .opt__v span { border: var(--bw) solid var(--ink); }
.fam-komik .badge { border: 2px solid var(--ink); background: var(--accent); color: var(--on-accent); transform: rotate(-3deg); font-weight: 800; }

/* kartu produk: panel komik, harga dalam ledakan */
.pcard--panel { overflow: visible; border: var(--bw) solid var(--ink); border-radius: var(--r-xs); background: var(--card); color: #141414; box-shadow: 5px 5px 0 var(--ink); --muted: #4b4b4b; transition: transform .15s ease, box-shadow .15s ease; }
.pcard--panel:hover { transform: translate(-2px, -2px) rotate(-.5deg); box-shadow: 7px 7px 0 var(--ink); }
.pcard--panel .pcard__media { aspect-ratio: 1; border-radius: 0; border-bottom: var(--bw) solid var(--ink); }
.pcard--panel .pcard__media::after { content: ""; position: absolute; inset: 0; background: var(--halftone) 0 0 / 7px 7px; mix-blend-mode: multiply; opacity: .7; pointer-events: none; }
.pcard--panel .pcard__tag { right: 4px; bottom: 4px; left: auto; z-index: 3; display: grid; place-items: center; width: 92px; height: 72px; padding: 6px; background: var(--accent); color: var(--on-accent); font-family: var(--font-head), sans-serif; font-weight: 400; letter-spacing: .02em; font-size: .92rem; text-align: center; white-space: normal; line-height: 1; clip-path: polygon(50% 0, 61% 18%, 82% 8%, 78% 32%, 100% 38%, 84% 54%, 98% 74%, 74% 74%, 70% 98%, 52% 82%, 32% 100%, 28% 76%, 4% 80%, 16% 58%, 0 40%, 22% 32%, 16% 8%, 38% 18%); transform: rotate(-6deg); }
.pcard--panel .pcard__tag small { font-family: var(--font-body), sans-serif; font-size: .72rem; font-weight: 800; }
.pcard--panel .pcard__body { padding: 1.1rem .8rem .9rem; }
.pcard--panel .pcard__name { font-family: var(--font-head), sans-serif; font-weight: 400; letter-spacing: .03em; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); text-transform: uppercase; }
.pcard--panel .pcard__add, .pcard--panel .pcard__go { border: 2px solid var(--ink); border-radius: 50%; }
.pcard--panel .pcard__go { background: var(--accent); color: var(--on-accent); }
@container (max-width: 170px) { .pcard--panel .pcard__tag { width: 76px; height: 60px; font-size: .78rem; } }
.pgrid:has(> .pcard--panel) { gap: 22px 18px; }

/* blok isi: panel */
.fam-komik .feat, .fam-komik .tcard, .fam-komik .step, .fam-komik .cinfo, .fam-komik .pd__box, .fam-komik .fstrip__i { border: var(--bw) solid var(--ink); border-radius: var(--r-xs); background: var(--card); color: #141414; --muted: #4b4b4b; box-shadow: 5px 5px 0 var(--ink); }
.fam-komik .feat:nth-child(odd) { transform: rotate(-.7deg); }
.fam-komik .feat:nth-child(even) { transform: rotate(.7deg); }
.fam-komik .feat__ic { border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.fam-komik .step__n { border: 2px solid var(--ink); font-family: var(--font-head), sans-serif; font-weight: 400; font-size: 1.4rem; }
.fam-komik .sec--features, .fam-komik .sec--steps { background: var(--halftone) 0 0 / 12px 12px, color-mix(in oklab, var(--accent) 22%, var(--bg)); border-block: var(--bw) solid var(--ink); }
.fam-komik .stats { border: var(--bw) solid var(--ink); gap: var(--bw); background: var(--ink); }
.fam-komik .stat__v { font-family: var(--font-head), sans-serif; font-weight: 400; }
.fam-komik .faq { gap: 12px; border: 0; }
.fam-komik .faq__i { padding-inline: 16px; border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--card); color: #141414; --muted: #4b4b4b; }
.fam-komik .faq__i[open] { box-shadow: 4px 4px 0 var(--ink); }
.fam-komik .cat { border: var(--bw) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.fam-komik .cat__name { font-family: var(--font-head), sans-serif; font-weight: 400; letter-spacing: .03em; font-size: 1.3rem; text-transform: uppercase; }
.fam-komik .about-banner { border: var(--bw) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #fff8c4; color: #141414; --muted: #3b3a33; }
.fam-komik .about-banner .about__img { border-left: var(--bw) solid var(--ink); }
.fam-komik .cta { border: var(--bw) solid var(--ink); box-shadow: 7px 7px 0 var(--ink); background: var(--primary); }
.fam-komik .cta::after { background: var(--halftone) 0 0 / 9px 9px, linear-gradient(100deg, color-mix(in oklab, var(--primary) 92%, #000), color-mix(in oklab, var(--primary) 45%, transparent)); }
.fam-komik .cta .h2 { text-shadow: 3px 3px 0 var(--ink); }
.fam-komik .marquee { border-block: var(--bw) solid var(--ink); background: var(--accent); color: var(--on-accent); }
.fam-komik .marquee__item { font-family: var(--font-head), sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; }
.fam-komik .marquee__item::after { content: "★"; color: var(--primary); }
.fam-komik .gitem, .fam-komik .about__img, .fam-komik .pd__main, .fam-komik .pd__shot, .fam-komik .map { border: var(--bw) solid var(--ink); border-radius: var(--r-xs); }
.fam-komik .avatar { border: 2px solid var(--ink); background: var(--accent); color: var(--on-accent); }

/* kepala halaman: ledakan di belakang judul */
.phead--burst { position: relative; overflow: hidden; margin-bottom: clamp(28px, 4vw, 56px); border-bottom: var(--bw) solid var(--ink); background: var(--halftone) 0 0 / 11px 11px, color-mix(in oklab, var(--accent) 30%, var(--bg)); }
.phead--burst::before { content: ""; position: absolute; right: -60px; top: 50%; width: clamp(200px, 34vw, 420px); aspect-ratio: 1; translate: 0 -50%; background: var(--primary); clip-path: polygon(50% 0, 61% 18%, 82% 8%, 78% 32%, 100% 38%, 84% 54%, 98% 74%, 74% 74%, 70% 98%, 52% 82%, 32% 100%, 28% 76%, 4% 80%, 16% 58%, 0 40%, 22% 32%, 16% 8%, 38% 18%); opacity: .9; }
.phead--burst .h1 { width: fit-content; max-width: 100%; padding: .2em .4em; border: var(--bw) solid var(--ink); background: #fff; color: #111; box-shadow: 6px 6px 0 var(--ink); text-transform: uppercase; transform: rotate(-1.5deg); }
.phead--burst .lead { color: color-mix(in oklab, var(--ink) 80%, var(--bg)); }

.fam-komik.page-gallery .gmason .gitem { box-shadow: 5px 5px 0 var(--ink); }
.fam-komik.page-gallery .gmason .gitem:nth-child(odd) { transform: rotate(-1deg); }