/* ===== Halaman Cara Maklon ===== */
.dian-mh, .dian-mp, .dian-mt, .dian-mc { overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-mh { background: #f1ede2; }
.dian-mp { background: #e6ebe0; }
.dian-mt { background: #f1efe6; }
.dian-mc { background: #43654f; }
.dian-mh-stage, .dian-mp-stage, .dian-mt-stage, .dian-mc-stage { position: relative; container-type: inline-size; aspect-ratio: 1671 / 941; }
.dian-mh-picture, .dian-mp-picture, .dian-mt-picture, .dian-mc-picture { display: contents; }
.dian-mh-bg, .dian-mp-bg, .dian-mt-bg, .dian-mc-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-mh br, .dian-mp br, .dian-mt br, .dian-mc br { display: block; content: ''; }
.dian-mh svg, .dian-mc svg { flex: none; }
.dian-mt-photo { display: none; }

/* ---------- 1. hero ---------- */
.dian-mh-copy { position: absolute; left: 5.80%; top: 12.54%; width: 38.300cqw; color: #2b2d2a; }
.dian-mh-eyebrow { position: relative; padding-bottom: 0.958cqw; font-size: 0.814cqw; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; color: #3f4a3f; }
.dian-mh-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.992cqw; height: 1.5px; background: #6f8a72; }
.dian-mh-heading { margin: 1.077cqw 0 1.077cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 4.309cqw; font-weight: 700; line-height: .98; letter-spacing: -.035em; color: #1c1f1c; }
.dian-mh-heading span { color: #4b6650; }
.dian-mh-copy .p1 { width: 37.104cqw; margin: 0 0 0.838cqw; font-size: 1.173cqw; line-height: 1.24; color: #353932; }
.dian-mh-copy .p2 { width: 37.104cqw; margin: 0; font-size: 1.089cqw; line-height: 1.28; color: #4a4e45; }
.dian-mh-btn { position: absolute; left: 5.80%; top: 69.50%; width: 24.78%; height: 7.12%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.317cqw; border-radius: 999px; background: #4b6650; color: #fff; font-size: 1.376cqw; font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-mh-btn:hover { background: #3f5b47; color: #fff; transform: translateY(-1px); }
.dian-mh-btn svg { width: 1.317cqw; height: 1.317cqw; }
.dian-mh-note { position: absolute; left: 5.80%; top: 79.70%; width: 33.513cqw; margin: 0; padding-top: 0.838cqw; font-size: 0.862cqw; line-height: 1.34; color: #4a4e45; }
.dian-mh-note::before { content: ''; position: absolute; left: 0; top: 0; width: 2.274cqw; height: 1.5px; background: #8a9c87; }

/* ---------- 2. persiapan ---------- */
.dian-mp-copy { position: absolute; left: 5.27%; top: 10.20%; width: 33.513cqw; color: #2b2d2a; }
.dian-mp-eyebrow { position: relative; padding-bottom: 0.898cqw; font-size: 0.802cqw; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #3f4a3f; }
.dian-mp-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.873cqw; height: 1.5px; background: #6f8a72; }
.dian-mp-heading { margin: 1.197cqw 0 1.197cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.471cqw; font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: #1c1f1c; }
.dian-mp-copy p { margin: 0 0 0.718cqw; font-size: 0.993cqw; line-height: 1.34; color: #3f433b; }
.dian-mp-cards, .dian-mp-cards li { margin: 0; padding: 0; list-style: none; }
.dian-mp-cards li { position: absolute; box-sizing: border-box; padding: 1.077cqw 1.197cqw 0.958cqw; border-radius: 1.197cqw; background: rgba(251, 249, 244, .93); box-shadow: 0 0.598cqw 1.676cqw rgba(40, 60, 45, .16); color: #2b2d2a; }
.dian-mp-cards .no { display: block; margin-bottom: 0.479cqw; font-size: 1.376cqw; font-weight: 300; line-height: 1; color: #6f8a72; }
.dian-mp-cards h3 { margin: 0 0 0.419cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.981cqw; font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: #2b2d2a; }
.dian-mp-cards p { margin: 0; font-size: 0.778cqw; line-height: 1.38; color: #4c5047; }
.dian-mp-cards .c1 { left: 38.30%; top: 7.44%; width: 17.953cqw; }
.dian-mp-cards .c2 { left: 57.57%; top: 5.10%; width: 17.355cqw; }
.dian-mp-cards .c3 { left: 76.30%; top: 9.14%; width: 17.953cqw; }
.dian-mp-cards .c4 { left: 62.24%; top: 70.78%; width: 17.953cqw; }
.dian-mp-cards .c5 { left: 81.39%; top: 66.95%; width: 16.756cqw; }
.dian-mp-call { position: absolute; left: 5.27%; top: 76.09%; width: 37.104cqw; box-sizing: border-box; display: flex; gap: 1.077cqw; padding: 1.317cqw 1.556cqw; border-radius: 1.317cqw; background: rgba(251, 249, 244, .94); box-shadow: 0 0.598cqw 1.676cqw rgba(40, 60, 45, .14); }
.dian-mp-call .ico { flex: none; display: grid; place-items: center; width: 3.232cqw; height: 3.232cqw; border-radius: 50%; background: #6f8a72; color: #fff; }
.dian-mp-call h3 { margin: 0 0 0.359cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.197cqw; font-weight: 800; letter-spacing: -.01em; color: #2f4736; }
.dian-mp-call p { margin: 0; font-size: 0.862cqw; line-height: 1.4; color: #4c5047; }

/* ---------- 3. tahapan ---------- */
.dian-mt-intro { position: absolute; left: 4.85%; top: 4.89%; width: 59.844cqw; color: #2b2d2a; }
.dian-mt-eyebrow { position: relative; padding-bottom: 0.838cqw; font-size: 0.802cqw; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: #3f4a3f; }
.dian-mt-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.873cqw; height: 1.5px; background: #6f8a72; }
.dian-mt-heading { margin: 1.915cqw 0 0.838cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.232cqw; font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: #1c1f1c; }
.dian-mt-heading span { color: #4b6650; }
.dian-mt-intro .p1 { width: 57.451cqw; margin: 0 0 0.598cqw; font-size: 1.113cqw; line-height: 1.34; color: #3f433b; }
.dian-mt-intro .p2 { margin: 0; font-size: 0.934cqw; color: #4a4e45; }
.dian-mt-steps, .dian-mt-steps li { display: contents; margin: 0; padding: 0; list-style: none; }
.dian-mt-step { position: absolute; top: 69.08%; box-sizing: border-box; width: 14.123cqw; color: #2b2d2a; }
.dian-mt-step .no { display: block; position: relative; padding-bottom: 0.718cqw; font-size: 2.035cqw; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: #2b2d2a; }
.dian-mt-step .no::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.154cqw; height: 2px; background: #6f8a72; }
.dian-mt-step h3 { margin: 1.077cqw 0 0.479cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.113cqw; font-weight: 700; line-height: 1.2; color: #2b2d2a; }
.dian-mt-step .lead { margin: 0 0 0.598cqw; font-size: 0.969cqw; line-height: 1.3; color: #3f433b; }
.dian-mt-step .txt { margin: 0; font-size: 0.862cqw; line-height: 1.34; color: #5a5e55; }
.dian-mt-steps .s1 .dian-mt-step { left: 3.11%; }
.dian-mt-steps .s2 .dian-mt-step { left: 19.87%; }
.dian-mt-steps .s3 .dian-mt-step { left: 35.97%; }
.dian-mt-steps .s4 .dian-mt-step { left: 51.83%; }
.dian-mt-steps .s5 .dian-mt-step { left: 67.86%; }
.dian-mt-steps .s6 .dian-mt-step { left: 83.78%; }

/* ---------- 4. cta ---------- */
.dian-mc-copy { position: absolute; left: 5.63%; top: 9.78%; width: 44.285cqw; color: #eef3e6; }
.dian-mc-eyebrow { position: relative; padding-bottom: 0.898cqw; font-size: 0.802cqw; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; color: rgba(238, 243, 230, .92); }
.dian-mc-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.351cqw; height: 1.5px; background: rgba(238, 243, 230, .7); }
.dian-mc-heading { margin: 1.556cqw 0 1.317cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.710cqw; font-weight: 600; line-height: 1.06; letter-spacing: -.03em; color: #eef3e6; text-shadow: 0 2px 18px rgba(30, 50, 38, .25); }
.dian-mc-heading span { color: #cfe3c0; }
.dian-mc-copy p { width: 39.497cqw; margin: 0; font-size: 1.227cqw; line-height: 1.3; color: rgba(238, 243, 230, .96); }
.dian-mc-btn { position: absolute; left: 5.57%; top: 67.38%; width: 26.45%; height: 7.65%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.317cqw; border-radius: 999px; background: #f6f1e7; color: #1f3a2a; font-size: 1.376cqw; font-weight: 600; text-decoration: none; transition: transform .2s, background .2s; }
.dian-mc-btn:hover { background: #fff; color: #1f3a2a; transform: translateY(-1px); }
.dian-mc-btn svg { width: 1.436cqw; height: 1.436cqw; }
.dian-mc-link { position: absolute; left: 5.63%; top: 77.15%; padding-bottom: 0.299cqw; border-bottom: 1px solid rgba(238, 243, 230, .85); font-size: 1.041cqw; color: #eef3e6; text-decoration: none; }
.dian-mc-link:hover { color: #fff; border-color: #fff; }
.dian-mc-note { position: absolute; left: 5.63%; top: 87.78%; display: flex; align-items: center; gap: 1.436cqw; padding-top: 1.077cqw; color: #eef3e6; }
.dian-mc-note::before { content: ''; position: absolute; left: 0; top: 0; width: 2.274cqw; height: 1.5px; background: rgba(238, 243, 230, .55); }
.dian-mc-note svg { width: 2.633cqw; height: 2.633cqw; }
.dian-mc-note p { width: 21.544cqw; margin: 0; padding-left: 1.317cqw; border-left: 1px solid rgba(238, 243, 230, .55); font-size: 0.981cqw; line-height: 1.38; color: rgba(238, 243, 230, .95); }

/* ---------- tablet & hp ---------- */
@media (max-width: 1180px) {
    .dian-mh-stage, .dian-mp-stage, .dian-mt-stage, .dian-mc-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5.74vw, 120px) 44px; }
    .dian-mh-copy, .dian-mh-btn, .dian-mh-note, .dian-mp-copy, .dian-mp-call, .dian-mt-intro, .dian-mc-copy, .dian-mc-btn, .dian-mc-link, .dian-mc-note { position: static; width: auto; height: auto; }
    .dian-mh-bg, .dian-mp-bg, .dian-mc-bg { position: relative; order: 9; display: block; width: calc(100% + 2 * clamp(20px, 5.74vw, 120px)); height: auto; margin: 26px calc(-1 * clamp(20px, 5.74vw, 120px)) -44px; max-height: 520px; }
    .dian-mh-bg { aspect-ratio: 1150 / 791; }
    .dian-mp-bg { aspect-ratio: 1072 / 881; }
    .dian-mc-bg { aspect-ratio: 972 / 941; }
    .dian-mt-bg { display: none; }
    .dian-mh-stage { background: #f1ede2; }
    .dian-mp-stage { background: #e6ebe0; }
    .dian-mt-stage { background: #f1efe6; }
    .dian-mh-eyebrow, .dian-mp-eyebrow, .dian-mt-eyebrow, .dian-mc-eyebrow { margin-bottom: 14px; padding-bottom: 14px; font-size: 12px; letter-spacing: .24em; }
    .dian-mh-eyebrow::after, .dian-mp-eyebrow::after, .dian-mt-eyebrow::after, .dian-mc-eyebrow::after { width: 44px; }
    .dian-mh-heading, .dian-mp-heading, .dian-mt-heading, .dian-mc-heading { margin: 0 0 14px; font-size: clamp(1.9rem, 7.2vw, 3.2rem); line-height: 1.08; }
    .dian-mh-heading br, .dian-mp-heading br, .dian-mt-heading br, .dian-mc-heading br { display: none; }
    .dian-mh-copy p, .dian-mp-copy p, .dian-mt-intro p, .dian-mc-copy p, .dian-mh-copy .p1, .dian-mh-copy .p2, .dian-mt-intro .p1, .dian-mt-intro .p2 { width: auto; margin-bottom: 14px; font-size: 1rem; line-height: 1.55; }
    .dian-mh-btn, .dian-mc-btn { justify-content: space-between; margin-top: 8px; padding: 17px 22px; border-radius: 16px; font-size: .98rem; font-weight: 600; }
    .dian-mh-btn svg, .dian-mc-btn svg { width: 18px; height: 18px; }
    .dian-mh-note { margin-top: 16px; padding-top: 14px; font-size: .92rem; line-height: 1.55; }
    .dian-mh-note br { display: none; }
    .dian-mc-link { display: inline-block; align-self: flex-start; margin-top: 18px; font-size: .95rem; }
    .dian-mc-note { margin-top: 22px; gap: 16px; padding-top: 18px; }
    .dian-mc-note svg { width: 34px; height: 34px; }
    .dian-mc-note p { width: auto; padding-left: 16px; font-size: .92rem; }

    .dian-mp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 20px 0 0; padding: 0; }
    .dian-mp-cards li, .dian-mp-cards .c1, .dian-mp-cards .c2, .dian-mp-cards .c3, .dian-mp-cards .c4, .dian-mp-cards .c5 { position: static; width: auto; padding: 18px 20px; border-radius: 20px; background: #fbf9f4; box-shadow: 0 8px 24px rgba(60, 80, 60, .1); }
    .dian-mp-cards .no { font-size: 1.5rem; }
    .dian-mp-cards h3 { font-size: 1.1rem; }
    .dian-mp-cards p { font-size: .94rem; line-height: 1.55; }
    .dian-mp-call { display: flex; margin-top: 18px; padding: 20px; border-radius: 20px; background: #fbf9f4; }
    .dian-mp-call .ico { width: 48px; height: 48px; }
    .dian-mp-call h3 { font-size: 1.1rem; }
    .dian-mp-call p { font-size: .94rem; line-height: 1.55; }

    .dian-mt-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 22px 0 0; padding: 0; }
    .dian-mt-steps li { display: block; overflow: hidden; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-mt-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    .dian-mt-step, .dian-mt-steps .s1 .dian-mt-step, .dian-mt-steps .s2 .dian-mt-step, .dian-mt-steps .s3 .dian-mt-step, .dian-mt-steps .s4 .dian-mt-step, .dian-mt-steps .s5 .dian-mt-step, .dian-mt-steps .s6 .dian-mt-step { position: static; width: auto; padding: 18px 22px 24px; }
    .dian-mt-step .no { padding-bottom: 10px; font-size: 1.8rem; }
    .dian-mt-step .no::after { width: 32px; }
    .dian-mt-step h3 { margin: 14px 0 6px; font-size: 1.15rem; }
    .dian-mt-step .lead { font-size: 1rem; line-height: 1.5; }
    .dian-mt-step .txt { font-size: .94rem; line-height: 1.55; }
}

@media (min-width: 700px) and (max-width: 1180px) {
    .dian-mp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dian-mt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}