/* =========================================================================
   CoreNet Portal — tema situs publik
   -------------------------------------------------------------------------
   Melengkapi Bootstrap 5.3, tidak menggantikannya. Warna diambil dari logo
   CoreNet: gradien ungu ke biru dengan aksen sian.

   Dua skema warna didukung lewat `data-bs-theme` bawaan Bootstrap, sehingga
   tombol tema di navigasi cukup mengganti satu atribut.
   ========================================================================= */

:root {
  --cnp-violet: #6D28D9;
  --cnp-blue:   #1D4ED8;
  --cnp-cyan:   #22D3EE;

  --cnp-grad:   linear-gradient(135deg, var(--cnp-violet) 0%, var(--cnp-blue) 55%, var(--cnp-cyan) 100%);
  --cnp-grad-soft: linear-gradient(135deg, rgba(109, 40, 217, .10), rgba(34, 211, 238, .10));

  --cnp-ink:      #0F172A;
  --cnp-ink-soft: #475569;
  --cnp-surface:  #FFFFFF;
  --cnp-alt:      #F5F7FB;
  --cnp-line:     #E2E8F0;
  --cnp-shadow:   0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --cnp-shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);

  --cnp-radius:   16px;
  --cnp-radius-sm: 10px;
  --cnp-nav-h:    72px;
}

[data-bs-theme="dark"] {
  --cnp-ink:      #E8EDF7;
  --cnp-ink-soft: #9AA8BF;
  --cnp-surface:  #131A2A;
  --cnp-alt:      #0D1320;
  --cnp-line:     #253048;
  --cnp-shadow:   0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --cnp-shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
  --cnp-grad-soft: linear-gradient(135deg, rgba(109, 40, 217, .22), rgba(34, 211, 238, .14));
}

/* Gulungan halus antar bagian pada situs satu halaman.
   Dimatikan otomatis bagi yang meminta gerakan minimum — lihat blok
   prefers-reduced-motion di bagian akhir berkas. */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--cnp-ink);
  background: var(--cnp-surface);
  -webkit-font-smoothing: antialiased;
}

body.pt-nav { padding-top: var(--cnp-nav-h); }

/* Sasaran jangkar berhenti DI BAWAH bilah navigasi yang menetap.
   Tanpa ini, judul tiap bagian tertutup bilah setiap kali menu diklik. */
[id] { scroll-margin-top: calc(var(--cnp-nav-h) + 12px); }

::selection { background: rgba(29, 78, 216, .18); }

