/*
 * ME Clinic — component styles (v2, "gading & emas").
 * Tokens come from theme.json; this file never hard-codes a brand colour.
 * Direction: quiet luxury. Ivory paper, espresso ink, a thin line of gold, generous space, one photo per idea.
 */

:root {
	--gading: var(--wp--preset--color--gading);
	--putih: var(--wp--preset--color--putih);
	--pasir: var(--wp--preset--color--pasir);
	--espresso: var(--wp--preset--color--espresso);
	--kopi: var(--wp--preset--color--kopi);
	--emas: var(--wp--preset--color--emas);
	--emas-tua: var(--wp--preset--color--emas-tua);
	--emas-muda: var(--wp--preset--color--emas-muda);
	--garis: var(--wp--preset--color--garis);
	--teks: var(--wp--preset--color--teks);
	--redup: var(--wp--preset--color--redup);
	--bata: var(--wp--preset--color--bata);
	--judul: var(--wp--preset--font-family--judul);
	--r-kecil: var(--wp--custom--radius--kecil);
	--r-kartu: var(--wp--custom--radius--kartu);
	--r-besar: var(--wp--custom--radius--besar);
	--bayangan: var(--wp--custom--bayangan--kartu);
	--prosa: var(--wp--custom--lebar--prosa);
	--lebar: var(--wp--custom--lebar--lebar);
	--gutter: 1.25rem;
	--ruang: var(--wp--preset--spacing--60);
}

/* --- Base ------------------------------------------------------------------------------------------------------- */
html { scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
img, picture { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
h1, h2, h3 { text-wrap: balance; margin-block: 0; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--emas-tua); }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; border-radius: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wp-site-blocks > *, .mec-main > * { margin-block: 0; }
.mec-content > * { margin-block-start: 0; }
.mec-wrap { width: min(100% - 2 * var(--gutter), var(--lebar)); margin-inline: auto; }
.mec-wrap--prosa { width: min(100% - 2 * var(--gutter), var(--prosa)); }
.mec-kecil { font-size: var(--wp--preset--font-size--kecil); color: var(--redup); }
.mec-eyebrow { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--emas-tua); }
.mec-eyebrow::before { content: ""; flex: none; width: 2.25rem; height: 1px; background: var(--emas); }
.mec-lead { font-size: var(--wp--preset--font-size--pengantar); line-height: 1.6; color: var(--redup); }
.mec-ph { background: #fff3c4; color: #5c4400; padding: 0.05em 0.35em; border-radius: 3px; font-size: 0.85em; font-weight: 600; }
.mec-icon { flex: none; }

/* --- Buttons & links ---------------------------------------------------------------------------------------------- */
.mec-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; min-height: 3.25rem; padding: 0.9rem 1.75rem; border: 1px solid var(--espresso); border-radius: var(--r-kecil); background: var(--espresso); color: var(--gading); font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.mec-btn:hover { background: var(--kopi); border-color: var(--kopi); color: var(--gading); }
.mec-btn--garis { background: transparent; color: var(--espresso); }
.mec-btn--garis:hover { background: var(--espresso); color: var(--gading); }
.mec-btn--emas { background: var(--emas); border-color: var(--emas); color: var(--espresso); }
.mec-btn--emas:hover { background: var(--emas-muda); border-color: var(--emas-muda); color: var(--espresso); }
.mec-btn--terang { background: transparent; border-color: var(--emas); color: var(--gading); }
.mec-btn--terang:hover { background: var(--gading); border-color: var(--gading); color: var(--espresso); }
.mec-btn--kecil { min-height: 2.75rem; padding: 0.6rem 1.2rem; font-size: 0.75rem; }
.mec-btn--blok { width: 100%; }
.mec-link { display: inline-flex; align-items: center; gap: 0.5rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--emas); color: var(--espresso); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; }
.mec-link:hover { color: var(--emas-tua); }
.mec-link--terang { color: var(--gading); }
.mec-link--terang:hover { color: var(--emas-muda); }
.mec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1rem; margin-top: 2rem; }
@media (max-width: 26rem) { .mec-btn { padding-inline: 1.1rem; letter-spacing: 0.08em; } .mec-actions .mec-btn { width: 100%; } }

