/* Diagonal — semua bidang dipotong miring, foto duotone, huruf ramping kapital */
.fam-diagonal { --cut: clamp(24px, 5vw, 64px); }
.fam-diagonal .display, .fam-diagonal .h1, .fam-diagonal .h2, .fam-diagonal .h3, .fam-diagonal .feat__t, .fam-diagonal .step__t { text-transform: uppercase; letter-spacing: .005em; }
.fam-diagonal .h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); line-height: .95; }
.fam-diagonal .h3, .fam-diagonal .feat__t, .fam-diagonal .step__t { font-family: var(--font-head), sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 1.1; }
.fam-diagonal .display em, .fam-diagonal .h1 em, .fam-diagonal .h2 em { font-style: normal; color: var(--primary-text); }
.fam-diagonal .eyebrow { padding: 4px 12px; background: var(--ink); color: var(--bg); transform: skewX(-12deg); letter-spacing: .14em; }

/* tombol jajaran genjang */
.fam-diagonal .btn { border-radius: 0; transform: skewX(-12deg); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.fam-diagonal .btn > * { transform: skewX(12deg); }
.fam-diagonal .btn:hover { transform: skewX(-12deg) translateY(-2px); }
.fam-diagonal .btn--ghost { border-color: var(--ink); border-width: 2px; }
.fam-diagonal .btn-row { padding-inline: 6px; }
.fam-diagonal .badge { border-radius: 0; transform: skewX(-12deg); background: var(--primary); color: var(--on-primary); text-transform: uppercase; }
.fam-diagonal .icon-btn, .fam-diagonal .input, .fam-diagonal .select, .fam-diagonal .textarea, .fam-diagonal .catbtn, .fam-diagonal .qty, .fam-diagonal .opt__v span { border-radius: 0; }
.fam-diagonal .brand__mark { border-radius: 0; }

/* kartu produk: foto dipotong miring, duotone, berwarna saat disorot */
.pcard--slant { background: transparent; border-radius: 0; }
.pcard--slant .pcard__media { aspect-ratio: 4 / 5; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); background: var(--primary); }
.pcard--slant .pcard__media img { filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; transition: filter .4s ease, transform .5s ease; }
.pcard--slant:hover .pcard__media img, .pcard--slant:focus-within .pcard__media img { filter: none; mix-blend-mode: normal; }
.pcard--slant .pcard__body { padding: .6rem .1rem 0; }
.pcard--slant .pcard__cat { color: var(--primary-text); }
.pcard--slant .pcard__name { font-family: var(--font-head), sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.05; }
.pcard--slant .price__now { display: inline-block; padding: 0 .4rem; background: var(--ink); color: var(--bg); transform: skewX(-12deg); font-family: var(--font-body), sans-serif; font-weight: 800; }
.pcard--slant .pcard__add, .pcard--slant .pcard__go { border-radius: 0; transform: skewX(-12deg); }
.pcard--slant .pcard__go { background: var(--primary); color: var(--on-primary); }
@container (max-width: 160px) { .pcard--slant .price__now { padding: 0 .2rem; } }

/* bagian-bagian miring berselang */
.fam-diagonal .sec--features, .fam-diagonal .sec--stats, .fam-diagonal .sec--faq { margin-block: var(--cut); padding-block: calc(var(--sec-y) + var(--cut) * .5); background: var(--ink); color: var(--bg); clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); --muted: color-mix(in oklab, var(--bg) 70%, var(--ink)); --line: color-mix(in oklab, var(--bg) 20%, var(--ink)); --line-strong: color-mix(in oklab, var(--bg) 34%, var(--ink)); --card: color-mix(in oklab, var(--bg) 8%, var(--ink)); --surface: color-mix(in oklab, var(--bg) 10%, var(--ink)); }
.fam-diagonal .sec--faq { background: var(--primary); color: var(--on-primary); --muted: color-mix(in oklab, var(--on-primary) 94%, var(--primary)); --line: color-mix(in oklab, var(--on-primary) 30%, var(--primary)); --line-strong: color-mix(in oklab, var(--on-primary) 50%, var(--primary)); --primary-text: var(--on-primary); }
.fam-diagonal .sec--faq .link-arrow { color: inherit; }
.fam-diagonal .feat, .fam-diagonal .tcard, .fam-diagonal .step, .fam-diagonal .cinfo, .fam-diagonal .pd__box { border: 0; border-radius: 0; background: var(--card); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.fam-diagonal .sec--features .feat { border-left: 4px solid var(--primary); }
.fam-diagonal .feat__ic, .fam-diagonal .step__n { border-radius: 0; transform: skewX(-12deg); background: var(--primary); color: var(--on-primary); }
.fam-diagonal .stats { border: 0; gap: 2px; background: transparent; }
.fam-diagonal .stat { background: transparent; border-left: 4px solid var(--primary); }
.fam-diagonal .stat__v { color: var(--bg); font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); line-height: .95; }
.fam-diagonal .about-banner { border-radius: 0; background: var(--primary); color: var(--on-primary); --muted: color-mix(in oklab, var(--on-primary) 80%, var(--primary)); --primary-text: var(--on-primary); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut))); }
.fam-diagonal .about-banner .about__img { position: relative; isolation: isolate; background: var(--accent); }
.fam-diagonal .about-banner .about__img img { filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; }
.fam-diagonal .about__img, .fam-diagonal .gitem, .fam-diagonal .pd__main, .fam-diagonal .pd__shot, .fam-diagonal .promo, .fam-diagonal .cat, .fam-diagonal .map { border-radius: 0; }
.fam-diagonal .cat { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.fam-diagonal .gfilm .gitem, .fam-diagonal .ggrid .gitem { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.fam-diagonal .cta { border-radius: 0; clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(28px, 6vw, 80px) + var(--cut) * .6); }
.fam-diagonal .cta::after { background: linear-gradient(100deg, color-mix(in oklab, var(--primary) 90%, #000), color-mix(in oklab, var(--primary) 30%, transparent)); }
.fam-diagonal .cta .cta__bg img { filter: grayscale(1); }
.fam-diagonal .faq__q { text-transform: uppercase; font-weight: 800; letter-spacing: .01em; }
.fam-diagonal .avatar { border-radius: 0; transform: skewX(-12deg); }
.fam-diagonal .tquote__q { text-transform: uppercase; }

/* kepala halaman: pita gelap bertepi miring */
.phead--slant { margin-bottom: clamp(32px, 5vw, 64px); padding-bottom: calc(clamp(32px, 5vw, 64px) + var(--cut)); background: var(--ink); color: var(--bg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); --muted: color-mix(in oklab, var(--bg) 70%, var(--ink)); }
.phead--slant .h1 { font-size: clamp(2.6rem, 1.2rem + 6vw, 6.4rem); line-height: .9; text-transform: uppercase; }
.phead--slant .crumbs a:hover { color: var(--bg); }

/* galeri halaman: potongan miring */
.fam-diagonal.page-gallery .gmason .gitem { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.fam-diagonal .slash__text .eyebrow { margin-left: 6px; }
.fam-diagonal .btn:active { transform: skewX(-12deg) translateY(1px); }