.cnp-grad {
  background: var(--cnp-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Lompat ke konten — hanya tampak saat difokus lewat papan ketik. */
.cnp-skip {
  position: fixed; top: .5rem; left: .5rem; z-index: 1100;
  padding: .6rem 1rem; border-radius: var(--cnp-radius-sm);
  background: var(--cnp-blue); color: #fff; font-weight: 600;
}

/* ------------------------------------------------------------------ tombol */

.cnp-btn-primary {
  background: var(--cnp-grad);
  border: 0; color: #fff; font-weight: 600;
  border-radius: var(--cnp-radius-sm);
  padding-inline: 1.35rem;
  box-shadow: 0 4px 14px rgba(29, 78, 216, .28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cnp-btn-primary:hover,
.cnp-btn-primary:focus-visible {
  color: #fff; filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(29, 78, 216, .34);
}

.cnp-btn-ghost {
  background: transparent;
  border: 1px solid var(--cnp-line);
  color: var(--cnp-ink); font-weight: 600;
  border-radius: var(--cnp-radius-sm);
  padding-inline: 1.35rem;
  transition: border-color .15s ease, background .15s ease;
}
.cnp-btn-ghost:hover,
.cnp-btn-ghost:focus-visible {
  color: var(--cnp-ink);
  border-color: var(--cnp-blue);
  background: var(--cnp-grad-soft);
}

.cnp-btn-light {
  background: #fff; color: var(--cnp-blue); font-weight: 700;
  border: 0; border-radius: var(--cnp-radius-sm); padding-inline: 1.5rem;
}
.cnp-btn-light:hover { background: #fff; color: var(--cnp-violet); }

.cnp-btn-outline-light {
  background: transparent; color: #fff; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--cnp-radius-sm); padding-inline: 1.5rem;
}
.cnp-btn-outline-light:hover {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff;
}

.cnp-theme-btn {
  border: 1px solid var(--cnp-line);
  color: var(--cnp-ink-soft);
  border-radius: var(--cnp-radius-sm);
  line-height: 1;
  padding: .45rem .6rem;
}
.cnp-theme-btn:hover { color: var(--cnp-blue); border-color: var(--cnp-blue); }

/* --------------------------------------------------------------- navigasi */

.cnp-nav {
  height: var(--cnp-nav-h);
  background: color-mix(in srgb, var(--cnp-surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cnp-line);
}

.cnp-nav__logo { object-fit: contain; }
[data-bs-theme="dark"] .cnp-nav__logo,
[data-bs-theme="dark"] .cnp-footer__logo {
  /* Logo dibuat untuk latar terang; sedikit dinaikkan kecerahannya di gelap. */
  filter: brightness(1.12);
}

.cnp-nav .nav-link {
  color: var(--cnp-ink-soft);
  font-weight: 500;
  padding-inline: .85rem;
  position: relative;
}
.cnp-nav .nav-link:hover { color: var(--cnp-ink); }
.cnp-nav .nav-link.active { color: var(--cnp-ink); font-weight: 600; }
.cnp-nav .nav-link.active::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 2px; border-radius: 2px; background: var(--cnp-grad);
}

@media (max-width: 991.98px) {
  .cnp-nav .navbar-collapse {
    background: var(--cnp-surface);
    border: 1px solid var(--cnp-line);
    border-radius: var(--cnp-radius);
    padding: 1rem; margin-top: .75rem;
    box-shadow: var(--cnp-shadow-lg);
  }
  .cnp-nav .nav-link.active::after { display: none; }
}

/* ------------------------------------------------------------------- hero */

.cnp-hero {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--cnp-grad-soft);
  overflow: hidden;
}
.cnp-hero::before {
  content: ''; position: absolute; inset: auto auto -40% -10%;
  width: 60vw; height: 60vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(34, 211, 238, .18), transparent 65%);
  pointer-events: none;
}

.cnp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cnp-blue);
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: 999px; padding: .35rem .85rem; margin-bottom: 1.25rem;
}

.cnp-hero__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  margin-bottom: 1rem;
}

.cnp-hero__text {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--cnp-ink-soft); max-width: 34rem; margin-bottom: 1.75rem;
}

.cnp-hero__points {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .92rem; color: var(--cnp-ink-soft);
}
.cnp-hero__points i { color: #16A34A; margin-right: .35rem; }

.cnp-hero__card {
  position: relative;
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: calc(var(--cnp-radius) + 6px);
  box-shadow: var(--cnp-shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid; place-items: center;
}
.cnp-hero__card-glow {
  position: absolute; inset: -1px; border-radius: inherit;
  background: var(--cnp-grad); opacity: .12; pointer-events: none;
}
.cnp-hero__card img { position: relative; max-width: 100%; height: auto; }

/* ------------------------------------------------------ kepala halaman dalam */

.cnp-pagehead {
  background: var(--cnp-grad-soft);
  border-bottom: 1px solid var(--cnp-line);
  padding: clamp(2.25rem, 5vw, 3.75rem) 0;
}
.cnp-pagehead__title {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-weight: 800; letter-spacing: -.02em; margin-bottom: .65rem;
}
.cnp-pagehead__text {
  color: var(--cnp-ink-soft); max-width: 46rem; margin-bottom: 0;
  font-size: 1.02rem;
}

.cnp-crumbs {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0; margin: 0 0 .85rem; font-size: .85rem; color: var(--cnp-ink-soft);
}
.cnp-crumbs li + li::before { content: '/'; margin-right: .4rem; opacity: .5; }
.cnp-crumbs a { color: var(--cnp-ink-soft); text-decoration: none; }
.cnp-crumbs a:hover { color: var(--cnp-blue); text-decoration: underline; }

/* ---------------------------------------------------------------- seksi */

.cnp-section { padding: clamp(2.75rem, 6vw, 4.75rem) 0; }
.cnp-section--alt { background: var(--cnp-alt); }
.cnp-section--tall { padding: clamp(4rem, 10vw, 8rem) 0; }

.cnp-section__head { max-width: 42rem; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.cnp-section__title {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 700; letter-spacing: -.015em; margin-bottom: .65rem;
}
.cnp-section__text { color: var(--cnp-ink-soft); margin-bottom: 0; }

.cnp-note {
  margin: 2rem auto 0; max-width: 46rem; text-align: center;
  font-size: .9rem; color: var(--cnp-ink-soft);
}

/* ---------------------------------------------------------------- kartu */

.cnp-card {
  display: flex; flex-direction: column;
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius);
  padding: 1.5rem;
  box-shadow: var(--cnp-shadow);
  text-decoration: none; color: inherit;
}

.cnp-card--link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cnp-card--link:hover,
.cnp-card--link:focus-visible {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--cnp-shadow-lg);
  color: inherit;
}

.cnp-card__icon {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--cnp-grad); color: #fff; font-size: 1.25rem;
  margin-bottom: 1rem; flex: none;
}