/* --- Header ----------------------------------------------------------------------------------------------------- */
.mec-site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--gading) 95%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis); }
.mec-staging { margin: 0; padding: 0.4rem var(--gutter); background: #5c4400; color: #fff; font-size: 0.8125rem; line-height: 1.4; text-align: center; }
.mec-staging__panjang { display: none; }
.mec-topbar { display: none; background: var(--espresso); color: var(--emas-muda); font-size: 0.8125rem; }
.mec-topbar__isi { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.5rem; }
.mec-topbar p { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.mec-topbar a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gading); text-decoration: none; }
.mec-topbar a:hover { color: var(--emas-muda); }
.mec-header { display: flex; align-items: center; gap: 1rem; width: min(100% - 2 * var(--gutter), var(--lebar)); margin-inline: auto; padding-block: 0.7rem; }
.mec-logo { display: block; flex: none; margin-right: auto; }
.mec-logo img { width: auto; height: 2.75rem; }
.mec-nav { display: none; }
.mec-nav ul, .mec-menu ul { margin: 0; padding: 0; list-style: none; }
.mec-nav > ul { display: flex; gap: 0.25rem; }
.mec-nav li { position: relative; }
.mec-nav a { display: block; padding: 0.65rem 0.9rem; color: var(--teks); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.mec-nav a:hover, .mec-nav a[aria-current="page"] { color: var(--emas-tua); }
.mec-nav__sub { position: absolute; left: 0; top: 100%; z-index: 5; min-width: 15rem; padding: 0.5rem !important; background: var(--putih); border: 1px solid var(--garis); border-top: 2px solid var(--emas); box-shadow: var(--bayangan); opacity: 0; visibility: hidden; transform: translateY(0.35rem); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; }
.mec-nav__induk:hover > .mec-nav__sub, .mec-nav__induk:focus-within > .mec-nav__sub { opacity: 1; visibility: visible; transform: none; }
.mec-nav__induk > a::after { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2rem) rotate(45deg); }
.mec-header__cta { display: none; }
.mec-menu { position: relative; }
.mec-menu summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--garis); border-radius: var(--r-kecil); background: var(--putih); color: var(--espresso); cursor: pointer; list-style: none; }
.mec-menu summary::-webkit-details-marker { display: none; }
.mec-menu nav { position: absolute; right: 0; top: calc(100% + 0.6rem); width: min(20rem, 100vw - 2 * var(--gutter)); max-height: 75vh; overflow: auto; padding: 0.6rem; background: var(--putih); border: 1px solid var(--garis); border-top: 2px solid var(--emas); box-shadow: var(--bayangan); }
.mec-menu a { display: block; padding: 0.75rem 0.9rem; color: var(--teks); text-decoration: none; }
.mec-menu a:hover, .mec-menu a[aria-current="page"] { color: var(--emas-tua); }
.mec-menu .mec-nav__sub { position: static; min-width: 0; padding: 0 0 0 0.9rem !important; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
.mec-menu .mec-nav__sub a { padding-block: 0.5rem; font-size: 0.9375rem; color: var(--redup); }
.mec-menu .mec-nav__induk > a::after { display: none; }
@media (min-width: 36rem) { .mec-header__cta { display: inline-flex; } }
@media (min-width: 48rem) { .mec-staging__panjang { display: inline; } .mec-topbar { display: block; } }
@media (min-width: 68rem) { .mec-nav { display: block; margin-right: 0.75rem; } .mec-menu { display: none; } .mec-logo img { height: 3.4rem; } }

/* --- Breadcrumb -------------------------------------------------------------------------------------------------- */
.mec-breadcrumb { padding-top: 1.5rem; font-size: 0.8125rem; }
.mec-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: 0; padding: 0; list-style: none; color: var(--redup); }
.mec-breadcrumb li + li::before { content: "—"; margin-right: 0.6rem; color: var(--emas); }
.mec-breadcrumb a { color: var(--redup); text-decoration: none; }
.mec-breadcrumb a:hover { color: var(--emas-tua); }

/* --- Hero ------------------------------------------------------------------------------------------------------- */
.mec-hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.mec-hero h1 { font-size: var(--wp--preset--font-size--judul-utama); font-weight: 600; letter-spacing: -0.012em; }
.mec-hero .mec-lead { margin: 1.5rem 0 0; max-width: 34rem; }
.mec-hero__grid { display: grid; gap: 3rem; align-items: center; }
.mec-hero--ringkas { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.mec-hero--ringkas .mec-hero__grid, .mec-hero--ringkas > .mec-wrap, .mec-hero--ringkas > * { width: min(100% - 2 * var(--gutter), var(--prosa)); margin-inline: auto; }
.mec-hero--ringkas h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); }
.mec-hero__media { position: relative; justify-self: center; width: min(100%, 25rem); }
.mec-hero__media picture img { width: 100%; border-radius: 14rem 14rem var(--r-kartu) var(--r-kartu); aspect-ratio: 4 / 5; object-fit: cover; }
.mec-hero__media::before { content: ""; position: absolute; inset: -0.9rem -0.9rem 0.9rem 0.9rem; border: 1px solid var(--emas); border-radius: 14rem 14rem var(--r-kartu) var(--r-kartu); z-index: -1; }
.mec-hero__media--duo { width: min(100%, 27rem); padding: 0 0 3.5rem 3.5rem; box-sizing: border-box; }
.mec-hero__media--duo::before { inset: -0.9rem -0.9rem 4.4rem 4.4rem; }
.mec-hero__foto--kedua { position: absolute; left: 0; bottom: 0; width: 44%; }
.mec-hero__foto--kedua img { border: 6px solid var(--gading); border-radius: var(--r-kartu) !important; aspect-ratio: 1 !important; }
/* Home hero: the clinic's doctors side by side (real photos), the real reception underneath. */
.mec-hero__media--dokter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: min(100%, 29rem); }
.mec-hero__media--dokter::before { display: none; }
.mec-hero__media--1 { grid-template-columns: minmax(0, 1fr); width: min(100%, 22rem); }
.mec-hero__dokter { position: relative; display: flex; flex-direction: column; margin: 0; }
.mec-hero__media--dokter .mec-hero__dokter picture { display: block; overflow: hidden; border-radius: 10rem 10rem var(--r-kartu) var(--r-kartu); }
.mec-hero__media--dokter .mec-hero__dokter img { aspect-ratio: 4 / 5; border-radius: 10rem 10rem var(--r-kartu) var(--r-kartu); transition: transform 0.6s ease; }
.mec-hero__dokter figcaption { margin-top: 0.6rem; font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--espresso); text-align: center; }
.mec-hero__dokter figcaption { display: flex; flex: 1; }
.mec-hero__dokter figcaption a { display: flex; flex: 1; flex-direction: column; align-items: center; row-gap: 0.35rem; color: inherit; text-decoration: none; }
.mec-hero__dokter figcaption a::after { content: ""; position: absolute; inset: 0; border-radius: 10rem 10rem var(--r-kartu) var(--r-kartu); }
.mec-hero__dokter figcaption a:focus-visible { outline: 0; }
.mec-hero__dokter figcaption a:focus-visible::after { outline: 2px solid var(--espresso); outline-offset: 4px; }
.mec-hero__profil { display: flex; align-items: center; gap: 0.3rem; margin-top: auto; padding-bottom: 0.15rem; border-bottom: 1px solid var(--emas); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emas-tua); transition: color 0.25s ease; }
.mec-hero__klinik { position: relative; grid-column: 1 / -1; display: block; overflow: hidden; border-radius: var(--r-kartu); color: var(--espresso); text-decoration: none; }
.mec-hero__media--dokter .mec-hero__klinik img { aspect-ratio: 21 / 9; border-radius: var(--r-kartu); object-position: 50% 55%; transition: transform 0.6s ease; }
.mec-hero__label { position: absolute; left: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--gading); border-radius: 999px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emas-tua); transition: background-color 0.25s ease, color 0.25s ease; }
@media (hover: hover) {
	.mec-hero__dokter:hover img, a.mec-hero__klinik:hover img { transform: scale(1.04); }
	.mec-hero__dokter:hover .mec-hero__profil { color: var(--espresso); }
	a.mec-hero__klinik:hover .mec-hero__label { background: var(--espresso); color: var(--gading); }
}
@media (min-width: 60rem) {
	.mec-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 5rem; }
	.mec-hero--ringkas .mec-hero__grid { grid-template-columns: 1fr; }
}

