/* Template demo Mahika: semua aturan dibatasi di .dm (template) dan .dmh (galeri). */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); }

.dm, .dmh {
	--ink: #16202e; --mut: #586579; --line: rgba(22, 32, 46, .12); --r: 18px;
	--head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink); line-height: 1.6; font-size: 1.02rem;
}
.dm *, .dmh * { box-sizing: border-box; }
.dm h1, .dm h2, .dm h3, .dmh h1, .dmh h2, .dmh h3 { font-family: var(--head); color: var(--ink); line-height: 1.2; margin: 0; letter-spacing: -.015em; }
.dm p, .dmh p { margin: 0; }
.dm a, .dmh a { text-decoration: none; }
.dm ul, .dmh ul { list-style: none; margin: 0; padding: 0; }
.ast-page-builder-template .entry-content > .dm, .ast-page-builder-template .entry-content > .dmh { margin: 0; }
.ast-page-builder-template .site-content > .ast-container { max-width: none; padding: 0; }
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > * { max-width: none; }
.dm-w { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Ikon */
[data-i]::before { content: ""; display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* Bilah atas (penanda demo) */
.dm-bar { background: #0d2d52; color: #dbeaff; font: 500 .82rem/1.3 var(--head); }
.dm-bar .dm-w { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
.dm-bar a { color: #fff; font-weight: 700; }
.dm-bar a:hover { text-decoration: underline; }

/* Navigasi */
.dm-nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.admin-bar .dm-nav { top: 32px; }
.dm-nav .dm-w { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.dm-brand { display: inline-flex; align-items: center; gap: 10px; font: 800 1.15rem/1 var(--head); color: var(--ink) !important; }
.dm-brand::before { content: ""; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.dm-brand i { position: relative; width: 0; }
.dm-links { display: flex; gap: 22px; font: 600 .94rem/1 var(--head); }
.dm-links a { color: var(--mut); }
.dm-links a:hover { color: var(--c1); }
@media (max-width: 760px) { .dm-links { display: none; } }

/* Tombol */
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 13px; font: 700 .98rem/1.1 var(--head); border: 1px solid transparent; cursor: pointer; transition: filter .2s, background-color .2s; }
.dm-btn--solid { background: var(--c1); color: #fff !important; box-shadow: 0 10px 22px -12px var(--c1); }
.dm-btn--solid:hover { filter: brightness(1.08); }
.dm-btn--line { background: transparent; color: var(--c1) !important; border-color: var(--c1); }
.dm-btn--line:hover { background: rgba(0, 0, 0, .04); }
.dm-btn--sm { padding: 10px 16px; font-size: .9rem; }
.dm-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Hero */
.dm-hero { padding: clamp(44px, 7vw, 88px) 0; background: radial-gradient(60% 70% at 90% 0%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%), var(--c3); }
.dm-hero .dm-w { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.dm-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 700 .8rem/1 var(--head); color: var(--c1); margin-bottom: 18px; }
.dm-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; text-wrap: balance; }
.dm-hero h1 em { font-style: normal; color: var(--c1); }
.dm-hero .dm-lead { margin-top: 16px; max-width: 540px; color: var(--mut); font-size: 1.1rem; text-wrap: pretty; }
.dm-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font: 600 .92rem/1.2 var(--head); color: var(--ink); }
.dm-points li { display: inline-flex; align-items: center; gap: 7px; }
.dm-points li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--c1) center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.dm-art { position: relative; aspect-ratio: 1 / 1; max-width: 400px; width: 100%; margin: 0 auto; border-radius: 34px; background: linear-gradient(145deg, var(--c1), var(--c2)); display: grid; place-items: center; color: #fff; box-shadow: 0 30px 60px -28px var(--c2); overflow: hidden; }
.dm-art::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .1); top: -18%; right: -18%; }
.dm-art::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .08); bottom: -12%; left: -10%; }
.dm-art i { position: relative; z-index: 1; width: 44%; height: 44%; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.dm-art span { position: absolute; z-index: 2; padding: 9px 14px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 700 .82rem/1.2 var(--head); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4); }
.dm-art span:nth-of-type(1) { left: 6%; bottom: 14%; }
.dm-art span:nth-of-type(2) { right: 6%; top: 12%; }
@media (max-width: 860px) { .dm-hero .dm-w { grid-template-columns: 1fr; } .dm-art { max-width: 280px; order: -1; } }

/* Tata letak B: hero gelap di tengah */
.dm--b .dm-hero { background: radial-gradient(60% 80% at 80% 0%, color-mix(in srgb, var(--c1) 40%, transparent), transparent 65%), var(--c2); color: #e9eef7; text-align: center; }
.dm--b .dm-hero .dm-w { grid-template-columns: 1fr; justify-items: center; }
.dm--b .dm-hero h1, .dm--b .dm-hero h1 em { color: #fff; }
.dm--b .dm-hero h1 em { color: color-mix(in srgb, var(--c1) 55%, #fff); }
.dm--b .dm-hero .dm-lead { color: #c9d5e6; margin-left: auto; margin-right: auto; }
.dm--b .dm-points { justify-content: center; color: #fff; }
.dm--b .dm-btns { justify-content: center; }
.dm--b .dm-art { display: none; }
.dm--b .dm-eyebrow { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.dm--b .dm-btn--line { color: #fff !important; border-color: rgba(255, 255, 255, .5); }

/* Bagian */
.dm-sec { padding: clamp(48px, 7vw, 84px) 0; }
.dm-sec--alt { background: var(--c3); }
.dm-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.dm-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); font-weight: 800; }
.dm-head p { margin-top: 12px; color: var(--mut); }
.dm-kicker { display: block; margin-bottom: 10px; font: 700 .8rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--c1); }

.dm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dm-card { padding: 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(22, 32, 46, .05), 0 14px 30px -20px rgba(22, 32, 46, .25); }
.dm-card .dm-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px; background: color-mix(in srgb, var(--c1) 12%, #fff); color: var(--c1); font-size: 1.35rem; }
.dm-card h3 { font-size: 1.1rem; font-weight: 700; }
.dm-card p { margin-top: 8px; color: var(--mut); font-size: .96rem; }
.dm-card .dm-from { display: block; margin-top: 14px; font: 700 .9rem/1 var(--head); color: var(--c1); }
.dm--b .dm-card { border-radius: 14px; border-left: 4px solid var(--c1); }
@media (max-width: 900px) { .dm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dm-grid { grid-template-columns: 1fr; } }

/* Harga */
.dm-price-wrap { max-width: 760px; margin: 0 auto; }
.dm-price { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: .98rem; }
.dm-price th { text-align: left; background: var(--c1); color: #fff; padding: 14px 18px; font: 700 .9rem/1.2 var(--head); }
.dm-price th:last-child, .dm-price td:last-child { text-align: right; white-space: nowrap; }
.dm-price td { padding: 13px 18px; border-top: 1px solid var(--line); }
.dm-price td small { display: block; color: var(--mut); font-size: .85rem; }
.dm-price td:last-child { font: 700 1rem/1.2 var(--head); color: var(--c1); }
.dm-note { margin-top: 14px; text-align: center; color: var(--mut); font-size: .88rem; }

/* Langkah */
.dm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.dm-step { position: relative; padding: 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); counter-increment: s; }
.dm-step::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font: 800 1.05rem/1 var(--head); }
.dm-step h3 { font-size: 1.08rem; }
.dm-step p { margin-top: 6px; color: var(--mut); font-size: .95rem; }
@media (max-width: 760px) { .dm-steps { grid-template-columns: 1fr; } }

/* Tanya jawab */
.dm-faq { max-width: 760px; margin: 0 auto; }
.dm-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; }
.dm-faq summary { cursor: pointer; list-style: none; padding: 17px 20px; font: 700 1rem/1.4 var(--head); display: flex; justify-content: space-between; gap: 14px; }
.dm-faq summary::-webkit-details-marker { display: none; }
.dm-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--c1); }
.dm-faq details[open] summary::after { content: "\2212"; }
.dm-faq details p { padding: 0 20px 18px; color: var(--mut); }

/* Kontak */
.dm-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dm-contact .dm-card h3 { margin-bottom: 14px; }
.dm-info li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; color: var(--mut); }
.dm-info li::before { color: var(--c1); margin-top: .25em; }
.dm-info b { color: var(--ink); font-family: var(--head); }
.dm-cta { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; border: 0; }
.dm-cta h3, .dm-cta p { color: #fff; }
.dm-cta p { margin: 8px 0 20px; opacity: .92; }
.dm-cta .dm-btn { background: #fff; color: var(--c2) !important; box-shadow: none; }
@media (max-width: 760px) { .dm-contact { grid-template-columns: 1fr; } }

.dm-foot { padding: 26px 0 90px; text-align: center; color: var(--mut); font-size: .86rem; border-top: 1px solid var(--line); }
.dm-foot a { color: var(--c1); font-weight: 700; }
.dm-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 999px; background: #1f9d55; color: #fff !important; font: 700 .94rem/1 var(--head); box-shadow: 0 14px 28px -12px rgba(18, 120, 64, .8); }
.dm-wa::before { content: ""; width: 1.2em; height: 1.2em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.dm-wa:hover { filter: brightness(1.06); }

/* Galeri template (halaman /template/) */
.dmh { background: #f1f6fd; padding: clamp(40px, 6vw, 80px) 0; --c1: #0573dc; }
.dmh-head { text-align: center; max-width: 680px; margin: 0 auto 38px; }
.dmh-head .dm-kicker { color: #0573dc; }
.dmh-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-weight: 800; color: #0d2d52; }
.dmh-head p { margin-top: 14px; color: var(--mut); font-size: 1.05rem; }
.dmh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dmh-card { display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid rgba(13, 45, 82, .1); overflow: hidden; box-shadow: 0 1px 2px rgba(13, 45, 82, .05), 0 18px 36px -24px rgba(13, 45, 82, .35); }
.dmh-mock { position: relative; margin: 14px 14px 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(13, 45, 82, .1); background: #fff; aspect-ratio: 16 / 11; }
.dmh-mock::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; background: #eef2f7; box-shadow: inset 0 -1px 0 rgba(13, 45, 82, .08); }
.dmh-mock .hero { position: absolute; inset: 14px 0 38% 0; background: linear-gradient(135deg, var(--c1), var(--c2)); display: grid; place-items: center; color: #fff; font-size: 2rem; }
.dmh-mock .hero i { width: 1em; height: 1em; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.dmh-mock .rows { position: absolute; inset: auto 12px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dmh-mock .rows b { height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--c1) 14%, #fff); }
.dmh-mock.is-b .hero { background: var(--c2); }
.dmh-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.dmh-tag { display: inline-flex; align-items: center; gap: 7px; font: 700 .76rem/1 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--c1); }
.dmh-body h2 { margin: 8px 0 6px; font-size: 1.2rem; font-weight: 800; color: #0d2d52; }
.dmh-body p { color: var(--mut); font-size: .94rem; flex: 1; }
.dmh-act { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.dmh-act .dm-btn--solid { background: #0573dc; box-shadow: none; }
.dmh-act .dm-btn--line { color: #0573dc !important; border-color: rgba(5, 115, 220, .45); }
.dmh-foot { margin-top: 38px; text-align: center; color: var(--mut); font-size: .92rem; }
@media (max-width: 900px) { .dmh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .dmh-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
html { scroll-behavior: smooth; }

[data-i="laundry"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Ccircle cx='12' cy='14' r='5'/%3E%3Cpath d='M8 6h.01M12 6h.01'/%3E%3C/svg%3E")}
[data-i="bengkel"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E")}
[data-i="salon"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E")}
[data-i="katering"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V2M7 2v20M21 15V2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h3zm0 0v7'/%3E%3C/svg%3E")}
[data-i="toko"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 2-4h16l2 4M2 7v1a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0V7M2 7h20M4 11v10h16V11M9 21v-6h6v6'/%3E%3C/svg%3E")}
[data-i="klinik"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
[data-i="kontraktor"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20M4 20v-3a8 8 0 0 1 16 0v3M12 9V5M9 5h6'/%3E%3C/svg%3E")}
[data-i="shirt"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 5.7 16 3a4 4 0 0 1-8 0L3.6 5.7a1 1 0 0 0-.5 1.3l1.5 3a1 1 0 0 0 1.4.4L7 9.8V20a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.8l.99.6a1 1 0 0 0 1.4-.4l1.5-3a1 1 0 0 0-.49-1.3z'/%3E%3C/svg%3E")}
[data-i="truck"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E")}
[data-i="clock"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
[data-i="sparkle"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/%3E%3C/svg%3E")}
[data-i="check"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
[data-i="pin"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
[data-i="chat"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
[data-i="shield"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E")}
[data-i="box"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5zM3 8l9 5 9-5M12 13v9'/%3E%3C/svg%3E")}
[data-i="home"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/svg%3E")}
[data-i="heart"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
[data-i="calendar"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
[data-i="tag"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8zM7 7h.01'/%3E%3C/svg%3E")}
[data-i="drop"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7s7 6.6 7 11.3a7 7 0 0 1-14 0c0-4.7 7-11.3 7-11.3z'/%3E%3C/svg%3E")}
.dm-art i::before, .dmh-mock .hero i::before { display: none; }

/* Galeri: gaya editorial datar, sejalan dengan mahika.id v6 */
.dmh { background: #fff; }
.dmh-card { border-radius: 12px; box-shadow: none; border: 1px solid rgba(13, 45, 82, .13); }
.dmh-mock { border-radius: 8px; }
.dmh-head { text-align: left; margin-left: 0; max-width: 720px; }
.dmh-head h1 { letter-spacing: -.035em; }
.dm-btn { border-radius: 8px; }
.dmh-act .dm-btn--solid { background: #0573dc; }
@media (hover: hover) and (pointer: fine) { .dmh-card:hover { border-color: #0573dc; } }

/* Kode template */
[data-i="snow"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20M12 2v20m4-18-4 4-4-4m8 16-4-4-4 4M20 16l-4-4 4-4M4 8l4 4-4 4'/%3E%3C/svg%3E")}
.dmh-kode { display: inline-block; margin: 8px 0 0; padding: 3px 10px; border-radius: 6px; background: rgba(13, 45, 82, .08); color: #0d2d52; font: 700 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; }
.dm-bar b { padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, .16); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; }