/* ========================================================================
   Desa Wanasari - Public theme controls and dark mode
   Version 2.2.0
   ======================================================================== */
:root {
  --public-dark-bg: #0f1713;
  --public-dark-surface: #18231d;
  --public-dark-surface-2: #202d26;
  --public-dark-surface-3: #29382f;
  --public-dark-text: #edf4ef;
  --public-dark-muted: #aab8af;
  --public-dark-border: #33443a;
  --public-dark-primary: #68bd7d;
  --public-dark-primary-strong: #8bd29b;
  --public-dark-accent: #e3b341;
  --public-dark-danger: #ff7878;
  --public-dark-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

/* Theme switcher, visible in both themes. */
.ks-public-theme-switcher {
  position: relative;
  z-index: 1032;
  flex: 0 0 auto;
}

.ks-public-theme-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(13, 56, 22, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: var(--ks-blue-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 56, 22, .12);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.ks-public-theme-toggle:hover,
.ks-public-theme-toggle:focus {
  background: #fff;
  color: var(--ks-blue);
  border-color: var(--ks-blue);
  outline: none;
  transform: translateY(-1px);
}

.ks-public-theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(27, 94, 32, .25);
}

.index-page #header:not(.header-scrolled) .ks-public-theme-toggle {
  color: #fff;
  background: rgba(8, 24, 14, .34);
  border-color: rgba(255, 255, 255, .48);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.index-page #header:not(.header-scrolled) .ks-public-theme-toggle:hover,
.index-page #header:not(.header-scrolled) .ks-public-theme-toggle:focus {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
}

.ks-public-theme-menu {
  width: 264px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(13, 56, 22, .12);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(13, 56, 22, .18);
}

.ks-public-theme-menu-title {
  padding: 7px 10px 8px;
  color: #65736a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.ks-public-theme-choice {
  display: grid;
  grid-template-columns: 28px 1fr 22px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #29352e;
  white-space: normal;
  text-align: left;
}

.ks-public-theme-choice > i:first-child {
  font-size: 21px;
  color: var(--ks-blue);
}

.ks-public-theme-choice span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ks-public-theme-choice strong {
  font-size: 13px;
  font-weight: 700;
}

.ks-public-theme-choice small {
  margin-top: 2px;
  color: #78847c;
  font-size: 11px;
}

.ks-public-theme-choice .ks-theme-check {
  opacity: 0;
  color: var(--ks-blue);
  font-size: 19px;
}

.ks-public-theme-choice:hover,
.ks-public-theme-choice:focus,
.ks-public-theme-choice.active {
  background: var(--ks-blue-light);
  color: var(--ks-blue-dark);
  outline: none;
}

.ks-public-theme-choice.active .ks-theme-check {
  opacity: 1;
}

/* Smooth theme switching starts only after JavaScript has initialized. */
html.theme-transition-ready body,
html.theme-transition-ready #header,
html.theme-transition-ready main,
html.theme-transition-ready section,
html.theme-transition-ready .card,
html.theme-transition-ready .entry,
html.theme-transition-ready .form-control,
html.theme-transition-ready .modal-content,
html.theme-transition-ready .ks-public-theme-menu {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* ========================================================================
   Dark mode
   ======================================================================== */
html[data-theme="dark"] body {
  background: var(--public-dark-bg);
  color: var(--public-dark-text);
}

html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] .about,
html[data-theme="dark"] .services,
html[data-theme="dark"] .blog,
html[data-theme="dark"] .why-us,
html[data-theme="dark"] .portfolio,
html[data-theme="dark"] .team {
  background-color: var(--public-dark-bg);
  color: var(--public-dark-text);
}

