/* Sisa gaya mode gelap halaman depan (home/) yang tidak bisa datang dari home.css. Sejak palet gelap
   masuk ke build landing suite-lp, home.css sudah membawa token, varian dark:, dan aturan
   .paper/.paper-soft/.feature-ico sendiri (selectornya ditulis ulang [data-theme=dark] -> .dark saat
   disalin), jadi berkas ini tinggal memuat yang memang tidak ada di landing: kontrol Terang/Gelap/Sistem
   dan perlakuan logo. Dimuat setelah home.css; selector di luar @layer supaya menang atas
   @layer utilities. Kelas lp-* adalah hook yang ditambahkan di partial home. */

/* ---------- Kontrol Terang / Gelap / Sistem (home/_theme-switch.phtml) ---------- */
.lp-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.lp-theme button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #6e6e73;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.lp-theme button:hover {
  color: #1D1D1F;
}
.lp-theme button:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 1px;
}
.lp-theme svg {
  width: 14px;
  height: 14px;
}
[data-theme="light"] .lp-theme [data-theme-set="light"],
[data-theme="dark"] .lp-theme [data-theme-set="dark"],
[data-theme="system"] .lp-theme [data-theme-set="system"] {
  background: #F6F5F4;
  color: #1D1D1F;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
html.dark .lp-theme {
  background: #2d2e34;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
html.dark .lp-theme button {
  color: #aeaeb5;
}
html.dark .lp-theme button:hover {
  color: #f2f2f5;
}
html.dark[data-theme="dark"] .lp-theme [data-theme-set="dark"],
html.dark[data-theme="system"] .lp-theme [data-theme-set="system"] {
  background: #44454d;
  color: #f2f2f5;
  box-shadow: none;
}

/* ---------- Logo ---------- */
/* Suite pakai berkas versi gelap sendiri (bukan invert, supaya markanya tetap bersih); TikTok dibalik
   dengan hue dikembalikan supaya warnanya tidak tertukar; logo mitra/media jadi monokrom terang
   (sebagian PNG berlatar putih pekat: invert membuatnya hitam lalu hilang lewat blend screen). */
.lp-logo-dark {
  display: none !important;
}
html.dark .lp-logo-light {
  display: none !important;
}
html.dark .lp-logo-dark {
  display: block !important;
}
html.dark .lp-invert-dark {
  filter: invert(1) hue-rotate(180deg);
}
html.dark .lp-logos img {
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: .85;
}