/* ===== Halaman Maklon Makeup & Kosmetik Dekoratif ===== */
.dian-mu { overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #f2ebe3; }
.dian-mu-stage { position: relative; container-type: inline-size; aspect-ratio: 1672 / 941; }
.dian-mu-picture { display: contents; }
.dian-mu-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-mu br { display: block; content: ''; }
.dian-mu svg { flex: none; }
.dian-mu-copy { position: absolute; left: 5.44%; top: 8.71%; width: 59.809cqw; color: #2b2d2a; }
.dian-mu-eyebrow { position: relative; padding-bottom: 0.957cqw; font-size: 0.861cqw; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #3f4a3f; }
.dian-mu-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.110cqw; height: 1.5px; background: #3f5b47; }
.dian-mu-heading { margin: 1.615cqw 0 0.897cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.708cqw; font-weight: 700; line-height: 1.075; letter-spacing: -.008em; color: #0f1418; }
.dian-mu-heading span { color: #2f4a37; }
.dian-mu-copy .p1 { width: 41.567cqw; margin: 0 0 1.017cqw; font-size: 1.256cqw; line-height: 1.37; color: #2b2d2a; }
.dian-mu-copy .p2 { width: 43.660cqw; margin: 0; font-size: 1.256cqw; line-height: 1.36; color: #3f433b; }
.dian-mu-btn { position: absolute; left: 5.44%; top: 72.69%; width: 29.007cqw; height: 7.23%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 2.392cqw; border-radius: 999px; background: #55715a; color: #fff; font-size: 1.316cqw; font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-mu-btn:hover { background: #46604b; color: #fff; transform: translateY(-1px); }
.dian-mu-btn svg { width: 1.435cqw; height: 1.435cqw; }
.dian-mu-note { position: absolute; left: 5.44%; top: 81.93%; width: 33.493cqw; margin: 0; padding-top: 0.598cqw; font-size: 1.029cqw; line-height: 1.4; color: #3f433b; }
.dian-mu-note::before { content: ''; position: absolute; left: 0; top: 0; width: 3.110cqw; height: 1.5px; background: #55715a; }

/* jenis */
.dian-mj { overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #f1f1ea; }
.dian-mj-stage { position: relative; container-type: inline-size; aspect-ratio: 1672 / 1018; }
.dian-mj-picture { display: contents; }
.dian-mj-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-mj br { display: block; content: ''; }
.dian-mj svg { flex: none; }
.dian-mj-photo { display: none; }
.dian-mj-cta { display: none; }
.dian-mj-intro { position: absolute; left: 6.16%; top: 2.55%; width: 65.789cqw; color: #2b2d2a; }
.dian-mj-eyebrow { font-size: 1.017cqw; font-weight: 500; letter-spacing: .035em; text-transform: uppercase; color: #3f4a3f; }
.dian-mj-heading { margin: 0.359cqw 0 0.598cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 2.990cqw; font-weight: 700; line-height: .98; letter-spacing: -.02em; color: #1f2a22; white-space: nowrap; }
.dian-mj-intro p { margin: 0; font-size: 1.136cqw; line-height: 1.316cqw; color: #2f322d; }
.dian-mj-intro .p2 { margin-top: 0.299cqw; }
.dian-mj-grid { position: absolute; inset: 0; }
.dian-mj-card { position: absolute; box-sizing: border-box; color: #2b2d2a; }
.dian-mj-no { position: absolute; width: 3.469cqw; height: 3.469cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); font-size: 1.316cqw; font-weight: 500; }
.dian-mj-card h3 { position: absolute; margin: 0; white-space: nowrap; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 2.093cqw; font-weight: 700; line-height: 2.033cqw; letter-spacing: -.02em; color: #2f4a37; }
.dian-mj-card p { position: absolute; margin: 0; color: #3f433b; }
.dian-mj-card ul { position: absolute; margin: 0; padding: 0 0 0 1.017cqw; list-style: disc; font-size: 0.927cqw; white-space: nowrap; color: #3f433b; }
.dian-mj-card li::marker { color: #8a8f82; }
.dian-mj-card.c1 { left: 1.08%; top: 26.72%; width: 33.313cqw; height: 36.35%; }
.dian-mj-card.c1 .dian-mj-no { left: 0.837cqw; top: 0.299cqw; background: #c9d0c0; }
.dian-mj-card.c1 h3 { left: 5.203cqw; top: 1.196cqw; }
.dian-mj-card.c1 p { left: 2.333cqw; top: 3.708cqw; width: 19.258cqw; font-size: 0.909cqw; line-height: 1.172cqw; }
.dian-mj-card.c1 ul { left: 2.572cqw; top: 9.928cqw; line-height: 1.334cqw; }
.dian-mj-card.c2 { left: 34.81%; top: 26.72%; width: 30.981cqw; height: 36.35%; }
.dian-mj-card.c2 .dian-mj-no { left: 3.050cqw; top: 0.120cqw; background: #d3d4c4; }
.dian-mj-card.c2 h3 { left: 7.416cqw; top: 1.196cqw; }
.dian-mj-card.c2 p { left: 5.084cqw; top: 3.768cqw; width: 18.660cqw; font-size: 0.909cqw; line-height: 1.160cqw; }
.dian-mj-card.c2 ul { left: 5.263cqw; top: 8.553cqw; line-height: 1.328cqw; }
.dian-mj-card.c3 { left: 66.27%; top: 26.72%; width: 32.715cqw; height: 36.35%; }
.dian-mj-card.c3 .dian-mj-no { left: 2.333cqw; top: 0.239cqw; background: #e2cdb7; }
.dian-mj-card.c3 h3 { left: 6.400cqw; top: 1.196cqw; }
.dian-mj-card.c3 p { left: 6.160cqw; top: 3.708cqw; width: 17.464cqw; font-size: 0.909cqw; line-height: 1.196cqw; }
.dian-mj-card.c3 ul { left: 5.203cqw; top: 8.553cqw; line-height: 1.495cqw; }
.dian-mj-card.c4 { left: 1.08%; top: 63.85%; width: 48.565cqw; height: 31.43%; }
.dian-mj-card.c4 .dian-mj-no { left: 1.555cqw; top: 0.000cqw; background: #d6c2ab; }
.dian-mj-card.c4 h3 { left: 6.160cqw; top: 1.017cqw; }
.dian-mj-card.c4 p { left: 4.246cqw; top: 4.545cqw; width: 20.754cqw; font-size: 0.909cqw; line-height: 1.148cqw; }
.dian-mj-card.c4 ul { left: 4.605cqw; top: 8.852cqw; line-height: 1.316cqw; }
.dian-mj-card.c5 { left: 50.24%; top: 63.85%; width: 48.744cqw; height: 31.43%; }
.dian-mj-card.c5 .dian-mj-no { left: -0.419cqw; top: 0.060cqw; background: #c4cdbd; }
.dian-mj-card.c5 h3 { left: 4.007cqw; top: 1.017cqw; }
.dian-mj-card.c5 p { left: 3.589cqw; top: 4.246cqw; width: 18.062cqw; font-size: 0.909cqw; line-height: 1.148cqw; }
.dian-mj-card.c5 ul { left: 4.007cqw; top: 8.612cqw; line-height: 1.280cqw; }
.dian-mj-card.c1::before { content: ''; position: absolute; left: 1.196cqw; top: 2.990cqw; width: 20.634cqw; height: 5.981cqw; background: radial-gradient(ellipse closest-side, rgba(230,221,205,.93) 0, rgba(230,221,205,.93) 60%, rgba(0,0,0,0) 100%); pointer-events: none; }
.dian-mj-card.c1::after { content: ''; position: absolute; left: 1.316cqw; top: 9.569cqw; width: 8.971cqw; height: 7.476cqw; background: radial-gradient(ellipse closest-side, rgba(230,221,205,.93) 0, rgba(230,221,205,.93) 60%, rgba(0,0,0,0) 100%); pointer-events: none; }
.dian-mj-card.c1 > * { z-index: 1; }
.dian-mj-card.c2::before { content: ''; position: absolute; left: 4.665cqw; top: 8.254cqw; width: 8.971cqw; height: 7.057cqw; background: radial-gradient(ellipse closest-side, rgba(251,245,234,.93) 0, rgba(251,245,234,.93) 60%, rgba(0,0,0,0) 100%); pointer-events: none; }
.dian-mj-card.c2 > * { z-index: 1; }
.dian-mj-card.c5::before { content: ''; position: absolute; left: 3.110cqw; top: 3.708cqw; width: 19.139cqw; height: 3.589cqw; background: radial-gradient(ellipse closest-side, rgba(203,191,172,.93) 0, rgba(203,191,172,.93) 60%, rgba(0,0,0,0) 100%); pointer-events: none; }
.dian-mj-card.c5 > * { z-index: 1; }


@media (max-width: 1180px) {
    .dian-mu-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5.74vw, 120px) 44px; background: #f2ebe3; }
    .dian-mu-copy, .dian-mu-btn, .dian-mu-note { position: static; width: auto; height: auto; }
    .dian-mu-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; aspect-ratio: 1032 / 941; max-height: 560px; object-position: right center; }
    .dian-mu-eyebrow { margin-bottom: 14px; padding-bottom: 14px; font-size: 11px; letter-spacing: .14em; }
    .dian-mu-eyebrow::after { width: 44px; }
    .dian-mu-heading { margin: 0 0 14px; font-size: clamp(1.9rem, 7.2vw, 3.2rem); line-height: 1.08; }
    .dian-mu br { display: none; }
    .dian-mu-copy .p1, .dian-mu-copy .p2 { width: auto; margin: 0 0 14px; font-size: 1rem; line-height: 1.55; }
    .dian-mu-btn { justify-content: space-between; margin-top: 8px; padding: 17px 22px; border-radius: 16px; font-size: .98rem; font-weight: 600; }
    .dian-mu-btn svg { width: 18px; height: 18px; }
    .dian-mu-note { margin-top: 16px; padding-top: 14px; font-size: .92rem; line-height: 1.55; }

    .dian-mj-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5.74vw, 120px) 44px; background: #f1f1ea; }
    .dian-mj-intro { position: static; width: auto; }
    .dian-mj-bg { display: none; }
    .dian-mj br { display: none; }
    .dian-mj-eyebrow { font-size: 12px; letter-spacing: .12em; margin-bottom: 12px; }
    .dian-mj-heading { margin: 0 0 14px; font-size: clamp(1.9rem, 7.2vw, 3.2rem); line-height: 1.08; white-space: normal; }
    .dian-mj-intro p, .dian-mj-intro .p2 { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; }
    .dian-mj-grid { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 10px; }
    .dian-mj-card[class] { position: static; width: auto; height: auto; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-mj-card::before, .dian-mj-card::after { display: none !important; }
    .dian-mj-photo { display: block; order: 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
    .dian-mj-card[class] .dian-mj-no { position: static; order: 2; width: 38px; height: 38px; margin: 18px 22px 0; font-size: .95rem; background: #5f7a62; }
    .dian-mj-card[class] h3 { position: static; order: 3; margin: 12px 22px 0; font-size: 1.5rem; line-height: 1.2; }
    .dian-mj-card[class] p { position: static; order: 4; width: auto; margin: 8px 22px 12px; font-size: .95rem; line-height: 1.55; }
    .dian-mj-card[class] ul { position: static; order: 5; margin: 0 22px 22px; padding-left: 20px; font-size: .95rem; line-height: 1.7; white-space: normal; }
    .dian-mj-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 17px 22px; border-radius: 16px; background: #55715a; color: #fff; font-size: .98rem; font-weight: 600; text-decoration: none; }
    .dian-mj-cta svg { width: 18px; height: 18px; }
}
@media (min-width: 700px) and (max-width: 1180px) {
    .dian-mj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}