/* Appointment finder under the home hero */
.mec-cari { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: 1.5rem; background: var(--putih); border: 1px solid var(--garis); border-top: 2px solid var(--emas); box-shadow: var(--bayangan); }
.mec-cari__judul { margin: 0; font-family: var(--judul); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--espresso); }
.mec-cari__bidang { display: grid; gap: 0.35rem; }
.mec-cari__bidang span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emas-tua); }
.mec-cari select { width: 100%; min-height: 3.25rem; padding: 0.6rem 0.8rem; border: 1px solid var(--garis); border-radius: var(--r-kecil); background: var(--gading); color: var(--teks); font: inherit; }
@media (min-width: 56rem) { .mec-cari { grid-template-columns: auto 1fr 1fr auto; align-items: end; gap: 1.25rem; padding: 1.5rem 2rem; } .mec-cari__judul { align-self: center; max-width: 11rem; } .mec-cari--ringkas { grid-template-columns: auto 1fr auto; } }

/* Key facts strip */
.mec-fakta { border-block: 1px solid var(--garis); background: var(--putih); }
.mec-fakta__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: 0; padding: 0; list-style: none; }
.mec-fakta__list li { display: grid; gap: 0.6rem; justify-items: start; padding: 1.5rem 1rem 1.5rem 0; }
.mec-fakta__list .mec-icon { color: var(--emas-tua); }
.mec-fakta__list strong { display: block; font-family: var(--judul); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--espresso); }
.mec-fakta__list span { display: block; margin-top: 0.2rem; font-size: var(--wp--preset--font-size--kecil); line-height: 1.5; color: var(--redup); }
@media (min-width: 56rem) { .mec-fakta__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mec-fakta__list li { grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 2rem 1.5rem; } .mec-fakta__list li + li { border-left: 1px solid var(--garis); } .mec-fakta__list li:first-child { padding-left: 0; } }

/* In-page navigation on service pages */
.mec-subnav { border-bottom: 1px solid var(--garis); }
.mec-subnav ul { display: flex; gap: 0.25rem 1.5rem; margin: 0; padding: 0.9rem 0; overflow-x: auto; list-style: none; white-space: nowrap; scrollbar-width: none; }
.mec-subnav a { display: block; padding: 0.35rem 0; color: var(--redup); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; }
.mec-subnav a:hover { color: var(--emas-tua); }

/* --- Short answer ------------------------------------------------------------------------------------------------ */
.mec-answer { position: relative; margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0; padding: 1.75rem 1.75rem 1.75rem 2rem; background: var(--putih); border: 1px solid var(--garis); border-left: 2px solid var(--emas); }
.mec-answer__label { margin: 0 0 0.6rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--emas-tua); }
.mec-answer__text { margin: 0; font-family: var(--judul); font-size: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem); font-weight: 500; line-height: 1.45; color: var(--espresso); }

/* --- Sections & prose -------------------------------------------------------------------------------------------- */
.mec-section { padding-block: calc(var(--ruang) * 0.5); }
.mec-section > * { width: min(100% - 2 * var(--gutter), var(--prosa)); margin-inline: auto; }
.mec-section > .mec-cards, .mec-section > .mec-steps, .mec-section > [class^="wp-block-meclinic"], .mec-section--lebar > * { width: min(100% - 2 * var(--gutter), var(--lebar)); }
.mec-section > .mec-wrap { width: min(100% - 2 * var(--gutter), var(--lebar)); }
.mec-section > .mec-wrap--prosa { width: min(100% - 2 * var(--gutter), var(--prosa)); }
.mec-section > .mec-cta, .mec-section > .mec-form, .mec-section > .mec-faq, .mec-section > .mec-fakta { width: auto; }
.mec-section > h2 { margin-bottom: 1.5rem; }
.mec-section > h2 + *, .mec-split__teks > h2 + * { margin-block-start: 0; }
.mec-section h3 { margin-top: 2rem; }
.mec-section--putih { background: var(--putih); }
.mec-section--pasir { background: var(--pasir); }
.mec-section--tengah > .mec-eyebrow { justify-content: center; }
.mec-section--tengah > .mec-eyebrow::after { content: ""; flex: none; width: 2.25rem; height: 1px; background: var(--emas); }
.mec-section--tengah > h2, .mec-section--tengah > .mec-lead { text-align: center; }
.mec-section--tengah > h2 { margin-bottom: 1rem; }
.mec-section--tengah > .mec-lead { max-width: 38rem; margin-bottom: 3rem; }
.mec-section--tengah > .mec-tautan { margin-top: 2.5rem; text-align: center; }
.mec-section--rapat { padding-block: calc(var(--ruang) * 0.28); }
.mec-content ul.wp-block-list:not(.mec-checks), .mec-content ol.wp-block-list:not(.mec-steps) { padding-left: 1.3rem; }
.mec-content li + li { margin-top: 0.5rem; }
.mec-content ul.wp-block-list:not(.mec-checks) li::marker { color: var(--emas); }
.mec-note { box-sizing: border-box; padding: 1.1rem 1.4rem; background: var(--pasir); border-left: 2px solid var(--emas); font-size: 0.9375rem; color: var(--teks); }
.mec-tautan a { display: inline-flex; padding-bottom: 0.2rem; border-bottom: 1px solid var(--emas); color: var(--espresso); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; }