html[data-theme="dark"] .section-bg,
html[data-theme="dark"] section.section-bg,
html[data-theme="dark"] .team.section-bg,
html[data-theme="dark"] .portfolio.section-bg,
html[data-theme="dark"] .services.section-bg {
  background-color: #131e18 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong {
  color: var(--public-dark-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] dd,
html[data-theme="dark"] dt {
  color: #d7e1da;
}

html[data-theme="dark"] a {
  color: var(--public-dark-primary);
}

html[data-theme="dark"] a:hover {
  color: var(--public-dark-primary-strong);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] p.text-muted,
html[data-theme="dark"] span.text-muted {
  color: var(--public-dark-muted) !important;
}

html[data-theme="dark"] hr {
  border-color: var(--public-dark-border);
}

/* Header and desktop navigation. */
html[data-theme="dark"] #header,
html[data-theme="dark"] #header.header-scrolled {
  background: #14231a;
  border-bottom: 1px solid var(--public-dark-border);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .index-page #header:not(.header-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] #header .logo span,
html[data-theme="dark"] #header .logo small,
html[data-theme="dark"] .nav-menu ul li a {
  color: var(--public-dark-text) !important;
}

html[data-theme="dark"] #header .logo small {
  color: var(--public-dark-muted) !important;
}

html[data-theme="dark"] .nav-menu ul li a:hover,
html[data-theme="dark"] .nav-menu ul li.active > a,
html[data-theme="dark"] .nav-menu ul li:hover > a {
  color: var(--public-dark-accent) !important;
  text-decoration-color: var(--public-dark-accent) !important;
}

html[data-theme="dark"] .nav-menu ul li.active > a::before {
  background: var(--public-dark-accent) !important;
}

html[data-theme="dark"] .nav-menu .drop-down ul {
  background: var(--public-dark-surface-2);
  border: 1px solid var(--public-dark-border);
  box-shadow: var(--public-dark-shadow);
}

html[data-theme="dark"] .nav-menu .drop-down ul li a {
  color: var(--public-dark-text) !important;
}

/* Mobile navigation generated by main.js. */
html[data-theme="dark"] .mobile-nav {
  background: var(--public-dark-surface);
  border: 1px solid var(--public-dark-border);
  box-shadow: var(--public-dark-shadow);
}

html[data-theme="dark"] .mobile-nav a,
html[data-theme="dark"] .mobile-nav a:focus {
  color: var(--public-dark-text);
}

html[data-theme="dark"] .mobile-nav a:hover,
html[data-theme="dark"] .mobile-nav .active > a,
html[data-theme="dark"] .mobile-nav li:hover > a {
  color: var(--public-dark-accent);
}

html[data-theme="dark"] .mobile-nav-overly {
  background: rgba(2, 8, 5, .76);
}

html[data-theme="dark"] .mobile-nav-toggle i {
  color: var(--public-dark-text);
}

/* Public theme menu. */
html[data-theme="dark"] .ks-public-theme-toggle {
  color: var(--public-dark-accent);
  background: var(--public-dark-surface-2);
  border-color: var(--public-dark-border);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .ks-public-theme-toggle:hover,
html[data-theme="dark"] .ks-public-theme-toggle:focus {
  color: #ffe08b;
  background: var(--public-dark-surface-3);
  border-color: var(--public-dark-accent);
}

html[data-theme="dark"] .ks-public-theme-menu {
  background: var(--public-dark-surface-2);
  border-color: var(--public-dark-border);
  box-shadow: var(--public-dark-shadow);
}

html[data-theme="dark"] .ks-public-theme-menu-title,
html[data-theme="dark"] .ks-public-theme-choice small {
  color: var(--public-dark-muted);
}

html[data-theme="dark"] .ks-public-theme-choice {
  color: var(--public-dark-text);
}

html[data-theme="dark"] .ks-public-theme-choice > i:first-child,
html[data-theme="dark"] .ks-public-theme-choice .ks-theme-check {
  color: var(--public-dark-accent);
}

html[data-theme="dark"] .ks-public-theme-choice:hover,
html[data-theme="dark"] .ks-public-theme-choice:focus,
html[data-theme="dark"] .ks-public-theme-choice.active {
  color: var(--public-dark-text);
  background: var(--public-dark-surface-3);
}

/* Breadcrumbs and page title areas. */
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] #breadcrumbs,
html[data-theme="dark"] .ks-infografis-head {
  background: var(--public-dark-surface) !important;
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] #breadcrumbs {
  border-bottom-color: var(--public-dark-accent);
}