.cnp-card__title { font-size: 1.08rem; font-weight: 700; margin-bottom: .35rem; }
.cnp-card__sub   { font-size: .88rem; color: var(--cnp-blue); font-weight: 600; margin-bottom: .5rem; }
.cnp-card__text  { color: var(--cnp-ink-soft); font-size: .94rem; margin-bottom: .75rem; }
.cnp-card__meta  { color: var(--cnp-ink-soft); font-size: .82rem; margin-top: auto; }
.cnp-card__more  { margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--cnp-blue); }
.cnp-card__more i { transition: transform .18s ease; }
.cnp-card--link:hover .cnp-card__more i { transform: translateX(3px); }

.cnp-mini {
  height: 100%;
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius);
  padding: 1.25rem;
}
.cnp-mini i { font-size: 1.5rem; color: var(--cnp-blue); }
.cnp-mini h3 { font-size: .98rem; font-weight: 700; margin: .6rem 0 .3rem; }
.cnp-mini p  { font-size: .86rem; color: var(--cnp-ink-soft); margin-bottom: 0; }

.cnp-tag {
  display: inline-block; margin-bottom: .6rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cnp-violet); background: var(--cnp-grad-soft);
  border-radius: 999px; padding: .25rem .7rem;
}

.cnp-pill {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  border-radius: 999px; padding: .25rem .65rem; white-space: nowrap;
}
.cnp-pill--live { background: rgba(22, 163, 74, .12);  color: #16A34A; }
.cnp-pill--beta { background: rgba(217, 119, 6, .14);  color: #D97706; }
.cnp-pill--soon { background: rgba(100, 116, 139, .16); color: var(--cnp-ink-soft); }
.cnp-pill--jasa { background: var(--cnp-grad-soft);     color: var(--cnp-violet); }

/* Judul kelompok di dalam satu halaman katalog (Platform / Layanan). */
.cnp-group__title {
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em;
  margin-bottom: .35rem;
}
.cnp-group__text {
  color: var(--cnp-ink-soft); font-size: .95rem; margin-bottom: 1.5rem;
}

.cnp-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--cnp-blue); background: var(--cnp-grad-soft);
  border-radius: 6px; padding: .15rem .45rem; vertical-align: middle;
}
.cnp-code--lg { font-size: 1rem; padding: .3rem .7rem; }

/* ---------------------------------------------------------------- paket */

.cnp-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--cnp-shadow);
}
.cnp-plan--popular {
  border-color: transparent;
  box-shadow: var(--cnp-shadow-lg), 0 0 0 2px var(--cnp-blue);
}
.cnp-plan__badge {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: var(--cnp-grad); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  border-radius: 999px; padding: .3rem .85rem; white-space: nowrap;
}
.cnp-plan__name    { font-size: 1.35rem; font-weight: 800; margin-bottom: .2rem; }
.cnp-plan__tagline { color: var(--cnp-blue); font-weight: 600; font-size: .9rem; margin-bottom: .85rem; }
.cnp-plan__audience{
  font-size: .87rem; color: var(--cnp-ink-soft);
  background: var(--cnp-alt); border-radius: var(--cnp-radius-sm);
  padding: .6rem .75rem; margin-bottom: 1.25rem;
}
.cnp-plan__head {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cnp-ink-soft); margin: 1rem 0 .6rem;
}
.cnp-plan__list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.cnp-plan__list li {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .91rem; margin-bottom: .45rem; color: var(--cnp-ink);
}
.cnp-plan__list i { color: var(--cnp-blue); flex: none; margin-top: .15rem; }
.cnp-plan__list--benefit i { color: var(--cnp-violet); }
.cnp-plan .btn { margin-top: 1.25rem; }

/* ---------------------------------------------------------- teks panjang */

