/* 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; }

/* =====================================================================
   Varian laundry: e = Segar, c = Hangat, d = Minimalis
   ===================================================================== */
.dm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.dm-plan { position: relative; padding: 28px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-align: center; }
.dm-plan h3 { font-size: 1.05rem; }
.dm-plan__p { margin: 10px 0 16px; font: 800 2rem/1 var(--head); color: var(--c1); }
.dm-plan__p small { font-size: .9rem; font-weight: 600; color: var(--mut); }
.dm-plan ul { text-align: left; display: grid; gap: 9px; color: var(--mut); font-size: .95rem; }
.dm-plan li { display: flex; gap: 9px; align-items: center; } .dm-plan li::before { color: var(--c1); }
.dm-plan.is-hot { background: linear-gradient(160deg, var(--c1), var(--c2)); color: #fff; border: 0; transform: translateY(-8px); box-shadow: 0 24px 44px -22px var(--c2); }
.dm-plan.is-hot h3, .dm-plan.is-hot .dm-plan__p, .dm-plan.is-hot .dm-plan__p small, .dm-plan.is-hot ul, .dm-plan.is-hot li::before { color: #fff; }
.dm-plan__tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 99px; background: #fbbf24; color: #1a1a1a; font: 800 .72rem/1.3 var(--head); white-space: nowrap; }
@media (max-width: 760px) { .dm-plans { grid-template-columns: 1fr; } .dm-plan.is-hot { transform: none; } }

/* --- e: Segar --- */
.dm--e .dm-nav { position: sticky; top: 10px; margin: 12px auto 0; max-width: 1060px; width: calc(100% - 24px); border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 12px 30px -14px rgba(10, 79, 138, .4); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dm--e .dm-nav { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
.dm--e .dm-hero { position: relative; overflow: hidden; margin-top: -76px; padding: clamp(130px, 16vw, 190px) 0 clamp(90px, 11vw, 140px); text-align: center; color: #fff; background: radial-gradient(50% 60% at 80% 10%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(160deg, #38b6f0, var(--c1) 45%, var(--c2)); }
.dm--e .dm-hero .dm-w { display: block; }
.dm--e .dm-hero h1, .dm--e .dm-hero h1 em { color: #fff; } .dm--e .dm-hero h1 em { text-decoration: underline wavy rgba(255, 255, 255, .55); text-underline-offset: .18em; }
.dm--e .dm-hero .dm-lead { color: #e3f4ff; margin-left: auto; margin-right: auto; }
.dm--e .dm-eyebrow { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); color: #fff; }
.dm--e .dm-btns { justify-content: center; } .dm--e .dm-hero .dm-btn--solid { background: #fff; color: var(--c2) !important; box-shadow: none; } .dm--e .dm-hero .dm-btn--line { color: #fff !important; border-color: rgba(255, 255, 255, .7); }
.dm-bub { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); animation: dm-float 9s ease-in-out infinite; }
.dm-bub.b1 { width: 120px; height: 120px; left: 8%; top: 28%; } .dm-bub.b2 { width: 70px; height: 70px; right: 12%; top: 22%; animation-delay: -3s; } .dm-bub.b3 { width: 44px; height: 44px; right: 26%; bottom: 24%; animation-delay: -6s; }
@keyframes dm-float { 50% { transform: translateY(-16px); } }
.dm-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; display: block; }
.dm-strip { padding: 0 0 8px; } .dm-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: -10px; }
.dm-facts div { padding: 16px; text-align: center; border-radius: 16px; background: var(--c3); } .dm-facts b { display: block; font: 800 1.25rem/1.2 var(--head); color: var(--c2); } .dm-facts span { font-size: .85rem; color: var(--mut); }
@media (max-width: 760px) { .dm-facts { grid-template-columns: 1fr 1fr; } .dm--e .dm-links { display: none; } }
.dm--e .dm-card { border-radius: 22px; }
@media (prefers-reduced-motion: reduce) { .dm-bub { animation: none; } }

/* --- c: Hangat --- */
.dm--c { --r: 26px; }
.dm--c .dm-nav .dm-w { flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.dm--c .dm-hero { background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 70%), var(--c3); }
.dm--c .dm-hero h1 em { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c1) 30%, transparent) 62%); }
.dm-arch { position: relative; width: 100%; max-width: 360px; aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 999px 999px 28px 28px; background: linear-gradient(170deg, #ffd9b0, var(--c1)); display: grid; place-items: center; color: #fff; overflow: hidden; box-shadow: 0 30px 60px -30px var(--c2); }
.dm-arch i { width: 40%; height: 40%; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .dm-arch i::before { display: none; }
.dm-arch span { position: absolute; bottom: 8%; left: 8%; right: 8%; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .94); color: var(--ink); font: 700 .84rem/1.3 var(--head); text-align: center; }
.dm--c .dm-hero .dm-w { grid-template-columns: 1.1fr .9fr; }
.dm-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.dm-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.dm-list .dm-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: color-mix(in srgb, var(--c1) 14%, #fff); color: var(--c1); font-size: 1.3rem; }
.dm-list h3 { font-size: 1.05rem; } .dm-list p { color: var(--mut); font-size: .92rem; } .dm-list b { font: 800 .95rem/1.2 var(--head); color: var(--c2); text-align: right; }
@media (max-width: 560px) { .dm-list li { grid-template-columns: auto 1fr; } .dm-list b { grid-column: 2; text-align: left; } }
.dm-menu { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dm-menu__item { padding: 26px 18px; text-align: center; border-radius: 26px; background: #fff; border: 2px dashed color-mix(in srgb, var(--c1) 45%, #fff); }
.dm-menu__item p { color: var(--mut); font-size: .9rem; margin: 4px 0 12px; } .dm-menu__item b { font: 800 1.7rem/1 var(--head); color: var(--c1); } .dm-menu__item small { font-size: .85rem; color: var(--mut); }
@media (max-width: 700px) { .dm-menu { grid-template-columns: 1fr; } .dm--c .dm-hero .dm-w { grid-template-columns: 1fr; } }

/* --- d: Minimalis --- */
.dm--d { --ink: #111; --mut: #5a5a57; --line: rgba(0, 0, 0, .14); --r: 0px; }
.dm--d h1, .dm--d h2, .dm--d h3 { letter-spacing: -.03em; }
.dm--d .dm-btn { border-radius: 0; } .dm--d .dm-btn--solid { box-shadow: none; } .dm--d .dm-btn--line { border-color: #111; }
.dm--d .dm-nav { background: #fff; } .dm--d .dm-brand::before { border-radius: 50%; background: #111; width: 14px; height: 14px; }
.dm--d .dm-hero { background: #fff; padding: clamp(60px, 11vw, 140px) 0 clamp(40px, 6vw, 80px); }
.dm--d .dm-hero .dm-w { display: block; }
.dm--d .dm-hero h1 { font-size: clamp(3rem, 12vw, 8rem); line-height: .95; letter-spacing: -.05em; } .dm--d .dm-hero h1 em { background: #c8f169; padding: 0 .1em; }
.dm--d .dm-lead { max-width: 520px; } .dm--d .dm-eyebrow { border-radius: 0; background: #c8f169; border-color: #c8f169; color: #111; }
.dm--d .dm-sec--alt { background: #f5f5f2; } .dm--d .dm-head { text-align: left; margin-left: 0; max-width: none; } .dm--d .dm-kicker { color: #111; }
.dm--d .dm-kicker::before { content: "/ "; }
.dm-rows { counter-reset: r; border-top: 2px solid #111; }
.dm-rows li { counter-increment: r; display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.dm-rows li::before { content: counter(r, decimal-leading-zero); font: 700 .9rem/1 var(--head); color: var(--mut); }
.dm-rows h3 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); } .dm-rows p { color: var(--mut); margin-top: 2px; } .dm-rows b { font: 800 1rem/1 var(--head); }
.dm--d .dm-price, .dm--d .dm-step, .dm--d .dm-card, .dm--d .dm-faq details { border-radius: 0; box-shadow: none; }
.dm--d .dm-price th { background: #111; } .dm--d .dm-price td:last-child { color: #111; }
.dm--d .dm-step { border: 0; border-top: 2px solid #111; background: transparent; padding-left: 0; } .dm--d .dm-step::before { background: #c8f169; color: #111; border-radius: 0; }
.dm--d .dm-faq details { background: transparent; border: 0; border-top: 1px solid var(--line); margin: 0; } .dm--d .dm-faq summary::after { color: #111; }
.dm--d .dm-cta { background: #111; } .dm--d .dm-cta .dm-btn { color: #111 !important; }
.dm--d .dm-contact .dm-card { border: 1px solid #111; }
@media (max-width: 560px) { .dm-rows li { grid-template-columns: 40px 1fr; } .dm-rows b { grid-column: 2; } }
.dm--d .dm-hero h1 { line-height: 1.02; } .dm--d .dm-hero .dm-lead { margin-top: 28px; }

/* =====================================================================
   Galeri template (kelas .tg-*): selaras dengan mahika.id
   ===================================================================== */
.ast-page-builder-template .entry-content > .tg { margin: 0; }
.tg { --p: #0463bd; --pd: #0a2447; --ps: #0c3a73; --blue: #0573dc; --sky: #1a9afa; --cyan: #7cc8ff; --ac: #1a9afa; --ink: #0d2d52; --mut: #566b86; --bg: #f3f7fc; --line: rgba(13, 45, 82, .13); --ease: cubic-bezier(.22, .61, .36, 1);
	--head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: #fff; overflow-x: clip; }
.tg *, .tg *::before, .tg *::after { box-sizing: border-box; }
.tg h1, .tg h2, .tg h3 { font-family: var(--head); margin: 0; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; }
.tg p { margin: 0; } .tg a { text-decoration: none; } .tg ul { list-style: none; margin: 0; padding: 0; }
.tg-w { max-width: 1140px; margin: 0 auto; padding: 0 20px; } .tg-w--s { max-width: 720px; }
.tg-sec { padding: clamp(52px, 7vw, 88px) 0; }

/* Tombol */
.tg-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; font: 700 .98rem/1 var(--head); color: #1a1a1a !important; background: var(--ac) linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 22px -10px rgba(13, 45, 82, .55); transition: transform .25s var(--ease), box-shadow .25s var(--ease); transform: translate(var(--bx, 0px), var(--by, 0px)); }
.tg-btn--sm { padding: 11px 16px; font-size: .9rem; }
.tg-btn--ghost { color: #fff !important; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.tg-btn--line { color: var(--p) !important; background: transparent; border-color: rgba(13, 45, 82, .35); box-shadow: none; }
.tg-btn:focus-visible, .tg-wa:focus-visible, .tg-filter button:focus-visible { outline: 3px solid var(--ac); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.tg-btn:hover { transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 2px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 28px -10px rgba(13, 45, 82, .6); }
	.tg-btn--line:hover { background: rgba(13, 45, 82, .06); }
	.tg-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none; }
	.tg-btn:hover::after { transform: translateX(120%); }
}

/* Header pil */
.tg-head { position: sticky; top: 12px; z-index: 50; margin-bottom: -76px; padding: 0 14px; pointer-events: none; }
.admin-bar .tg-head { top: 44px; }
.tg-pill { pointer-events: auto; max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px 8px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .94); box-shadow: 0 10px 32px -12px rgba(13, 45, 82, .45), inset 0 1px 0 #fff; transition: box-shadow .3s; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tg-pill { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } }
.mh-scrolled .tg-pill { box-shadow: 0 14px 34px -12px rgba(13, 45, 82, .55), inset 0 1px 0 #fff; }
.tg-logo { font: 800 1.2rem/1 var(--head); color: var(--ink) !important; letter-spacing: -.02em; } .tg-logo small { font-weight: 600; font-size: .8rem; color: var(--p); margin-left: 4px; }
.tg-pill nav { display: flex; gap: 4px; }
.tg-pill nav a { padding: 9px 16px; border-radius: 999px; font: 600 .92rem/1 var(--head); color: var(--ink) !important; transition: background-color .25s; }
@media (hover: hover) and (pointer: fine) { .tg-pill nav a:hover { background: rgba(13, 45, 82, .09); } }
@media (max-width: 720px) { .tg-pill nav { display: none; } }

/* Hero */
.tg-hero { position: relative; overflow: hidden; color: #dbe8f8; padding: calc(clamp(56px, 8vw, 100px) + 84px) 0 clamp(70px, 9vw, 120px); background-image: radial-gradient(60% 80% at 85% 0%, rgba(26, 154, 250, .28), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(125, 211, 232, .2), transparent 60%), linear-gradient(135deg, var(--pd), var(--p) 55%, var(--ps)); }
.tg-hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.tg-eyebrow { margin-bottom: 14px !important; font: 700 .8rem/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; color: #7cc8ff; } .tg-eyebrow--dark { color: var(--p); }
.tg-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; text-wrap: balance; }
.tg-hero mark { background: none; color: #7cc8ff; }
.tg-sub { margin-top: 16px !important; max-width: 560px; color: #dbe8f8; font-size: 1.08rem; text-wrap: pretty; }
.tg-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .tg-btns--c { justify-content: center; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px !important; }
.tg-chips li { padding: 7px 14px; border-radius: 999px; font-size: .86rem; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
.tg-stack { position: relative; height: 340px; } .tg-stack > div { position: absolute; width: 62%; transition: transform .4s var(--ease); }
.tg-stack__a { left: 0; top: 24px; transform: rotate(-6deg); } .tg-stack__b { right: 0; top: 0; transform: rotate(5deg); z-index: 2; } .tg-stack__c { left: 20%; bottom: 0; transform: rotate(-1deg); z-index: 3; }
@media (max-width: 860px) { .tg-hero__in { grid-template-columns: 1fr; } .tg-stack { height: 280px; max-width: 420px; margin: 0 auto; width: 100%; } }

/* Mockup */
.tg-mock { position: relative; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(13, 45, 82, .12); box-shadow: 0 20px 40px -22px rgba(13, 45, 82, .55); aspect-ratio: 16 / 11; }
.tg-mock__bar { height: 16px; display: flex; gap: 4px; align-items: center; padding: 0 8px; background: #eef3f5; } .tg-mock__bar i { width: 6px; height: 6px; border-radius: 50%; background: #c3d0d4; }
.tg-mock__hero { height: 52%; padding: 12px 14px; display: grid; align-content: end; gap: 6px; background: linear-gradient(135deg, var(--c1), var(--c2)); position: relative; }
.tg-mock__hero i { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; background: rgba(255, 255, 255, .92); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.tg-mock__hero i::before { display: none; }
.tg-mock__hero b { display: block; height: 8px; width: 58%; border-radius: 4px; background: #fff; } .tg-mock__hero u { display: block; height: 6px; width: 38%; border-radius: 3px; background: rgba(255, 255, 255, .6); }
.tg-mock__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; } .tg-mock__rows b { height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--c1) 14%, #fff); }
.tg-code { position: absolute; left: 10px; bottom: 8px; padding: 4px 9px; border-radius: 99px; font: 800 .68rem/1.2 var(--head); letter-spacing: .04em; color: #fff; background: rgba(8, 25, 30, .72); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tg-code { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }

/* Langkah */
.tg-steps { background: var(--bg); padding: 40px 0; } .tg-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tg-step { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px -20px rgba(13, 45, 82, .35); }
.tg-step b { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 50%; font: 800 1rem/1 var(--head); color: #fff; background: linear-gradient(135deg, var(--ps), var(--pd)); }
.tg-step h3 { font-size: 1.05rem; } .tg-step p { margin-top: 6px; color: var(--mut); font-size: .94rem; }
@media (max-width: 760px) { .tg-cols { grid-template-columns: 1fr; } }

/* Filter + grid */
.tg-top { text-align: center; max-width: 640px; margin: 0 auto 26px; } .tg-top h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 800; }
.tg-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.tg-filter button { cursor: pointer; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 .9rem/1 var(--head); color: var(--p); transition: all .2s var(--ease); }
.tg-filter button small { margin-left: 4px; opacity: .6; font-weight: 700; }
.tg-filter button:hover { border-color: var(--p); } .tg-filter .is-on { background: var(--p); color: #fff; border-color: var(--p); box-shadow: 0 8px 18px -8px rgba(13, 45, 82, .6); }
.tg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tg-card { position: relative; display: flex; flex-direction: column; padding: 14px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(13, 45, 82, .06), 0 14px 34px -22px rgba(13, 45, 82, .4); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tg-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(26, 154, 250, .14), transparent 62%); }
.tg-card[hidden] { display: none; }
.tg-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 6px 6px; }
.tg-tag { align-self: flex-start; padding: 4px 11px; border-radius: 99px; font: 700 .74rem/1.4 var(--head); color: var(--p); background: rgba(13, 45, 82, .09); }
.tg-card h3 { margin-top: 10px; font-size: 1.18rem; font-weight: 800; } .tg-card p { margin-top: 6px; color: var(--mut); font-size: .93rem; flex: 1; }
.tg-card__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tg-empty { margin-top: 24px; text-align: center; color: var(--mut); }
@media (hover: hover) and (pointer: fine) {
	.tg-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -22px rgba(13, 45, 82, .5); } .tg-card:hover::before { opacity: 1; }
	.tg-card .tg-mock { transition: transform .4s var(--ease); } .tg-card:hover .tg-mock { transform: scale(1.025) rotate(-.4deg); }
	.tg-stack:hover .tg-stack__a { transform: rotate(-9deg) translateX(-8px); } .tg-stack:hover .tg-stack__b { transform: rotate(8deg) translateX(8px); }
}
@media (max-width: 980px) { .tg-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .tg-grid { grid-template-columns: 1fr; } }

/* CTA, footer, WA */
.tg-cta { text-align: center; color: #dbe8f8; background-image: radial-gradient(60% 80% at 85% 0%, rgba(26, 154, 250, .26), transparent 60%), linear-gradient(135deg, var(--pd), var(--p) 55%, var(--ps)); }
.tg-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.2rem); } .tg-cta p { margin-top: 12px; color: #dbe8f8; }
.tg-foot { padding: 24px 0 90px; text-align: center; color: #dbe8f8; background: var(--pd); font-size: .88rem; }
.tg-wa { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-radius: 999px; color: #fff !important; font: 700 .95rem/1 var(--head); background: linear-gradient(180deg, #2fc16f, #1d9a52); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -8px rgba(18, 120, 64, .65); transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .tg-wa:hover { transform: translateY(-3px); } }
@media (max-width: 599px) { .tg-wa { width: 56px; padding: 0; justify-content: center; } .tg-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* Animasi: muncul, halaman, memuat */
.mh-js .tg .tg-rv { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: var(--d, 0ms); }
.mh-js .tg .tg-rv.in { opacity: 1; transform: none; }
#content, .site-footer { animation: tg-in .5s var(--ease) both; }
@keyframes tg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mh-leaving #content, .mh-leaving .site-footer { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; animation: none; }
.mh-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, #f59e0b, #7cc8ff, #0e6f80); }
.mh-progress.is-on { opacity: 1; transform: scaleX(.88); transition: transform 7s cubic-bezier(.1, .7, .2, 1), opacity .15s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mh-js .tg .tg-rv { opacity: 1; transform: none; transition: none; } #content, .site-footer { animation: none; } }
html { scroll-behavior: smooth; }
.tg a, .tg a:hover, .tg a:focus { text-decoration: none !important; }

/* ---- Penyelarasan dengan mahika.id (biru): tombol, hero, CTA, gerak ---- */
.tg-hero { background-image: radial-gradient(60% 70% at 88% 8%, rgba(26, 154, 250, .38), transparent 62%), radial-gradient(50% 60% at 0% 100%, rgba(5, 115, 220, .35), transparent 60%), linear-gradient(160deg, #0a2447 0%, #0c3a73 58%, #0a4d9a 100%); }
.tg-cta { background-image: radial-gradient(60% 90% at 50% 0%, rgba(26, 154, 250, .35), transparent 65%), linear-gradient(160deg, #0a2447, #0c3a73); }
.tg-foot { background: #0a2447; }
.tg-btn { padding: 15px 28px; border-radius: 999px; color: #fff !important; background: var(--blue); background-image: none; box-shadow: 0 10px 22px -12px var(--blue); transform: none; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s, filter .2s; font-weight: 700; }
.tg-btn--sm { padding: 11px 20px; font-size: .9rem; }
.tg-hero .tg-btn:not(.tg-btn--ghost), .tg-cta .tg-btn:not(.tg-btn--ghost) { background: var(--sky); color: #08162a !important; box-shadow: 0 12px 26px -12px var(--sky); }
.tg-btn--ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5); box-shadow: none; }
.tg-btn--line { background: transparent; color: var(--ink) !important; border: 1.5px solid rgba(13, 45, 82, .24); box-shadow: none; }
.tg-btn::after { display: none !important; }
@media (hover: hover) and (pointer: fine) {
	.tg-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 24px -12px var(--blue); }
	.tg-btn--ghost:hover, .tg-btn--line:hover { background: rgba(255, 255, 255, .1); filter: none; box-shadow: none; }
	.tg-btn--line:hover { background: rgba(13, 45, 82, .05); }
	.tg-btn:active { transform: none; }
}
.tg-wa { background: #17803f; }
.tg-eyebrow { color: var(--cyan); } .tg-eyebrow--dark { color: var(--p); }
.tg-hero mark { color: var(--cyan); }
.tg-step b, .tg-logo small { color: #fff; } .tg-logo small { color: var(--p); }
.tg-step b { background: linear-gradient(135deg, var(--sky), var(--p)); }
.tg-tag { color: var(--p); background: rgba(5, 115, 220, .1); }
.tg-pill nav { position: relative; }
.tg-pill nav a { position: relative; z-index: 1; }
.tg-ind { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 999px; background: rgba(5, 115, 220, .1); pointer-events: none; opacity: 0; transition: transform .38s var(--ease), width .38s var(--ease), opacity .25s; }
@media (hover: hover) and (pointer: fine) { .tg-pill nav a:hover { background: transparent; } }

/* Filter: indikator bergeser + kartu muncul bertahap */
.tg-filter { position: relative; }
.tg-filter button { position: relative; z-index: 1; }
.tg-filter.has-ind button.is-on { background: transparent; color: #fff; border-color: transparent; box-shadow: none; }
.tg-filter:not(.has-ind) .is-on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: none; }
.tg-fi { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 999px; background: var(--blue); box-shadow: 0 8px 18px -8px var(--blue); pointer-events: none; transition: transform .38s var(--ease), width .38s var(--ease), height .38s var(--ease); }
@keyframes tg-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.tg-card.tg-pop { animation: tg-pop .45s var(--ease) both; animation-delay: var(--pd, 0ms); }

/* Perpindahan halaman: sama dengan mahika.id */
#content { animation: tg-in .55s var(--ease) both; }
.site-footer { animation: tg-in .7s var(--ease) .1s both; }
.mh-leaving #content, .mh-leaving .site-footer { transition: opacity .22s ease, transform .22s ease; }
@media (prefers-reduced-motion: reduce) { .tg-card.tg-pop { animation: none; } .tg-ind, .tg-fi { transition: none; } }

/* =====================================================================
   Template LumiWash (kelas .lw-*): profil lengkap, navy + mint
   ===================================================================== */
.lw { --navy: #133c55; --teal: #1f7a8c; --mint: #7fd8cb; --mintl: color-mix(in srgb, var(--mint) 16%, #fff); --navy-d: color-mix(in srgb, var(--navy) 80%, #000); --navy-dd: color-mix(in srgb, var(--navy) 55%, #000); --navy-l: color-mix(in srgb, var(--navy) 78%, var(--teal)); --ink: var(--navy); --mut: #4f6672; --line: rgba(19, 60, 85, .13); --r: 18px; --ease: cubic-bezier(.22, .61, .36, 1); color: #2c4656; background: #fff; scroll-behavior: smooth; overflow-x: clip; }
.lw h1, .lw h2, .lw h3 { color: var(--navy); }
.lw a:focus-visible, .lw summary:focus-visible, .lw select:focus-visible, .lw input:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.lw .dm-btn { border-radius: 999px; padding: 14px 24px; }
.lw .dm-btn--solid { background: var(--teal); box-shadow: 0 10px 22px -12px var(--teal); }
.lw .dm-btn--mint { background: var(--mint); color: var(--navy-dd) !important; box-shadow: 0 12px 26px -12px var(--mint); }
.lw .dm-btn--ghostw { background: transparent; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .5); }
.lw .dm-btn--sm { padding: 10px 18px; }
@media (hover: hover) and (pointer: fine) { .lw .dm-btn:hover { transform: translateY(-1px); filter: brightness(1.06); } .lw .dm-btn--ghostw:hover { background: rgba(255, 255, 255, .1); filter: none; } }

/* Navigasi */
.lw-nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lw-nav { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } }
.lw-nav .dm-w { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 11px; padding-bottom: 11px; }
.lw-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy) !important; }
.lw-brand b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mint); color: var(--navy-dd); font: 800 1.1rem/1 var(--head); }
.lw-brand span { display: grid; font: 800 1.1rem/1.1 var(--head); } .lw-brand small { font: 500 .68rem/1.2 var(--head); color: var(--mut); letter-spacing: .02em; }
.lw-links { display: flex; gap: 4px; } .lw-links a { padding: 9px 13px; border-radius: 999px; font: 600 .9rem/1 var(--head); color: var(--navy); transition: background-color .2s; }
.lw-links a:hover { background: var(--mintl); }
.lw-navr { display: flex; align-items: center; gap: 10px; }
.lw-menu { display: none; position: relative; } .lw-menu summary { list-style: none; cursor: pointer; display: grid; gap: 4px; width: 42px; height: 42px; place-content: center; border-radius: 50%; background: var(--mintl); } .lw-menu summary::-webkit-details-marker { display: none; }
.lw-menu summary i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--navy); }
.lw-menu nav { position: absolute; right: 0; top: 52px; min-width: 210px; padding: 8px; display: grid; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 44px -20px rgba(19, 60, 85, .5); }
.lw-menu nav a { padding: 12px 14px; border-radius: 12px; font: 600 .95rem/1 var(--head); color: var(--navy); } .lw-menu nav a:hover { background: var(--mintl); }
@media (max-width: 900px) { .lw-links { display: none; } .lw-menu { display: block; } .lw-navr .dm-btn { display: none; } }

/* Hero */
.lw-hero { position: relative; overflow: hidden; color: #cfe6ea; padding: clamp(48px, 8vw, 96px) 0 clamp(80px, 11vw, 130px); background: linear-gradient(160deg, var(--navy-d), var(--navy) 60%, var(--navy-l)); }
.lw-c { position: absolute; border-radius: 50%; pointer-events: none; } .lw-c1 { width: 360px; height: 360px; right: -90px; top: -110px; background: #1f7a8c; opacity: .6; } .lw-c2 { width: 220px; height: 220px; left: -70px; bottom: -80px; background: var(--mint); opacity: .22; }
.lw-hero__in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.lw-tag { display: inline-block; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px; font: 700 .78rem/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); }
.lw-hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; } .lw-hero h1 em { font-style: normal; color: var(--mint); }
.lw-lead { margin-top: 18px; max-width: 520px; font-size: 1.1rem; color: #cfe6ea; text-wrap: pretty; }
.lw-hero .dm-btns { margin-top: 28px; }
.lw-art { position: relative; } .lw-art > img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); }
.lw-float { position: absolute; padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--navy); font: 700 .82rem/1.2 var(--head); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); animation: lw-bob 6s ease-in-out infinite; }
.lw-float.f1 { left: -14px; bottom: 16%; } .lw-float.f2 { right: -10px; top: 8%; animation-delay: -3s; }
@keyframes lw-bob { 50% { transform: translateY(-7px); } }
@media (max-width: 860px) { .lw-hero__in { grid-template-columns: 1fr; } .lw-float.f1 { left: 8px; } .lw-float.f2 { right: 8px; } }

/* Statistik */
.lw-stats { position: relative; z-index: 2; margin-top: -48px; } .lw-stats__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lw-stats__g > div { padding: 20px 14px; text-align: center; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 38px -24px rgba(19, 60, 85, .5); }
.lw-stats b { display: block; font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.1 var(--head); color: var(--navy); } .lw-stats span { font-size: .85rem; color: var(--mut); }
@media (max-width: 700px) { .lw-stats__g { grid-template-columns: 1fr 1fr; } }

/* Bagian umum */
.lw-sec { padding: clamp(52px, 7vw, 92px) 0; } .lw-alt { background: var(--mintl); } .lw-narrow { max-width: 860px; }
.lw-head { max-width: 640px; margin-bottom: 34px; }
.lw-kick { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 800 .78rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.lw-kick::after { content: ""; width: 38px; height: 2px; background: var(--mint); }
.lw-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .lw-head p { margin-top: 12px; color: var(--mut); }
.lw-h3 { margin: 28px 0 12px; font-size: 1.15rem; font-weight: 800; } .lw-p { color: #3b5565; line-height: 1.7; }
.lw-card { position: relative; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(19, 60, 85, .05), 0 14px 30px -22px rgba(19, 60, 85, .45); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.lw-card h3 { font-size: 1.08rem; font-weight: 800; margin: 14px 0 6px; } .lw-card p { color: var(--mut); font-size: .95rem; line-height: 1.6; }
.lw-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--mint); color: var(--navy-dd); font: 800 .95rem/1 var(--head); } .lw-n.is-alt { background: var(--teal); color: #fff; }
.lw-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .lw-grid3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .lw-grid3 { grid-template-columns: 1fr; } }
@media (hover: hover) and (pointer: fine) { .lw-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(19, 60, 85, .5); } }

/* Tentang */
.lw-about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start; }
.lw-info { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; } .lw-info > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 13px 18px; } .lw-info > div:nth-child(odd) { background: color-mix(in srgb, var(--mint) 7%, #fff); }
.lw-info dt { font: 700 .86rem/1.4 var(--head); color: var(--navy); } .lw-info dd { margin: 0; font-size: .92rem; color: #3b5565; }
.lw-vm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.lw-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; } .lw-values > div { padding: 18px; border-radius: 16px; background: var(--mintl); } .lw-values b { display: block; font: 800 1.05rem/1.2 var(--head); color: var(--navy); } .lw-values span { font-size: .88rem; color: var(--mut); }
@media (max-width: 900px) { .lw-about, .lw-vm { grid-template-columns: 1fr; } .lw-values { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .lw-info > div { grid-template-columns: 1fr; gap: 2px; } }

/* Proses */
.lw-proc { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: start; }
.lw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lw-steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.lw-steps h3 { font-size: 1.02rem; font-weight: 800; } .lw-steps p { margin-top: 2px; color: var(--mut); font-size: .93rem; }
.lw-qc { padding: 24px; border-radius: var(--r); color: #cfe6ea; background: linear-gradient(160deg, var(--navy), var(--navy-l)); position: sticky; top: 90px; } .lw-qc h3 { color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.lw-qc ul { display: grid; gap: 11px; list-style: none; margin: 0; padding: 0; font-size: .93rem; } .lw-qc li { display: flex; gap: 10px; align-items: flex-start; } .lw-qc li::before { color: var(--mint); margin-top: .2em; }
@media (max-width: 900px) { .lw-proc { grid-template-columns: 1fr; } .lw-qc { position: static; } }

/* Harga */
.lw-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lw-plan { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); } .lw-plan.is-main { border-color: var(--mint); box-shadow: 0 22px 44px -26px var(--teal); }
.lw-plan__t { display: inline-block; padding: 6px 14px; border-radius: 10px; background: var(--mintl); font: 800 .88rem/1 var(--head); color: var(--navy); } .is-main .lw-plan__t { background: var(--mint); }
.lw-plan__s { margin-top: 16px; color: var(--mut); font-size: .93rem; } .lw-plan__p { margin-top: 4px; font: 800 2rem/1.1 var(--head); color: var(--navy); } .lw-plan__p small { font-size: .95rem; font-weight: 600; color: var(--mut); }
.lw-plan__n { margin-top: 10px; font-size: .86rem; color: var(--mut); }
@media (max-width: 760px) { .lw-plans { grid-template-columns: 1fr; } }
.lw-calc { display: none; margin-top: 22px; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 38px -26px rgba(19, 60, 85, .5); }
.mh-js .lw-calc, html .lw-calc { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: center; }
.lw-calc h3 { font-size: 1.1rem; font-weight: 800; } .lw-calc__h p { margin-top: 6px; font-size: .9rem; color: var(--mut); }
.lw-calc__f { display: grid; gap: 12px; } .lw-calc label { display: grid; gap: 6px; font: 700 .82rem/1 var(--head); color: var(--navy); }
.lw-calc select, .lw-calc input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(19, 60, 85, .22); background: #fff; font: 600 1rem/1.2 var(--head); color: var(--navy); }
.lw-calc__r { padding: 18px; border-radius: 16px; background: var(--mintl); text-align: center; display: grid; gap: 6px; justify-items: center; } .lw-calc__r span { font: 700 .8rem/1 var(--head); color: var(--mut); text-transform: uppercase; letter-spacing: .08em; }
.lw-calc__r b { font: 800 2rem/1.1 var(--head); color: var(--navy); } .lw-calc__r small { color: var(--mut); font-size: .84rem; min-height: 2.4em; } .lw-calc__r .dm-btn { margin-top: 4px; }
@media (max-width: 900px) { html .lw-calc { grid-template-columns: 1fr; } }
.lw-sat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.lw-sat li { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); } .lw-sat li::after { content: none; }
.lw-sat span { flex: 1; color: #3b5565; } .lw-sat b { font: 800 .98rem/1 var(--head); color: var(--navy); white-space: nowrap; }
@media (max-width: 640px) { .lw-sat { grid-template-columns: 1fr; } }
.lw-note { margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: #fff; border-left: 4px solid var(--mint); } .lw-note b { font: 800 .95rem/1 var(--head); color: var(--navy); } .lw-note p { margin-top: 6px; color: var(--mut); font-size: .92rem; }

/* Kemudahan */
.lw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .lw-two h3 { margin-top: 0; font-size: 1.15rem; }
.lw-flow { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: f; display: grid; gap: 10px; } .lw-flow li { counter-increment: f; display: flex; gap: 12px; align-items: center; color: #3b5565; font-size: .95rem; }
.lw-flow li::before { content: counter(f); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--navy-dd); font: 800 .8rem/1 var(--head); }
.lw-ticks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: .95rem; color: #3b5565; } .lw-ticks li { display: flex; gap: 10px; align-items: flex-start; } .lw-ticks li::before { color: var(--teal); margin-top: .2em; }
.lw-mitra { margin-top: 18px; padding: 28px; border-radius: var(--r); color: #cfe6ea; background: linear-gradient(160deg, var(--navy), var(--navy-l)); display: grid; grid-template-columns: 1fr 1.2fr; gap: 26px; align-items: center; }
.lw-mitra h3 { color: #fff; font-size: 1.2rem; margin-bottom: 8px; } .lw-mitra p { font-size: .95rem; }
.lw-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .lw-tiers > div { padding: 16px 12px; text-align: center; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.lw-tiers b { display: block; color: #fff; font: 800 .98rem/1.2 var(--head); } .lw-tiers span { display: block; margin: 4px 0 8px; font-size: .8rem; } .lw-tiers em { font: 800 .95rem/1 var(--head); font-style: normal; color: var(--mint); }
@media (max-width: 900px) { .lw-two, .lw-mitra { grid-template-columns: 1fr; } } @media (max-width: 520px) { .lw-tiers { grid-template-columns: 1fr; } }

/* Testimoni, galeri */
.lw-quotes-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; } .lw-quotes-h .lw-h3 { margin: 0; }
.lw-demo { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px dashed var(--teal); font: 700 .75rem/1.2 var(--head); color: var(--teal); }
.lw-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 16px; } @media (max-width: 860px) { .lw-quotes { grid-template-columns: 1fr; } }
.lw-quote { margin: 0; padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); } .lw-quote blockquote { margin: 0; color: #2c4656; line-height: 1.6; } .lw-quote figcaption { margin-top: 12px; font: 800 .88rem/1 var(--head); color: var(--navy); }
.lw-gal { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } .lw-gal figure { margin: 0; padding: 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); } .lw-gal__a { grid-row: span 1; }
.lw-gal figure:last-child { grid-column: 1 / -1; } .lw-gal img { display: block; width: 100%; height: auto; border-radius: 12px; } .lw-gal figcaption { padding: 10px 4px 2px; font: 700 .86rem/1.3 var(--head); color: var(--navy); }
@media (max-width: 760px) { .lw-gal { grid-template-columns: 1fr; } }

/* FAQ */
.lw-faq details { background: #fff; border-radius: 14px; } .lw-faq summary { color: var(--navy); } .lw-faq summary::after { color: var(--teal); } .lw-faq details p { color: var(--mut); }

/* Kontak */
.lw-contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: stretch; }
.lw-cc { padding: 28px; border-radius: 24px; color: #cfe6ea; background: linear-gradient(160deg, var(--navy), var(--navy-l)); } .lw-cc h3 { color: var(--mint); font-size: 1.2rem; margin-bottom: 14px; }
.lw-cc dl { margin: 0; display: grid; gap: 0; } .lw-cc dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .12); } .lw-cc dt { font: 800 .72rem/1.6 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); } .lw-cc dd { margin: 0; color: #fff; font-weight: 600; }
.lw-cs { display: grid; gap: 14px; align-content: start; } .lw-cs .lw-card h3 { margin-top: 0; } .lw-chat { padding: 18px; border-radius: 18px; background: var(--mintl); text-align: center; }
@media (max-width: 860px) { .lw-contact { grid-template-columns: 1fr; } } @media (max-width: 520px) { .lw-cc dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* Penutup + footer */
.lw-end { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0; text-align: center; color: #cfe6ea; background: linear-gradient(160deg, var(--navy-d), var(--navy) 60%, var(--navy-l)); } .lw-end .dm-w { position: relative; }
.lw-end h2 { color: #fff; font-size: clamp(1.8rem, 4.4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; } .lw-end em { font-style: normal; color: var(--mint); } .lw-end p { margin-top: 12px; }
.lw-endb { justify-content: center; }
.lw-foot { padding: 28px 0 92px; background: var(--navy-dd); color: #9fbac4; font-size: .86rem; text-align: center; } .lw-foot b { color: #fff; font: 800 1rem/1 var(--head); } .lw-foot p { margin: 8px auto 0; max-width: 720px; } .lw-foot a { color: var(--mint); font-weight: 700; }

/* Muncul saat digulir */
.mh-js .lw .lw-rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.mh-js .lw .lw-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mh-js .lw .lw-rv { opacity: 1; transform: none; transition: none; } .lw-float { animation: none; } html { scroll-behavior: auto; } }

/* LumiWash: koreksi kekhususan (.dm p / .dm h3 mereset margin) */
.lw a, .lw a:hover, .lw a:focus { text-decoration: none !important; }
.lw .lw-lead { margin-top: 20px; } .lw .lw-tag { margin-bottom: 18px; }
.lw .lw-h3 { margin: 28px 0 12px; } .lw .lw-quotes-h .lw-h3 { margin: 0; }
.lw .lw-plan__s { margin-top: 16px; } .lw .lw-plan__p { margin-top: 4px; } .lw .lw-plan__n { margin-top: 10px; }
.lw .lw-note p { margin-top: 6px; } .lw .lw-head p { margin-top: 12px; } .lw .lw-end p { margin-top: 12px; } .lw .lw-foot p { margin: 8px auto 0; } .lw .lw-calc__h p { margin-top: 6px; }
.lw .lw-card h3 { margin: 14px 0 6px; } .lw .lw-two .lw-card h3, .lw .lw-cs .lw-card h3 { margin-top: 0; } .lw .lw-mitra h3 { margin: 0 0 8px; }
.lw .lw-card p { margin-top: 0; } .lw .lw-steps p { margin-top: 2px; } .lw .lw-calc__r small { margin: 0; }
.lw .lw-calc select, .lw .lw-calc input { height: 50px; line-height: 1.3; }
.lw-hero .lw-art { margin-top: 0; }
.lw-stats__g { grid-template-columns: repeat(var(--cols, 4), 1fr); } .lw-plans { grid-template-columns: repeat(var(--cols, 3), 1fr); } .lw-tiers { grid-template-columns: repeat(var(--cols, 3), 1fr); }
@media (max-width: 700px) { .lw-stats__g { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .lw-plans { grid-template-columns: 1fr; } } @media (max-width: 520px) { .lw-tiers { grid-template-columns: 1fr; } }
.lw-brand b.has-img { background: none; overflow: hidden; } .lw-brand b img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lw-art > img, .lw-art > picture img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); }
.lw-gal img { height: auto; }