/* Text + image split: one image per idea */
.mec-section.mec-split { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); row-gap: 2.25rem; align-items: center; }
.mec-section.mec-split > * { grid-column: 2; width: auto; margin: 0; }
.mec-split__teks > * + * { margin-block-start: 1.15rem; }
.mec-split__teks > h2 { margin-bottom: 1.5rem; }
@media (min-width: 58rem) {
	.mec-section.mec-split { grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 36rem) minmax(0, 36rem) minmax(var(--gutter), 1fr); }
	.mec-section.mec-split > .mec-split__teks { grid-column: 2; grid-row: 1; padding-right: clamp(2rem, 5vw, 5rem); }
	.mec-section.mec-split > :not(.mec-split__teks) { grid-column: 3; grid-row: 1; }
	.mec-section.mec-split--balik > .mec-split__teks { grid-column: 3; padding-right: 0; padding-left: clamp(2rem, 5vw, 5rem); }
	.mec-section.mec-split--balik > :not(.mec-split__teks) { grid-column: 2; }
}
.mec-gambar { position: relative; margin: 0; }
.mec-gambar img { width: 100%; border-radius: var(--r-kartu); }
.mec-gambar figcaption, .mec-galeri figcaption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--redup); }
.mec-split .mec-gambar { margin: 0 0.9rem 0.9rem 0; }
.mec-split .mec-gambar img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 62%; }
.mec-split .mec-gambar::before { content: ""; position: absolute; inset: 0.9rem -0.9rem -0.9rem 0.9rem; border: 1px solid var(--emas); border-radius: var(--r-kartu); z-index: 0; pointer-events: none; }
.mec-split .mec-gambar picture, .mec-split .mec-gambar .mec-foto-kosong { position: relative; z-index: 1; }
.mec-split .mec-gambar figcaption { position: relative; z-index: 1; padding-top: 0.9rem; }
.mec-content > .mec-gambar, .mec-section > .mec-gambar { margin-block: 2rem; }
.mec-foto-kosong { display: grid; place-content: center; justify-items: center; gap: 0.75rem; aspect-ratio: 4 / 3; padding: 1.5rem; background: var(--pasir); border: 1px dashed var(--emas); border-radius: var(--r-kartu); color: var(--emas-tua); text-align: center; }
.mec-foto-kosong span { max-width: 18rem; font-size: 0.8125rem; line-height: 1.5; }

.mec-checks { display: grid; gap: 0.9rem; padding: 0; list-style: none; }
.mec-checks li { position: relative; margin: 0 !important; padding-left: 2.25rem; }
.mec-checks li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.35rem; height: 1.35rem; border: 1px solid var(--emas); border-radius: 999px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386652C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.mec-checks strong { color: var(--espresso); }

.mec-steps { display: grid; gap: 0; padding: 0; list-style: none; counter-reset: langkah; }
.mec-steps li { position: relative; margin: 0 !important; padding: 1.5rem 0 1.5rem 4.5rem; border-top: 1px solid var(--garis); counter-increment: langkah; }
.mec-steps li:last-child { border-bottom: 1px solid var(--garis); }
.mec-steps li::before { content: counter(langkah, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font-family: var(--judul); font-size: 2.5rem; font-weight: 500; line-height: 1; color: var(--emas); }
.mec-steps strong { display: block; margin-bottom: 0.3rem; font-family: var(--judul); font-size: 1.4375rem; font-weight: 600; line-height: 1.2; color: var(--espresso); }
@media (min-width: 60rem) {
	.mec-section--lebar .mec-steps, .mec-section > .mec-steps { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); column-gap: 2.5rem; }
	.mec-section--lebar .mec-steps li, .mec-section > .mec-steps li { padding: 4.25rem 0 1.5rem; border-bottom: 0 !important; }
	.mec-section--lebar .mec-steps li::before, .mec-section > .mec-steps li::before { top: 1.25rem; }
}