.cnp-lead {
  font-size: 1.12rem; line-height: 1.7; color: var(--cnp-ink);
  margin-bottom: 1.5rem; font-weight: 500;
}

.cnp-prose { color: var(--cnp-ink); line-height: 1.75; }
.cnp-prose p { margin-bottom: 1.15rem; }
.cnp-prose h2 {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em;
  margin: 2.25rem 0 .85rem;
}
.cnp-prose h3 { font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 .7rem; }
.cnp-prose h4 { font-size: 1rem;    font-weight: 700; margin: 1.5rem 0 .6rem; }
.cnp-prose ul,
.cnp-prose ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.cnp-prose li { margin-bottom: .5rem; }
.cnp-prose a  { color: var(--cnp-blue); text-underline-offset: 3px; }
.cnp-prose blockquote {
  border-left: 3px solid var(--cnp-blue);
  padding-left: 1rem; margin: 1.5rem 0; color: var(--cnp-ink-soft);
}
.cnp-prose code {
  background: var(--cnp-alt); border-radius: 5px; padding: .1rem .35rem;
  font-size: .89em; color: var(--cnp-violet);
}
.cnp-prose pre {
  background: var(--cnp-alt); border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius-sm); padding: 1rem;
  overflow-x: auto; margin-bottom: 1.25rem;
}
.cnp-prose pre code { background: none; padding: 0; color: inherit; }
.cnp-prose table { width: 100%; margin-bottom: 1.25rem; border-collapse: collapse; }
.cnp-prose th,
.cnp-prose td { border: 1px solid var(--cnp-line); padding: .55rem .75rem; text-align: left; }
.cnp-prose th { background: var(--cnp-alt); font-weight: 600; }
.cnp-prose img { max-width: 100%; height: auto; border-radius: var(--cnp-radius-sm); }

/* Tabel lebar tidak boleh membuat seluruh halaman menggeser mendatar. */
.cnp-prose { overflow-x: auto; }

/* --------------------------------------------------------------- samping */

.cnp-aside {
  position: sticky; top: calc(var(--cnp-nav-h) + 1.25rem);
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius);
  padding: 1.5rem;
  box-shadow: var(--cnp-shadow);
}
.cnp-aside__title { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.cnp-aside__text  { font-size: .92rem; color: var(--cnp-ink-soft); margin-bottom: 1.1rem; }
.cnp-aside__links { list-style: none; padding: 0; margin: 0; }
.cnp-aside__links li + li { margin-top: .35rem; }
.cnp-aside__links a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem; border-radius: var(--cnp-radius-sm);
  color: var(--cnp-ink); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.cnp-aside__links a:hover { background: var(--cnp-grad-soft); color: var(--cnp-blue); }
.cnp-aside__links i { color: var(--cnp-blue); }

/* Banner promosi di samping tool.
 *
 * Gambarnya potongan kepala poster produk. Tingginya dibiarkan mengikuti
 * gambar, dan width/height ditulis di HTML-nya supaya ruangnya sudah dipesan
 * sebelum gambarnya turun — tanpa itu isi sidebar melompat saat banner selesai
 * dimuat, dan lompatannya paling terasa justru di ponsel.
 */
.cnp-aside__promo {
  display: block;
  margin-bottom: .9rem;
  border-radius: var(--cnp-radius-sm);
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--cnp-line);
}
.cnp-aside__promo img {
  width: 100%; height: auto;
  transition: transform .35s ease;
}
.cnp-aside__promo:hover img { transform: scale(1.03); }

/* Pembesaran saat disentuh mouse hanya hiasan; yang menyatakan tidak ingin
 * animasi tidak perlu menerimanya. */
@media (prefers-reduced-motion: reduce) {
  .cnp-aside__promo img { transition: none; }
  .cnp-aside__promo:hover img { transform: none; }
}

@media (max-width: 991.98px) { .cnp-aside { position: static; } }

/* --------------------------------------------------------------- artikel */

.cnp-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--cnp-ink-soft); margin-bottom: 1.5rem;
}
.cnp-article__meta .cnp-tag { margin-bottom: 0; }

.cnp-pagination .page-link {
  border: 1px solid var(--cnp-line); color: var(--cnp-ink);
  background: var(--cnp-surface); margin: 0 .15rem;
  border-radius: var(--cnp-radius-sm);
}
.cnp-pagination .active .page-link {
  background: var(--cnp-grad); border-color: transparent; color: #fff;
}
.cnp-pagination .disabled .page-link { opacity: .45; }

