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

/* hero */
.dian-qh-copy { position: absolute; left: 5.80%; top: 13.18%; width: 37.081cqw; color: #2b2d2a; }
.dian-qh-eyebrow { position: relative; padding-bottom: 0.897cqw; font-size: 0.801cqw; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: #3f4a3f; }
.dian-qh-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.990cqw; height: 1.5px; background: #6f8a72; }
.dian-qh-heading { margin: 0.478cqw 0 0.718cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 4.067cqw; font-weight: 700; line-height: .98; letter-spacing: -.035em; color: #1c1f1c; }
.dian-qh-heading span { color: #4b6650; }
.dian-qh-hl { margin: 0 0 0.718cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 2.093cqw; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: #2f4736; }
.dian-qh-hl span { color: #7d9a80; }
.dian-qh-copy .p1, .dian-qh-copy .p2 { width: 34.390cqw; margin: 0 0 0.538cqw; font-size: 1.089cqw; line-height: 1.24; color: #3f433b; }
.dian-qh-cards, .dian-qh-cards li { margin: 0; padding: 0; list-style: none; }
.dian-qh-cards li { position: absolute; top: 18.28%; width: 15.909cqw; display: flex; flex-direction: column; align-items: center; text-align: center; color: #2f4736; }
.dian-qh-cards .wl { left: 45.45%; }
.dian-qh-cards .oem { left: 62.56%; }
.dian-qh-cards .odm { left: 79.61%; }
.dian-qh-cards .ico { display: grid; place-items: center; width: 3.349cqw; height: 3.349cqw; border-radius: 50%; background: #6f8a72; color: #fff; }
.dian-qh-cards .oem .ico { background: #3f5b47; }
.dian-qh-cards .ico svg { width: 52%; height: 52%; }
.dian-qh-cards h2 { position: relative; margin: 0.478cqw 0 0; padding: 0 0.598cqw 0.718cqw; width: auto; white-space: nowrap; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.041cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3f5b47; }
.dian-qh-cards h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(63, 91, 71, .3); }
.dian-qh-cards .from { margin-top: 0.359cqw; font-size: 1.226cqw; line-height: 1.2; color: #3f5b47; }
.dian-qh-cards strong { margin-top: 0.120cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 4.545cqw; font-weight: 800; line-height: .9; letter-spacing: -.045em; color: #2f4736; }
.dian-qh-cards .wl strong { color: #2b3a2d; }
.dian-qh-cards .pcs { margin-top: 0.120cqw; font-size: 1.495cqw; font-weight: 700; letter-spacing: .05em; color: #3f5b47; }
.dian-qh-note { position: absolute; left: 5.80%; top: 70.88%; width: 30.861cqw; height: 9.35%; box-sizing: border-box; display: flex; align-items: center; gap: 1.555cqw; padding: 0 1.555cqw; border-radius: 1.435cqw; background: rgba(214, 224, 206, .86); color: #3f5b47; }
.dian-qh-note .ico { display: grid; flex: none; width: 2.751cqw; }
.dian-qh-note .ico svg { width: 100%; height: auto; stroke-width: 1.2; }
.dian-qh-note p { margin: 0; font-size: 1.041cqw; line-height: 1.3; color: #3f433b; }
.dian-qh-btn { position: absolute; left: 5.80%; top: 82.04%; width: 27.273cqw; height: 7.44%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.435cqw; border-radius: 999px; background: #4b6650; color: #fff; font-size: 1.340cqw; font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-qh-btn:hover { background: #3f5b47; color: #fff; transform: translateY(-1px); }
.dian-qh-btn svg { width: 1.316cqw; height: 1.316cqw; flex: none; }
.dian-qh-link { position: absolute; left: 6.22%; top: 91.18%; padding-bottom: 0.299cqw; border-bottom: 1px solid rgba(43, 45, 42, .75); font-size: 0.981cqw; color: #2b2d2a; text-decoration: none; }
.dian-qh-link:hover { color: #4b6650; border-color: #4b6650; }

/* closing */
.dian-qc-copy { position: absolute; left: 7.30%; top: 10.63%; width: 40.670cqw; color: #eef3e6; }
.dian-qc-eyebrow { position: relative; padding-bottom: 0.897cqw; font-size: 0.801cqw; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: rgba(238, 243, 230, .92); }
.dian-qc-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.230cqw; height: 1.5px; background: rgba(238, 243, 230, .65); }
.dian-qc-heading { margin: 1.555cqw 0 1.316cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.469cqw; font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: #fff; }
.dian-qc-copy p { width: 38.876cqw; margin: 0; font-size: 1.232cqw; line-height: 1.32; color: rgba(238, 243, 230, .96); }
.dian-qc-btn { position: absolute; left: 7.30%; top: 65.25%; width: 34.270cqw; height: 8.08%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.555cqw; border-radius: 999px; background: #f6f1e7; color: #1f3a2a; font-size: 1.340cqw; font-weight: 600; text-decoration: none; transition: transform .2s, background .2s; }
.dian-qc-btn:hover { background: #fff; color: #1f3a2a; transform: translateY(-1px); }
.dian-qc-btn svg { width: 1.435cqw; height: 1.435cqw; flex: none; }
.dian-qc-note { position: absolute; left: 7.30%; top: 78.64%; display: flex; align-items: center; gap: 1.316cqw; padding-top: 1.316cqw; color: #eef3e6; }
.dian-qc-note::before { content: ''; position: absolute; left: 0; top: 0; width: 3.230cqw; height: 1.5px; background: rgba(238, 243, 230, .55); }
.dian-qc-note svg { flex: none; width: 3.230cqw; height: 3.230cqw; }
.dian-qc-note p { width: 28.110cqw; margin: 0; padding-left: 1.316cqw; border-left: 1px solid rgba(238, 243, 230, .55); font-size: 0.981cqw; line-height: 1.4; color: rgba(238, 243, 230, .95); }

/* tablet & hp */
@media (max-width: 1180px) {
    .dian-qh-stage, .dian-qc-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5.74vw, 120px) 44px; }
    .dian-qh-stage { background: #f1ede2; }
    .dian-qh-copy, .dian-qh-note, .dian-qh-btn, .dian-qh-link, .dian-qc-copy, .dian-qc-btn, .dian-qc-note { position: static; width: auto; height: auto; }
    .dian-qh-bg, .dian-qc-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-qh-bg { aspect-ratio: 1072 / 821; }
    .dian-qc-bg { aspect-ratio: 972 / 941; }
    .dian-qh-eyebrow, .dian-qc-eyebrow { margin-bottom: 14px; padding-bottom: 14px; font-size: 12px; letter-spacing: .24em; }
    .dian-qh-eyebrow::after, .dian-qc-eyebrow::after { width: 44px; }
    .dian-qh-heading, .dian-qc-heading { margin: 0 0 14px; font-size: clamp(1.9rem, 7.2vw, 3.2rem); line-height: 1.08; }
    .dian-qh-heading br, .dian-qc-heading br, .dian-qh-hl br { display: none; }
    .dian-qh-hl { margin-bottom: 14px; font-size: clamp(1.3rem, 5.2vw, 2rem); }
    .dian-qh-copy .p1, .dian-qh-copy .p2, .dian-qc-copy p { width: auto; margin-bottom: 14px; font-size: 1rem; line-height: 1.55; }
    .dian-qh-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 8px 0 0; }
    .dian-qh-cards li, .dian-qh-cards .wl, .dian-qh-cards .oem, .dian-qh-cards .odm { position: static; width: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: 14px; padding: 16px 20px; border-radius: 20px; background: #fbf9f4; box-shadow: 0 8px 24px rgba(60, 80, 60, .1); text-align: left; }
    .dian-qh-cards .ico { grid-row: 1 / span 2; width: 48px; height: 48px; }
    .dian-qh-cards h2 { grid-column: 2; width: auto; white-space: normal; margin: 0; padding: 0; font-size: .9rem; line-height: 1.25; letter-spacing: .06em; }
    .dian-qh-cards h2::after { display: none; }
    .dian-qh-cards .from { grid-column: 2; margin: 0; font-size: .9rem; }
    .dian-qh-cards strong { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 2.1rem; justify-self: end; white-space: nowrap; }
    .dian-qh-cards .pcs { display: none; }
    .dian-qh-cards strong::after { content: ' pcs'; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
    .dian-qh-note { margin-top: 14px; gap: 14px; padding: 16px 18px; border-radius: 18px; }
    .dian-qh-note .ico { width: 32px; }
    .dian-qh-note p { font-size: .95rem; }
    .dian-qh-btn, .dian-qc-btn { justify-content: space-between; margin-top: 14px; padding: 17px 22px; border-radius: 16px; font-size: .98rem; font-weight: 600; }
    .dian-qh-btn svg, .dian-qc-btn svg { width: 18px; height: 18px; }
    .dian-qh-link { display: inline-block; align-self: flex-start; margin-top: 18px; font-size: .95rem; }
    .dian-qc-note { margin-top: 22px; gap: 16px; padding-top: 18px; }
    .dian-qc-note svg { width: 34px; height: 34px; }
    .dian-qc-note p { width: auto; padding-left: 16px; font-size: .92rem; }
}

@media (min-width: 700px) and (max-width: 1180px) {
    .dian-qh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dian-qh-cards li, .dian-qh-cards .wl, .dian-qh-cards .oem, .dian-qh-cards .odm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 14px; }
    .dian-qh-cards strong { font-size: 3.4rem; }
}