.mec-cards { display: grid; gap: 1.25rem; }
.mec-card { margin: 0 !important; padding: 1.75rem; background: var(--putih); border: 1px solid var(--garis); border-top: 2px solid var(--emas); border-radius: 0 0 var(--r-kartu) var(--r-kartu); }
.mec-section--putih .mec-card { background: var(--gading); }
.mec-card h3 { margin-top: 0; }
.mec-card p { margin-block: 0.7rem 0; font-size: 0.9375rem; color: var(--redup); }
@media (min-width: 44rem) { .mec-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

/* --- Service tiles ----------------------------------------------------------------------------------------------- */
.mec-layanan { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.mec-layanan__kartu { position: relative; display: flex; flex-direction: column; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kartu); overflow: hidden; transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.mec-layanan__kartu:hover, .mec-layanan__kartu:focus-within { border-color: var(--emas); box-shadow: var(--bayangan); }
.mec-layanan__media { position: relative; aspect-ratio: 4 / 3; background: var(--pasir); overflow: hidden; }
.mec-layanan__media picture { height: 100%; }
.mec-layanan__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: transform 0.6s ease; }
.mec-layanan__kartu:hover .mec-layanan__media img { transform: scale(1.04); }
.mec-layanan__isi { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.5rem 1.5rem 1.75rem; flex: 1; }
.mec-layanan__isi h3 { font-size: 1.625rem; }
.mec-layanan__isi h3 a { color: inherit; text-decoration: none; }
.mec-layanan__isi h3 a::after { content: ""; position: absolute; inset: 0; }
.mec-layanan__isi p { margin: 0; font-size: 0.9375rem; color: var(--redup); }
.mec-layanan__isi .mec-link { align-self: flex-start; margin-top: auto; }
.mec-layanan__label { position: absolute; left: 1rem; top: 1rem; z-index: 1; padding: 0.3rem 0.7rem; background: var(--gading); color: var(--emas-tua); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
@media (min-width: 40rem) { .mec-layanan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mec-layanan { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mec-layanan--prioritas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Doctors ----------------------------------------------------------------------------------------------------- */
.mec-photo { overflow: hidden; border-radius: 10rem 10rem var(--r-kartu) var(--r-kartu); background: var(--pasir); aspect-ratio: 4 / 5; }
.mec-photo img { width: 100%; height: 100%; object-fit: cover; }
.mec-photo--kosong { display: grid; place-content: center; justify-items: center; gap: 0.6rem; padding: 1rem; border: 1px dashed var(--emas); color: var(--emas-tua); text-align: center; }
.mec-photo--kosong span { font-size: 0.6875rem; line-height: 1.4; }
.mec-saring { display: grid; gap: 0.75rem; margin-bottom: 2rem; padding: 1.25rem; background: var(--putih); border: 1px solid var(--garis); border-top: 2px solid var(--emas); }
.mec-saring label { display: grid; gap: 0.35rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emas-tua); }
.mec-saring input, .mec-saring select { min-height: 3rem; padding: 0.55rem 0.8rem; border: 1px solid var(--garis); border-radius: var(--r-kecil); background: var(--gading); color: var(--teks); font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.mec-saring__kosong { margin: 0; color: var(--redup); }
@media (min-width: 44rem) { .mec-saring { grid-template-columns: 1.4fr 1fr; align-items: end; padding: 1.5rem 2rem; } }
.mec-dokter { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.mec-dokter__kartu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.25rem; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kartu); }
.mec-dokter__kartu .mec-photo { width: 100%; max-width: 22rem; justify-self: center; }
.mec-dokter__kartu[hidden] { display: none; }
.mec-dokter__isi h3 { font-size: 1.625rem; }
.mec-dokter__isi h3 a { color: inherit; text-decoration: none; }
.mec-dokter__isi h3 a:hover { color: var(--emas-tua); }
.mec-dokter__isi p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--redup); }
.mec-dokter__peran { font-size: 0.6875rem !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emas-tua) !important; }
.mec-dokter__jadwal { display: flex; gap: 0.5rem; align-items: baseline; }
.mec-dokter__isi .mec-actions { margin-top: 1.25rem; gap: 0.75rem 1.25rem; }
@media (min-width: 36rem) { .mec-dokter__kartu { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.75rem; padding: 1.5rem; } .mec-dokter__kartu .mec-photo { max-width: none; } }
@media (min-width: 52rem) { .mec-dokter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mec-dokter__kartu { padding: 1.75rem; } }
@media (min-width: 52rem) { .mec-dokter--satu { grid-template-columns: minmax(0, 44rem); justify-content: center; } }

.mec-byline { box-sizing: border-box; margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding: 1.5rem 1.75rem; background: var(--putih); border: 1px solid var(--garis); }
.mec-byline .mec-eyebrow { margin-bottom: 1rem; }
.mec-byline__list { display: grid; gap: 1rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.mec-byline__list li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.9rem; align-items: center; }
.mec-byline__list .mec-photo { border-radius: 999px; aspect-ratio: 1; }
.mec-byline__list .mec-photo--kosong { padding: 0; }
.mec-byline__list .mec-photo--kosong span { display: none; }
.mec-byline__list .mec-photo--kosong svg { width: 1.6rem; height: 1.6rem; }
.mec-byline__list span { font-size: 0.8125rem; color: var(--redup); }
.mec-byline__name { display: block; font-family: var(--judul); font-size: 1.3125rem; font-weight: 600; line-height: 1.2; color: var(--espresso); text-decoration: none; }
.mec-byline__name:hover { color: var(--emas-tua); }
.mec-byline__meta, .mec-disclaimer { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--redup); }
.mec-byline__kosong { margin: 0 0 0.75rem; font-family: var(--judul); font-size: 1.3125rem; color: var(--espresso); }
@media (min-width: 44rem) { .mec-byline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mec-profil { padding-block: clamp(1.5rem, 1rem + 3vw, 4rem) var(--ruang); }
.mec-profil__grid { display: grid; gap: 2.5rem; }
.mec-profil__foto { max-width: 20rem; }
.mec-profil h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); }
.mec-profil__data { margin: 3rem 0 0; border-top: 1px solid var(--garis); }
.mec-profil__data dt { margin-top: 1.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--emas-tua); }
.mec-profil__data dd { margin: 0.5rem 0 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--garis); }
.mec-profil__data ul { margin: 0; padding-left: 1.2rem; }
.mec-profil__data li + li { margin-top: 0.3rem; }
.mec-profil__data li::marker { color: var(--emas); }
@media (min-width: 56rem) { .mec-profil__grid { grid-template-columns: 20rem minmax(0, 1fr); gap: 5rem; align-items: start; } .mec-profil__foto { position: sticky; top: 8rem; } }

/* --- FAQ --------------------------------------------------------------------------------------------------------- */
.mec-faq { background: var(--putih); }
.mec-faq h2 { margin-bottom: 2rem; }
.mec-faq__item { border-top: 1px solid var(--garis); }
.mec-faq__item:last-child { border-bottom: 1px solid var(--garis); }
.mec-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; list-style: none; }
.mec-faq__item summary::-webkit-details-marker { display: none; }
.mec-faq__item summary::after { content: "+"; flex: none; font-family: var(--judul); font-size: 1.75rem; font-weight: 400; line-height: 1; color: var(--emas-tua); transition: transform 0.2s ease; }
.mec-faq__item[open] summary::after { transform: rotate(45deg); }
.mec-faq__item h3 { margin: 0; font-family: var(--judul); font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: var(--espresso); }
.mec-faq__a { padding: 0 2.5rem 1.5rem 0; color: var(--redup); }
.mec-faq__a p { margin: 0; }