/* ------------------------------------------------------------------- FAQ */

.cnp-faq__group {
  font-size: 1.15rem; font-weight: 700;
  margin: 2.5rem 0 1rem;
}
.cnp-faq__group:first-child { margin-top: 0; }

.cnp-accordion .accordion-item {
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius-sm) !important;
  margin-bottom: .65rem;
  overflow: hidden;
}
.cnp-accordion .accordion-button {
  background: var(--cnp-surface); color: var(--cnp-ink);
  font-weight: 600; font-size: .98rem; box-shadow: none;
}
.cnp-accordion .accordion-button:not(.collapsed) { color: var(--cnp-blue); background: var(--cnp-grad-soft); }
.cnp-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .18); }
.cnp-accordion .accordion-body { color: var(--cnp-ink-soft); font-size: .95rem; }

/* -------------------------------------------------------------- tim */

.cnp-person + .cnp-person { margin-top: 2.5rem; }
.cnp-person__card {
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--cnp-shadow);
  height: 100%;
}
.cnp-person__ava {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--cnp-grad); color: #fff;
  font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem;
}
.cnp-person__name { font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; }
.cnp-person__role { font-size: .88rem; color: var(--cnp-blue); font-weight: 600; margin-bottom: 1.25rem; }
.cnp-person__head {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cnp-ink-soft); margin-bottom: .65rem;
}
.cnp-person__certs { list-style: none; padding: 0; margin: 0; }
.cnp-person__certs li {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .87rem; color: var(--cnp-ink-soft); margin-bottom: .45rem;
}
.cnp-person__certs i { color: var(--cnp-violet); flex: none; margin-top: .15rem; }

/* --------------------------------------------------------------- kontak */

.cnp-contact { list-style: none; padding: 0; margin: 0; }
.cnp-contact li { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.cnp-contact__icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--cnp-grad-soft); color: var(--cnp-blue); font-size: 1.15rem;
}
.cnp-contact__label {
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cnp-ink-soft); margin-bottom: .2rem;
}
.cnp-contact a { color: var(--cnp-ink); font-weight: 600; text-decoration: none; }
.cnp-contact a:hover { color: var(--cnp-blue); text-decoration: underline; }
.cnp-contact__note { font-size: .83rem; color: var(--cnp-ink-soft); margin-top: .2rem; }

.cnp-formcard {
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--cnp-shadow);
}
.cnp-formcard__title { font-size: 1.25rem; font-weight: 700; margin-bottom: .4rem; }
.cnp-formcard__text  { color: var(--cnp-ink-soft); font-size: .94rem; margin-bottom: 1.5rem; }
.cnp-formcard__note  { font-size: .84rem; color: var(--cnp-ink-soft); }
.cnp-formcard .form-label { font-weight: 600; font-size: .9rem; }
.cnp-formcard .form-control { border-radius: var(--cnp-radius-sm); padding: .65rem .85rem; }
.cnp-formcard .form-control:focus {
  border-color: var(--cnp-blue);
  box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .16);
}

/* Honeypot — tersembunyi dari mata dan pembaca layar, tetap terisi oleh bot. */
.cnp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.cnp-done {
  display: grid; place-items: center; margin: 0 auto 1.5rem;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--cnp-grad); color: #fff; font-size: 2.4rem;
  box-shadow: 0 10px 30px rgba(29, 78, 216, .3);
}
.cnp-done__title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; margin-bottom: .75rem; }
.cnp-done__text  { color: var(--cnp-ink-soft); max-width: 34rem; margin: 0 auto .5rem; }

/* ------------------------------------------------------------------- CTA */

.cnp-cta { padding: 0 0 clamp(2.75rem, 6vw, 4.75rem); }
.cnp-cta__box {
  background: var(--cnp-grad);
  border-radius: calc(var(--cnp-radius) + 6px);
  padding: clamp(1.75rem, 4vw, 3rem);
  color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 16px 44px rgba(29, 78, 216, .28);
}
.cnp-cta__title { font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 800; margin-bottom: .4rem; }
.cnp-cta__text  { color: rgba(255, 255, 255, .88); max-width: 34rem; }

/* ---------------------------------------------------------------- footer */

