/* Desain monokrom. Lapisan ini sengaja dimuat setelah modern-ui.css. */
:root { --mono-bg: #0a0a0b; --mono-panel: #151516; --mono-panel-soft: #1b1b1d; --mono-line: #303033; --mono-text: #f5f5f5; --mono-muted: #a1a1aa; }
html { scroll-padding-top: 86px; }
html[data-theme="dark"] body { background: #0a0a0b !important; color: var(--mono-text) !important; font-family: Inter, 'Open Sans', sans-serif !important; }
html[data-theme="dark"] body::before { display: none; }
html[data-theme="dark"] .fixed-navbar { background: rgba(11,11,12,.93) !important; border-bottom: 1px solid #27272a !important; box-shadow: none !important; }
html[data-theme="dark"] .fixed-navbar :is(span, a) { color: #f5f5f5 !important; }
html[data-theme="dark"] .fixed-navbar img { filter: grayscale(1) brightness(2); }
html[data-theme="dark"] .fixed-navbar a[href="/"] { min-width: 0; }
html[data-theme="dark"] .fixed-navbar .ui-theme-toggle { border: 1px solid #3f3f46; background: #1b1b1d; color: #e5e5e5; box-shadow: none; }
html[data-theme="dark"] .ui-theme-toggle { background: #1b1b1d !important; border-color: #47474b !important; color: #e5e5e5 !important; box-shadow: none !important; }
html[data-theme="dark"] .fixed-navbar .mono-login-link { padding: 9px 16px !important; border-radius: 10px !important; background: #f5f5f5 !important; color: #111 !important; font-size: 12px !important; font-weight: 700 !important; }
.mono-public-nav { display: flex; align-items: center; gap: 5px; }
.mono-public-nav a { padding: 9px 13px; border-radius: 9px; color: #a1a1aa; font-size: 12px; font-weight: 600; }
.mono-public-nav a:hover, .mono-public-nav a.is-current { background: #242426; color: white; }
.mono-public-menu { display: none; }
html[data-theme="dark"] .ui-announcement { width: max-content; max-width: min(90vw, 800px); margin: 8px auto -20px; padding: 8px 13px; gap: 8px; border-radius: 999px; border: 1px solid #3f3f46; background: #18181a; box-shadow: none; color: #e5e5e5; }
html[data-theme="dark"] .ui-announcement-icon { display: none; }
html[data-theme="dark"] .ui-announcement strong { display: inline; font-size: 11px; }
html[data-theme="dark"] .ui-announcement p { display: inline; margin: 0 0 0 8px; font-size: 11px; }
html[data-theme="dark"] .ui-announcement a { margin-left: 6px; color: white; font-size: 11px; }
html[data-theme="dark"] main .bg-white, html[data-theme="dark"] main .bg-gray-50, html[data-theme="dark"] main .bg-gray-100, html[data-theme="dark"] main .bg-blue-50, html[data-theme="dark"] main [class*="bg-[#"] { background: #151516 !important; border-color: #303033 !important; box-shadow: none !important; }
html[data-theme="dark"] main .border, html[data-theme="dark"] main [class*="border-[#"] { border-color: #303033 !important; }
html[data-theme="dark"] main :is(.text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500) { color: #e5e5e5 !important; }
html[data-theme="dark"] main .text-gray-400 { color: #a1a1aa !important; }
html[data-theme="dark"] main :is(.text-blue-500, .text-blue-600) { color: #e5e5e5 !important; }
html[data-theme="dark"] main :is(.bg-blue-500, .bg-blue-600) { background-color: #f5f5f5 !important; color: #111 !important; }
html[data-theme="dark"] main :is(input, select, textarea) { background: #111113 !important; border-color: #3f3f46 !important; color: #f5f5f5 !important; }
html[data-theme="dark"] main :is(input, select, textarea)::placeholder { color: #8e8e94 !important; }
html[data-theme="dark"] main :is(input, select, textarea):focus { outline-color: #a1a1aa; }
html[data-theme="dark"] main .ui-balance-card { background: linear-gradient(135deg, #212124, #131315) !important; border: 1px solid #3f3f46 !important; }
html[data-theme="dark"] main .ui-balance-card > div:first-child { background: transparent !important; }
html[data-theme="dark"] .ui-section-heading h2, html[data-theme="dark"] .ui-quick-grid strong, html[data-theme="dark"] .ui-recent-item strong { color: white !important; }
html[data-theme="dark"] .ui-quick-grid a, html[data-theme="dark"] .ui-recent-list { background: #151516; border-color: #303033; }
html[data-theme="dark"] .ui-quick-icon, html[data-theme="dark"] .ui-recent-icon { background: #28282b; color: white; }
html[data-theme="dark"] .ui-docs-page > .mb-6:first-child, html[data-theme="dark"] .ui-auth-intro { background: linear-gradient(145deg, #222225, #111112) !important; border: 1px solid #3a3a3e; }
html[data-theme="dark"] .ui-docs-start, html[data-theme="dark"] .ui-docs-key, html[data-theme="dark"] .ui-docs-page > section { background: #151516 !important; border-color: #303033 !important; }
html[data-theme="dark"] .ui-docs-start h2, html[data-theme="dark"] .ui-docs-key label { color: #f5f5f5 !important; }
html[data-theme="dark"] .ui-docs-start a { color: #f5f5f5; }
html[data-theme="dark"] .ui-docs-page .ui-copy-button { background: #222225 !important; border-color: #49494d !important; color: white !important; }
html[data-theme="dark"] .ui-auth-card { background: #151516 !important; border-color: #303033 !important; }
html[data-theme="dark"] .ui-auth-layout { background: #0a0a0b !important; }
html[data-theme="dark"] .ui-auth-card :is(input, select, textarea) { background: #111113 !important; border-color: #4a4a4e !important; color: white !important; }
html[data-theme="dark"] .ui-auth-card :is(input, select, textarea)::placeholder { color: #8e8e94 !important; }
html[data-theme="dark"] .ui-auth-card :is(.text-blue-500, .text-blue-600), html[data-theme="dark"] .ui-auth-links :is(.text-blue-500, .text-blue-600) { color: #e4e4e7 !important; }
html[data-theme="dark"] .ui-auth-card #passwordInput { background: transparent !important; }
html[data-theme="dark"] .ui-auth-card [class*="bg-[#"] { background: #111113 !important; border-color: #4a4a4e !important; }
html[data-theme="dark"] .ui-auth-card #passwordInput + button { background: transparent !important; color: #d4d4d8 !important; }
html[data-theme="dark"] .ui-auth-card button[type="submit"] { background: white !important; color: #111 !important; }
html[data-theme="dark"] .ui-auth-intro .ui-eyebrow { color: #a1a1aa; }
html[data-theme="dark"] .ui-auth-orbit-center { background: #39393d; }
html[data-theme="dark"] .ui-auth-orbit-dot { background: #e4e4e7; }
html[data-theme="dark"] .ui-auth-orbit-dot.two { background: #99999f; }
html[data-theme="dark"] .ui-payment-page { background: #151516 !important; border-color: #303033; }
html[data-theme="dark"] .ui-payment-page > div:first-child, html[data-theme="dark"] .ui-payment-page table { background: #19191b !important; }
html[data-theme="dark"] .ui-payment-page table td { border-color: #303033 !important; }
html[data-theme="dark"] .ui-payment-page :is(.text-gray-800, .text-gray-700) { color: #f5f5f5 !important; }
html[data-theme="dark"] .ui-payment-page #payButton { background: white !important; color: #111 !important; }
html[data-theme="dark"] .ui-payment-page > div:first-child span { display: inline-block; max-width: min(70vw, 500px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] footer { background: #0c0c0d !important; border-color: #29292c !important; }
html[data-theme="dark"] footer.bg-gray-50 { background: #0c0c0d !important; }
html[data-theme="dark"] footer img { filter: grayscale(1) brightness(2); }
html[data-theme="dark"] footer a { text-decoration: none !important; }
html[data-theme="dark"] footer a:hover { text-decoration: underline !important; }
html[data-theme="dark"] footer :is(.text-gray-800, .text-gray-700, .text-blue-500, .text-blue-600) { color: #d4d4d8 !important; }
html[data-theme="dark"] body.has-account-nav .mobile-menu { background: #111112 !important; border-color: #303033 !important; }
html[data-theme="dark"] body.has-account-nav .mobile-menu-inner a { color: #e4e4e7 !important; }
html[data-theme="dark"] body.has-account-nav .mobile-menu-inner a.bg-blue-500 { background: #f5f5f5 !important; color: #111 !important; }
html[data-theme="dark"] body.has-account-nav .mobile-menu-inner a.bg-blue-500 i { color: #111 !important; }
html[data-theme="dark"] .ui-eyebrow, html[data-theme="dark"] .ui-quick-grid a > .fa-arrow-right { color: #a1a1aa !important; }

/* Beranda yang mengikuti referensi visual. */
main:has(.mono-home) { padding: 0 !important; }
main > .mono-home { width: 100%; max-width: none !important; padding: 0 !important; }
.mono-home { overflow: hidden; background: #0a0a0b; color: #f5f5f5; }
.mono-home a { text-decoration: none; }
.mono-hero { position: relative; overflow: hidden; border-bottom: 1px solid #222225; padding: 76px 24px 98px; }
.mono-hero-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(#252527 1px, transparent 1px), linear-gradient(90deg, #252527 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent); pointer-events: none; }
.mono-hero::after { content: ''; position: absolute; left: 50%; top: 3%; width: 740px; height: 420px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255,255,255,.055), transparent 65%); pointer-events: none; }
.mono-hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; text-align: center; }
.mono-hero-badge { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 12px; border: 1px solid #37373a; border-radius: 100px; background: rgba(28,28,30,.9); color: #d4d4d8; font-size: 11px; white-space: nowrap; }
.mono-live-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #54e3a3; box-shadow: 0 0 0 4px rgba(84,227,163,.13); animation: mono-pulse 2.4s ease-in-out infinite; }
.mono-badge-divider { width: 1px; height: 12px; background: #52525b; }
.mono-hero h1 { max-width: 830px; margin: 27px auto 14px; font-size: clamp(42px, 6vw, 84px); font-weight: 850; letter-spacing: -.075em; line-height: .98; text-wrap: balance; animation: mono-rise .7s ease both; }
.mono-hero-description { max-width: 660px; margin: 0 auto; color: #b4b4bb; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.62; animation: mono-rise .75s .08s ease both; }
.mono-hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; animation: mono-rise .75s .16s ease both; }
.mono-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 19px; border-radius: 10px; font-size: 12px; font-weight: 750; transition: transform .2s ease, background .2s ease, border .2s ease; }
.mono-button:hover { transform: translateY(-3px); }
.mono-button-primary { background: #f5f5f5; color: #111 !important; border: 1px solid #f5f5f5; }
.mono-button-outline { background: #171719; color: #f5f5f5 !important; border: 1px solid #45454a; }
.mono-button-outline:hover { background: #262629; }
.mono-hero-points { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 27px auto 36px; color: #a1a1aa; font-size: 11px; }
.mono-hero-points i { color: #54e3a3; margin-right: 5px; }
.mono-product-preview { width: min(100%, 1020px); margin: 0 auto; overflow: hidden; border: 1px solid #414145; border-radius: 20px; background: linear-gradient(135deg, #171719, #101011); box-shadow: 0 28px 75px rgba(0,0,0,.34); text-align: left; animation: mono-rise .85s .24s ease both; }
.mono-preview-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 0 18px; border-bottom: 1px solid #2a2a2d; color: #888891; font-size: 10px; }
.mono-window-dots { display: flex; gap: 5px; }.mono-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #f87171; }.mono-window-dots i:nth-child(2) { background: #facc15; }.mono-window-dots i:nth-child(3) { background: #4ade80; }
.mono-preview-online { white-space: nowrap; }.mono-preview-online i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #4ade80; }
.mono-preview-content { display: grid; grid-template-columns: minmax(0, 1fr) 215px; gap: 20px; padding: 22px; }
.mono-preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mono-preview-stats > div { min-height: 86px; padding: 12px; border: 1px solid #343438; border-radius: 10px; background: #1c1c1e; }
.mono-preview-stats small, .mono-preview-stats span { display: block; color: #92929b; font-size: 10px; }
.mono-preview-stats strong { display: block; margin: 5px 0; font-size: clamp(15px, 1.8vw, 22px); letter-spacing: -.04em; }
.mono-preview-table { margin-top: 12px; padding: 14px; border: 1px solid #343438; border-radius: 10px; background: #18181a; }
.mono-preview-table-title { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 11px; }.mono-preview-table-title span { color: #82828a; font-size: 10px; }
.mono-preview-row { display: grid; grid-template-columns: 58px 1fr 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #2d2d30; color: #bdbdc3; font-size: 10px; }.mono-preview-row:last-child { border: 0; }.mono-preview-row strong { color: white; text-align: right; }
.mono-preview-status { padding: 4px 5px; border-radius: 5px; background: #173b2e; color: #6fe4ab; text-align: center; font-size: 9px; font-weight: 800; }.mono-preview-status.pending { background: #3a321b; color: #e9c97d; }
.mono-preview-phone { position: relative; min-height: 250px; padding: 13px 10px 10px; border: 1px solid #4a4a4e; border-radius: 25px; background: #080809; box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.mono-phone-speaker { width: 45px; height: 4px; margin: 0 auto 8px; border-radius: 10px; background: #53535a; }
.mono-phone-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 218px; gap: 5px; border-radius: 15px; background: #f7f7f7; color: #111; text-align: center; }.mono-phone-screen small { color: #606067; font-size: 8px; }.mono-phone-screen strong { font-size: 11px; }.mono-phone-screen b { font-size: 18px; }
.mono-qr-art { position: relative; display: block; width: 112px; height: 112px; margin: 8px 0; border: 8px solid #fff; outline: 1px solid #d4d4d8; background: repeating-linear-gradient(90deg, #111 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, transparent 0 7px, #111 7px 11px); background-blend-mode: difference; }.mono-qr-art i { position: absolute; width: 28px; height: 28px; border: 6px solid #111; background: #fff; }.mono-qr-art i:nth-child(1) { top: 3px; left: 3px; }.mono-qr-art i:nth-child(2) { top: 3px; right: 3px; }.mono-qr-art i:nth-child(3) { bottom: 3px; left: 3px; }

.mono-slide-section { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 18px; max-width: 1100px; min-height: 130px; margin: 46px auto 8px; padding: 20px 24px; border: 1px solid #303033; border-radius: 16px; background: #151516; }
.mono-slide-label { color: #97979f; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.mono-slide { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; animation: mono-rise .4s ease both; }.mono-slide[hidden] { display: none; }.mono-slide-copy h2 { margin: 0 0 5px; color: white; font-size: 17px; font-weight: 750; }.mono-slide-copy p { color: #aaaab2; font-size: 11px; }.mono-slide-copy a { display: inline-block; margin-top: 6px; color: white; font-size: 11px; font-weight: 750; }.mono-slide img { flex: none; width: 100px; height: 70px; border-radius: 9px; object-fit: cover; }
.mono-slide-controls { display: flex; align-items: center; gap: 9px; }.mono-slide-controls > button { width: 27px; height: 27px; border: 1px solid #4a4a4d; border-radius: 7px; color: white; }.mono-slide-dots { display: flex; gap: 5px; }.mono-slide-dots button { width: 6px; height: 6px; border-radius: 50%; background: #77777d; }.mono-slide-dots button.is-active { background: white; }

.mono-section { max-width: 1180px; margin: 0 auto; padding: 105px 24px 85px; }
.mono-section-heading { max-width: 690px; margin: 0 auto 38px; text-align: center; }.mono-section-heading > span, .mono-cta > span { color: #a1a1aa; font-size: 10px; font-weight: 800; letter-spacing: .18em; }.mono-section-heading h2 { margin: 12px 0 9px; color: #fff; font-size: clamp(26px, 3.5vw, 40px); line-height: 1.16; font-weight: 800; letter-spacing: -.045em; }.mono-section-heading p { color: #a1a1aa; font-size: 13px; line-height: 1.6; }
.mono-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mono-feature-card { min-height: 205px; padding: 25px; border: 1px solid #343437; border-radius: 16px; background: #151516; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }.mono-feature-card:hover { transform: translateY(-5px); border-color: #68686e; box-shadow: 0 18px 40px rgba(0,0,0,.22); }.mono-feature-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #4a4a4e; border-radius: 10px; font-size: 14px; }.mono-feature-card h3 { margin: 20px 0 7px; color: #fff; font-size: 17px; font-weight: 750; }.mono-feature-card p { max-width: 460px; color: #b4b4bc; font-size: 12px; line-height: 1.65; }.mono-feature-card small { display: inline-block; margin-top: 17px; color: #e4e4e7; font-size: 10px; }.mono-feature-card small::before { content: '•'; margin-right: 7px; color: #9df0c7; }
.mono-faq { border-top: 1px solid #242426; }.mono-faq-list { max-width: 800px; margin: 0 auto; display: grid; gap: 10px; }.mono-faq-list details { border: 1px solid #29292c; border-radius: 14px; background: #151516; }.mono-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 22px; color: #f4f4f5; font-size: 13px; font-weight: 750; list-style: none; cursor: pointer; }.mono-faq-list summary::-webkit-details-marker { display: none; }.mono-faq-list summary i { color: #a1a1aa; transition: transform .2s ease; }.mono-faq-list details[open] summary i { transform: rotate(180deg); }.mono-faq-list details p { margin: 0; padding: 0 22px 20px; color: #a1a1aa; font-size: 12px; line-height: 1.7; }
.mono-cta { max-width: 1000px; margin: 35px auto 100px; padding: 54px 25px; border: 1px solid #36363a; border-radius: 20px; background: radial-gradient(circle at 50% 0, #222225, #111112 72%); text-align: center; }.mono-cta h2 { max-width: 590px; margin: 15px auto 10px; color: white; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; letter-spacing: -.05em; font-weight: 800; }.mono-cta p { max-width: 560px; margin: 0 auto 23px; color: #aaaab2; font-size: 13px; line-height: 1.6; }.mono-cta > div { display: flex; justify-content: center; gap: 10px; }

@keyframes mono-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mono-pulse { 50% { box-shadow: 0 0 0 7px rgba(84,227,163,.04); } }
@media (max-width: 1100px) { .mono-public-nav { gap: 0; }.mono-public-nav a { padding: 9px 8px; }.mono-slide-section { margin-inline: 22px; }.mono-cta { margin-inline: 22px; } }
@media (max-width: 850px) {
  .mono-public-nav { display: none; }
  .mono-public-menu { display: block; position: relative; }.mono-public-menu summary { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #4a4a4e; border-radius: 9px; color: white; list-style: none; cursor: pointer; }.mono-public-menu summary::-webkit-details-marker { display: none; }.mono-public-menu > div { position: absolute; z-index: 60; right: 0; top: 47px; display: grid; min-width: 190px; padding: 8px; border: 1px solid #3a3a3e; border-radius: 12px; background: #1b1b1d; box-shadow: 0 18px 40px rgba(0,0,0,.3); }.mono-public-menu a { padding: 10px 12px; border-radius: 8px; color: white; font-size: 12px; }.mono-public-menu a:hover { background: #303033; }
  .mono-preview-content { grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; padding: 14px; }.mono-preview-phone { min-height: 218px; }.mono-phone-screen { min-height: 187px; }.mono-qr-art { width: 78px; height: 78px; }.mono-qr-art i { width: 19px; height: 19px; border-width: 4px; }
  .mono-slide-section { grid-template-columns: 1fr auto; }.mono-slide-label { display: none; }
}
@media (max-width: 600px) {
  .fixed-navbar a[href="/"] { min-width: 0; max-width: 158px; }
  .fixed-navbar a[href="/"] span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; }
  .fixed-navbar > div { gap: 7px; padding-inline: 14px !important; }
  .fixed-navbar .mono-login-link { padding: 8px 10px !important; font-size: 10px !important; white-space: nowrap; }
  .fixed-navbar .ui-theme-toggle, .mono-public-menu summary { width: 34px; height: 34px; }
  .mono-hero { padding: 52px 16px 66px; }.mono-hero-badge { gap: 6px; padding: 7px 9px; font-size: 9px; white-space: normal; text-align: left; }.mono-hero h1 { margin-top: 23px; font-size: clamp(39px, 10vw, 56px); }.mono-hero-description { font-size: 13px; }.mono-hero-actions { flex-wrap: wrap; }.mono-button { min-height: 43px; font-size: 11px; }.mono-hero-points { gap: 9px 13px; font-size: 9px; }
  .mono-product-preview { border-radius: 14px; }.mono-preview-topbar { padding-inline: 10px; font-size: 8px; }.mono-preview-online { display: none; }.mono-preview-content { display: block; padding: 11px; }.mono-preview-stats { gap: 5px; }.mono-preview-stats > div { padding: 8px; min-height: 73px; }.mono-preview-stats strong { font-size: 14px; }.mono-preview-stats small, .mono-preview-stats span { font-size: 8px; }.mono-preview-table { padding: 9px; }.mono-preview-table-title span, .mono-preview-row span:nth-child(3) { display: none; }.mono-preview-row { grid-template-columns: 49px 1fr auto; gap: 6px; font-size: 8px; }.mono-preview-status { font-size: 7px; }.mono-preview-phone { display: none; }
  .mono-slide-section { margin: 22px 16px 0; padding: 17px; min-height: 145px; grid-template-columns: 1fr; gap: 10px; }.mono-slide-copy h2 { font-size: 15px; }.mono-slide-controls { justify-content: flex-end; }.mono-slide img { width: 68px; height: 55px; }
  .mono-section { padding: 72px 16px 58px; }.mono-section-heading { margin-bottom: 26px; }.mono-feature-grid { grid-template-columns: 1fr; gap: 12px; }.mono-feature-card { min-height: 0; padding: 19px; }.mono-feature-card h3 { margin-top: 14px; }.mono-faq-list summary { font-size: 12px; padding: 16px; }.mono-faq-list details p { padding: 0 16px 16px; }.mono-cta { margin: 24px 16px 65px; padding: 40px 20px; }.mono-cta > div { flex-wrap: wrap; }
  html[data-theme="dark"] .ui-announcement { width: calc(100% - 32px); max-width: none; border-radius: 12px; margin-bottom: -12px; }.ui-announcement p { display: block !important; margin: 4px 0 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .mono-home *, .mono-home *::before, .mono-home *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Pilihan tema terang tetap berfungsi untuk pengguna yang mengaktifkannya. */
html[data-theme="light"] .mono-home { background: #f7f7f7; color: #161616; }
html[data-theme="light"] .mono-hero { border-color: #dedee0; }
html[data-theme="light"] .mono-hero-grid { opacity: .1; }
html[data-theme="light"] .mono-hero-badge { background: #fff; border-color: #d4d4d8; color: #3f3f46; }
html[data-theme="light"] .mono-hero h1, html[data-theme="light"] .mono-section-heading h2, html[data-theme="light"] .mono-cta h2 { color: #151515; }
html[data-theme="light"] .mono-hero-description, html[data-theme="light"] .mono-hero-points, html[data-theme="light"] .mono-section-heading p, html[data-theme="light"] .mono-cta p { color: #52525b; }
html[data-theme="light"] .mono-button-primary { background: #171717; border-color: #171717; color: #fff !important; }
html[data-theme="light"] .mono-button-outline { background: #fff; border-color: #d4d4d8; color: #171717 !important; }
html[data-theme="light"] .mono-slide-section, html[data-theme="light"] .mono-feature-card, html[data-theme="light"] .mono-faq-list details { background: #fff; border-color: #dedee0; }
html[data-theme="light"] .mono-slide-copy h2, html[data-theme="light"] .mono-feature-card h3, html[data-theme="light"] .mono-faq-list summary { color: #171717; }
html[data-theme="light"] .mono-slide-copy p, html[data-theme="light"] .mono-feature-card p, html[data-theme="light"] .mono-faq-list details p { color: #52525b; }
html[data-theme="light"] .mono-slide-copy a, html[data-theme="light"] .mono-feature-card small { color: #27272a; }
html[data-theme="light"] .mono-slide-controls > button { color: #27272a; border-color: #d4d4d8; }
html[data-theme="light"] .mono-slide-dots button.is-active { background: #27272a; }
html[data-theme="light"] .mono-faq { border-color: #dedee0; }
html[data-theme="light"] .mono-cta { background: #fff; border-color: #dedee0; }