html[data-theme="dark"] .breadcrumbs h2,
html[data-theme="dark"] #breadcrumbs h2,
html[data-theme="dark"] .ks-infografis-title,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .ks-aparat-title {
  color: var(--public-dark-primary-strong) !important;
}

html[data-theme="dark"] .breadcrumbs ol li,
html[data-theme="dark"] #breadcrumbs ol li,
html[data-theme="dark"] .ks-infografis-tab {
  color: var(--public-dark-muted);
}

html[data-theme="dark"] .ks-infografis-tab:hover,
html[data-theme="dark"] .ks-infografis-tab.active {
  color: var(--public-dark-accent);
}

/* Cards, entries and common surfaces. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .blog .entry,
html[data-theme="dark"] .blog .sidebar,
html[data-theme="dark"] .blog .blog-author,
html[data-theme="dark"] .why-us .box,
html[data-theme="dark"] .services .icon-box,
html[data-theme="dark"] .portfolio-info,
html[data-theme="dark"] .ks-jelajahi-card,
html[data-theme="dark"] .ks-visimisi-block,
html[data-theme="dark"] .ks-visimisi-card,
html[data-theme="dark"] .ks-org-box,
html[data-theme="dark"] .ks-aparat-card,
html[data-theme="dark"] .ks-pengaduan-card,
html[data-theme="dark"] .kunjungan-panel,
html[data-theme="dark"] .ks-pagination a,
html[data-theme="dark"] .ks-pagination span,
html[data-theme="dark"] .ks-scroll-arrow,
html[data-theme="dark"] .ks-outline-btn {
  background: var(--public-dark-surface-2) !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .19);
}

html[data-theme="dark"] .ks-jelajahi-card:hover,
html[data-theme="dark"] .ks-outline-btn:hover,
html[data-theme="dark"] .ks-scroll-arrow:hover {
  border-color: var(--public-dark-accent) !important;
}

html[data-theme="dark"] .ks-jelajahi-card:hover,
html[data-theme="dark"] .ks-outline-btn:hover,
html[data-theme="dark"] .ks-scroll-arrow:hover,
html[data-theme="dark"] .ks-pagination a.active {
  background: var(--ks-blue) !important;
  color: #fff !important;
}

html[data-theme="dark"] .blog .entry .entry-title,
html[data-theme="dark"] .blog .entry .entry-title a,
html[data-theme="dark"] .blog .entry .entry-content h3,
html[data-theme="dark"] .ks-org-nama,
html[data-theme="dark"] .ks-potensi-item h4,
html[data-theme="dark"] .ks-sotk-name strong,
html[data-theme="dark"] .ks-sotk-name span {
  color: var(--public-dark-text) !important;
}

html[data-theme="dark"] .blog .entry .entry-meta,
html[data-theme="dark"] .blog .entry .entry-meta a {
  color: var(--public-dark-muted) !important;
}

html[data-theme="dark"] .blog .entry .entry-content blockquote {
  background: var(--public-dark-surface-3);
}

html[data-theme="dark"] .blog .entry .entry-content blockquote p {
  color: var(--public-dark-text);
}

html[data-theme="dark"] .blog .entry .entry-footer {
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .ks-penduduk-card {
  background: var(--public-dark-surface-2);
  border-left-color: var(--public-dark-accent);
}

html[data-theme="dark"] .ks-penduduk-card strong {
  color: var(--public-dark-primary-strong);
}

html[data-theme="dark"] .ks-penduduk-card span,
html[data-theme="dark"] .ks-profil-content p,
html[data-theme="dark"] .ks-visimisi-block p,
html[data-theme="dark"] .ks-visimisi-card p,
html[data-theme="dark"] .ks-visimisi-list {
  color: #d7e1da;
}

html[data-theme="dark"] .ks-profil-content h4.ks-profil-heading,
html[data-theme="dark"] .ks-visimisi-block h4,
html[data-theme="dark"] .ks-visimisi-card h4 {
  color: var(--public-dark-primary-strong);
}

html[data-theme="dark"] .ks-org-line-v,
html[data-theme="dark"] .ks-org-line-v-sm,
html[data-theme="dark"] .ks-org-line-h {
  background: var(--public-dark-border);
}

html[data-theme="dark"] .ks-aparat-noimg {
  background: var(--public-dark-surface-3);
}

/* Inline white cards used by the public pages. */
html[data-theme="dark"] body [style*="background:#fff"],
html[data-theme="dark"] body [style*="background: #fff"],
html[data-theme="dark"] body [style*="background:#ffffff"],
html[data-theme="dark"] body [style*="background: #ffffff"],
html[data-theme="dark"] body [style*="background:white"],
html[data-theme="dark"] body [style*="background: white"] {
  background: var(--public-dark-surface-2) !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] body [style*="color:#333"],