.cnp-footer {
  background: var(--cnp-alt);
  border-top: 1px solid var(--cnp-line);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.75rem;
}
.cnp-footer__logo { object-fit: contain; }
.cnp-footer__head {
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cnp-ink); margin-bottom: .9rem;
}
.cnp-footer__text { color: var(--cnp-ink-soft); font-size: .92rem; }
.cnp-footer__list { list-style: none; padding: 0; margin: 0; }
.cnp-footer__list li { margin-bottom: .5rem; }
.cnp-footer__list a {
  color: var(--cnp-ink-soft); text-decoration: none; font-size: .92rem;
}
.cnp-footer__list a:hover { color: var(--cnp-blue); text-decoration: underline; }
.cnp-footer__list--contact li { display: flex; gap: .6rem; align-items: flex-start; }
.cnp-footer__list--contact i { color: var(--cnp-blue); margin-top: .2rem; }
.cnp-footer__list--contact span { color: var(--cnp-ink-soft); font-size: .92rem; }
.cnp-footer__rule { border-color: var(--cnp-line); opacity: 1; margin: 2rem 0 1.25rem; }

/* -------------------------------------------------------- tombol WhatsApp */

.cnp-wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1030;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
  transition: transform .18s ease;
}
.cnp-wa:hover, .cnp-wa:focus-visible { color: #fff; transform: scale(1.06); }

/* --------------------------------------------------------------- gerakan */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cnp-card--link:hover,
  .cnp-btn-primary:hover,
  .cnp-wa:hover { transform: none; }
}

/* --- Kartu perkakas ringkas -------------------------------------------
   Dipakai pada katalog empat kolom. Tinggi disamakan lewat flex, dan
   judulnya dibatasi dua baris supaya barisan kartu tetap rata walau
   panjang namanya berbeda-beda. `position: relative` diperlukan agar
   `.stretched-link` menutupi seluruh kartu, bukan hanya judulnya. */
.cnp-card--ringkas {
  position: relative;
  padding: 1.1rem 1.15rem;
}
.cnp-card--ringkas .cnp-card__icon {
  width: 2.25rem; height: 2.25rem;
  font-size: 1rem;
  margin-bottom: .65rem;
}
.cnp-card--ringkas .cnp-card__title {
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: .4rem;
}
.cnp-card--ringkas .cnp-card__text {
  font-size: .85rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------- katalog / penjelajahan
   Bilah pencarian dan keping kategori pada halaman /tools.

   Seluruh warna diambil dari variabel, jadi tema gelap ikut benar tanpa aturan
   tambahan. */

/* Kotak pencarian disembunyikan sampai JS memasang penyaringnya. Kotak yang
   tidak berfungsi lebih buruk daripada tidak ada kotak, dan katalognya sendiri
   tetap terbaca penuh tanpa JS. */
.cnp-katalog__bar { display: none; }
.cnp-katalog--siap .cnp-katalog__bar { display: block; }

.cnp-katalog__kotak { position: relative; }
.cnp-katalog__kotak .bi-search {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--cnp-ink-soft); pointer-events: none;
}
.cnp-katalog__input {
  width: 100%;
  padding: .8rem 2.75rem;
  font-size: 1rem;
  color: var(--cnp-ink);
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: var(--cnp-radius-sm);
  box-shadow: var(--cnp-shadow);
}
.cnp-katalog__input::placeholder { color: var(--cnp-ink-soft); }
.cnp-katalog__input:focus {
  outline: none;
  border-color: var(--cnp-blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .16);
}
.cnp-katalog__hapus {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  color: var(--cnp-ink-soft);
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer;
}
.cnp-katalog__hapus:hover { background: var(--cnp-alt); color: var(--cnp-ink); }

.cnp-katalog__keping {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1rem;
}
.cnp-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem;
  font-size: .85rem; font-weight: 600;
  color: var(--cnp-ink-soft);
  background: var(--cnp-surface);
  border: 1px solid var(--cnp-line);
  border-radius: 999px;
  cursor: pointer;
}
.cnp-chip:hover { color: var(--cnp-ink); border-color: var(--cnp-ink-soft); }
.cnp-chip.active {
  color: #fff; border-color: transparent;
  background: var(--cnp-grad);
}
.cnp-chip__n {
  font-size: .75rem; font-weight: 700;
  opacity: .75;
}

.cnp-katalog__hitung {
  color: var(--cnp-ink-soft); font-size: .85rem;
  margin-top: .85rem; margin-bottom: 0;
}