/* Clay — claymorphism: semua elemen terasa empuk, timbul, dan bisa "ditekan" */
.fam-clay {
  --card: color-mix(in oklab, var(--bg) 45%, #fff);
  --clay: 10px 12px 26px -12px color-mix(in oklab, var(--primary) 38%, transparent), -6px -6px 16px -6px rgb(255 255 255 / .85), inset 2px 2px 3px rgb(255 255 255 / .65), inset -3px -4px 8px color-mix(in oklab, var(--ink) 7%, transparent);
  --clay-in: inset 4px 4px 8px color-mix(in oklab, var(--ink) 10%, transparent), inset -4px -4px 8px rgb(255 255 255 / .7);
  background:
    radial-gradient(40vw 40vw at 105% -5%, color-mix(in oklab, var(--accent) 28%, transparent), transparent 70%),
    radial-gradient(36vw 36vw at -10% 40%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 70%),
    var(--bg);
}
.fam-clay.is-dark { --clay: 10px 12px 26px -12px rgb(0 0 0 / .6), inset 2px 2px 3px rgb(255 255 255 / .08); --clay-in: inset 3px 3px 8px rgb(0 0 0 / .4); }
.fam-clay .display { line-height: 1.05; }
.fam-clay .display em, .fam-clay .h1 em, .fam-clay .h2 em { font-style: normal; color: var(--primary-text); background: linear-gradient(transparent 62%, color-mix(in oklab, var(--accent) 55%, transparent) 62% 92%, transparent 92%); padding-inline: .06em; }
.fam-clay .eyebrow { padding: .4rem .85rem; border-radius: 999px; background: var(--card); box-shadow: var(--clay); letter-spacing: .04em; text-transform: none; font-size: .85rem; }

/* tombol timbul */
.fam-clay .btn { border: 0; box-shadow: 0 10px 18px -10px color-mix(in oklab, var(--ink) 45%, transparent), inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -4px 0 rgb(0 0 0 / .12); }
.fam-clay .btn:active { transform: translateY(2px); box-shadow: inset 0 3px 6px rgb(0 0 0 / .18); }
.fam-clay .btn--ghost { --btn-bg: var(--card); }
.fam-clay .icon-btn { border: 0; border-radius: 999px; background: var(--card); box-shadow: var(--clay); }
.fam-clay .brand__mark { border-radius: 14px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .15); }
.fam-clay .input, .fam-clay .select, .fam-clay .textarea, .fam-clay .qty { border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--clay-in); }
.fam-clay .catbtn { border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--clay); }
.fam-clay .opt__v span { border: 0; border-radius: 999px; background: var(--card); box-shadow: var(--clay); }
.fam-clay .opt__v input:checked + span { background: var(--primary); color: var(--on-primary); box-shadow: var(--clay-in); }
.fam-clay .chip { border: 0; box-shadow: var(--clay); background: var(--card); }

/* kartu produk empuk */
.pcard--clay { padding: 10px; border-radius: 30px; background: var(--card); box-shadow: var(--clay); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.pcard--clay:hover { transform: translateY(-4px) rotate(-.6deg); }
.pcard--clay .pcard__media { aspect-ratio: 1; border-radius: 22px; box-shadow: inset 0 0 0 4px var(--card); }
.pcard--clay .badge { border-radius: 999px; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .3); }
.pcard--clay .pcard__body { padding: .8rem .45rem .35rem; }
.pcard--clay .pcard__cat { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pcard--clay .price__now { display: inline-block; padding: .1rem .6rem; border-radius: 999px; background: var(--tint-2); }
.pcard--clay .pcard__add, .pcard--clay .pcard__go { border-radius: 999px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .3), inset 0 -3px 0 rgb(0 0 0 / .15); }
.pcard--clay .pcard__go { background: var(--tint); color: var(--primary-text); }
@container (max-width: 160px) { .pcard--clay .price__now { padding: 0; background: none; } }
@media (min-width: 1080px) { .card-clay .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* blok-blok isi */
.fam-clay .feat, .fam-clay .tcard, .fam-clay .step, .fam-clay .cinfo, .fam-clay .fbento__t, .fam-clay .fstrip__i, .fam-clay .pd__box, .fam-clay .map { border: 0; border-radius: 30px; background: var(--card); box-shadow: var(--clay); }
.fam-clay .feat__ic, .fam-clay .step__n { border-radius: 18px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .4), inset 0 -3px 0 rgb(0 0 0 / .1); }
.fam-clay .step__n { border-radius: 50%; }
.fam-clay .feat:nth-child(3n+2) { background: color-mix(in oklab, var(--accent) 20%, var(--card)); }
.fam-clay .stats { gap: 14px; border: 0; background: none; overflow: visible; }
.fam-clay .stat { border-radius: 26px; background: var(--card); box-shadow: var(--clay); }
.fam-clay .cat { border-radius: 30px; box-shadow: var(--clay); }
.fam-clay .cat::after { background: linear-gradient(180deg, transparent 45%, color-mix(in oklab, var(--primary) 70%, #000)); }
.fam-clay .faq { gap: 12px; border: 0; }
.fam-clay .faq__i { padding-inline: 18px; border: 0; border-radius: 22px; background: var(--card); box-shadow: var(--clay); }
.fam-clay .cta { border-radius: 36px; box-shadow: var(--clay); }
.fam-clay .cta--split { background: var(--card); }
.fam-clay .about__img, .fam-clay .feats-split__img, .fam-clay .ahero__img, .fam-clay .pd__main, .fam-clay .gitem, .fam-clay .promo { border-radius: 30px; }
.fam-clay .gitem { box-shadow: var(--clay); }
.fam-clay .avatar { box-shadow: var(--clay); }

/* kepala halaman: pil besar empuk */
.phead--puffy .phead__in { padding: clamp(22px, 4vw, 44px); border-radius: 36px; background: var(--card); box-shadow: var(--clay); overflow: hidden; }
.phead--puffy .phead__in::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 45%, transparent); filter: blur(2px); z-index: -1; }
.phead--puffy .h1 { max-width: 20ch; }

/* galeri halaman: ubin membulat */
.fam-clay.page-gallery .gmason .gitem { border-radius: 26px; }
.fam-clay .wa-float { box-shadow: 0 12px 24px -10px rgb(37 211 102 / .7), inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -4px 0 rgb(0 0 0 / .15); }