/* --- CTA --------------------------------------------------------------------------------------------------------- */
.mec-cta { padding-block: var(--ruang); }
.mec-cta__box { position: relative; display: grid; overflow: hidden; background: var(--espresso); color: var(--gading); }
.mec-cta__isi { position: relative; z-index: 1; padding: clamp(2.25rem, 1.5rem + 4vw, 5rem); }
.mec-cta__box h2, .mec-cta__judul { margin: 0; max-width: 30rem; font-family: var(--judul); font-size: var(--wp--preset--font-size--judul-bagian); font-weight: 600; line-height: 1.12; color: var(--gading); }
.mec-cta__box em { color: var(--emas); }
.mec-cta__box p { max-width: 30rem; margin: 1.1rem 0 0; color: var(--emas-muda); }
.mec-cta__nap { font-size: 0.8125rem; }
.mec-cta__media { position: relative; min-height: 14rem; }
.mec-cta__media picture, .mec-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mec-cta__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--espresso) 0%, transparent 45%); }
@media (min-width: 56rem) { .mec-cta__box { grid-template-columns: 1.15fr 0.85fr; } .mec-cta__media::after { background: linear-gradient(90deg, var(--espresso) 0%, transparent 55%); } }
.mec-cta--isi { padding-block: 0.5rem; }
.mec-cta--isi .mec-cta__box { display: block; }
.mec-cta--isi .mec-cta__isi { padding: 1.75rem 2rem; }
.mec-cta--isi .mec-cta__judul { font-size: 1.75rem; }
.mec-cta--isi .mec-actions { margin-top: 1.25rem; }
.mec-cta :focus-visible, .mec-site-footer :focus-visible, .mec-topbar :focus-visible { outline-color: var(--emas-muda); }

/* --- Clinic photos & location -------------------------------------------------------------------------------------- */
.mec-galeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mec-galeri figure { margin: 0; }
.mec-galeri img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-kartu); }
.mec-galeri figcaption { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emas-tua); }
@media (min-width: 60rem) { .mec-galeri { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .mec-galeri li:nth-child(even) { margin-top: 2.5rem; } }
.mec-galeri--semua img { aspect-ratio: 1; }
@media (min-width: 60rem) { .mec-galeri--semua { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.25rem; } .mec-galeri--semua li:nth-child(even) { margin-top: 0; } }
.mec-galeri .mec-foto-kosong { aspect-ratio: 3 / 4; padding: 1rem; }

/* --- Before/after pairs (Aesthetica, Aesthetic Surgery only) ------------------------------------------------------- */
.mec-ss__daftar { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.mec-ss__item { margin: 0 !important; }
.mec-ss__foto { position: relative; margin: 0; }
.mec-ss__foto picture { display: block; overflow: hidden; border-radius: var(--r-kartu); background: var(--putih); box-shadow: var(--bayangan); }
.mec-ss__foto img { display: block; width: 100%; height: auto; }
.mec-ss__tag { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.3rem 0.65rem; background: var(--putih); border-radius: 999px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emas-tua); }
.mec-ss__tag--kanan { left: calc(50% + 0.75rem); }
.mec-ss__judul { margin: 1rem 0 0; text-align: center; }
.mec-ss__judul strong { display: block; font-family: var(--judul); font-size: 1.375rem; font-weight: 600; color: var(--espresso); }
.mec-ss__judul span { font-size: 0.875rem; color: var(--redup); }
.mec-ss__catatan, .mec-anim__catatan { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin: 2.5rem auto 0; font-size: 0.875rem; color: var(--redup); text-align: center; }
.mec-ss__catatan .mec-icon { flex: none; color: var(--emas-tua); }
@media (min-width: 48rem) { .mec-ss__daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; align-items: start; } }