html[data-theme="dark"] body [style*="color: #333"],
html[data-theme="dark"] body [style*="color:#555"],
html[data-theme="dark"] body [style*="color: #555"],
html[data-theme="dark"] body [style*="color:#444"],
html[data-theme="dark"] body [style*="color: #444"] {
  color: var(--public-dark-text) !important;
}

html[data-theme="dark"] body [style*="background:#eee"],
html[data-theme="dark"] body [style*="background: #eee"],
html[data-theme="dark"] body [style*="background:#f1f1f1"],
html[data-theme="dark"] body [style*="background: #f1f1f1"] {
  background: var(--public-dark-surface-3) !important;
}

html[data-theme="dark"] body [style*="border-bottom:1px solid #eee"],
html[data-theme="dark"] body [style*="border-bottom: 1px solid #eee"],
html[data-theme="dark"] body [style*="border:1px solid #eee"],
html[data-theme="dark"] body [style*="border: 1px solid #eee"] {
  border-color: var(--public-dark-border) !important;
}

/* Forms, selects and validation messages. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #121c17 !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-border) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: #15211a !important;
  color: var(--public-dark-text) !important;
  border-color: var(--public-dark-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(104, 189, 125, .17) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #7f9085 !important;
}

html[data-theme="dark"] .custom-file-label {
  background: #121c17;
  color: var(--public-dark-muted);
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .custom-file-label::after {
  background: var(--public-dark-surface-3);
  color: var(--public-dark-text);
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-light {
  background: var(--public-dark-surface-3);
  border-color: var(--public-dark-border);
  color: var(--public-dark-text);
}

html[data-theme="dark"] .alert-success {
  background: rgba(52, 168, 83, .16);
  color: #b5efc3;
  border-color: rgba(104, 189, 125, .35);
}

html[data-theme="dark"] .alert-danger {
  background: rgba(220, 53, 69, .16);
  color: #ffc1c7;
  border-color: rgba(255, 120, 120, .38);
}

html[data-theme="dark"] .alert-secondary {
  background: var(--public-dark-surface-2);
  color: var(--public-dark-muted);
  border-color: var(--public-dark-border);
}

/* Tables. */
html[data-theme="dark"] .table {
  color: var(--public-dark-text);
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .table thead th {
  background: var(--public-dark-surface-3);
  color: var(--public-dark-text);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .table-hover tbody tr:hover {
  color: var(--public-dark-text);
  background-color: rgba(104, 189, 125, .08);
}

/* Modal. */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] .ks-pengaduan-close {
  color: var(--public-dark-text);
  text-shadow: none;
}

html[data-theme="dark"] .modal-backdrop.show {
  opacity: .72;
}

/* Pagination and list components. */
html[data-theme="dark"] .page-link {
  background: var(--public-dark-surface-2);
  color: var(--public-dark-primary);
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .page-item.active .page-link {
  background: var(--ks-blue);
  border-color: var(--ks-blue);
  color: #fff;
}

html[data-theme="dark"] .page-item.disabled .page-link {
  background: #131d18;
  color: #69786f;
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .list-group-item {
  border-bottom-color: var(--public-dark-border) !important;
}

/* Floating widgets. */
html[data-theme="dark"] .kunjungan-widget .kunjungan-pill {
  background: var(--public-dark-surface-2);
  color: var(--public-dark-primary-strong);
  border-color: var(--public-dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] .kunjungan-widget .kunjungan-pill i {
  color: var(--public-dark-accent);
}

html[data-theme="dark"] .kunjungan-row {
  border-color: var(--public-dark-border);
}

html[data-theme="dark"] .ks-pengaduan-overlay {
  background: rgba(0, 0, 0, .68);
}

html[data-theme="dark"] .ks-pengaduan-card h5,
html[data-theme="dark"] .ks-pengaduan-card label {
  color: var(--public-dark-text);
}

/* Image and media handling: preserve the original photos and maps. */
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] canvas,
html[data-theme="dark"] iframe,
html[data-theme="dark"] .leaflet-container,
html[data-theme="dark"] .ks-hero,
html[data-theme="dark"] .ks-wisata-banner {
  filter: none;
}

html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
  background: var(--public-dark-surface-2);
  color: var(--public-dark-text);
}

html[data-theme="dark"] .leaflet-control-layers,
html[data-theme="dark"] .leaflet-bar a {
  background: var(--public-dark-surface-2);
  color: var(--public-dark-text);
  border-color: var(--public-dark-border);
}

/* Scrollbars. */
html[data-theme="dark"] {
  scrollbar-color: #52665a var(--public-dark-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--public-dark-bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #52665a;
  border-radius: 8px;
}

html[data-theme="dark"] .ks-sambutan-box::-webkit-scrollbar-track {
  background: var(--public-dark-surface);
}

html[data-theme="dark"] .ks-sambutan-box::-webkit-scrollbar-thumb {
  background: #52665a;
}

/* Footer remains strongly branded, with slightly deeper surfaces in dark mode. */
html[data-theme="dark"] #footer {
  background: #09110c;
  border-top: 1px solid var(--public-dark-border);
}

html[data-theme="dark"] #footer .footer-top {
  background: #102319;
}

