/* Astra Mahika v8: desain ulang. Warna dari logo: navy #0d2d52, biru #0573dc, biru langit #1a9afa. Aturan kontras: teks putih hanya di atas biru #0573dc, navy, atau hijau WhatsApp; di atas biru langit selalu teks navy. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; } :root { --navy: #0d2d52; --blue: #0573dc; --blue-d: #0463bd; --sky: #1a9afa; --cyan: #7cc8ff; --bg: #ffffff; --alt: #f3f7fc; --surface: #ffffff; --ink: #0d2d52; --body: #364b66; --muted: #566b86; --link: #0463bd; --line: rgba(13, 45, 82, .13); --line-s: rgba(13, 45, 82, .24); --shadow: 0 1px 2px rgba(13, 45, 82, .06), 0 20px 40px -26px rgba(13, 45, 82, .4); --r: 20px; --r-s: 12px; --head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); } html[data-theme="dark"] { color-scheme: dark; --bg: #08162a; --alt: #0b1c34; --surface: #0f2240; --ink: #eaf2fd; --body: #c5d4e8; --muted: #9db2cc; --link: #5cc0ff; --line: rgba(140, 190, 255, .16); --line-s: rgba(140, 190, 255, .3); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 20px 40px -26px rgba(0, 0, 0, .8); --ast-global-color-2: #eaf2fd; --ast-global-color-3: #c5d4e8; --ast-global-color-4: #08162a; --ast-global-color-5: #08162a; --ast-global-color-6: #0f2240; } /* Jarak antar elemen di dalam komponen diatur oleh gaya komponen, bukan oleh celah blok bawaan WordPress (flow layout). Ditaruh paling awal agar semua aturan komponen yang lebih spesifik tetap menang. */ .mh-fc > *, .mh-qa > div > *, .mh-gar > div > *, .mh-dl > div > *, .mh-tl > div > *, .mh-vtl > div > *, .mh-stats__in > div > *, .mh-tcard > *, .mh-pc > *, .mh-pc .px > *, .mh-more > *, .mh-in > *, .mh-pcs > *, .mh-feat > *, .mh-qa > *, .mh-gar > *, .mh-tpl > *, .mh-dl > *, .mh-tl > *, .mh-vtl > *, .mh-stats__in > * { margin-block-start: 0; margin-block-end: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[data-theme="dark"] body, html[data-theme="dark"] #page, html[data-theme="dark"] .site-content, html[data-theme="dark"] .ast-separate-container, html[data-theme="dark"] .entry-content { background-color: var(--bg); color: var(--body); } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--head); color: var(--ink); letter-spacing: -.025em; line-height: 1.15; } .entry-content p, .entry-content li { color: inherit; } .entry-content a:not(.wp-block-button__link) { color: var(--link); } :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; } @supports (selector(:has(*))) { .ast-page-builder-template .entry-content > * { margin-block: 0; } } .ast-page-builder-template .entry-content[data-ast-blocks-layout] > * { max-width: none; } .ast-page-builder-template .site-content > .ast-container { max-width: none; padding: 0; } .entry-content > .wp-block-group.alignfull { margin-left: 0; margin-right: 0; max-width: none; } /* ---------- Bagian ---------- */ .mh-sec { padding: clamp(60px, 8vw, 108px) 20px; } .mh-sec--alt, .mh-alt { background: var(--alt); } .mh-sec h2 { font-size: clamp(1.75rem, 4vw, 2.7rem); font-weight: 800; margin: 0 0 .45em; text-wrap: balance; } .mh-sec h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 .4em; } .mh-eyebrow { margin: 0 0 12px; font: 800 .78rem/1.2 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--link); } .mh-lead { max-width: 680px; margin: 0 0 2.4rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--muted); text-wrap: pretty; } .mh-head-c { text-align: center; } .mh-head-c .mh-lead { margin-left: auto; margin-right: auto; } .mh-note { font-size: .9rem; color: var(--muted); } .mh-note-center { margin-top: 1.6rem; text-align: center; font-size: .9rem; color: var(--muted); max-width: 760px; margin-left: auto; margin-right: auto; } /* ---------- Hero ---------- */ .mh-hero { position: relative; overflow: hidden; color: #dbe8f8; padding: calc(clamp(56px, 8vw, 104px) + 84px) 20px clamp(64px, 9vw, 116px); background: 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%); } .mh-hero--page { padding-bottom: clamp(52px, 7vw, 88px); } .mh-hero h1 { color: #fff; font-size: clamp(2.15rem, 5.6vw, 3.9rem); font-weight: 800; line-height: 1.07; letter-spacing: -.035em; margin: 0 0 .45em; text-wrap: balance; } .mh-hero--page h1 { font-size: clamp(2rem, 4.8vw, 3.2rem); } .mh-hero .mh-eyebrow { color: var(--cyan); } .mh-hero-sub { max-width: 600px; margin: 0 0 1.6rem; font-size: clamp(1.05rem, 1.9vw, 1.22rem); line-height: 1.65; color: #dbe8f8; text-wrap: pretty; } .mh-hl { background: none; color: var(--cyan); } .mh-hero-cols { gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin: 0; } .mh-hero-cols > .wp-block-column:first-child { flex-basis: 56% !important; } .mh-chips { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .mh-chips li { margin: 0; padding: 8px 14px; border-radius: 999px; font: 600 .86rem/1.2 var(--head); color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mh-chips li::before { content: "\2713"; margin-right: 7px; color: var(--cyan); font-weight: 800; } /* Ilustrasi hero: hasil pencarian + gelembung WhatsApp (dekoratif) */ .mh-hv { position: relative; max-width: 470px; margin: 0 auto; padding: 18px 0 42px; } .mh-search { padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 40px 70px -30px rgba(0, 10, 30, .65); color: #364b66; } .mh-search__bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border: 1px solid rgba(13, 45, 82, .16); border-radius: 999px; font: 500 1rem/1.2 var(--head); color: #0d2d52; box-shadow: 0 6px 18px -12px rgba(13, 45, 82, .45); } .mh-search__bar::before { content: ""; flex: none; width: 13px; height: 13px; border: 2px solid #566b86; border-radius: 50%; box-shadow: 5px 5px 0 -3px #566b86; } .mh-search__bar::after { content: ""; width: 2px; height: 1.1em; background: var(--blue); animation: mh-caret 1s steps(1) infinite; } @keyframes mh-caret { 50% { opacity: 0; } } .mh-search__res { margin-top: 18px; } .mh-search__res small { display: block; font-size: .78rem; color: #566b86; } .mh-search__res strong { display: block; margin: 2px 0 4px; font: 700 1.06rem/1.3 var(--head); color: #0463bd; } .mh-search__res p { margin: 0; font-size: .9rem; color: #566b86; } .mh-search__res.is-hit { padding: 14px 14px 14px 16px; margin-left: -6px; border-left: 4px solid var(--blue); background: #eef5fd; border-radius: 0 12px 12px 0; animation: mh-pop .9s var(--ease) both; } @keyframes mh-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .mh-search__res.is-dim i, .mh-search__res.is-dim b, .mh-search__res.is-dim u { display: block; height: 8px; border-radius: 4px; background: #e3ebf5; text-decoration: none; } .mh-search__res.is-dim i { width: 30%; } .mh-search__res.is-dim b { width: 78%; height: 12px; margin: 7px 0; } .mh-search__res.is-dim u { width: 58%; } .mh-search__cap { margin: 14px 0 0; text-align: center; font-size: .76rem; color: #566b86; } .mh-bub { position: absolute; padding: 11px 16px; border-radius: 16px; font: 600 .86rem/1.35 var(--head); box-shadow: 0 16px 30px -14px rgba(0, 10, 30, .6); animation: mh-bob 6s ease-in-out infinite; } .mh-bub--wa { right: -6px; bottom: 0; background: #17803f; color: #fff; border-bottom-right-radius: 4px; } .mh-bub--tag { left: -10px; bottom: 54px; background: #fff; color: #0d2d52; animation-delay: -3s; } .mh-bub--tag::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #17803f; } @keyframes mh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ---------- Tombol ---------- */ .wp-block-buttons { gap: 12px; margin-top: 1.4rem; } .wp-block-button__link, .ast-button, button.button, input[type="submit"] { border-radius: 999px !important; padding: 15px 28px; font: 700 1rem/1.1 var(--head); text-decoration: none; background-image: none; box-shadow: none; transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; } .mh-btn-primary .wp-block-button__link { background-color: var(--blue); color: #fff; box-shadow: 0 10px 22px -12px var(--blue); } .mh-btn-dark .wp-block-button__link { background-color: var(--navy); color: #fff; } .mh-btn-ghost .wp-block-button__link { background: transparent; color: var(--ink); border: 1.5px solid var(--line-s); } .mh-btn-wa .wp-block-button__link { background-color: #17803f; color: #fff; } .mh-hero .mh-btn-primary .wp-block-button__link, .mh-sec--dark .mh-btn-primary .wp-block-button__link, .mh-cta .mh-btn-primary .wp-block-button__link, .mh-panel .mh-btn-primary .wp-block-button__link { background-color: var(--sky); color: #08162a; box-shadow: 0 12px 26px -12px var(--sky); } .mh-hero .mh-btn-ghost .wp-block-button__link, .mh-sec--dark .mh-btn-ghost .wp-block-button__link, .mh-cta .mh-btn-ghost .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .5); } html[data-theme="dark"] .mh-btn-primary .wp-block-button__link { background-color: var(--sky); color: #08162a; } html[data-theme="dark"] .mh-btn-dark .wp-block-button__link { background-color: var(--blue); } @media (hover: hover) and (pointer: fine) { .wp-block-button__link:hover { filter: brightness(1.08); transform: translateY(-1px); } .wp-block-button__link:active { transform: translateY(0); } } /* ---------- Strip angka ---------- */ .mh-stats { position: relative; z-index: 2; margin-top: -46px; padding: 0 20px; } .mh-stats__in { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; } .mh-stats__in > div { padding: 26px 22px; } .mh-stats__in > div + div { border-left: 1px solid var(--line); } .mh-stats .mh-count, .mh-stats .mh-stat { margin: 0; font: 800 clamp(1.9rem, 4vw, 2.7rem)/1.05 var(--head); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .mh-stats .mh-count span, .mh-stats .mh-stat span { color: var(--link); } .mh-stats p.l { margin: 6px 0 0; font-size: .92rem; line-height: 1.4; color: var(--muted); } @media (max-width: 781px) { .mh-stats__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mh-stats__in > div:nth-child(3) { border-left: 0; } .mh-stats__in > div:nth-child(n+3) { border-top: 1px solid var(--line); } } /* ---------- Marquee jenis usaha ---------- */ .mh-marq { overflow: hidden; padding: 40px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .mh-marq__t { display: flex; gap: 12px; width: max-content; animation: mh-scroll 38s linear infinite; } .mh-marq:hover .mh-marq__t { animation-play-state: paused; } .mh-marq span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 .95rem/1 var(--head); color: var(--ink); white-space: nowrap; } .mh-marq span::before { color: var(--blue); } @keyframes mh-scroll { to { transform: translateX(calc(-50% - 6px)); } } /* ---------- Kartu ---------- */ .mh-card, .mh-tile { padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; } .mh-card h3 { margin-top: 0; } .mh-card p:last-child { margin-bottom: 0; } @media (hover: hover) and (pointer: fine) { .mh-card:hover, .mh-fc:hover { transform: translateY(-4px); border-color: rgba(5, 115, 220, .4); } } .mh-grid3 { gap: 1.25rem; } .mh-two { gap: clamp(1.5rem, 4vw, 3rem); } /* Keraguan → jawaban */ .mh-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1rem; } .mh-qa > div { padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .mh-qa h3 { margin: 0 0 .55em; font-size: 1.15rem; color: var(--ink); } .mh-qa h3::before { content: "“"; margin-right: 2px; color: var(--blue); font-size: 1.5em; line-height: 0; vertical-align: -.2em; } .mh-qa p { margin: 0; line-height: 1.65; } .mh-qa p b { color: var(--ink); } @media (max-width: 760px) { .mh-qa { grid-template-columns: minmax(0, 1fr); } } /* Keunggulan */ .mh-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.4rem; } .mh-fc { position: relative; padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s; } .mh-fc .ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), var(--sky)); color: #fff; font-size: 1.5rem; } .mh-fc h3 { margin: 0 0 .4em; font-size: 1.2rem; color: var(--ink); } .mh-fc p { margin: 0; line-height: 1.65; } .mh-fc--hot { background: linear-gradient(160deg, #0a2447, #0c3a73); border-color: transparent; } .mh-fc--hot h3 { color: #fff; } .mh-fc--hot p { color: #dbe8f8; } .mh-fc--hot .ic { background: var(--sky); color: #08162a; } @media (max-width: 960px) { .mh-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .mh-feat { grid-template-columns: minmax(0, 1fr); } } /* Tabel pembanding */ .mh-vs { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); font-size: .98rem; } .mh-vs th, .mh-vs td { padding: 18px 20px; text-align: left; vertical-align: top; line-height: 1.55; border-top: 1px solid var(--line); } .mh-vs thead th { border-top: 0; font: 800 .95rem/1.3 var(--head); color: var(--ink); background: var(--alt); } .mh-vs thead th:last-child { background: var(--blue); color: #fff; } .mh-vs tbody th { width: 20%; font: 700 1rem/1.4 var(--head); color: var(--ink); } .mh-vs td { color: var(--muted); } .mh-vs td:last-child { background: rgba(5, 115, 220, .07); color: var(--body); font-weight: 500; } .mh-vs td::before { display: inline-block; margin-right: 8px; font-weight: 800; } .mh-vs td:nth-child(2)::before { content: "\2715"; color: #b4232c; } .mh-vs td:last-child::before { content: "\2713"; color: #17803f; } html[data-theme="dark"] .mh-vs td:nth-child(2)::before { color: #ff8a8a; } html[data-theme="dark"] .mh-vs td:last-child::before { color: #6ee7a3; } @media (max-width: 720px) { .mh-vs thead { display: none; } .mh-vs, .mh-vs tbody, .mh-vs tr, .mh-vs th, .mh-vs td { display: block; width: 100% !important; } .mh-vs tbody tr { border-top: 1px solid var(--line); } .mh-vs tbody th { padding-bottom: 4px; border: 0; } .mh-vs td { border: 0; padding-top: 6px; padding-bottom: 6px; } .mh-vs td:nth-child(2)::after, .mh-vs td:last-child::after { display: none; } } /* Pemilih paket */ .mh-pick { display: none; margin: 0 0 2rem; } .mh-js .mh-pick { display: block; } .mh-pick__q { margin: 0 0 12px; font: 700 1.05rem/1.4 var(--head); color: var(--ink); } .mh-pick__o { display: flex; flex-wrap: wrap; gap: 10px; } .mh-pick__o button { cursor: pointer; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--line-s); background: var(--surface); color: var(--ink); font: 600 .96rem/1.2 var(--head); transition: background-color .2s, color .2s, border-color .2s; } .mh-pick__o button:hover { border-color: var(--blue); } .mh-pick__o button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; } html[data-theme="dark"] .mh-pick__o button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); color: #08162a; } .mh-pick__m { min-height: 1.7em; margin: 12px 0 0; color: var(--muted); } /* Kartu paket */ .mh-pcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .mh-pc { position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .mh-pc.is-top { background: linear-gradient(165deg, #0a2447 0%, #0c3a73 100%); border-color: transparent; color: #dbe8f8; box-shadow: 0 30px 60px -28px rgba(5, 70, 160, .8); } .mh-pc.is-rec { outline: 3px solid var(--sky); outline-offset: 4px; transform: translateY(-6px); } .mh-pc .flag { position: absolute; top: -13px; left: 28px; padding: 6px 14px; border-radius: 999px; background: var(--sky); color: #08162a; font: 800 .74rem/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; } .mh-pc h3 { margin: 0; font: 800 1.45rem/1.2 var(--head); color: var(--ink); } .mh-pc.is-top h3 { color: #fff; } .mh-pc .for { margin: 8px 0 0; min-height: 3.4em; font-size: .96rem; line-height: 1.55; color: var(--muted); } .mh-pc.is-top .for { color: #bcd2ec; } .mh-pc .px { margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--line); } .mh-pc.is-top .px { border-color: rgba(255, 255, 255, .16); } .mh-pc .px s { display: block; font-size: .92rem; color: var(--muted); } .mh-pc.is-top .px s { color: #a9c0dc; } .mh-pc .px strong { display: block; margin: 2px 0 6px; font: 800 clamp(2.1rem, 3.4vw, 2.6rem)/1.05 var(--head); color: var(--ink); letter-spacing: -.03em; } .mh-pc.is-top .px strong { color: #fff; } .mh-pc .px em { display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(23, 128, 63, .12); color: #14683a; font: 700 .82rem/1.3 var(--head); font-style: normal; } .mh-pc.is-top .px em { background: rgba(110, 231, 163, .16); color: #8ff0b8; } html[data-theme="dark"] .mh-pc .px em { color: #8ff0b8; background: rgba(110, 231, 163, .14); } .mh-pc .px small { display: block; margin-top: 8px; font-size: .84rem; color: var(--muted); } .mh-pc.is-top .px small { color: #a9c0dc; } .mh-pc .cta { display: block; margin: 20px 0 6px; padding: 14px 20px; border-radius: 999px; text-align: center; background: var(--blue); color: #fff !important; font: 700 1rem/1.1 var(--head); text-decoration: none; transition: filter .2s; } .mh-pc.is-top .cta { background: var(--sky); color: #08162a !important; } html[data-theme="dark"] .mh-pc:not(.is-top) .cta { background: var(--sky); color: #08162a !important; } .mh-pc .cta:hover { filter: brightness(1.08); } .mh-pc ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .mh-pc li { position: relative; margin: 0; padding-left: 28px; font-size: .96rem; line-height: 1.5; color: var(--body); } .mh-pc.is-top li { color: #dbe8f8; } .mh-pc li::before { content: ""; position: absolute; left: 0; top: .12em; width: 18px; height: 18px; border-radius: 50%; background: var(--blue) 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .mh-pc.is-top li::before { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308162a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .mh-pc li b { color: var(--ink); } .mh-pc.is-top li b { color: #fff; } .mh-pc .sub { margin: 18px 0 0; font: 700 .8rem/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mh-pc.is-top .sub { color: #a9c0dc; } @media (hover: hover) and (pointer: fine) { .mh-pc:hover { transform: translateY(-4px); } .mh-pc.is-rec:hover { transform: translateY(-8px); } } @media (max-width: 980px) { .mh-pcs { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } .mh-pc .for { min-height: 0; } } /* Tabel perbandingan paket */ .mh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); } .mh-cmp { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: .96rem; } .mh-cmp th, .mh-cmp td { padding: 14px 18px; text-align: center; border-top: 1px solid var(--line); vertical-align: middle; color: var(--body); } .mh-cmp thead th { border-top: 0; padding: 22px 16px; background: var(--alt); font: 800 1.1rem/1.2 var(--head); color: var(--ink); } .mh-cmp thead th small { display: block; margin-top: 4px; font: 600 .86rem/1.3 var(--head); color: var(--muted); } .mh-cmp thead th.hot { background: var(--blue); color: #fff; } .mh-cmp thead th.hot small { color: #fff; } .mh-cmp tbody th { text-align: left; width: 34%; font-weight: 600; color: var(--ink); } .mh-cmp td.hot { background: rgba(5, 115, 220, .07); } .mh-cmp .y { color: #17803f; font-weight: 800; font-size: 1.15rem; } .mh-cmp .n { color: var(--muted); } html[data-theme="dark"] .mh-cmp .y { color: #6ee7a3; } /* Garis waktu */ .mh-tl { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; } .mh-tl::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--sky)); opacity: .5; } .mh-tl li { position: relative; margin: 0; padding-right: 22px; } .mh-tl b { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--blue); color: #fff; font: 800 1.05rem/1 var(--head); box-shadow: 0 0 0 6px var(--bg); } .mh-sec--alt .mh-tl b { box-shadow: 0 0 0 6px var(--alt); } .mh-tl h3 { margin: 0 0 .35em; font-size: 1.12rem; color: var(--ink); } .mh-tl p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--muted); } @media (max-width: 820px) { .mh-tl { grid-template-columns: minmax(0, 1fr); gap: 28px; } .mh-tl::before { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .mh-tl li { padding: 0 0 0 64px; } .mh-tl b { position: absolute; left: 0; top: 0; margin: 0; } } .mh-vtl { list-style: none; margin: 0 auto; padding: 0; max-width: 800px; position: relative; } .mh-vtl::before { content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--blue), var(--sky)); opacity: .45; } .mh-vtl li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 24px; margin: 0; padding-bottom: 36px; } .mh-vtl li:last-child { padding-bottom: 0; } .mh-vtl b { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; font: 800 1.1rem/1 var(--head); box-shadow: 0 0 0 6px var(--bg); } .mh-vtl h3 { margin: 8px 0 .3em; font-size: 1.22rem; color: var(--ink); } .mh-vtl p { margin: 0; line-height: 1.65; color: var(--muted); } /* Bagian gelap + jaminan */ .mh-sec--dark { background: radial-gradient(60% 80% at 100% 0%, rgba(26, 154, 250, .2), transparent 60%), linear-gradient(160deg, #0a2447, #0a1f3d); color: #c9d9ee; } .mh-sec--dark h2, .mh-sec--dark h3 { color: #fff; } .mh-sec--dark .mh-eyebrow { color: var(--cyan); } .mh-sec--dark .mh-lead { color: #c9d9ee; } .mh-sec--dark .mh-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none; } .mh-sec--dark .mh-card p { color: #c9d9ee; } .mh-sec--dark a:not(.wp-block-button__link) { color: var(--cyan); } .mh-gar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2rem; } .mh-gar > div { padding: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); } .mh-gar b { display: block; margin-bottom: 8px; font: 800 2rem/1 var(--head); letter-spacing: -.03em; color: var(--cyan); } .mh-gar h3 { margin: 0 0 .35em; font-size: 1.05rem; color: #fff; } .mh-gar p { margin: 0; font-size: .94rem; line-height: 1.6; color: #c9d9ee; } @media (max-width: 960px) { .mh-gar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .mh-gar { grid-template-columns: minmax(0, 1fr); } } /* Daftar jenis usaha */ .mh-ind { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mh-ind li { margin: 0; } .mh-ind a { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t e" "d d"; gap: 4px 14px; height: 100%; padding: 22px 22px 22px 78px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: inherit !important; text-decoration: none; box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s; } .mh-ind a::before { content: ""; position: absolute; left: 22px; top: 22px; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--sky)); } .mh-ind a::after { content: ""; position: absolute; left: 31px; top: 31px; width: 22px; height: 22px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-ind strong { grid-area: t; font: 700 1.08rem/1.3 var(--head); color: var(--ink); } .mh-ind span { grid-area: d; font-size: .95rem; line-height: 1.55; color: var(--muted); } .mh-ind em { grid-area: e; font: 700 .84rem/1.3 var(--head); font-style: normal; color: var(--link); white-space: nowrap; } .mh-ind li::before { display: none; } @media (hover: hover) and (pointer: fine) { .mh-ind a:hover { transform: translateY(-3px); border-color: rgba(5, 115, 220, .4); } } @media (max-width: 760px) { .mh-ind { grid-template-columns: minmax(0, 1fr); } } /* Dua kolom menempel, baris bernomor, daftar definisi */ .mh-split { gap: clamp(1.5rem, 5vw, 4.5rem); align-items: flex-start; margin: 0; } .mh-split > .mh-split__l { flex-basis: 36% !important; } .mh-split > .mh-split__r { flex-basis: 64% !important; } @media (min-width: 782px) { .mh-split__l { position: sticky; top: 112px; } } .mh-split__r > p:first-child { margin-top: 0; } .mh-split__r p { font-size: 1.06rem; line-height: 1.75; } .mh-rows { list-style: none; margin: 0; padding: 0; } .mh-rows li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; margin: 0; padding: 24px 0; border-top: 1px solid var(--line); } .mh-rows li:last-child { border-bottom: 1px solid var(--line); } .mh-rows .n { font: 800 1.6rem/1 var(--head); color: var(--link); letter-spacing: -.02em; } .mh-rows h3 { margin: 0 0 .3em; font-size: 1.15rem; color: var(--ink); } .mh-rows p { margin: 0; color: var(--muted); line-height: 1.65; } .mh-dl { margin: 0; } .mh-dl > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); } .mh-dl > div:last-child { border-bottom: 1px solid var(--line); } .mh-dl dt { margin: 0; font: 700 1.05rem/1.35 var(--head); color: var(--ink); } .mh-dl dt small { display: block; margin-top: 4px; font: 500 .86rem/1.4 var(--head); color: var(--muted); } .mh-dl dd { margin: 0; line-height: 1.65; color: var(--muted); } .mh-dl dd b { color: var(--ink); } @media (max-width: 640px) { .mh-dl > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } } /* Centang, FAQ, daftar isi */ .mh-ticks { list-style: none; margin: 1rem 0 0; padding: 0; } .mh-ticks li { position: relative; margin: 0 0 .7em; padding-left: 30px; line-height: 1.6; } .mh-ticks li::before { content: ""; position: absolute; left: 0; top: .22em; width: 20px; height: 20px; border-radius: 50%; background: var(--blue) center / 12px 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .mh-faq .wp-block-details { margin: 0 0 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s, box-shadow .25s; } .mh-faq .wp-block-details summary { position: relative; list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font: 700 1.04rem/1.45 var(--head); color: var(--ink); } .mh-faq .wp-block-details summary::-webkit-details-marker { display: none; } .mh-faq .wp-block-details summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg); transition: transform .3s var(--ease); } .mh-faq .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .mh-faq .wp-block-details[open] { border-color: rgba(5, 115, 220, .5); box-shadow: var(--shadow); } .mh-faq .wp-block-details p { margin: 0; padding: 0 22px 20px; line-height: 1.7; color: var(--muted); } .mh-faq .wp-block-details[open] p { animation: mh-fade .35s var(--ease); } @keyframes mh-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .mh-faq h2[id] { scroll-margin-top: 110px; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2.2em 0 .7em; } .mh-faq .mh-split__r > h2:first-child { margin-top: 0; } .mh-toc { display: grid; gap: 4px; } .mh-toc a { padding: 11px 16px; border-left: 3px solid var(--line); color: var(--muted) !important; text-decoration: none; font: 600 .98rem/1.35 var(--head); transition: border-color .2s, color .2s, background-color .2s; } .mh-toc a:hover, .mh-toc a.is-on { border-color: var(--blue); color: var(--ink) !important; background: var(--alt); } /* CTA, panel, formulir */ .mh-cta { position: relative; overflow: hidden; text-align: center; color: #dbe8f8; background: radial-gradient(60% 90% at 50% 0%, rgba(26, 154, 250, .35), transparent 65%), linear-gradient(160deg, #0a2447, #0c3a73); } .mh-cta h2 { color: #fff; margin-left: auto; margin-right: auto; max-width: 760px; } .mh-cta p { max-width: 640px; margin: 0 auto; font-size: 1.1rem; line-height: 1.65; color: #dbe8f8; } .mh-cta .wp-block-buttons { justify-content: center; } .mh-contact { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; } .mh-panel { height: 100%; padding: clamp(28px, 4vw, 46px); border-radius: 24px; background: linear-gradient(160deg, #0a2447, #0c3a73); color: #dbe8f8; } .mh-panel h2 { color: #fff; margin: 0 0 .3em; font-size: clamp(1.7rem, 3vw, 2.3rem); } .mh-panel .mh-eyebrow { color: var(--cyan); } .mh-bignum { margin: .4rem 0 .6rem; font: 800 clamp(1.7rem, 3.4vw, 2.4rem)/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); } .mh-panel .mh-bignum { color: #fff; } .mh-panel a { color: #fff !important; } .mh-panel .mh-note { color: #bcd2ec; } .mh-form { max-width: 640px; } .mh-form p { margin: 0 0 1rem; } .mh-form label { display: block; margin-bottom: 6px; font: 600 .92rem/1.3 var(--head); color: var(--ink); } .mh-form input[type="text"], .mh-form textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--line-s); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; transition: border-color .2s, box-shadow .2s; } .mh-form input:focus, .mh-form textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(5, 115, 220, .2); } .mh-form button { background: var(--blue); color: #fff; border: 0; cursor: pointer; } html[data-theme="dark"] .mh-form button { background: var(--sky); color: #08162a; } .mh-form__hp { position: absolute !important; left: -9999px; height: 0; overflow: hidden; } .mh-form__msg { padding: 13px 16px; border-radius: 12px; font-weight: 600; } .mh-form__msg.is-ok { background: rgba(23, 128, 63, .12); color: #14683a; } .mh-form__msg.is-err { background: rgba(200, 50, 50, .1); color: #9b1c1c; } html[data-theme="dark"] .mh-form__msg.is-ok { color: #8ff0b8; } html[data-theme="dark"] .mh-form__msg.is-err { color: #ffb4b4; } .mh-legal { padding-top: calc(clamp(48px, 7vw, 88px) + 96px); } .mh-legal h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: .2em; } .mh-legal h2 { font-size: 1.35rem; margin: 1.9em 0 .5em; } .mh-legal p, .mh-legal li { line-height: 1.75; } /* Ikon mask ([data-i]) */ [data-i]::before { content: ""; display: inline-block; flex: none; width: 1.2em; height: 1.2em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-fc .ic::before { width: 1em; height: 1em; background: currentColor; } /* WhatsApp melayang */ .mh-wa { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 998; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 58px; height: 58px; padding: 0 18px; border-radius: 999px; color: #fff; text-decoration: none; font: 700 15px/1 var(--head); background: #17803f; box-shadow: 0 14px 30px -10px rgba(10, 90, 40, .75); transition: transform .25s var(--ease), box-shadow .25s; } .mh-wa:hover, .mh-wa:focus { color: #fff; } .mh-wa__icon { flex: none; } @media (max-width: 599px) { .mh-wa { padding: 0; width: 58px; } .mh-wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (hover: hover) and (pointer: fine) { .mh-wa:hover { transform: translateY(-3px); } } /* ---------- Header: pill melayang (blur + transparan) ---------- */ #masthead { position: sticky; top: 12px; z-index: 99; margin-bottom: -84px; padding: 0 14px; background: transparent !important; pointer-events: none; } .admin-bar #masthead { top: 44px; } @media (max-width: 782px) { .admin-bar #masthead { top: 58px; } } #masthead .main-header-bar-wrap, #masthead .ast-main-header-wrap, #masthead .ast-primary-header-bar-wrap { background: transparent !important; border: 0 !important; } #masthead .main-header-bar.ast-primary-header-bar, #masthead .ast-primary-header-bar { pointer-events: auto; max-width: 1180px; min-height: 0 !important; margin: 0 auto; border: 1px solid rgba(13, 45, 82, .1) !important; border-radius: 999px; background: rgba(255, 255, 255, .9) !important; box-shadow: 0 14px 34px -18px rgba(13, 45, 82, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: box-shadow .3s, background-color .3s; } .mh-scrolled #masthead .ast-primary-header-bar { box-shadow: 0 18px 40px -16px rgba(13, 45, 82, .6); } #masthead .ast-primary-header-bar .site-primary-header-wrap { min-height: 62px !important; padding: 0 12px 0 20px; } #masthead .custom-logo, #masthead .site-logo-img img { width: auto; max-height: 34px; height: auto; } #masthead .site-title a, .main-header-menu > .menu-item > a { font-family: var(--head); } .main-header-menu { position: relative; align-items: center; } .main-header-menu > .menu-item > a { position: relative; z-index: 1; padding: 9px 14px !important; line-height: 1.2 !important; border-radius: 999px; font-weight: 600; font-size: .94rem; color: var(--ink); background: transparent; transition: color .25s; } .main-header-menu > .menu-item > a:hover, .main-header-menu > .current-menu-item > a { color: var(--link); } .mh-nav-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; } .main-header-menu > .menu-item.mh-nav-cta, .main-header-menu > .menu-item.mh-nav-tools { display: flex; align-items: center; } .main-header-menu > .mh-nav-cta { margin-left: 8px; } .main-header-menu > .mh-nav-tools { margin-left: 8px; } .main-header-menu a.mh-header-cta, a.mh-header-cta { display: inline-block; padding: 11px 22px !important; border-radius: 999px; background: var(--blue); color: #fff !important; font: 700 .92rem/1.2 var(--head); white-space: nowrap; box-shadow: 0 10px 20px -12px var(--blue); transition: filter .2s, box-shadow .2s; } a.mh-header-cta:hover { filter: brightness(1.1); color: #fff !important; } .mh-theme-toggle { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; cursor: pointer; border-radius: 50%; border: 1px solid var(--line-s); background: transparent; color: var(--ink); transition: background-color .2s, transform .35s var(--ease); } .mh-theme-toggle:hover { background: rgba(5, 115, 220, .1); transform: rotate(18deg); } .mh-theme-toggle .mh-ico-sun { display: none; } html[data-theme="dark"] .mh-theme-toggle .mh-ico-sun { display: block; } html[data-theme="dark"] .mh-theme-toggle .mh-ico-moon { display: none; } .mh-theme-toggle .mh-tt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } html[data-theme="dark"] #masthead .ast-primary-header-bar, html[data-theme="dark"] #masthead .main-header-bar.ast-primary-header-bar { background: rgba(11, 26, 46, .88) !important; border-color: rgba(140, 190, 255, .2) !important; } html[data-theme="dark"] .main-header-menu > .menu-item > a { color: #eaf2fd; } html[data-theme="dark"] .main-header-menu > .menu-item > a:hover, html[data-theme="dark"] .main-header-menu > .current-menu-item > a { color: #5cc0ff; } html[data-theme="dark"] .mh-nav-ind { background: rgba(26, 154, 250, .16); } html[data-theme="dark"] a.mh-header-cta { background: var(--sky); color: #08162a !important; } html[data-theme="dark"] .mh-theme-toggle { color: #eaf2fd; } .mh-logo-light { display: none !important; } html[data-theme="dark"] .custom-logo:not(.mh-logo-light) { display: none !important; } html[data-theme="dark"] .mh-logo-light { display: block !important; } @media (max-width: 921px) { #masthead { margin-bottom: -76px; } #masthead .ast-primary-header-bar, #masthead .main-header-bar.ast-primary-header-bar { border-radius: 30px; } #masthead .ast-primary-header-bar .site-primary-header-wrap { padding: 0 8px 0 16px; } .ast-mobile-header-content { border-radius: 0 0 26px 26px; } .ast-mobile-header-content .mh-nav-tools, .ast-mobile-header-content .mh-nav-cta { padding: 8px 20px; margin: 0; } .ast-mobile-header-content a.mh-header-cta { display: block; text-align: center; } .ast-mobile-header-content .mh-theme-toggle { width: 100%; height: 46px; border-radius: 14px; } .mh-nav-ind { display: none; } } html[data-theme="dark"] .ast-mobile-header-content { background: #0b1a2e; } /* ---------- Footer ---------- */ .site-footer#colophon, footer.site-footer { display: none; } .mh-foot { background: #0a1f3d; color: #bcd2ec; padding: clamp(52px, 6vw, 84px) 20px 28px; font-size: .96rem; } .mh-foot a { color: #e6f0fc; text-decoration: none; } .mh-foot a:hover { color: #fff; text-decoration: underline; } .mh-foot__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; } .mh-foot__brand img { display: block; width: auto; height: 36px; margin-bottom: 14px; } .mh-foot__tag { margin: 0 0 10px; font: 800 1.15rem/1.35 var(--head); color: #fff; letter-spacing: -.01em; } .mh-foot__desc { margin: 0; max-width: 340px; line-height: 1.7; color: #bcd2ec; } .mh-foot h2 { margin: 0 0 16px; font: 800 .78rem/1.2 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #fff; } .mh-foot ul { list-style: none; margin: 0; padding: 0; } .mh-foot li { margin: 0 0 10px; } .mh-foot__base { max-width: 1180px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; color: #a9c0dc; } @media (max-width: 860px) { .mh-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mh-foot__brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .mh-foot__in { grid-template-columns: minmax(0, 1fr); } } html[data-theme="dark"] .mh-foot { background: #050f1d; } /* ---------- Artikel ---------- */ .blog .site-content > .ast-container, .single .site-content > .ast-container { max-width: 860px; padding: 48px 20px 90px; } .single .site-content > .ast-container { padding-top: 130px; } .blog .ast-article-post, .single .ast-article-single { background: transparent; } .blog .entry-title a, .single .entry-title { color: var(--ink); font-family: var(--head); font-weight: 800; letter-spacing: -.025em; } .single .entry-content h2 { margin-top: 1.7em; font-size: 1.6rem; } .single .entry-content p, .single .entry-content li { line-height: 1.8; font-size: 1.06rem; } .blog .mh-hero__in { max-width: 900px; margin: 0 auto; } /* ---------- Animasi: muncul saat digulir, transisi halaman ---------- */ .mh-js .mh-rv { opacity: 0; translate: 0 22px; transition: opacity .7s var(--ease), translate .7s var(--ease), transform .3s var(--ease), box-shadow .3s, border-color .3s; transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms; } .mh-js .mh-rv.mh-in { opacity: 1; translate: none; } #content { animation: mh-page-in .55s var(--ease) backwards; } .mh-foot { animation: mh-page-in .7s var(--ease) .1s backwards; } @keyframes mh-page-in { from { opacity: 0; transform: translateY(10px); } } .mh-leaving #content, .mh-leaving .mh-foot { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; } .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, var(--blue), var(--sky), var(--cyan)); } .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; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .mh-js .mh-rv { opacity: 1; translate: none; } } [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="lainnya"]{--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='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E")} [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")} /* Baris bernomor dan daftar definisi di bagian gelap */ .mh-sec--dark .mh-rows li { border-color: rgba(255, 255, 255, .18); } .mh-sec--dark .mh-rows .n { color: var(--cyan); } .mh-sec--dark .mh-rows h3 { color: #fff; } .mh-sec--dark .mh-rows p, .mh-sec--dark .mh-split__r p { color: #c9d9ee; } .mh-sec--dark .mh-dl dt { color: #fff; } .mh-sec--dark .mh-dl dd { color: #c9d9ee; } .mh-sec--dark .mh-dl > div { border-color: rgba(255, 255, 255, .18); } .mh-frame { max-width: 480px; margin: 0 auto; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } .mh-frame__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--alt); border-bottom: 1px solid var(--line); } .mh-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-s); } .mh-frame__bar span { margin-left: 10px; padding: 4px 14px; border-radius: 8px; background: var(--surface); font-size: .78rem; color: var(--muted); } .mh-frame__body { display: grid; gap: 10px; padding: 18px; } .mh-frame .a { display: grid; gap: 9px; padding: 20px; border-radius: 12px; background: linear-gradient(160deg, #0a2447, #0c3a73); } .mh-frame .a b { height: 12px; width: 70%; border-radius: 4px; background: #fff; } .mh-frame .a u { height: 8px; width: 45%; border-radius: 4px; background: rgba(255, 255, 255, .55); } .mh-frame .a u.s { width: 30%; } .mh-frame .g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mh-frame .g i { height: 56px; border-radius: 10px; background: var(--alt); border: 1px solid var(--line); } .mh-frame .l { height: 8px; border-radius: 4px; background: var(--line); } .mh-frame .l.s { width: 60%; } .mh-frame .w { justify-self: start; padding: 9px 16px; border-radius: 999px; background: #17803f; color: #fff; font: 700 .8rem/1 var(--head); } /* ====================================================================== Revisi 1 (masukan Fajar): jarak header, hero, menu, ikon WhatsApp, strip ====================================================================== */ :root { --wa-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M16.03%203C9.4%203%204.02%208.37%204.02%2015c0%202.12.55%204.18%201.6%206L4%2028l7.17-1.88A12%2012%200%200%200%2016.03%2027C22.66%2027%2028%2021.63%2028%2015S22.66%203%2016.03%203Zm0%2021.9c-1.8%200-3.56-.49-5.1-1.4l-.37-.22-4.26%201.12%201.14-4.15-.24-.38A9.86%209.86%200%200%201%206.1%2015c0-5.46%204.45-9.9%209.93-9.9s9.9%204.44%209.9%209.9-4.44%209.9-9.9%209.9Zm5.43-7.4c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15s-.77.97-.94%201.17c-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2%200-.52.07-.8.37-.27.3-1.04%201.02-1.04%202.48s1.07%202.88%201.22%203.08c.15.2%202.1%203.2%205.08%204.49.71.3%201.26.49%201.7.63.71.23%201.36.2%201.88.12.57-.09%201.76-.72%202-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35Z%27%2F%3E%3C%2Fsvg%3E"); } .mh-hero { padding-top: calc(clamp(64px, 9vw, 120px) + 100px); } .mh-hero--page { padding-top: calc(clamp(56px, 7vw, 96px) + 100px); } .mh-hero h1 { letter-spacing: -.02em; word-spacing: .06em; line-height: 1.12; } .mh-hero-sub { margin-top: 0; } @media (min-width: 782px) { .mh-hero-cols > .wp-block-column:first-child { flex: 0 0 52% !important; } .mh-hero-cols > .wp-block-column:last-child { flex: 1 1 0 !important; min-width: 0; } } /* Tiga poin di bawah tombol hero: sejajar, rapat ke tepi kiri */ .mh-chips { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: 10px; margin: 2rem 0 0 !important; padding: 0 !important; list-style: none; } .mh-chips li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; white-space: nowrap; } .mh-chips li::before { margin: 0; } @media (max-width: 760px) { .mh-chips { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .mh-chips li { white-space: normal; } } /* Menu: teks selalu terbaca di mode terang dan gelap, termasuk item aktif */ #masthead .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a { color: var(--ink) !important; } #masthead .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools):hover > a, #masthead .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a:focus-visible, #masthead .main-header-menu > .current-menu-item > a, #masthead .main-header-menu > .current-menu-ancestor > a { color: var(--link) !important; } #masthead .main-header-menu > .mh-nav-cta > a.mh-header-cta { color: #fff !important; background: var(--blue); } html[data-theme="dark"] #masthead .main-header-menu > .mh-nav-cta > a.mh-header-cta { color: #08162a !important; background: var(--sky); } .ast-mobile-header-content .menu-item > a { color: var(--ink) !important; } /* Ikon WhatsApp di tombol WhatsApp */ a[href*="wa.me"].wp-block-button__link::before, a.mh-header-cta::before, .mh-pc .cta::before { content: ""; display: inline-block; width: 1.25em; height: 1.25em; margin: 0 .55em 0 0; vertical-align: -.25em; background: currentColor; -webkit-mask: var(--wa-ic) center / contain no-repeat; mask: var(--wa-ic) center / contain no-repeat; } /* Strip poin penjualan: 6 poin, 3 kolom */ .mh-stats__in { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); } .mh-stats__in > div { background: var(--surface); border: 0 !important; padding: 26px 26px; } @media (max-width: 781px) { .mh-stats__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mh-stats__in > div { padding: 20px 18px; } } /* Ilustrasi hero interaktif */ .mh-hv { max-width: 520px; perspective: 1100px; cursor: pointer; } .mh-hv__tilt { position: relative; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .25s var(--ease); transform-style: preserve-3d; } .mh-search__bar span { min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: clip; } .mh-search__bar { min-height: 50px; } .mh-search__res.is-hit.is-swap { animation: mh-pop .6s var(--ease) both; } .mh-bub { translate: calc(var(--px, 0) * var(--k, 10) * 1px) calc(var(--py, 0) * var(--k, 10) * 1px); transition: translate .3s var(--ease); } .mh-bub--tag { --k: 14; } .mh-bub--wa { --k: 22; } .mh-search__cap { transition: color .2s; } @media (hover: hover) and (pointer: fine) { .mh-hv:hover .mh-search__cap { color: var(--blue); } } @media (prefers-reduced-motion: reduce) { .mh-hv__tilt { transform: none; } .mh-bub { animation: none; translate: none; } } /* ====================================================================== Revisi 2 (masukan Fajar): header lebih transparan dan buram, logo proporsional, kartu template baru, hover kartu, promo, Telegram, footer berikon ====================================================================== */ #masthead .main-header-bar.ast-primary-header-bar, #masthead .ast-primary-header-bar { background: rgba(255, 255, 255, .66) !important; border-color: rgba(255, 255, 255, .5) !important; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); } html[data-theme="dark"] #masthead .ast-primary-header-bar, html[data-theme="dark"] #masthead .main-header-bar.ast-primary-header-bar { background: rgba(9, 22, 42, .6) !important; border-color: rgba(140, 190, 255, .22) !important; } #masthead .ast-primary-header-bar .site-primary-header-wrap { min-height: 60px !important; padding: 0 12px 0 28px; } #masthead .custom-logo, #masthead .site-logo-img img, #masthead .mh-logo-light { height: 28px !important; max-height: 28px; width: auto !important; max-width: none; } @media (max-width: 1240px) and (min-width: 922px) { .main-header-menu > .menu-item > a { padding: 8px 10px !important; font-size: .88rem; } a.mh-header-cta { padding: 10px 16px !important; font-size: .86rem; } } @media (max-width: 921px) { #masthead .ast-primary-header-bar .site-primary-header-wrap { padding: 0 8px 0 20px; } #masthead .custom-logo, #masthead .mh-logo-light { height: 26px !important; max-height: 26px; } } /* Hover kartu: halus, tidak berlebihan */ .mh-card, .mh-fc, .mh-pc, .mh-qa > div, .mh-gar > div, .mh-stats__in > div, .mh-tpl a, .mh-panel { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, background-color .3s; } @media (hover: hover) and (pointer: fine) { .mh-card:hover, .mh-fc:hover, .mh-qa > div:hover, .mh-tpl a:hover { transform: translateY(-4px); border-color: rgba(5, 115, 220, .45); box-shadow: 0 1px 2px rgba(13, 45, 82, .06), 0 26px 44px -24px rgba(13, 45, 82, .5); } .mh-gar > div:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); } .mh-stats__in > div:hover { background: var(--alt); } .mh-fc .ic { transition: transform .3s var(--ease); } .mh-fc:hover .ic { transform: scale(1.08) rotate(-4deg); } .mh-ind a:hover { transform: translateY(-4px); } } html[data-theme="dark"] .mh-card:hover, html[data-theme="dark"] .mh-fc:hover, html[data-theme="dark"] .mh-qa > div:hover, html[data-theme="dark"] .mh-tpl a:hover { border-color: rgba(92, 192, 255, .5); } /* Kartu template: pratinjau berwarna per usaha */ .mh-tpl { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .mh-tpl li { margin: 0; } .mh-tpl a { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit !important; text-decoration: none !important; } .mh-tpl a * { text-decoration: none !important; } .mh-tpl__th { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9.5; margin: 10px 10px 0; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); } .mh-tpl__th::before { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 13px 0 rgba(255, 255, 255, .6), 26px 0 rgba(255, 255, 255, .6); } .mh-tpl__th::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(0deg, rgba(0, 0, 0, .28), transparent); } .mh-tpl__th i { position: relative; z-index: 1; width: 56px; height: 56px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; transition: transform .4s var(--ease); } .mh-tpl__th i::before { display: none; } .mh-tpl__th b, .mh-tpl__th u { position: absolute; z-index: 1; bottom: 12px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .85); text-decoration: none; } .mh-tpl__th b { left: 14px; width: 34%; } .mh-tpl__th u { left: calc(14px + 34% + 8px); width: 18%; background: rgba(255, 255, 255, .5); } @media (hover: hover) and (pointer: fine) { .mh-tpl a:hover .mh-tpl__th i { transform: scale(1.1); } } .mh-tpl__b { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 6px; } .mh-tpl__b small { font: 800 .72rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--link); } .mh-tpl__b strong { margin: 6px 0 6px; font: 800 1.15rem/1.3 var(--head); color: var(--ink); } .mh-tpl__b span { font-size: .94rem; line-height: 1.55; color: var(--muted); } .mh-tpl em { display: flex; align-items: center; justify-content: space-between; margin: 12px 20px 18px; padding-top: 14px; border-top: 1px solid var(--line); font: 700 .9rem/1.2 var(--head); font-style: normal; color: var(--link); } .mh-tpl em::after { content: "\2192"; transition: transform .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .mh-tpl a:hover em::after { transform: translateX(4px); } } @media (max-width: 960px) { .mh-tpl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 580px) { .mh-tpl { grid-template-columns: minmax(0, 1fr); } } .mh-ind a, .mh-ind a * { text-decoration: none !important; } /* Promo peluncuran: kuota dan hitung mundur (hanya bila tanggal nyata diisi) */ .mh-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; margin: 0 0 2rem; padding: 24px 28px; border-radius: 22px; color: #dbe8f8; background: radial-gradient(70% 120% at 100% 0%, rgba(26, 154, 250, .3), transparent 60%), linear-gradient(160deg, #0a2447, #0c3a73); box-shadow: 0 24px 50px -30px rgba(5, 70, 160, .8); } .mh-promo__tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--sky); color: #08162a; font: 800 .72rem/1.3 var(--head); letter-spacing: .08em; text-transform: uppercase; } .mh-promo__l { flex: 1 1 240px; } .mh-promo__l strong { display: block; margin: 10px 0 2px; font: 800 1.5rem/1.2 var(--head); color: #fff; } .mh-promo__l p { margin: 0; font-size: .94rem; color: #bcd2ec; } .mh-promo__q { flex: 0 1 220px; } .mh-promo__q span { display: block; font-size: .84rem; color: #bcd2ec; } .mh-promo__q b { font: 800 2.6rem/1 var(--head); color: #fff; letter-spacing: -.03em; } .mh-promo__q i { margin-left: 8px; font-style: normal; font-size: .9rem; color: #bcd2ec; } .mh-promo__bar { height: 8px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; } .mh-promo__bar u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--cyan)); text-decoration: none; } .mh-promo__t { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); } .mh-promo__t > span { margin-right: 8px; font: 700 .92rem/1.2 var(--head); color: #fff; } .mh-promo__t div { min-width: 64px; padding: 10px 12px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .1); } .mh-promo__t b { display: block; font: 800 1.5rem/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; } .mh-promo__t small { display: block; margin-top: 4px; font-size: .74rem; color: #bcd2ec; } /* Panel kontak: jarak rapi */ .mh-panel > * { margin-top: 0; margin-bottom: 0; } .mh-panel > * + * { margin-top: 16px; } .mh-panel .wp-block-buttons { margin-top: 22px; } .mh-panel .mh-btn-ghost .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .5); } /* Ikon Telegram di tombol */ :root { --tg-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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); } a[href*="t.me"].wp-block-button__link::before { content: ""; display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .55em 0 0; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--tg-ic) center / contain no-repeat; mask: var(--tg-ic) center / contain no-repeat; } /* Footer berikon */ .mh-foot__list li { display: flex; align-items: center; gap: 10px; } .mh-foot li.mh-ico::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--cyan); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-foot .mh-ico--wa { --ic: var(--wa-ic); } .mh-foot .mh-ico--tg { --ic: var(--tg-ic); } .mh-foot li.mh-ico a { display: inline-block; padding: 1px 0; } .mh-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; } .mh-ico--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")} .mh-ico--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")} .mh-ico--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")} .mh-ico--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")} .mh-ico--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")} .mh-ico--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")} .mh-ico--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")} .mh-ico--mail{--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='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")} .mh-ico--layout{--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='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E")} .mh-ico--doc{--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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E")} .mh-ico--lock{--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='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")} html { scroll-padding-top: 110px; } /* ====================================================================== Revisi 3: header tetap (tidak menutupi judul), lebih buram; footer; promo; ringkasan template ====================================================================== */ #masthead { position: fixed !important; top: 12px; left: 0; right: 0; width: 100%; margin: 0 !important; } .admin-bar #masthead { top: 44px; } @media (max-width: 782px) { .admin-bar #masthead { top: 58px; } } @media (max-width: 921px) { #masthead { margin: 0 !important; } } .mh-hero { padding-top: clamp(36px, 5vw, 72px) !important; } .mh-hero::before { content: ""; display: block; height: 96px; } #masthead .main-header-bar.ast-primary-header-bar, #masthead .ast-primary-header-bar { background: rgba(255, 255, 255, .56) !important; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); } html[data-theme="dark"] #masthead .ast-primary-header-bar, html[data-theme="dark"] #masthead .main-header-bar.ast-primary-header-bar { background: rgba(8, 20, 38, .5) !important; } /* Footer: tanpa ikon di Halaman dan Lainnya; hover berupa garis dan geser */ .mh-foot__list li { display: block; } .mh-foot li.mh-ico::before { content: none; } .mh-foot li.mh-ico--wa, .mh-foot li.mh-ico--tg, .mh-foot li.mh-ico--mail { display: flex; align-items: center; gap: 10px; } .mh-foot li.mh-ico--wa::before, .mh-foot li.mh-ico--tg::before, .mh-foot li.mh-ico--mail::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--cyan); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-foot li.mh-ico--mail { --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='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); } .mh-foot__list a { position: relative; display: inline-block; padding: 2px 0; text-decoration: none !important; transition: color .2s, transform .25s var(--ease); } .mh-foot__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .mh-foot__list a:hover { transform: translateX(4px); color: #fff; } .mh-foot__list a:hover::after { transform: scaleX(1); } } .mh-foot__list a:focus-visible::after { transform: scaleX(1); } /* Promo tanpa angka kuota penuh */ .mh-promo__q--open b { font-size: 2.6rem; } .mh-promo__q--open i { display: inline-block; margin-left: 10px; line-height: 1.35; vertical-align: .6em; } /* Ringkasan template di Beranda dan Layanan */ .mh-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 1.6rem 0 0; } .mh-more > span:first-child { margin-right: 6px; font: 700 .94rem/1.2 var(--head); color: var(--muted); } .mh-more span[data-i] { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 .9rem/1 var(--head); color: var(--ink); } .mh-more span[data-i]::before { color: var(--blue); } html[data-theme="dark"] .mh-more span[data-i]::before { color: var(--cyan); } /* Penanda urgensi promo 10 klien pertama (jujur: harga kembali normal setelah kuota terpenuhi) */ .mh-urg { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: #ffb020; color: #3a2200; font: 800 .74rem/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase; } .mh-urg i, .mh-promo__tag--hot i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c2410c; } .mh-urg i::after, .mh-promo__tag--hot i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #c2410c; opacity: .7; animation: mh-ping 1.6s ease-out infinite; } @keyframes mh-ping { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.7); opacity: 0; } } .mh-promo__tag--hot { display: inline-flex; align-items: center; gap: 8px; background: #ffb020; color: #3a2200; } .mh-promo__warn { margin: 12px 0 0 !important; padding: 10px 14px; border-left: 4px solid #ffb020; border-radius: 0 10px 10px 0; background: rgba(255, 176, 32, .14); font-size: .92rem; color: #ffe2a8 !important; } .mh-promo__warn b { color: #ffd277; } .mh-pc .px .mh-urg + s { margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .mh-urg i::after, .mh-promo__tag--hot i::after { animation: none; } } /* ====================================================================== Menu HP: kartu mengambang di bawah pill, selaras tema, semua tombol bisa diklik (sebelumnya header memakai pointer-events: none sehingga panel menu tidak menerima klik) ====================================================================== */ @media (max-width: 921px) { #masthead .ast-mobile-header-content, #ast-mobile-header .ast-mobile-header-content { pointer-events: auto !important; position: absolute !important; top: calc(100% + 8px) !important; left: 14px !important; right: 14px !important; width: auto !important; max-width: none; margin: 0 !important; box-sizing: border-box; padding: 10px !important; max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255, 255, 255, .55) !important; border-radius: 26px !important; background: rgba(255, 255, 255, .78) !important; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); box-shadow: 0 30px 60px -24px rgba(8, 28, 60, .6); } html[data-theme="dark"] #masthead .ast-mobile-header-content, html[data-theme="dark"] #ast-mobile-header .ast-mobile-header-content { background: rgba(8, 20, 38, .8) !important; border-color: rgba(140, 190, 255, .22) !important; } #ast-mobile-header .main-header-menu, #ast-mobile-header .ast-nav-menu { display: block; margin: 0; padding: 0; background: transparent !important; border: 0 !important; } #ast-mobile-header .main-header-menu > .menu-item { border: 0 !important; margin: 0 0 2px; background: transparent !important; } #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px !important; border-radius: 16px; font: 700 1.05rem/1.2 var(--head); color: var(--ink) !important; background: transparent; box-shadow: none; transition: background-color .2s, color .2s; } #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a::after { content: "\203A"; font-size: 1.5rem; line-height: 1; color: var(--muted); } #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a:hover, #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a:active { background: rgba(5, 115, 220, .1); color: var(--link) !important; } #ast-mobile-header .main-header-menu > .current-menu-item > a { background: rgba(5, 115, 220, .12) !important; color: var(--link) !important; box-shadow: inset 4px 0 0 var(--blue) !important; } #ast-mobile-header .mh-nav-cta { margin-top: 10px; padding: 0; } #ast-mobile-header .mh-nav-cta > a.mh-header-cta { display: flex !important; align-items: center; justify-content: center; width: 100%; padding: 16px 20px !important; font-size: 1.02rem; border-radius: 999px; } #ast-mobile-header .mh-nav-tools { margin-top: 8px; padding: 0; } #ast-mobile-header .mh-theme-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border-radius: 999px; border: 1.5px solid var(--line-s); background: transparent; font: 600 .96rem/1 var(--head); color: var(--ink); } #ast-mobile-header .mh-theme-toggle .mh-tt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } #ast-mobile-header .mh-theme-toggle:hover { transform: none; background: rgba(5, 115, 220, .1); } /* tombol hamburger/tutup di dalam pill */ #masthead .menu-toggle .ast-mobile-svg, #masthead .menu-toggle .mobile-menu-toggle-icon { color: var(--ink); fill: currentColor; } #masthead .menu-toggle { background: transparent !important; } } /* ====================================================================== Revisi 4: blur header benar-benar bekerja (view-transition-name membuat header menjadi "backdrop root" sehingga backdrop-filter tidak melihat konten halaman; propertinya dibuang) + menu HP kaca gelap seperti contoh ====================================================================== */ @media (max-width: 921px) { #masthead .main-header-bar.ast-primary-header-bar, #masthead .ast-primary-header-bar { background: rgba(8, 20, 38, .5) !important; border: 1px solid rgba(255, 255, 255, .16) !important; -webkit-backdrop-filter: blur(36px) saturate(1.1); backdrop-filter: blur(36px) saturate(1.1); } #masthead .custom-logo:not(.mh-logo-light) { display: none !important; } #masthead .mh-logo-light { display: block !important; } #masthead .menu-toggle, #masthead .ast-mobile-menu-trigger-minimal, #masthead .ast-button-wrap .menu-toggle { color: #eaf2fd !important; } #masthead .menu-toggle .ast-mobile-svg, #masthead .menu-toggle .mobile-menu-toggle-icon, #masthead .menu-toggle svg { color: #eaf2fd !important; fill: #eaf2fd !important; } #masthead .ast-mobile-header-content, #ast-mobile-header .ast-mobile-header-content, html[data-theme="dark"] #masthead .ast-mobile-header-content, html[data-theme="dark"] #ast-mobile-header .ast-mobile-header-content { background: rgba(8, 20, 38, .55) !important; border: 1px solid rgba(255, 255, 255, .16) !important; -webkit-backdrop-filter: blur(40px) saturate(1.1); backdrop-filter: blur(40px) saturate(1.1); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); } #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a { color: #eaf2fd !important; } #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a::after { content: none; } #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a:hover, #ast-mobile-header .main-header-menu > .menu-item:not(.mh-nav-cta):not(.mh-nav-tools) > a:active { background: rgba(255, 255, 255, .09); color: #7cc8ff !important; } #ast-mobile-header .main-header-menu > .current-menu-item > a { background: rgba(255, 255, 255, .12) !important; color: #7cc8ff !important; box-shadow: none !important; } #ast-mobile-header .mh-nav-cta > a.mh-header-cta { background: var(--sky) !important; color: #08162a !important; box-shadow: 0 14px 30px -14px var(--sky); } #ast-mobile-header .mh-theme-toggle { color: #eaf2fd; border-color: rgba(255, 255, 255, .28); } #ast-mobile-header .mh-theme-toggle:hover { background: rgba(255, 255, 255, .1); } } /* Tombol mode gelap di samping garis tiga (HP) */ .mh-theme-toggle--bar { display: none; } @media (max-width: 921px) { #ast-mobile-header .ast-button-wrap { display: flex; align-items: center; gap: 8px; } .mh-theme-toggle--bar { display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #eaf2fd; cursor: pointer; } .mh-theme-toggle--bar:hover { transform: none; background: rgba(255, 255, 255, .14); } #ast-mobile-header .mh-nav-tools { display: none; } } /* Tombol mode di samping garis tiga: hanya ikon polos (tanpa bingkai atau latar) */ @media (max-width: 921px) { .mh-theme-toggle--bar { width: 40px; height: 40px; border: 0 !important; background: transparent !important; border-radius: 12px; box-shadow: none; } .mh-theme-toggle--bar svg { width: 22px; height: 22px; } .mh-theme-toggle--bar:hover, .mh-theme-toggle--bar:active { background: rgba(255, 255, 255, .1) !important; } } /* Ikon di pill HP tanpa bingkai (termasuk tombol garis tiga/tutup) */ @media (max-width: 921px) { #masthead .menu-toggle, #masthead .ast-button-wrap .menu-toggle, #masthead .main-header-menu-toggle { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 12px; } } /* ====================================================================== Anti-meluber: tidak ada elemen yang lebih lebar dari layar (penyebab halaman terasa "terzoom out" di HP) ====================================================================== */ html, body { overflow-x: clip; max-width: 100%; } .entry-content ul[class*="mh-"], .entry-content ol[class*="mh-"] { margin-left: 0; margin-right: 0; padding-left: 0; max-width: 100%; } .entry-content ol.mh-vtl { margin-left: auto; margin-right: auto; } .mh-tpl > li, .mh-feat > *, .mh-pcs > *, .mh-qa > *, .mh-gar > *, .mh-ind > li, .mh-stats__in > *, .mh-tl > li { min-width: 0; } .mh-tpl a, .mh-tpl__b, .mh-ind a { min-width: 0; max-width: 100%; } .mh-tpl__b strong, .mh-tpl__b span, .mh-ind span, .mh-ind strong, .mh-fc p, .mh-card p { overflow-wrap: anywhere; } .entry-content img, .entry-content iframe, .entry-content table { max-width: 100%; } /* Chip hero: 2 kolom rapi */ .mh-chips { grid-template-columns: repeat(2, max-content); } @media (max-width: 760px) { .mh-chips { grid-template-columns: minmax(0, 1fr); } } /* Footer: daftar tautan lebih rapat */ .mh-foot__list li { margin: 0 0 5px; } .mh-foot__list a { padding: 1px 0; line-height: 1.4; } .mh-foot h2 { margin-bottom: 12px; } /* ====================================================================== Revisi 5: komponen memakai blok bawaan WordPress (bisa diedit langsung di halaman) ====================================================================== */ .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-lainnya{--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='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/svg%3E")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-ico-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");--icw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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")} .mh-stats__in > *, .mh-qa > *, .mh-feat > *, .mh-pcs > *, .mh-gar > *, .mh-tpl > *, .mh-dl > *, .mh-tl > *, .mh-vtl > * { margin-block: 0 !important; } /* Keunggulan: ikon digambar dari kelas mh-ico-* pada kartu */ .mh-fc[class*="mh-ico-"] { padding-top: 98px; } .mh-fc[class*="mh-ico-"]::before { content: ""; position: absolute; left: 28px; top: 28px; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), var(--sky)); } .mh-fc[class*="mh-ico-"]::after { content: ""; position: absolute; left: 42px; top: 42px; width: 24px; height: 24px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-fc--hot[class*="mh-ico-"]::before { background: var(--sky); } .mh-fc--hot[class*="mh-ico-"]::after { background: #08162a; } .mh-fc h3, .mh-qa h3, .mh-gar h3 { margin-top: 0; } /* Tabel pembanding Instagram vs website (blok Tabel) */ figure.wp-block-table.mh-vs { margin: 2rem 0 0; padding: 0; } .mh-vs table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .98rem; } .mh-vs th, .mh-vs td { border: 0; border-top: 1px solid var(--line); text-align: left; } .mh-vs thead th { border-top: 0; } .mh-vs tbody td:first-child { width: 20%; font: 700 1rem/1.4 var(--head); color: var(--ink); } .mh-vs tbody td:first-child::before { content: none !important; } /* Tabel perbandingan paket (blok Tabel) */ figure.wp-block-table.mh-cmp { min-width: 0; width: auto; display: block; margin: 0; border-collapse: initial; } .mh-cmp table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: .96rem; } .mh-cmp th, .mh-cmp td { padding: 14px 18px; text-align: center; border: 0; border-top: 1px solid var(--line); vertical-align: middle; color: var(--body); } .mh-cmp thead th { border-top: 0; padding: 22px 16px; background: var(--alt); font: 800 1.1rem/1.35 var(--head); color: var(--ink); } .mh-cmp thead th:nth-child(3) { background: var(--blue); color: #fff; } .mh-cmp tbody td:first-child { text-align: left; width: 34%; font-weight: 600; color: var(--ink); } .mh-cmp tbody td:nth-child(3) { background: rgba(5, 115, 220, .07); } .mh-cmp td strong { color: #17803f; font-size: 1.15rem; } html[data-theme="dark"] .mh-cmp td strong { color: #6ee7a3; } /* Kartu paket (blok Grup, Judul, Paragraf, Tombol, Daftar) */ .mh-pc .px > p { margin: 0; } .mh-pc p.mh-urg { display: inline-flex; margin: 0 0 12px; } .mh-urg::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c2410c; animation: mh-pulse 1.6s ease-out infinite; } @keyframes mh-pulse { 0% { box-shadow: 0 0 0 0 rgba(194, 65, 12, .6); } 100% { box-shadow: 0 0 0 9px rgba(194, 65, 12, 0); } } .mh-pc .mh-old { font-size: .92rem; color: var(--muted); } .mh-pc.is-top .mh-old { color: #a9c0dc; } .mh-pc .mh-price-now { margin: 2px 0 8px; font: 800 clamp(2.1rem, 3.4vw, 2.6rem)/1.05 var(--head); letter-spacing: -.03em; color: var(--ink); } .mh-pc.is-top .mh-price-now { color: #fff; } .mh-pc .mh-save { display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(23, 128, 63, .12); color: #14683a; font: 700 .82rem/1.3 var(--head); } .mh-pc.is-top .mh-save { background: rgba(110, 231, 163, .16); color: #8ff0b8; } html[data-theme="dark"] .mh-pc .mh-save { color: #8ff0b8; background: rgba(110, 231, 163, .14); } .mh-pc .mh-px-note { margin-top: 8px !important; font-size: .84rem; color: var(--muted); } .mh-pc.is-top .mh-px-note { color: #a9c0dc; } .mh-pc .wp-block-buttons { margin: 20px 0 6px; } .mh-pc .wp-block-button { width: 100%; } .mh-pc-btn .wp-block-button__link { display: block; width: 100%; text-align: center; background: var(--blue); color: #fff; } .mh-pc.is-top .mh-pc-btn .wp-block-button__link { background: var(--sky); color: #08162a; } html[data-theme="dark"] .mh-pc:not(.is-top) .mh-pc-btn .wp-block-button__link { background: var(--sky); color: #08162a; } .mh-pc > .wp-block-list { margin: 18px 0 0 !important; } .mh-pc p.flag, .mh-pc p.sub, .mh-pc p.for { margin-bottom: 0; } .mh-pc p.sub { margin-top: 18px; } /* Garis waktu bernomor otomatis */ .mh-tl { counter-reset: s; } .mh-tl > div { counter-increment: s; position: relative; padding-right: 22px; } .mh-tl > div::before { content: counter(s); position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--blue); color: #fff; font: 800 1.05rem/1 var(--head); box-shadow: 0 0 0 6px var(--bg); } .mh-sec--alt .mh-tl > div::before { box-shadow: 0 0 0 6px var(--alt); } @media (max-width: 820px) { .mh-tl > div { padding: 0 0 0 64px; } .mh-tl > div::before { position: absolute; left: 0; top: 0; margin: 0; } } .mh-vtl { counter-reset: v; } .mh-vtl > div { counter-increment: v; position: relative; padding: 0 0 36px 72px; } .mh-vtl > div:last-child { padding-bottom: 0; } .mh-vtl > div::before { content: counter(v); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; font: 800 1.1rem/1 var(--head); box-shadow: 0 0 0 6px var(--bg); } /* Jaminan, daftar definisi */ .mh-gar .big { display: block; margin: 0 0 8px; font: 800 2rem/1 var(--head); letter-spacing: -.03em; color: var(--cyan); } .mh-dl h3 { margin: 0; font: 700 1.05rem/1.35 var(--head); color: var(--ink); } .mh-dl h3 em { display: block; margin-top: 4px; font: 500 .86rem/1.4 var(--head); font-style: normal; color: var(--muted); } .mh-dl > div > p { margin: 0; line-height: 1.65; color: var(--muted); } .mh-dl > div > p b { color: var(--ink); } .mh-sec--dark .mh-dl h3 { color: #fff; } .mh-sec--dark .mh-dl > div > p { color: #c9d9ee; } /* Kartu template (blok Grup) */ .mh-t-laundry { --c1: #0f8b8d; --c2: #0b4f58; } .mh-t-laundry2 { --c1: #6d4aff; --c2: #1d1450; } .mh-t-bengkel { --c1: #ea580c; --c2: #1c2430; } .mh-t-salon { --c1: #be185d; --c2: #4a0d3b; } .mh-t-katering { --c1: #15803d; --c2: #14532d; } .mh-t-klinik { --c1: #0891b2; --c2: #164e63; } .mh-t-kontraktor { --c1: #d97706; --c2: #1e293b; } .mh-t-toko { --c1: #b45309; --c2: #451a03; } .mh-t-lainnya { --c1: #0573dc; --c2: #0d2d52; } .mh-tpl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 2.2rem 0 0; } .mh-tcard { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } .mh-tcard::before { content: ""; display: block; aspect-ratio: 16 / 9.5; margin: 10px 10px 0; border-radius: 14px; background: var(--icw) center / 56px no-repeat, linear-gradient(135deg, var(--c1), var(--c2)); transition: background-size .4s var(--ease); } .mh-tcard > * { margin: 0 20px; } .mh-tcard .mh-t-tag { margin-top: 18px; font: 800 .72rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--link); } .mh-tcard h3 { margin: 6px 20px 6px; font: 800 1.15rem/1.3 var(--head); color: var(--ink); } .mh-tcard h3 a, .mh-tcard h3 a:hover { display: inline; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; transform: none; color: inherit !important; text-decoration: none !important; } .mh-tcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .mh-tcard .mh-t-desc { flex: 1; font-size: .94rem; line-height: 1.55; color: var(--muted); } .mh-tcard .mh-t-go { display: flex; align-items: center; justify-content: space-between; margin: 12px 20px 18px; padding-top: 14px; border-top: 1px solid var(--line); font: 700 .9rem/1.2 var(--head); color: var(--link); } .mh-tcard .mh-t-go::after { content: "\2192"; transition: transform .3s var(--ease); } @media (hover: hover) and (pointer: fine) { .mh-tcard:hover { transform: translateY(-4px); border-color: rgba(5, 115, 220, .45); } .mh-tcard:hover::before { background-size: 64px, auto; } .mh-tcard:hover .mh-t-go::after { transform: translateX(4px); } } @media (max-width: 960px) { .mh-tpl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 580px) { .mh-tpl { grid-template-columns: minmax(0, 1fr); } } .mh-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 1.6rem 0 0; } .mh-more > p { margin: 0; } .mh-more .mh-more__l { margin-right: 6px; font: 700 .94rem/1.2 var(--head); color: var(--muted); } .mh-more .mh-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 .9rem/1 var(--head); color: var(--ink); } .mh-chip::before { content: ""; flex: none; width: 1.2em; height: 1.2em; background: var(--blue); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } html[data-theme="dark"] .mh-chip::before { background: var(--cyan); } /* Daftar isi FAQ sebagai daftar tautan biasa */ ul.mh-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .mh-toc li { margin: 0; } /* ====================================================================== Revisi 6: semua bagian satu garis tepi kiri (lebar isi 1180px, sama dengan pill header); daftar isi FAQ rapi ====================================================================== */ .mh-sec:not(.mh-cta) { padding-left: max(20px, calc((100vw - 1180px) / 2)); padding-right: max(20px, calc((100vw - 1180px) / 2)); } .mh-hero, .mh-stats { padding-left: 20px; padding-right: 20px; } .entry-content > .mh-hero > .mh-in, .entry-content > .mh-stats > .mh-stats__in { max-width: 1180px; } .entry-content > .mh-sec:not(.mh-cta) > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; } .entry-content > .mh-legal > * { max-width: 820px !important; } .mh-faq .wp-block-details { max-width: 860px; } .mh-split .mh-faq .wp-block-details, .mh-faq .mh-split .wp-block-details { max-width: none; } .mh-hero-title, .mh-hero h1 { max-width: 880px; } /* Daftar isi FAQ: tiap tautan satu baris penuh, tanpa garis bawah, garis kiri menyambung */ ul.mh-toc { gap: 0; border-left: 3px solid var(--line); } .mh-toc li { margin: 0; } .mh-toc a { display: block; margin-left: -3px; padding: 11px 16px; border-left: 3px solid transparent; text-decoration: none !important; } .mh-toc a:hover, .mh-toc a.is-on { border-left-color: var(--blue); background: var(--alt); } /* Lebar baca teks tetap terjaga, rata kiri pada garis tepi yang sama */ .entry-content > .mh-hero > .mh-hero-sub { max-width: 620px; } .entry-content > .mh-hero > .mh-hero-title, .entry-content > .mh-hero > h1 { max-width: 900px; } .entry-content > .mh-sec:not(.mh-cta) > .mh-lead { max-width: 680px; } .entry-content > .mh-sec:not(.mh-cta) > h2 { max-width: 800px; } .entry-content > .mh-sec:not(.mh-cta) > .mh-note-center { max-width: 760px; margin-left: auto !important; margin-right: auto !important; } /* Header ikut berpusat pada lebar layar penuh (sama dengan bagian halaman selebar 100vw) */ @media (min-width: 922px) { #masthead { right: auto; width: 100vw; } } /* Tombol WhatsApp melayang: hanya ikon */ .mh-wa { padding: 0; width: 58px; min-width: 58px; } .mh-wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }.blog .mh-hero__in { max-width: 1180px; } /* Pemilih paket berdasarkan kebutuhan */ .mh-need { display: none; margin: 0 0 2.2rem; } .mh-js .mh-need { display: block; } .mh-need fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .mh-need legend { padding: 0; font: 800 1.25rem/1.3 var(--head); color: var(--ink); } .mh-need__hint { margin: 6px 0 16px; color: var(--muted); font-size: .95rem; } .mh-need__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mh-need__opt { position: relative; display: block; cursor: pointer; } .mh-need__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .mh-need__opt span { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-s); font-size: .96rem; line-height: 1.45; color: var(--body); transition: border-color .2s, background-color .2s, color .2s; } .mh-need__opt span::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--line-s); background: transparent center / 12px no-repeat; transition: background-color .2s, border-color .2s; } .mh-need__opt:hover span { border-color: var(--blue); } .mh-need__opt input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; } .mh-need__opt input:checked + span { border-color: var(--blue); background: rgba(5, 115, 220, .08); color: var(--ink); } .mh-need__opt input:checked + span::before { background-color: var(--blue); border-color: var(--blue); background-image: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .mh-need__res { margin-top: 18px; padding: 22px 24px; border-radius: 20px; color: #dbe8f8; background: radial-gradient(70% 120% at 100% 0%, rgba(26, 154, 250, .3), transparent 60%), linear-gradient(160deg, #0a2447, #0c3a73); } .mh-need__res.is-in { animation: mh-pop .5s var(--ease) both; } .mh-need__lbl { margin: 0; font: 700 .8rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); } .mh-need__name { margin: 6px 0 0; font: 800 1.9rem/1.15 var(--head); letter-spacing: -.02em; color: #fff; } .mh-need__price { margin: 4px 0 0; font: 700 1.05rem/1.4 var(--head); color: #8ff0b8; } .mh-need__why { margin: 10px 0 16px; font-size: .95rem; line-height: 1.55; color: #c9d9ee; } .mh-need__cta { display: inline-block; padding: 13px 24px; border-radius: 999px; background: var(--sky); color: #08162a !important; font: 700 .98rem/1.1 var(--head); text-decoration: none; } @media (max-width: 700px) { .mh-need__opts { grid-template-columns: minmax(0, 1fr); } } /* ====================================================================== Referensi Fajar: perbandingan dua kartu dengan lencana VS, dan langkah kerja berupa kartu bernomor ====================================================================== */ .mh-vsx { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: stretch; margin-top: 2.4rem; } .mh-vsx__card { position: relative; overflow: hidden; padding: 116px 32px 32px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .mh-vsx__card::before { content: "#"; position: absolute; left: 32px; top: 32px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(5, 115, 220, .1); color: var(--blue); font: 800 1.7rem/1 var(--head); } .mh-vsx__card::after { content: ""; position: absolute; top: -70px; right: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(5, 115, 220, .07); pointer-events: none; } .mh-vsx__card h3 { margin: 0 0 .5em; font: 800 1.45rem/1.25 var(--head); color: var(--ink); } .mh-vsx__intro { margin: 0 0 1.4rem !important; line-height: 1.65; color: var(--muted); } ul.mh-vsx__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .mh-vsx__list li { position: relative; margin: 0; padding: 16px 18px 16px 56px; border-radius: 16px; background: var(--alt); border: 1px solid var(--line); font-size: .96rem; line-height: 1.55; color: var(--body); } .mh-vsx__list li::before { content: "!"; position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #8a9ab0; color: #fff; font: 800 .8rem/1 var(--head); } .mh-vsx__list strong { color: var(--ink); } .mh-vsx__card--dark { background: radial-gradient(70% 60% at 100% 0%, rgba(26, 154, 250, .3), transparent 65%), linear-gradient(160deg, #0a2447, #0c3a73); border-color: transparent; box-shadow: 0 30px 60px -28px rgba(5, 70, 160, .8); } .mh-vsx__card--dark::before { content: "\2713"; background: var(--sky); color: #08162a; } .mh-vsx__card--dark::after { background: rgba(255, 255, 255, .06); } .mh-vsx__card--dark h3 { color: #fff; } .mh-vsx__card--dark .mh-vsx__intro { color: #c9d9ee; } .mh-vsx__card--dark .mh-vsx__list li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #e3edf9; } .mh-vsx__card--dark .mh-vsx__list li::before { content: "\2713"; background: var(--sky); color: #08162a; } .mh-vsx__card--dark .mh-vsx__list strong { color: #fff; } .mh-vsx__vs { z-index: 2; align-self: center; justify-self: center; width: 84px; height: 84px; margin: 0 !important; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; border: 7px solid var(--bg); box-shadow: 0 18px 36px -14px rgba(5, 115, 220, .8); font: 800 1.15rem/1 var(--head); } .mh-sec--alt .mh-vsx__vs { border-color: var(--alt); } @media (max-width: 860px) { .mh-vsx { grid-template-columns: minmax(0, 1fr); } .mh-vsx__vs { margin: -22px 0 !important; } .mh-vsx__card { padding: 108px 22px 24px; } .mh-vsx__card::before { left: 22px; } } @media (hover: hover) and (pointer: fine) { .mh-vsx__card { transition: transform .3s var(--ease); } .mh-vsx__card:hover { transform: translateY(-4px); } } /* Langkah kerja: kartu bernomor dua kolom (halaman Cara Kerja) */ .mh-vtl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: none; margin: 0; } .mh-vtl::before { content: none; } .mh-vtl > div { counter-increment: v; position: relative; overflow: hidden; padding: 26px 26px 28px 104px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } .mh-vtl > div:last-child { padding-bottom: 28px; } .mh-vtl > div::before { content: counter(v, decimal-leading-zero); position: absolute; left: 26px; top: 26px; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(5, 115, 220, .1); color: var(--blue); font: 800 1.05rem/1 var(--head); box-shadow: none; transition: background-color .3s, color .3s, box-shadow .3s; } .mh-vtl > div::after { content: ""; position: absolute; left: 26px; bottom: 0; width: 0; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--blue), var(--sky)); transition: width .4s var(--ease); } .mh-vtl h3 { margin: 4px 0 .4em; font: 800 1.2rem/1.3 var(--head); color: var(--ink); } .mh-vtl p { margin: 0; line-height: 1.65; color: var(--muted); } @media (hover: hover) and (pointer: fine) { .mh-vtl > div:hover { transform: translateY(-4px); border-color: rgba(5, 115, 220, .4); box-shadow: 0 1px 2px rgba(13, 45, 82, .06), 0 26px 44px -24px rgba(13, 45, 82, .5); } .mh-vtl > div:hover::before { background: var(--blue); color: #fff; box-shadow: 0 10px 22px -8px var(--blue); } .mh-vtl > div:hover::after { width: 96px; } } html[data-theme="dark"] .mh-vtl > div::before { color: var(--cyan); background: rgba(26, 154, 250, .16); } html[data-theme="dark"] .mh-vtl > div:hover::before { background: var(--sky); color: #08162a; } @media (max-width: 760px) { .mh-vtl { grid-template-columns: minmax(0, 1fr); } .mh-vtl > div { padding: 24px 22px 26px 92px; } .mh-vtl > div::before { left: 20px; top: 24px; } } .mh-vsx > .mh-vsx__card { margin-block: 0; } /* Kolom kiri yang menempel (daftar isi FAQ dan judul bagian): WordPress memaksa kolom sejajar-rentang (align-items: normal !important) sehingga kolom kiri setinggi kolom kanan dan tidak bisa menempel. Kolom kiri dibuat setinggi isinya sendiri. */ .mh-split { align-items: flex-start !important; } .mh-hero-cols { align-items: center !important; } .mh-contact { align-items: stretch !important; } @media (min-width: 782px) { .mh-split > .mh-split__l { align-self: flex-start !important; position: sticky; top: 120px; } .mh-faq .mh-split__l .mh-toc { max-height: calc(100vh - 180px); overflow-y: auto; } } /* Kartu template: tombol Lihat Demo dan Pakai Template (di atas tautan judul yang membentang) */ .mh-tcard > .mh-t-btns { position: relative; z-index: 2; margin: 14px 20px 20px; padding-top: 16px; border-top: 1px solid var(--line); gap: 10px; flex-wrap: nowrap; } .mh-t-btns .wp-block-button { flex: 1 1 0; min-width: 0; } .mh-t-btns .wp-block-button__link { display: block; width: 100%; padding: 11px 12px; text-align: center; font-size: .9rem; } .mh-t-btns .mh-btn-ghost .wp-block-button__link { color: var(--ink); } .mh-t-btns .wp-block-button__link::before { display: none !important; } @media (max-width: 380px) { .mh-tcard > .mh-t-btns { flex-wrap: wrap; } } /* Template Service AC dan kode template */ .mh-t-ac { --c1: #0284c7; --c2: #0c4a6e; } .mh-ico-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"); --icw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' 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"); } .mh-tcard .mh-t-code { align-self: flex-start; margin-top: 8px; padding: 3px 10px; border-radius: 6px; background: rgba(5, 115, 220, .1); color: var(--link); font: 700 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; } .mh-tcard .mh-t-tag + .mh-t-code { margin-top: 10px; } .mh-tcard h3 { margin-top: 10px; } /* Halaman Ketentuan Layanan dan Kebijakan Privasi: ruang kosong di atas agar judul tidak tertutup header (cara yang sama dengan hero) */ .mh-legal { padding-top: 40px !important; } .mh-legal::before { content: ""; display: block; height: 100px; } /* ====================================================================== Artikel: desain ulang (indeks, halaman artikel, kartu ajakan, artikel lainnya) ====================================================================== */ .mh-hero .mh-in { max-width: 1180px; margin-left: auto; margin-right: auto; } .blog .mh-hero, .single-post .mh-hero { padding-left: max(20px, calc((100vw - 1180px) / 2)); padding-right: max(20px, calc((100vw - 1180px) / 2)); } .blog .mh-hero .mh-in, .single-post .mh-hero .mh-in { max-width: none; margin: 0; } .mh-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; } .mh-cats a { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff !important; font: 600 .9rem/1 var(--head); text-decoration: none; transition: background-color .2s, color .2s; } .mh-cats a:hover { background: rgba(255, 255, 255, .18); } .mh-cats a.is-on { background: var(--sky); border-color: var(--sky); color: #08162a !important; } .mh-back { display: inline-block; margin-bottom: 18px; color: var(--cyan) !important; font: 700 .92rem/1 var(--head); text-decoration: none; } .mh-back:hover { text-decoration: underline; } .mh-hero--post h1 { max-width: 860px; font-size: clamp(1.9rem, 4.4vw, 3rem); } .mh-post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 1rem 0 0; color: #c9d9ee; font-size: .95rem; } .mh-post-meta span + span::before { content: "\00b7"; margin-right: 18px; color: var(--cyan); } /* Indeks artikel: grid kartu */ .blog .site-content > .ast-container { max-width: 1180px; padding: 56px 20px 110px; } .blog #primary, .blog .site-main { width: 100%; max-width: none; margin: 0; padding: 0; } .blog .ast-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin: 0; } .ast-separate-container.blog .ast-article-post, .blog .ast-article-post { width: 100% !important; float: none; margin: 0 !important; padding: 0 !important; border: 0; background: transparent; box-shadow: none; } .blog .ast-article-inner { height: 100%; } .blog .post-content { position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px !important; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } .blog .post-content::after { content: "Baca artikel \2192"; margin-top: auto; padding-top: 20px; font: 700 .92rem/1 var(--head); color: var(--link); } .blog .ast-blog-featured-section:empty { display: none; } .blog .cat-links { order: -1; margin: 0 0 14px; } .blog .cat-links a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(5, 115, 220, .1); color: var(--link) !important; font: 800 .72rem/1.3 var(--head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .blog .entry-title { margin: 0 0 12px; font: 800 1.4rem/1.3 var(--head); letter-spacing: -.02em; } .blog .entry-title a { color: var(--ink) !important; text-decoration: none; } .blog .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 24px; } .blog .ast-blog-meta-container { order: 3; margin: 14px 0 0; } .blog .entry-meta { font-size: .86rem; color: var(--muted); } .blog .entry-meta .posted-on, .blog .entry-meta .published { color: var(--muted); } .blog .ast-excerpt-container { order: 2; } .blog .ast-excerpt-container p { margin: 0; line-height: 1.65; color: var(--muted); } .blog .ast-excerpt-container .mh-rt { margin-top: 10px; font-size: .86rem; color: var(--muted); } .blog .ast-blog-single-element { order: 2; } .blog .ast-taxonomy-container { order: -1; } .blog .entry-title { order: 1; } .blog .entry-content:empty { display: none; } @media (hover: hover) and (pointer: fine) { .blog .post-content:hover { transform: translateY(-4px); border-color: rgba(5, 115, 220, .4); box-shadow: 0 1px 2px rgba(13, 45, 82, .06), 0 28px 48px -26px rgba(13, 45, 82, .5); } } /* Artikel pertama menjadi sorotan selebar kolom */ .blog .ast-article-post:first-child { grid-column: 1 / -1; } .blog .ast-article-post:first-child .post-content { padding: clamp(28px, 4vw, 46px) !important; background: radial-gradient(70% 90% at 100% 0%, rgba(26, 154, 250, .3), transparent 60%), linear-gradient(160deg, #0a2447, #0c3a73); border-color: transparent; } .blog .ast-article-post:first-child .entry-title { max-width: 820px; font-size: clamp(1.6rem, 3.2vw, 2.3rem); } .blog .ast-article-post:first-child .entry-title a { color: #fff !important; } .blog .ast-article-post:first-child .cat-links a { background: var(--sky); color: #08162a !important; } .blog .ast-article-post:first-child .ast-excerpt-container p, .blog .ast-article-post:first-child .entry-meta, .blog .ast-article-post:first-child .entry-meta .published, .blog .ast-article-post:first-child .mh-rt { color: #c9d9ee; } .blog .ast-article-post:first-child .post-content::after { color: var(--cyan); } /* Halaman artikel: kolom baca nyaman */ .single-post .site-content > .ast-container { max-width: 780px; padding: 56px 20px 40px; } .single-post #primary { width: 100%; margin: 0; padding: 0; } .single-post .ast-article-single, .ast-separate-container.single-post .ast-article-single { padding: 0 !important; border: 0; background: transparent; box-shadow: none; } .single-post .entry-header { display: none; } .single-post .entry-content { font-size: 1.1rem; line-height: 1.85; } .single-post .entry-content > p:first-child { font-size: 1.28rem; line-height: 1.7; color: var(--ink); } .single-post .entry-content p { margin: 0 0 1.4em; } .single-post .entry-content h2 { margin: 2em 0 .6em; font: 800 clamp(1.5rem, 3vw, 1.9rem)/1.25 var(--head); letter-spacing: -.02em; color: var(--ink); } .single-post .entry-content ul, .single-post .entry-content ol { margin: 0 0 1.6em; padding: 0; list-style: none; } .single-post .entry-content li { position: relative; margin: 0 0 .8em; padding-left: 34px; } .single-post .entry-content ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 20px; height: 20px; border-radius: 50%; background: var(--blue) center / 12px 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .single-post .entry-content strong { color: var(--ink); } .single-post .entry-content a { text-decoration: underline; text-underline-offset: 3px; } .single-post .post-navigation, .single-post .comments-area { display: none; } /* Kartu ajakan dan artikel lainnya */ .mh-art-cta { margin: 3rem 0 0; padding: clamp(26px, 4vw, 40px); border-radius: 26px; color: #dbe8f8; background: radial-gradient(70% 120% at 100% 0%, rgba(26, 154, 250, .32), transparent 60%), linear-gradient(160deg, #0a2447, #0c3a73); } .single-post .entry-content .mh-art-cta h2 { margin: 0 0 .4em; color: #fff; font-size: clamp(1.4rem, 3vw, 1.8rem); } .mh-art-cta p { margin: 0 0 1.4rem !important; font-size: 1.02rem; line-height: 1.6; color: #dbe8f8; } .mh-art-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; } .mh-art-cta a { display: inline-block; padding: 14px 26px; border-radius: 999px; font: 700 .98rem/1.1 var(--head); text-decoration: none !important; transition: filter .2s; } .mh-art-cta a:hover { filter: brightness(1.08); } .mh-art-cta__wa { background: var(--sky); color: #08162a !important; } .mh-art-cta__ln { border: 1.5px solid rgba(255, 255, 255, .5); color: #fff !important; } .mh-art-cta__wa::before { content: ""; display: inline-block; width: 1.2em; height: 1.2em; margin-right: .55em; vertical-align: -.22em; background: currentColor; -webkit-mask: var(--wa-ic) center / contain no-repeat; mask: var(--wa-ic) center / contain no-repeat; } .mh-rel { margin: 3.2rem 0 0; } .single-post .entry-content .mh-rel h2 { margin: 0 0 1rem; font-size: 1.4rem; } .mh-rel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; } .mh-rel__c { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none !important; transition: transform .3s var(--ease), border-color .3s; } .mh-rel__c small { font: 800 .7rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--link); } .mh-rel__c strong { font: 800 1.1rem/1.35 var(--head); color: var(--ink); } .mh-rel__c span { font-size: .93rem; line-height: 1.55; color: var(--muted); } .mh-rel__c em { margin-top: 4px; font: 700 .86rem/1.2 var(--head); font-style: normal; color: var(--link); } @media (hover: hover) and (pointer: fine) { .mh-rel__c:hover { transform: translateY(-3px); border-color: rgba(5, 115, 220, .4); } } @media (max-width: 600px) { .blog .post-content { padding: 24px !important; } } .blog .post-content::after { order: 99; } .blog .post-content > .entry-content { display: none; } /* ====================================================================== Artikel v2: struktur mengikuti sai-theme (hero + breadcrumb, chip kategori + cari, kartu, sidebar, bagikan, artikel lainnya) ====================================================================== */ .blog .site-content > .ast-container, .archive .site-content > .ast-container, .search .site-content > .ast-container, .single-post .site-content > .ast-container { max-width: none; padding: 0; } .blog #primary, .archive #primary, .search #primary, .single-post #primary { width: 100%; margin: 0; padding: 0; } .blog .mh-hero, .archive .mh-hero, .search .mh-hero, .single-post .mh-hero { padding-left: 20px; padding-right: 20px; } .blog .mh-hero .mh-in, .archive .mh-hero .mh-in, .search .mh-hero .mh-in, .single-post .mh-hero .mh-in { max-width: 1180px; margin: 0 auto; } .mh-crumb { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .84rem; color: #c9d9ee; } .mh-crumb a { color: #fff !important; font-weight: 600; text-decoration: none; } .mh-crumb a:hover { text-decoration: underline; } .mh-crumb .sep { opacity: .5; } .mh-post-cat { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px; background: var(--sky); color: #08162a; font: 800 .74rem/1.3 var(--head); letter-spacing: .08em; text-transform: uppercase; } .mh-hero--post h1 { max-width: 880px; font-size: clamp(1.9rem, 4.4vw, 3rem); } .mh-post-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 1rem 0 0; color: #c9d9ee; font-size: .95rem; } .mh-post-meta > span { display: inline-flex; align-items: center; gap: 8px; } .mh-post-meta [data-i]::before, .mh-pcard__meta [data-i]::before { width: 1em; height: 1em; margin: 0; } .mh-post-meta span + span::before { content: none; } .mh-blog { padding: clamp(40px, 6vw, 72px) 20px clamp(60px, 8vw, 100px); } .mh-blog--alt { background: var(--alt); } .mh-blog__in { max-width: 1180px; margin: 0 auto; } .mh-more-title { margin: 0 0 1.6rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--ink); } .mh-blog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; } .mh-chips2 { display: flex; flex-wrap: wrap; gap: 8px; } .mh-chips2 a { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-s); background: var(--surface); color: var(--ink) !important; font: 600 .9rem/1 var(--head); text-decoration: none; transition: transform .25s var(--ease), background-color .25s, border-color .25s; } .mh-chips2 a:hover { transform: translateY(-2px); border-color: var(--blue); } .mh-chips2 a.is-on { background: var(--blue); border-color: var(--blue); color: #fff !important; } html[data-theme="dark"] .mh-chips2 a.is-on { background: var(--sky); border-color: var(--sky); color: #08162a !important; } .mh-sform { display: flex; align-items: center; min-width: 260px; padding: 4px 4px 4px 18px; border-radius: 999px; border: 1px solid var(--line-s); background: var(--surface); } .mh-sform input { flex: 1; min-width: 0; padding: 9px 6px; border: 0; background: transparent; color: var(--ink); font: inherit; outline: 0; box-shadow: none; } .mh-sform button { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; font: 700 1rem/1 var(--head); transition: transform .25s var(--ease); } .mh-sform button:hover { transform: scale(1.08); } .mh-sform:focus-within { box-shadow: 0 0 0 4px rgba(5, 115, 220, .2); border-color: var(--blue); } .mh-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .mh-pcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--body) !important; text-decoration: none !important; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; } .mh-pcard__img { position: relative; display: block; aspect-ratio: 16 / 10; margin: 10px 10px 0; border-radius: 14px; background: var(--icw, none) center / 60px no-repeat, linear-gradient(135deg, var(--c1), var(--c2)); overflow: hidden; } .mh-pcard__img::before { content: none !important; } .mh-pcard__cat { position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(8, 22, 42, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 700 .72rem/1.3 var(--head); letter-spacing: .04em; } .mh-pcard__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 18px 22px 22px; } .mh-pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); } .mh-pcard__meta [data-i] { display: inline-flex; color: var(--blue); } .mh-pcard .dot, .mh-post-meta .dot { opacity: .5; } .mh-pcard__title { font: 800 1.12rem/1.35 var(--head); letter-spacing: -.01em; color: var(--ink); } .mh-pcard__excerpt { font-size: .92rem; line-height: 1.6; color: var(--muted); } .mh-pcard__more { margin-top: auto; padding-top: 8px; font: 700 .9rem/1 var(--head); color: var(--link); } @media (hover: hover) and (pointer: fine) { .mh-pcard:hover { transform: translateY(-5px); border-color: rgba(5, 115, 220, .4); box-shadow: 0 1px 2px rgba(13, 45, 82, .06), 0 28px 48px -26px rgba(13, 45, 82, .5); } .mh-pcard:hover .mh-pcard__img { background-size: 70px, auto; } } .mh-pcard__img { transition: background-size .5s var(--ease); } .mh-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; } .mh-pagination .page-numbers { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-s); background: var(--surface); color: var(--ink) !important; font-weight: 600; text-decoration: none; } .mh-pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff !important; } .mh-empty { padding: 40px; border-radius: 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); } @media (max-width: 1024px) { .mh-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .mh-post-grid { grid-template-columns: minmax(0, 1fr); } .mh-sform { width: 100%; } } /* Halaman artikel: isi + sidebar menempel */ .mh-artwrap { padding: clamp(40px, 6vw, 72px) 20px; } .mh-art { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 52px); align-items: start; max-width: 1180px; margin: 0 auto; } .mh-prose { min-width: 0; max-width: 820px; font-size: 1.08rem; line-height: 1.85; } .mh-prose > p:first-child { font-size: 1.25rem; line-height: 1.7; color: var(--ink); } .mh-prose p { margin: 0 0 1.3em; } .mh-prose h2 { margin: 1.9em 0 .6em; padding-left: 14px; border-left: 5px solid var(--blue); font: 800 clamp(1.45rem, 3vw, 1.85rem)/1.25 var(--head); letter-spacing: -.02em; color: var(--ink); } .mh-prose h2:first-child { margin-top: 0; } .mh-prose ul, .mh-prose ol { margin: 0 0 1.5em; padding: 0; list-style: none; } .mh-prose li { position: relative; margin: 0 0 .75em; padding-left: 34px; } .mh-prose ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 20px; height: 20px; border-radius: 50%; background: var(--blue) center / 12px 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .mh-prose strong { color: var(--ink); } .mh-prose a:not([class]) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .mh-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2.4rem 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; } .mh-share span { font-weight: 700; color: var(--ink); } .mh-share a, .mh-share button { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-s); background: var(--surface); color: var(--ink) !important; font: 600 .84rem/1 var(--head); text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s, color .25s; } .mh-share a:hover, .mh-share button:hover { transform: translateY(-2px); background: var(--blue); border-color: var(--blue); color: #fff !important; } .mh-side { position: sticky; top: 112px; display: grid; gap: 16px; } .mh-side__card { padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .mh-side__card h2 { margin: 0 0 8px; font: 800 1.05rem/1.3 var(--head); color: var(--ink); } .mh-side__card p { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; color: var(--muted); } .mh-side__btn { display: block; padding: 13px 18px; border-radius: 999px; background: var(--blue); color: #fff !important; text-align: center; font: 700 .95rem/1.1 var(--head); text-decoration: none; } .mh-side__btn::before { content: ""; display: inline-block; width: 1.2em; height: 1.2em; margin-right: .5em; vertical-align: -.22em; background: currentColor; -webkit-mask: var(--wa-ic) center / contain no-repeat; mask: var(--wa-ic) center / contain no-repeat; } .mh-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .mh-side li { margin: 0; } .mh-side li a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--ink) !important; font-size: .92rem; text-decoration: none; transition: background-color .2s, transform .25s var(--ease); } .mh-side li a:hover { background: rgba(5, 115, 220, .08); transform: translateX(3px); } .mh-side li [data-i] { color: var(--blue); } .mh-side small { color: var(--muted); } .mh-art-cta { margin: 2.4rem 0 0; padding: clamp(24px, 4vw, 36px); border-radius: 24px; color: #dbe8f8; background: radial-gradient(70% 120% at 100% 0%, rgba(26, 154, 250, .32), transparent 60%), linear-gradient(160deg, #0a2447, #0c3a73); } .mh-prose .mh-art-cta h2 { margin: 0 0 .4em; padding: 0; border: 0; color: #fff; font-size: clamp(1.35rem, 3vw, 1.7rem); } @media (max-width: 980px) { .mh-art { grid-template-columns: minmax(0, 1fr); } .mh-side { position: static; } } /* ====================================================================== Ilustrasi hero per halaman (dekoratif, interaktif dengan mouse) ====================================================================== */ [data-i="mail"]{--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='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")} [data-i="layout"]{--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='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/svg%3E")} [data-i="send"]{--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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E")} .mh-in--vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: clamp(24px, 5vw, 72px); align-items: center; } .mh-in--vis > * { grid-column: 1; } .mh-in--vis > .mh-vis { grid-column: 2; grid-row: 1 / span 8; } .mh-in--vis .mh-hero-title { font-size: clamp(2rem, 4.2vw, 3.1rem); } @media (max-width: 900px) { .mh-in--vis { grid-template-columns: minmax(0, 1fr); } .mh-in--vis > .mh-vis { grid-column: 1; grid-row: auto; margin-top: 32px; } } .mh-vis { position: relative; width: 100%; max-width: 460px; margin: 0 auto; padding: 10px 0 26px; perspective: 1100px; user-select: none; } .mh-vis__tilt { position: relative; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .25s var(--ease); transform-style: preserve-3d; } .mh-vchip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; color: #0d2d52; font: 700 .82rem/1.2 var(--head); box-shadow: 0 16px 30px -14px rgba(0, 10, 30, .6); white-space: nowrap; translate: calc(var(--px, 0) * var(--k, 12) * 1px) calc(var(--py, 0) * var(--k, 12) * 1px); transition: translate .3s var(--ease); animation: mh-bob 6s ease-in-out infinite; } .mh-vchip i { display: inline-block; width: 1.25em; height: 1.25em; background: var(--blue); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-vchip.c1 { left: -12px; top: 16%; animation-delay: -1s; } .mh-vchip.c2 { right: -14px; top: 40%; animation-delay: -3s; } .mh-vchip.c3 { left: -6px; bottom: 6%; animation-delay: -2s; } .mh-vchip.c4 { right: 6%; top: -6px; animation-delay: -4s; } /* Layanan: situs mini + chip layanan */ .mh-vframe { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -30px rgba(0, 10, 30, .65); } .mh-vframe__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #eef3fa; border-bottom: 1px solid rgba(13, 45, 82, .1); } .mh-vframe__bar i { width: 9px; height: 9px; border-radius: 50%; background: #c8d4e4; } .mh-vframe__bar span { margin-left: 10px; padding: 4px 14px; border-radius: 8px; background: #fff; font-size: .78rem; color: #566b86; } .mh-vframe__body { display: grid; gap: 10px; padding: 18px; } .mh-vframe .a { display: grid; gap: 9px; padding: 22px; border-radius: 12px; background: linear-gradient(160deg, #0a2447, #0c3a73); } .mh-vframe .a b { height: 12px; width: 70%; border-radius: 4px; background: #fff; } .mh-vframe .a u { height: 8px; width: 45%; border-radius: 4px; background: rgba(255, 255, 255, .55); } .mh-vframe .a u.s { width: 30%; } .mh-vframe .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mh-vframe .g i { height: 56px; border-radius: 10px; background: #f1f6fc; border: 1px solid rgba(13, 45, 82, .08); } .mh-vframe .l { height: 8px; border-radius: 4px; background: #e3ebf5; } .mh-vframe .l.s { width: 60%; } .mh-vframe .w { justify-self: start; padding: 9px 16px; border-radius: 999px; background: #17803f; color: #fff; font: 700 .8rem/1 var(--head); } /* Harga: tangga paket */ .mh-vplans { display: grid; gap: 12px; } .mh-vplan { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 18px 22px; border-radius: 18px; background: rgba(255, 255, 255, .96); color: #0d2d52; box-shadow: 0 24px 44px -24px rgba(0, 10, 30, .6); translate: calc(var(--px, 0) * var(--k, 12) * 1px) calc(var(--py, 0) * var(--k, 12) * 1px); transition: translate .3s var(--ease), transform .3s var(--ease); } .mh-vplan span { grid-column: 1; font: 800 1.1rem/1.2 var(--head); } .mh-vplan span em { margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: #1a9afa; color: #08162a; font: 800 .66rem/1.3 var(--head); font-style: normal; letter-spacing: .06em; text-transform: uppercase; } .mh-vplan strong { grid-column: 2; grid-row: 1 / span 2; font: 800 1.45rem/1 var(--head); letter-spacing: -.02em; color: #0463bd; } .mh-vplan small { grid-column: 1; color: #566b86; font-size: .8rem; } .mh-vplan--laris { background: #fff; transform: scale(1.04); box-shadow: 0 30px 56px -24px rgba(5, 115, 220, .9); } .mh-vplan--tampil { margin-right: 36px; } .mh-vplan--melesat { margin-left: 36px; } @media (hover: hover) and (pointer: fine) { .mh-vplan:hover { transform: scale(1.06) translateY(-3px); } } /* Template: kipas kartu */ .mh-vfan { position: relative; height: 330px; } .mh-vfan__c { position: absolute; left: 50%; bottom: 0; display: grid; place-items: center; width: 56%; aspect-ratio: 4 / 5; margin-left: -28%; border-radius: 22px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 30px 50px -22px rgba(0, 10, 30, .7); border: 4px solid rgba(255, 255, 255, .9); transform-origin: 50% 110%; transition: transform .5s var(--ease); translate: calc(var(--px, 0) * var(--k, 12) * 1px) calc(var(--py, 0) * var(--k, 12) * 1px); } .mh-vfan__c i { width: 44%; height: 44%; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-vfan__c.n0 { transform: rotate(-18deg) translateX(-28%); } .mh-vfan__c.n1 { transform: rotate(-6deg) translateX(-8%); } .mh-vfan__c.n2 { transform: rotate(6deg) translateX(10%); } .mh-vfan__c.n3 { transform: rotate(18deg) translateX(30%); } @media (hover: hover) and (pointer: fine) { .mh-vis--template:hover .n0 { transform: rotate(-26deg) translateX(-44%); } .mh-vis--template:hover .n1 { transform: rotate(-9deg) translateX(-14%); } .mh-vis--template:hover .n2 { transform: rotate(9deg) translateX(16%); } .mh-vis--template:hover .n3 { transform: rotate(26deg) translateX(46%); } } /* Cara kerja: pelacak langkah */ .mh-vtrack { padding: 26px; border-radius: 22px; background: #fff; color: #0d2d52; box-shadow: 0 40px 70px -30px rgba(0, 10, 30, .65); } .mh-vtrack__t { margin: 0 0 16px; font: 800 1.1rem/1.3 var(--head); } .mh-vtrack ol { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; } .mh-vtrack li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: #f1f6fc; font: 600 .95rem/1.3 var(--head); color: #566b86; transition: background-color .4s, color .4s; } .mh-vtrack li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #dbe6f5; color: #0d2d52; font: 800 .8rem/1 var(--head); transition: background-color .4s, color .4s; } .mh-vtrack li.is-done { background: rgba(23, 128, 63, .1); color: #0d2d52; } .mh-vtrack li.is-done span { background: #17803f; color: #fff; } .mh-vtrack li.is-now { background: rgba(5, 115, 220, .12); color: #0d2d52; } .mh-vtrack li.is-now span { background: #0573dc; color: #fff; } .mh-vtrack__bar { height: 8px; border-radius: 999px; background: #e3ebf5; overflow: hidden; } .mh-vtrack__bar u { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0573dc, #1a9afa); text-decoration: none; transition: width 1s var(--ease); } /* FAQ dan Kontak: jendela obrolan */ .mh-vchat, .mh-vchat2 { padding: 22px; border-radius: 22px; background: #fff; color: #0d2d52; box-shadow: 0 40px 70px -30px rgba(0, 10, 30, .65); cursor: pointer; min-height: 300px; } .mh-vchat__h, .mh-vchat2__h { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 800 1rem/1 var(--head); } .mh-vchat__h i { width: 1.3em; height: 1.3em; background: var(--blue); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .mh-vchat p, .mh-vchat2 p { margin: 0 0 12px; padding: 12px 16px; border-radius: 16px; max-width: 88%; font-size: .96rem; line-height: 1.5; min-height: 1.5em; } .mh-vchat__q, .mh-vchat2__u { margin-left: auto !important; background: #0573dc; color: #fff; border-bottom-right-radius: 4px !important; } .mh-vchat__a, .mh-vchat2__m { background: #eef3fa; color: #0d2d52; border-bottom-left-radius: 4px !important; } .mh-vchat small { display: block; margin-top: 8px; color: #566b86; font-size: .78rem; } .mh-vchat2__h span { width: 10px; height: 10px; border-radius: 50%; background: #17803f; box-shadow: 0 0 0 4px rgba(23, 128, 63, .2); } .mh-vchat2__h small { margin-left: auto; color: #566b86; font-weight: 600; } .mh-vchat p:empty, .mh-vchat2 p:empty { opacity: 0; } /* Tentang: peta penanda */ .mh-vmap { position: relative; aspect-ratio: 1 / 1; border-radius: 26px; overflow: hidden; background: radial-gradient(60% 60% at 35% 30%, rgba(26, 154, 250, .35), transparent 70%), linear-gradient(160deg, #0b2b55, #0a1f3d); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 70px -30px rgba(0, 10, 30, .65); } .mh-vmap__grid { position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); } .mh-vpin { position: absolute; display: flex; align-items: center; gap: 10px; translate: calc(var(--px, 0) * var(--k, 12) * 1px) calc(var(--py, 0) * var(--k, 12) * 1px); transition: translate .3s var(--ease); } .mh-vpin i { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #1a9afa; box-shadow: 0 0 0 4px rgba(26, 154, 250, .3); } .mh-vpin i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid #1a9afa; opacity: .6; animation: mh-ping2 2s ease-out infinite; } .mh-vpin b { padding: 6px 12px; border-radius: 999px; background: #fff; color: #0d2d52; font: 700 .82rem/1 var(--head); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); } @keyframes mh-ping2 { from { transform: scale(.5); opacity: .8; } to { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mh-vis__tilt { transform: none; } .mh-vchip { animation: none; translate: none; } .mh-vpin i::after { animation: none; } } /* Kode template yang bisa disalin */ .mh-tcard .mh-t-code { position: relative; z-index: 3; cursor: pointer; transition: background-color .2s, color .2s; } .mh-tcard .mh-t-code:hover { background: var(--blue); color: #fff; } .mh-tcard .mh-t-code.is-copied { background: #17803f; color: #fff; } /* Tabel perbandingan: sorot baris dan kolom */ .mh-cmp td.hl-col, .mh-cmp th.hl-col { background-color: rgba(5, 115, 220, .1); } .mh-cmp tr.hl-row td, .mh-cmp tr.hl-row th { background-color: rgba(5, 115, 220, .1); } .mh-cmp td.hl-col.hl-cell, .mh-cmp tr.hl-row td.hl-cell { background-color: rgba(5, 115, 220, .22); } .mh-cmp td, .mh-cmp th { transition: background-color .15s; } /* Bug halaman Artikel: kontainer Astra (.ast-container) berupa flex-row, sehingga hero dan daftar artikel berdampingan. Template sendiri tidak memakai pembungkus #primary, jadi kontainernya dibuat blok biasa. */ .blog .site-content > .ast-container, .archive .site-content > .ast-container, .search .site-content > .ast-container, .single-post .site-content > .ast-container { display: block !important; width: 100%; } .blog .site-content > .ast-container > section, .archive .site-content > .ast-container > section, .search .site-content > .ast-container > section, .single-post .site-content > .ast-container > section { width: 100%; max-width: none; flex: none; } /* Hero Artikel (daftar, kategori, pencarian, artikel): ringkas */ .blog .mh-hero, .archive .mh-hero, .search .mh-hero, .single-post .mh-hero { padding-top: 0 !important; padding-bottom: 34px; } .blog .mh-hero::before, .archive .mh-hero::before, .search .mh-hero::before, .single-post .mh-hero::before { height: 92px; } .blog .mh-hero h1, .archive .mh-hero h1, .search .mh-hero h1 { margin-bottom: .25em; font-size: clamp(1.9rem, 3.6vw, 2.5rem); } .blog .mh-hero .mh-crumb, .archive .mh-hero .mh-crumb, .search .mh-hero .mh-crumb, .single-post .mh-hero .mh-crumb { margin-bottom: 12px; } .blog .mh-hero-sub, .archive .mh-hero-sub, .search .mh-hero-sub { margin-bottom: 0; font-size: 1rem; line-height: 1.55; } .single-post .mh-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); } .blog .mh-blog, .archive .mh-blog, .search .mh-blog { padding-top: 32px; } /* Chip ilustrasi tidak menutupi isi: di ilustrasi yang berisi teks, chip ditaruh sebagai baris di bawah */ .mh-vis--harga .mh-vchip, .mh-vis--cara .mh-vchip, .mh-vis--kontak .mh-vchip, .mh-vis--tentang .mh-vchip { position: relative; inset: auto; display: inline-flex; margin: 16px 10px 0 0; animation: none; } .mh-vis--harga .mh-vplans { padding-bottom: 2px; } .mh-vplan small s { color: #8a9ab0; } .mh-vplan small { font-size: .82rem; } /* ====================================================================== Mobile: logo lebih kecil dan proporsional; tombol mode gelap tanpa latar/bingkai pada semua keadaan (aktif, fokus, sentuh) ====================================================================== */ @media (max-width: 921px) { #masthead .ast-primary-header-bar .site-primary-header-wrap { min-height: 54px !important; padding: 0 6px 0 18px; } #masthead .custom-logo, #masthead .site-logo-img img, #masthead .mh-logo-light { height: 20px !important; max-height: 20px !important; width: auto !important; } .mh-theme-toggle--bar, .mh-theme-toggle--bar:hover, .mh-theme-toggle--bar:focus, .mh-theme-toggle--bar:active { background: transparent !important; border: 0 !important; outline: 0; box-shadow: none !important; color: #eaf2fd; -webkit-tap-highlight-color: transparent; border-radius: 50%; transform: none; } .mh-theme-toggle--bar { width: 38px; height: 38px; } .mh-theme-toggle--bar svg { width: 20px; height: 20px; transition: transform .35s var(--ease), opacity .2s; } .mh-theme-toggle--bar:active svg { transform: rotate(25deg) scale(.88); opacity: .75; } .mh-theme-toggle--bar:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; } #masthead .menu-toggle, #masthead .menu-toggle:hover, #masthead .menu-toggle:focus, #masthead .menu-toggle:active { background: transparent !important; box-shadow: none !important; outline: 0; -webkit-tap-highlight-color: transparent; } #masthead .menu-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-radius: 10px; } #masthead .ast-button-wrap { gap: 4px; } #masthead .menu-toggle .ast-mobile-svg, #masthead .menu-toggle svg { width: 22px; height: 22px; } }