/* --- Explanatory animations (SVG + CSS; static with reduced motion) ------------------------------------------------- */
.mec-skema { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mec-skema li { margin: 0 !important; padding: 1.5rem 1.5rem 1.25rem; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kartu); animation: mec-sorot 9s calc(var(--i) * 3s) infinite; }
.mec-skema svg { display: block; width: 100%; max-width: 15rem; margin: 0 auto 1rem; }
.mec-skema p { margin: 0; text-align: center; }
.mec-skema strong { display: block; margin-bottom: 0.3rem; font-family: var(--judul); font-size: 1.375rem; font-weight: 600; color: var(--espresso); }
.mec-skema span { font-size: 0.9375rem; color: var(--redup); }
.mec-skema__dinding { fill: var(--emas-muda); }
.mec-skema__garis { fill: none; stroke: var(--kopi); stroke-width: 1.5; stroke-linecap: round; }
.mec-skema__wasir { fill: var(--emas); fill-opacity: 0.55; stroke: var(--emas-tua); stroke-width: 1.5; }
.mec-skema__besar path, .mec-skema__awal path { transform: scale(1.9); transform-origin: 0 50%; transform-box: fill-box; }
.mec-skema__besar:not(.mec-skema__besar--diam) path { animation: mec-bengkak 3s ease-in-out infinite; }
.mec-skema__awal path { fill: none; stroke: var(--emas-tua); stroke-dasharray: 3 4; stroke-opacity: 0.7; }
.mec-skema__kecil path { transform-origin: 0 50%; transform-box: fill-box; animation: mec-mengecil 4.5s ease-in-out infinite; }
.mec-skema__serat { fill: none; stroke: var(--kopi); stroke-width: 2.5; stroke-linecap: round; }
.mec-skema__energi { fill: none; stroke: var(--putih); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 10; animation: mec-energi 1.2s linear infinite; }
.mec-skema__ujung { fill: var(--bata); }
.mec-skema__cahaya { fill: var(--bata); fill-opacity: 0.18; transform-origin: center; transform-box: fill-box; animation: mec-cahaya 1.6s ease-out infinite; }
@keyframes mec-sorot { 0%, 30% { border-color: var(--emas); box-shadow: var(--bayangan); } 36%, 100% { border-color: var(--garis); box-shadow: none; } }
@keyframes mec-bengkak { 0%, 100% { transform: scale(1.9); } 50% { transform: scale(2.02); } }
@keyframes mec-mengecil { 0%, 15% { transform: scale(1.9); } 65%, 100% { transform: scale(1); } }
@keyframes mec-energi { to { stroke-dashoffset: -14; } }
@keyframes mec-cahaya { 0% { transform: scale(0.4); fill-opacity: 0.35; } 100% { transform: scale(1.8); fill-opacity: 0; } }
@media (min-width: 48rem) { .mec-skema { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mec-alur { position: relative; display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.mec-alur::before, .mec-alur::after { content: ""; position: absolute; left: 1.6rem; top: 1.6rem; bottom: 1.6rem; width: 1px; background: var(--garis); }
.mec-alur::after { background: var(--emas); transform-origin: top; animation: mec-alur-y 10s linear infinite; }
.mec-alur li { position: relative; z-index: 1; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1.25rem; align-items: start; align-content: start; margin: 0 !important; }
.mec-alur__ikon { grid-row: span 2; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; background: var(--gading); border: 1px solid var(--emas); border-radius: 999px; color: var(--emas-tua); animation: mec-alur-titik 10s calc(var(--i) * 2s) infinite; }
.mec-alur strong { font-family: var(--judul); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--espresso); }
.mec-alur li > span:last-child { font-size: 0.9375rem; color: var(--redup); }
@keyframes mec-alur-titik { 0%, 18% { background: var(--emas); border-color: var(--emas); color: var(--putih); } 24%, 100% { background: var(--gading); border-color: var(--emas); color: var(--emas-tua); } }
@keyframes mec-alur-y { 0% { transform: scaleY(0); } 90%, 100% { transform: scaleY(1); } }
@keyframes mec-alur-x { 0% { transform: scaleX(0); } 90%, 100% { transform: scaleX(1); } }
@media (min-width: 60rem) {
	.mec-alur { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
	.mec-alur::before, .mec-alur::after { left: 10%; right: 10%; top: 1.6rem; bottom: auto; width: auto; height: 1px; }
	.mec-alur::after { transform-origin: left; animation-name: mec-alur-x; }
	.mec-alur li { grid-template-columns: 1fr; justify-items: center; row-gap: 0.6rem; text-align: center; }
	.mec-alur__ikon { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .mec-alur::after { display: none; } }
.mec-lokasi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.mec-lokasi > * { min-width: 0; }
.mec-lokasi__foto picture { display: block; }
.mec-lokasi__foto img { display: block; width: 100%; height: auto; border-radius: var(--r-kartu); }
.mec-kontak { display: grid; gap: 1.1rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.mec-kontak li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 1rem; align-items: start; overflow-wrap: anywhere; }
.mec-kontak .mec-icon { margin-top: 0.2rem; color: var(--emas-tua); }
.mec-kontak a { color: var(--espresso); }
@media (min-width: 60rem) { .mec-lokasi { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 5rem; } }

/* --- Forms: short consultation form and the appointment wizard ------------------------------------------------------- */
.mec-form { padding-block: var(--ruang) 0; }
.mec-content .mec-form { padding-block: calc(var(--ruang) * 0.5); }
.mec-form__grid { display: grid; gap: 2.5rem; align-items: start; }
.mec-form__info h2 { margin-bottom: 1rem; }
.mec-form__info p { color: var(--redup); }
.mec-form__info .mec-gambar { margin-top: 2rem; }
.mec-form__form, .mec-janji__form { display: grid; gap: 1.35rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--putih); border: 1px solid var(--garis); border-top: 2px solid var(--emas); box-shadow: var(--bayangan); }
.mec-form__perangkap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mec-field label, .mec-field legend { display: block; margin-bottom: 0.45rem; padding: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emas-tua); }
.mec-field input[type="text"], .mec-field input[type="tel"], .mec-field input[type="date"], .mec-field select { width: 100%; box-sizing: border-box; min-height: 3.25rem; padding: 0.7rem 0.9rem; border: 1px solid #b8ab9a; border-radius: var(--r-kecil); background: var(--gading); color: var(--teks); font: inherit; }
.mec-field input:focus-visible, .mec-field select:focus-visible { border-color: var(--espresso); outline-offset: 1px; }
.mec-field__bantuan { margin: 0.4rem 0 0; font-size: 0.8125rem; color: var(--redup); }
.mec-field--cek { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; }
.mec-field--cek input { width: 1.3rem; height: 1.3rem; margin: 0.25rem 0 0; accent-color: var(--espresso); }
.mec-field--cek label { margin: 0; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--teks); }
.mec-form__form .mec-btn { justify-self: start; }
.mec-form__form .mec-kecil, .mec-janji__form .mec-kecil { margin: 0; }
.mec-alert { margin-bottom: 1.5rem; padding: 1.1rem 1.4rem; border-left: 2px solid var(--emas); background: var(--pasir); color: var(--espresso); }
.mec-alert--galat { border-left-color: var(--bata); background: #f7e9e6; color: var(--bata); }
@media (min-width: 58rem) { .mec-form__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5rem; } }

.mec-janji { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--ruang); }
.mec-janji__langkah { display: flex; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; list-style: none; counter-reset: l; }
.mec-janji__langkah li { flex: 1; padding-top: 0.75rem; border-top: 2px solid var(--garis); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--redup); counter-increment: l; }
.mec-janji__langkah li::before { content: counter(l, decimal-leading-zero) " "; color: var(--emas-tua); }
.mec-janji__langkah li[aria-current="step"], .mec-janji__langkah li.is-selesai { border-top-color: var(--emas); color: var(--espresso); }
.mec-janji fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mec-janji fieldset[hidden] { display: none; }
.mec-janji fieldset > legend { margin: 0 0 1.25rem; padding: 0; font-family: var(--judul); font-size: 1.75rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none; color: var(--espresso); }
.mec-pilihan { display: grid; gap: 0.75rem; }
.mec-pilihan label { position: relative; display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.9rem; align-items: center; margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--garis); border-radius: var(--r-kecil); background: var(--gading); color: var(--teks); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.mec-pilihan label:hover { border-color: var(--emas); }
.mec-pilihan label:has(input:checked) { border-color: var(--espresso); background: var(--putih); box-shadow: inset 0 0 0 1px var(--espresso); }
.mec-pilihan input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--espresso); }
.mec-pilihan small { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 400; color: var(--redup); }
@media (min-width: 40rem) { .mec-pilihan--dua { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mec-janji__gulir { display: grid; gap: 1.35rem; }
.mec-janji__navigasi { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 0.5rem; }
.mec-janji__navigasi [hidden] { display: none; }

/* --- Articles ---------------------------------------------------------------------------------------------------- */
.mec-artikel { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.mec-artikel__kartu { position: relative; display: flex; flex-direction: column; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r-kartu); overflow: hidden; transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.mec-artikel__kartu:hover, .mec-artikel__kartu:focus-within { border-color: var(--emas); box-shadow: var(--bayangan); }
.mec-artikel__media { aspect-ratio: 3 / 2; background: var(--pasir); overflow: hidden; }
.mec-artikel__media picture { height: 100%; }
.mec-artikel__media img { width: 100%; height: 100%; object-fit: cover; }
.mec-artikel__isi { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.5rem; flex: 1; }
.mec-artikel__isi h3 { font-size: 1.5rem; }
.mec-artikel__isi h3 a { color: inherit; text-decoration: none; }
.mec-artikel__isi h3 a::after { content: ""; position: absolute; inset: 0; }
.mec-artikel__isi p { margin: 0; font-size: 0.9375rem; color: var(--redup); }
.mec-artikel__isi .mec-kecil { margin-top: auto; padding-top: 0.5rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emas-tua); }
@media (min-width: 44rem) { .mec-artikel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mec-artikel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mec-main > .mec-wrap > .mec-artikel { margin-bottom: var(--ruang); }
.mec-artikel-hero { margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) auto 0; width: min(100% - 2 * var(--gutter), 56rem); }
.mec-artikel-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-kartu); }
.mec-paginasi { display: flex; gap: 0.5rem; margin-bottom: var(--ruang); }
.mec-paginasi .page-numbers { padding: 0.45rem 0.9rem; border: 1px solid var(--garis); background: var(--putih); color: var(--espresso); text-decoration: none; }
.mec-paginasi .current { background: var(--espresso); color: var(--gading); border-color: var(--espresso); }
.mec-404 { padding-bottom: 2rem; }

