/* ===== Halaman Maklon Hair & Scalp Care ===== */
.dian-hh, .dian-hs { overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-hh { background: #f6f1e7; }
.dian-hs { background: #dde5d6; }
.dian-hh-stage, .dian-hs-stage { position: relative; container-type: inline-size; aspect-ratio: 1672 / 941; }
.dian-hs-stage { aspect-ratio: 1672 / 1014; }
.dian-hh-picture, .dian-hs-picture { display: contents; }
.dian-hh-bg, .dian-hs-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-hh br, .dian-hs br { display: block; content: ''; }
.dian-hh svg, .dian-hs svg { flex: none; }
.dian-hs-photo { display: none; }

/* hero */
.dian-hh-copy { position: absolute; left: 5.68%; top: 13.92%; width: 59.809cqw; color: #2b2d2a; }
.dian-hh-eyebrow { position: relative; padding-bottom: 0.957cqw; font-size: 0.861cqw; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #3f4a3f; }
.dian-hh-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.110cqw; height: 1.5px; background: #3f5b47; }
.dian-hh-heading { margin: 0.897cqw 0 1.077cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.439cqw; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: #0f1418; }
.dian-hh-heading span { color: #2f4a37; }
.dian-hh-copy .p1 { width: 41.866cqw; margin: 0 0 1.376cqw; font-size: 1.268cqw; line-height: 1.3; color: #2b2d2a; }
.dian-hh-copy .p2 { width: 41.268cqw; margin: 0; font-size: 1.268cqw; line-height: 1.27; color: #3f433b; }
.dian-hh-btn { position: absolute; left: 5.62%; top: 73.65%; width: 30.084cqw; height: 7.33%; 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-hh-btn:hover { background: #46604b; color: #fff; transform: translateY(-1px); }
.dian-hh-btn svg { width: 1.435cqw; height: 1.435cqw; }
.dian-hh-note { position: absolute; left: 5.62%; top: 83.42%; width: 37.081cqw; margin: 0; padding-top: 0.778cqw; font-size: 1.047cqw; line-height: 1.42; color: #3f433b; }
.dian-hh-note::before { content: ''; position: absolute; left: 0; top: 0; width: 3.110cqw; height: 1.5px; background: #55715a; }

/* jenis */
.dian-hs-intro { position: absolute; left: 5.92%; top: 3.06%; width: 86.722cqw; color: #2b2d2a; }
.dian-hs-eyebrow { position: relative; padding-bottom: 0.837cqw; font-size: 0.861cqw; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #3f4a3f; }
.dian-hs-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.871cqw; height: 1.5px; background: #3f5b47; }
.dian-hs-heading { margin: 0.598cqw 0 0.478cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.188cqw; font-weight: 700; line-height: 1.03; letter-spacing: -.015em; white-space: nowrap; color: #0f1418; }
.dian-hs-heading span { color: #2f4a37; }
.dian-hs-intro p { margin: 0; font-size: 1.136cqw; line-height: 1.573cqw; color: #2f322d; }
.dian-hs-cta { display: none; }
.dian-hs-grid { position: absolute; inset: 0; }
.dian-hs-card { position: absolute; box-sizing: border-box; color: #2b2d2a; }
.dian-hs-no { position: absolute; width: 2.632cqw; height: 2.632cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #5f7a62; color: #fff; font-size: 0.987cqw; font-weight: 600; }
.dian-hs-card h3 { position: absolute; margin: 0; white-space: nowrap; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.734cqw; font-weight: 800; line-height: 2.033cqw; letter-spacing: -.02em; color: #14171a; }
.dian-hs-card h3::after { content: ''; position: absolute; left: 0; width: 2.572cqw; height: 2px; background: #2b2d2a; }
.dian-hs-card p { position: absolute; margin: 0; color: #4a4e45; }
.dian-hs-card ul { position: absolute; margin: 0; padding: 0 0 0 1.077cqw; list-style: disc; font-size: 0.813cqw; line-height: 1.154cqw; color: #2b2d2a; white-space: nowrap; }
.dian-hs-card ul::before { content: ''; position: absolute; left: 0; top: -0.658cqw; width: 1.794cqw; height: 1.5px; background: #2b2d2a; }
.dian-hs-card li::marker { color: #2b2d2a; }
.dian-hs-card.c1 { left: 1.20%; top: 28.60%; width: 33.493cqw; height: 35.60%; }
.dian-hs-card.c1 .dian-hs-no { left: 1.854cqw; top: 1.017cqw; }
.dian-hs-card.c1 h3 { left: 1.974cqw; top: 4.426cqw; }
.dian-hs-card.c1 h3::after { top: calc(100% + 0.538cqw); }
.dian-hs-card.c1 ul::before { top: -0.359cqw; }
.dian-hs-card.c1 p { left: 1.974cqw; top: 7.476cqw; width: 12.859cqw; font-size: 0.861cqw; line-height: 1.118cqw; }
.dian-hs-card.c1 ul { left: 2.512cqw; top: 13.696cqw; }
.dian-hs-card.c2 { left: 35.53%; top: 28.60%; width: 31.818cqw; height: 35.60%; }
.dian-hs-card.c2 .dian-hs-no { left: 1.376cqw; top: 1.017cqw; }
.dian-hs-card.c2 h3 { left: 1.495cqw; top: 4.007cqw; }
.dian-hs-card.c2 h3::after { top: calc(100% + 0.538cqw); }
.dian-hs-card.c2 ul::before { top: -0.478cqw; }
.dian-hs-card.c2 p { left: 1.495cqw; top: 7.117cqw; width: 13.876cqw; font-size: 0.861cqw; line-height: 1.124cqw; }
.dian-hs-card.c2 ul { left: 1.495cqw; top: 12.978cqw; }
.dian-hs-card.c3 { left: 68.12%; top: 28.60%; width: 30.801cqw; height: 35.60%; }
.dian-hs-card.c3 .dian-hs-no { left: 1.256cqw; top: 1.017cqw; }
.dian-hs-card.c3 h3 { left: 1.316cqw; top: 4.246cqw; }
.dian-hs-card.c3 h3::after { top: calc(100% + 0.538cqw); }
.dian-hs-card.c3 ul::before { top: -0.538cqw; }
.dian-hs-card.c3 p { left: 1.316cqw; top: 7.297cqw; width: 12.261cqw; font-size: 0.861cqw; line-height: 1.124cqw; }
.dian-hs-card.c3 ul { left: 1.675cqw; top: 13.876cqw; }
.dian-hs-card.c4 { left: 1.20%; top: 65.38%; width: 48.325cqw; height: 30.57%; }
.dian-hs-card.c4 .dian-hs-no { left: 2.333cqw; top: 0.718cqw; }
.dian-hs-card.c4 h3 { left: 6.400cqw; top: 1.196cqw; }
.dian-hs-card.c4 h3::after { top: calc(100% + 0.837cqw); }
.dian-hs-card.c4 ul::before { top: -0.120cqw; }
.dian-hs-card.c4 p { left: 2.333cqw; top: 4.605cqw; width: 13.876cqw; font-size: 0.861cqw; line-height: 1.130cqw; }
.dian-hs-card.c4 ul { left: 2.871cqw; top: 9.749cqw; }
.dian-hs-card.c5 { left: 50.42%; top: 65.38%; width: 48.385cqw; height: 29.88%; }
.dian-hs-card.c5 .dian-hs-no { left: 2.931cqw; top: 0.598cqw; }
.dian-hs-card.c5 h3 { left: 7.416cqw; top: 1.077cqw; }
.dian-hs-card.c5 h3::after { top: calc(100% + 0.658cqw); }
.dian-hs-card.c5 ul::before { top: -0.120cqw; }
.dian-hs-card.c5 p { left: 2.871cqw; top: 4.366cqw; width: 14.055cqw; font-size: 0.861cqw; line-height: 1.130cqw; }
.dian-hs-card.c5 ul { left: 3.349cqw; top: 10.227cqw; }
.dian-hs-card.c3::before { content: ''; position: absolute; left: 0.120cqw; top: 6.280cqw; width: 15.849cqw; height: 13.457cqw; background: radial-gradient(ellipse closest-side, rgba(195,191,176,.94) 0, rgba(195,191,176,.94) 58%, rgba(0,0,0,0) 100%); pointer-events: none; }
.dian-hs-card.c3 > * { z-index: 1; }
.dian-hs-card.c5::before { content: ''; position: absolute; left: 1.675cqw; top: 3.110cqw; width: 17.344cqw; height: 14.354cqw; background: radial-gradient(ellipse closest-side, rgba(214,206,193,.94) 0, rgba(214,206,193,.94) 58%, rgba(0,0,0,0) 100%); pointer-events: none; }
.dian-hs-card.c5 > * { z-index: 1; }

@media (max-width: 1180px) {
    .dian-hh-stage, .dian-hs-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5.74vw, 120px) 44px; }
    .dian-hh-stage { background: #f6f1e7; }
    .dian-hs-stage { background: #dde5d6; }
    .dian-hh-copy, .dian-hh-btn, .dian-hh-note, .dian-hs-intro { position: static; width: auto; height: auto; }
    .dian-hh-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: 972 / 941; max-height: 560px; object-position: right center; }
    .dian-hs-bg { display: none; }
    .dian-hh-eyebrow, .dian-hs-eyebrow { margin-bottom: 14px; padding-bottom: 14px; font-size: 12px; letter-spacing: .24em; }
    .dian-hh-eyebrow::after, .dian-hs-eyebrow::after { width: 44px; }
    .dian-hh-heading, .dian-hs-heading { margin: 0 0 14px; font-size: clamp(1.9rem, 7.2vw, 3.2rem); line-height: 1.08; }
    .dian-hh br, .dian-hs br { display: none; }
    .dian-hs-heading { white-space: normal; }
    .dian-hs-card.c2 h3 { width: auto; white-space: normal; }
    .dian-hh-copy .p1, .dian-hh-copy .p2, .dian-hs-intro p { width: auto; margin: 0 0 14px; font-size: 1rem; line-height: 1.55; }
    .dian-hh-btn { justify-content: space-between; margin-top: 8px; padding: 17px 22px; border-radius: 16px; font-size: .98rem; font-weight: 600; }
    .dian-hh-btn svg { width: 18px; height: 18px; }
    .dian-hh-note { margin-top: 16px; padding-top: 14px; font-size: .92rem; line-height: 1.55; }
    .dian-hs-grid { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 10px; }
    .dian-hs-card, .dian-hs-card.c1, .dian-hs-card.c2, .dian-hs-card.c3, .dian-hs-card.c4, .dian-hs-card.c5 { 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-hs-photo { display: block; order: 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: right center; }
    .dian-hs-card .dian-hs-no, .dian-hs-card.c1 .dian-hs-no, .dian-hs-card.c2 .dian-hs-no, .dian-hs-card.c3 .dian-hs-no, .dian-hs-card.c4 .dian-hs-no, .dian-hs-card.c5 .dian-hs-no { position: static; order: 2; width: 38px; height: 38px; margin: 18px 22px 0; font-size: .95rem; }
    .dian-hs-card h3, .dian-hs-card.c1 h3, .dian-hs-card.c2 h3, .dian-hs-card.c3 h3, .dian-hs-card.c4 h3, .dian-hs-card.c5 h3 { position: static; order: 3; margin: 12px 22px 0; padding-bottom: 10px; font-size: 1.5rem; line-height: 1.2; }
    .dian-hs-card h3::after, .dian-hs-card.c1 h3::after, .dian-hs-card.c2 h3::after, .dian-hs-card.c3 h3::after, .dian-hs-card.c4 h3::after, .dian-hs-card.c5 h3::after { top: auto; bottom: 0; width: 32px; }
    .dian-hs-card p, .dian-hs-card.c1 p, .dian-hs-card.c2 p, .dian-hs-card.c3 p, .dian-hs-card.c4 p, .dian-hs-card.c5 p { position: static; order: 4; width: auto; margin: 6px 22px 12px; font-size: .95rem; line-height: 1.55; }
    .dian-hs-card ul, .dian-hs-card.c1 ul, .dian-hs-card.c2 ul, .dian-hs-card.c3 ul, .dian-hs-card.c4 ul, .dian-hs-card.c5 ul { position: static; order: 5; margin: 0 22px 22px; padding-left: 20px; font-size: .95rem; line-height: 1.7; white-space: normal; }
    .dian-hs-card ul::before, .dian-hs-card.c3::before, .dian-hs-card.c5::before { display: none; }
    .dian-hs-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-hs-cta svg { width: 18px; height: 18px; }
}
@media (min-width: 700px) and (max-width: 1180px) {
    .dian-hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}