html[data-theme="dark"] #footer .footer-top .social-links a {
  background: rgba(255, 255, 255, .08);
}

/* Accessibility. */
@media (prefers-reduced-motion: reduce) {
  html.theme-transition-ready body,
  html.theme-transition-ready #header,
  html.theme-transition-ready main,
  html.theme-transition-ready section,
  html.theme-transition-ready .card,
  html.theme-transition-ready .entry,
  html.theme-transition-ready .form-control,
  html.theme-transition-ready .modal-content,
  html.theme-transition-ready .ks-public-theme-menu,
  .ks-public-theme-toggle {
    transition: none !important;
  }
}

@media (max-width: 991.98px) {
  .ks-public-theme-switcher {
    margin-left: auto !important;
    margin-right: 47px;
  }

  .ks-public-theme-toggle {
    width: 38px;
    height: 38px;
  }

  .ks-public-theme-menu {
    position: fixed !important;
    top: 58px !important;
    right: 12px !important;
    left: auto !important;
    transform: none !important;
    width: min(280px, calc(100vw - 24px));
  }
}

@media (max-width: 575.98px) {
  #header .logo span {
    font-size: 16px;
  }

  #header .logo small {
    font-size: 9px;
  }

  #header .logo img {
    width: 38px !important;
    height: 38px !important;
    margin-right: 8px !important;
  }

  .ks-public-theme-switcher {
    margin-right: 44px;
  }
}

/* ========================================================================
   Hotfix 2.2.1 - improve readability for Sambutan Kepala Desa in dark mode
   ======================================================================== */
html[data-theme="dark"] #sambutan {
  background-color: var(--public-dark-bg) !important;
}

html[data-theme="dark"] #sambutan .content,
html[data-theme="dark"] #sambutan .ks-sambutan-box,
html[data-theme="dark"] #sambutan .ks-sambutan-box p {
  color: var(--public-dark-text) !important;
}

html[data-theme="dark"] #sambutan h2 {
  color: var(--public-dark-primary-strong) !important;
}

html[data-theme="dark"] #sambutan > .container > .row > div:last-child > p.mb-1 {
  color: var(--public-dark-text) !important;
}

html[data-theme="dark"] #sambutan > .container > .row > div:last-child > p.mb-2 {
  color: var(--public-dark-muted) !important;
}

html[data-theme="dark"] #sambutan .ks-sambutan-box {
  background: var(--public-dark-surface-2);
  border: 1px solid var(--public-dark-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}