/* --- Footer ------------------------------------------------------------------------------------------------------ */
.mec-footer { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 1.75rem; background: var(--espresso); color: #cfc3b3; font-size: 0.9375rem; }
.mec-footer a { color: var(--gading); text-decoration: none; }
.mec-footer a:hover { color: var(--emas-muda); }
.mec-footer__grid { display: grid; gap: 2.5rem; }
.mec-footer__brand img { width: auto; height: 3.75rem; margin-bottom: 1.25rem; }
.mec-footer__brand p { max-width: 24rem; margin: 0 0 0.85rem; }
.mec-footer__disclaimer { padding-top: 0.85rem; border-top: 1px solid rgba(233, 220, 195, 0.2); font-size: 0.8125rem; color: var(--emas-muda); }
.mec-footer__title { margin: 0 0 1.1rem; font-family: var(--wp--preset--font-family--isi); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--emas); }
.mec-footer ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.mec-footer__nap { line-height: 1.75; }
.mec-footer__hours { margin: 0.85rem 0 0; }
.mec-footer__legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(233, 220, 195, 0.2); font-size: 0.8125rem; }
.mec-footer__legal p { margin: 0; }
.mec-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
@media (min-width: 44rem) { .mec-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mec-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3.5rem; } }

/* --- Sticky bar (mobile) & cookie notice ----------------------------------------------------------------------------- */
.mec-sticky { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.5rem; padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--gading) 96%, transparent); border-top: 1px solid var(--garis); backdrop-filter: blur(10px); }
.mec-sticky .mec-btn { min-height: 3.1rem; padding-inline: 0.75rem; font-size: 0.6875rem; letter-spacing: 0.08em; }
.mec-sticky[hidden] { display: none; }
.mec-site-footer { padding-bottom: 4.6rem; background: var(--espresso); }
@media (min-width: 48rem) { .mec-sticky { display: none; } .mec-site-footer { padding-bottom: 0; } }
.mec-cookie { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 5.25rem; z-index: 45; display: grid; gap: 0.85rem; max-width: 30rem; padding: 1.1rem 1.35rem; background: var(--putih); border: 1px solid var(--garis); border-top: 2px solid var(--emas); box-shadow: var(--bayangan); font-size: 0.8125rem; }
.mec-cookie[hidden] { display: none; }
.mec-cookie p { margin: 0; }
.mec-cookie__actions { display: flex; gap: 0.6rem; }
@media (min-width: 48rem) { .mec-cookie { bottom: 1.25rem; } }

/* --- Motion (decoration only) ---------------------------------------------------------------------------------------
 * main.js tags content that starts below the fold with [data-reveal] and adds .is-in once it scrolls into view; anything
 * on screen at load is never hidden. Without JavaScript, with reduced motion or ?static=1 nothing here applies. */
.mec-motion [data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity 0.8s ease var(--mec-jeda, 0ms), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mec-jeda, 0ms); }
.mec-motion [data-reveal].is-in { opacity: 1; transform: none; }
/* The gold frame behind split photos slides out from behind the photo. */
.mec-motion .mec-gambar[data-reveal]::before { opacity: 0; transform: translate(-0.9rem, -0.9rem); transition: opacity 0.6s ease 0.35s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s; }
.mec-motion .mec-gambar[data-reveal].is-in::before { opacity: 1; transform: none; }
.mec-dokter__kartu .mec-photo img, .mec-artikel__media img { transition: transform 0.6s ease; }
@media (hover: hover) { .mec-dokter__kartu:hover .mec-photo img, .mec-artikel__kartu:hover .mec-artikel__media img { transform: scale(1.04); } }
@media print { .mec-motion [data-reveal] { opacity: 1 !important; transform: none !important; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .mec-site-header, .mec-sticky, .mec-cookie, .mec-cta, .mec-form, .mec-janji, .mec-staging { display: none !important; } }