/* ============================================================
   pesona.digital — situs induk PT Pesona Pelangi Persada

   ARAH WARNA (ditetapkan pemilik 2026-08-24):
   "permainan warnanya hidupkan, bukan berarti pelangi."

   Artinya: tiap layanan tetap punya warnanya sendiri, tetapi warna
   itu tampil sebagai BIDANG BESAR dan GRADASI — bukan sebagai lima
   garis kecil berjajar. Pita pelangi yang dulu ada di kepala halaman
   sudah dibuang: berjajar begitu justru membuat situs terasa murah
   dan seragam dengan ribuan templat lain.

   Jangan menambahkan kembali elemen apa pun yang menderetkan kelima
   warna bersebelahan.
   ============================================================ */

:root {
  /* Warna layanan. Tiap warna berpasangan dengan versi gelapnya untuk
     dijadikan gradasi — gradasi inilah yang memberi kesan "hidup",
     bukan warna datar. */
  --studium:     #0d9488;  --studium-2:   #0b5f57;
  --siapkarya:   #2563eb;  --siapkarya-2: #1a3a9c;
  --store:       #ea580c;  --store-2:     #9a3412;
  --karir:       #7c3aed;  --karir-2:     #55199e;
  --muhasabah:   #be123c;  --muhasabah-2: #7f0f2d;
  --bali:        #a16207;  --bali-2:      #6f400a;

  /* Warna merek induk — dipakai untuk tombol, ubin ikon, dan sorotan.
     Indigo ini bukan pilihan baru: ia diambil dari situs Siap Karya yang
     sudah berjalan (#3949AB / #1A237E), supaya situs induk mewarisi warna
     keluarganya sendiri. Cukup dalam untuk terasa mahal, tetapi tidak
     pernah menjadi hitam — pemilik menolak hitam (2026-08-24). */
  --merek:      #3949ab;
  --merek-2:    #1a237e;
  --merek-teks: #ffffff;

  /* Permukaan gelap dipakai kaki halaman. */
  --gelap:    #0b1220;
  --gelap-2:  #111b2e;
  --gelap-3:  #1b2740;

  --lebar: 1160px;
  --radius: 18px;
  --radius-kecil: 12px;

  --huruf: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------
   MODE TERANG DAN GELAP

   Tiga keadaan, dan ketiganya perlu ditulis:

   1. `:root`                      — mode terang, bawaan.
   2. `@media (prefers-color-scheme: dark)` — pengunjung belum pernah
      menekan tombol, jadi situs ikut setelan ponselnya.
   3. `:root[data-tema="gelap"]`   — pengunjung menekan tombol sendiri.
      Ini harus ditulis terpisah, bukan digabung ke media query,
      supaya pilihannya menang atas setelan ponsel.

   Penjaga `:not([data-tema="terang"])` pada nomor 2 itu yang membuat
   tombol bisa dipakai dua arah: pengguna ponsel bermode gelap tetap
   bisa memaksa situs jadi terang.

   `--alas-aksen`/`--kadar-aksen` dipakai untuk melembutkan warna
   layanan saat dipakai sebagai teks di latar gelap — biru pekat
   #2563eb tidak terbaca di atas #0d1524.
   ------------------------------------------------------------ */
:root {
  --tinta:      #0f1826;
  --tinta-2:    #54637a;
  --tinta-3:    #7d8ca3;
  --garis:      #e4e9f0;
  --garis-2:    #ccd5e2;
  --latar:      #ffffff;
  --latar-2:    #f5f7fb;
  --latar-3:    #e9eef6;
  --kartu:      #ffffff;
  --kadar-kartu: 6%;
  --kbli-kartu: #f4f5fd;
  --kbli-garis: #e2e6f7;
  --alas-aksen: #ffffff;
  --kadar-aksen: 0%;
  --sorot:      #1d4ed8;
  --bayang:       0 1px 2px rgb(15 24 38 / .04), 0 10px 30px -14px rgb(15 24 38 / .16);
  --bayang-tebal: 0 2px 6px rgb(15 24 38 / .06), 0 26px 54px -20px rgb(15 24 38 / .3);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --tinta:      #e2e8f0;
    --tinta-2:    #94a3b8;
    --tinta-3:    #7c8ba1;
    --garis:      #2c3a52;
    --garis-2:    #435068;
    --latar:      #0f172a;
    --latar-2:    #0b1120;
    --latar-3:    #1e293b;
    --kartu:      #1e293b;
    --kadar-kartu: 13%;
    /* Terangkat jelas di atas latar halaman (#0f172a) dan jenuh ke arah
       indigo, bukan abu-abu. Inilah yang membuatnya menyala, bukan mati. */
    --kbli-kartu: #222d4a;
    --kbli-garis: #35406b;
    --merek:      #7dd3fc;
    --merek-2:    #38bdf8;
    --merek-teks: #0b1220;
    --alas-aksen: #ffffff;
    --kadar-aksen: 42%;
    --sorot:      #7dd3fc;
    --bayang:       0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -14px rgb(0 0 0 / .6);
    --bayang-tebal: 0 2px 6px rgb(0 0 0 / .45), 0 26px 54px -20px rgb(0 0 0 / .75);
    color-scheme: dark;
  }
}

:root[data-tema="gelap"] {
  --tinta:      #e2e8f0;
  --tinta-2:    #94a3b8;
  --tinta-3:    #7c8ba1;
  --garis:      #2c3a52;
  --garis-2:    #435068;
  --latar:      #0f172a;
  --latar-2:    #0b1120;
  --latar-3:    #1e293b;
  --kartu:      #1e293b;
  --kadar-kartu: 13%;
  /* Terangkat jelas di atas latar halaman (#0f172a) dan jenuh ke arah
     indigo, bukan abu-abu. Inilah yang membuatnya menyala, bukan mati. */
  --kbli-kartu: #222d4a;
  --kbli-garis: #35406b;
  --merek:      #7dd3fc;
  --merek-2:    #38bdf8;
  --merek-teks: #0b1220;
  --alas-aksen: #ffffff;
  --kadar-aksen: 42%;
  --sorot:      #7dd3fc;
  --bayang:       0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -14px rgb(0 0 0 / .6);
  --bayang-tebal: 0 2px 6px rgb(0 0 0 / .45), 0 26px 54px -20px rgb(0 0 0 / .75);
  color-scheme: dark;
}

/* Warna layanan versi terbaca: dipakai untuk TEKS dan garis tipis.
   Bidang gradasi besar tetap memakai warna pekatnya, karena teks di
   atasnya berwarna putih dan justru butuh latar yang kuat. */
.l-studium, .l-siapkarya, .l-store, .l-karir, .l-muhasabah, .l-bali,
.u-studium, .u-siapkarya, .u-store, .u-karir, .u-muhasabah, .u-bali,
.bidang article {
  --aksen-teks: color-mix(in srgb, var(--alas-aksen) var(--kadar-aksen), var(--aksen));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--huruf);
  font-size: 16px;
  line-height: 1.62;
  color: var(--tinta);
  background: var(--latar);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }

h1, h2, h3 { margin: 0; line-height: 1.14; letter-spacing: -.03em; font-weight: 800; }

.bungkus {
  width: 100%;
  max-width: var(--lebar);
  margin-inline: auto;
  padding-inline: 22px;
}

.lompat {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinta);
  color: var(--latar);
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
}
.lompat:focus { left: 0; }

/* ============================================================
   Gerak saat tergulir
   Kelas .gerak-aktif hanya dipasang oleh gerak.js. Tanpa JavaScript
   — atau kalau pengguna minta kurangi gerak — isi halaman tetap
   terlihat penuh. Animasi tidak boleh jadi syarat isi terbaca.
   ============================================================ */
.gerak-aktif [data-muncul] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1);
}
.gerak-aktif [data-muncul].tampil { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gerak-aktif [data-muncul] { opacity: 1; transform: none; }
}

/* ============================================================
   Kepala halaman
   ============================================================ */
header.kepala {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--latar) 82%, transparent);
  backdrop-filter: saturate(1.7) blur(14px);
  border-bottom: 1px solid var(--garis);
}

/* Garis bawah kepala hanya muncul setelah digulir, supaya di puncak
   halaman ia menyatu dengan hero tanpa garis pemisah. */
header.kepala { border-bottom-color: transparent; }
header.kepala.melekat { border-bottom-color: var(--garis); }

.kepala .baris { display: flex; align-items: center; gap: 16px; min-height: 74px; }

.merek {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
/* Belum ada lambang — pemilik menyiapkannya sendiri. Kalau nanti ada,
   sisipkan <img> sebagai anak pertama .merek; jaraknya sudah disiapkan. */
.merek img { width: 32px; height: 32px; flex-shrink: 0; }
.merek b {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.15;
}
.merek small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .58;
  margin-top: 1px;
}

/* ---------- Menu berbentuk pil ----------
   Menggantikan deretan tautan datar yang halaman aktifnya ditandai kotak
   abu-abu — pola itu peninggalan tab peramban lama dan langsung terbaca
   jadul. Sekarang ketiga tautan duduk di dalam satu wadah membulat, dan
   halaman yang sedang dibuka tampil sebagai pil terisi yang seolah
   terangkat dari wadahnya. */
nav.utama {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-pil {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--latar-2);
  border: 1px solid var(--garis);
}
.nav-pil a {
  padding: 8px 17px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .18s, box-shadow .18s;
}
.nav-pil a:hover { color: var(--tinta); }
.nav-pil a[aria-current="page"] {
  color: var(--tinta);
  background: var(--kartu);
  box-shadow: 0 1px 2px rgb(15 24 38 / .07), 0 3px 10px -3px rgb(15 24 38 / .16);
}

.aksi-kepala { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tombol-kepala {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(140deg, var(--merek), var(--merek-2));
  color: var(--merek-teks);
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--merek) 85%, transparent);
  transition: filter .15s, transform .14s, box-shadow .18s;
}
.tombol-kepala:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--merek) 90%, transparent);
}

.tombol-tema {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--garis);
  background: var(--latar-2);
  color: var(--tinta-2);
  cursor: pointer;
  padding: 0;
  transition: color .15s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tombol-tema:hover { color: var(--tinta); background: var(--latar-3); }
.tombol-tema svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }

/* Hanya satu dari dua lambang yang tampil, tergantung mode aktif.
   Keduanya ada di HTML supaya pergantiannya seketika. */
.tombol-tema .rembulan { display: block; }
.tombol-tema .matahari { display: none; }
:root[data-tema="gelap"] .tombol-tema .rembulan { display: none; }
:root[data-tema="gelap"] .tombol-tema .matahari { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .tombol-tema .rembulan { display: none; }
  :root:not([data-tema="terang"]) .tombol-tema .matahari { display: block; }
}

/* Menu di tengah hanya muat kalau layarnya lebar. Di bawah itu ia turun
   ke barisnya sendiri dan berhenti melayang di tengah. */
@media (max-width: 1080px) {
  nav.utama { position: static; transform: none; }
  .kepala .baris { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .kepala .baris { min-height: 0; padding-block: 11px; gap: 10px; }
  .merek { order: 1; }
  .aksi-kepala { order: 2; }
  nav.utama { order: 3; width: 100%; }
  .nav-pil { width: 100%; justify-content: space-between; }
  .nav-pil a { flex: 1; text-align: center; padding: 9px 10px; }
  .merek small { display: none; }
}
@media (max-width: 380px) {
  .nav-pil a { font-size: 13.5px; padding: 9px 6px; }
  .tombol-kepala { padding: 10px 15px; font-size: 14px; }
}


/* ============================================================
   Hero

   ⚠️ Pernah dicoba berlatar gelap dengan lima warna layanan sebagai
   kabut cahaya. DITOLAK pemilik 2026-08-24: "ternyata warna warni
   lebih parah hasilnya". Hero sekarang mengikuti mode halaman —
   terang saat mode terang, gelap saat mode gelap — dan warna hanya
   dibiarkan hidup di kartu layanan. Jangan dikembalikan.
   ============================================================ */
.hero {
  position: relative;
  background: var(--latar);
  color: var(--tinta);
  padding-block: clamp(52px, 7vw, 88px) clamp(46px, 6vw, 76px);
}
.hero.rapat { padding-block: clamp(40px, 5vw, 62px) clamp(36px, 4.5vw, 56px); }

.hero h1 {
  font-size: clamp(29px, 4.6vw, 48px);
  max-width: 19ch;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Satu warna sorot, bukan gradasi banyak warna. */
.hero h1 em { font-style: normal; color: var(--sorot); }

.hero p.lead {
  margin-top: 20px;
  font-size: clamp(15px, 1.4vw, 17.5px);
  color: var(--tinta-2);
  max-width: 56ch;
  line-height: 1.62;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-2);
  background: var(--latar-2);
  border: 1px solid var(--garis);
  padding: 6px 13px;
  border-radius: 99px;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 99px;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgb(22 163 74 / .18);
}

/* ============================================================
   Tombol
   ============================================================ */
.tombol-baris { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.tombol {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 11px;
  border: 1px solid transparent;
  transition: transform .14s, box-shadow .18s, background .18s, border-color .18s;
}
.tombol:active { transform: translateY(1px); }

.tombol.utama {
  background: linear-gradient(140deg, var(--merek), var(--merek-2));
  color: var(--merek-teks);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--merek) 85%, transparent);
}
.tombol.utama:hover { box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--merek) 90%, transparent); transform: translateY(-2px); }

.tombol.garis {
  background: var(--kartu);
  color: var(--tinta);
  border-color: var(--garis-2);
}
.tombol.garis:hover { background: var(--latar-2); transform: translateY(-2px); }

/* ============================================================
   Bagian umum
   ============================================================ */
section { padding-block: clamp(46px, 5.5vw, 74px); }
section.abu { background: var(--latar-2); }

.label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 12px;
}

h2.judul { font-size: clamp(23px, 2.9vw, 32px); max-width: 22ch; text-wrap: balance; }

.pengantar {
  margin-top: 14px;
  font-size: clamp(14.5px, 1.2vw, 16px);
  color: var(--tinta-2);
  max-width: 62ch;
}

/* ============================================================
   Kartu layanan — inti tampilan situs ini
   Tiap kartu dibuka oleh bidang warna bergradasi setinggi ±150px
   dengan angka raksasa di belakangnya. Bidang inilah yang membuat
   kartu terasa "punya berat"; garis 4px di tepi tidak pernah cukup.
   ============================================================ */
.daftar-layanan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 34px;
}

.layanan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s cubic-bezier(.22,.7,.3,1), box-shadow .26s, border-color .22s;
}
.layanan:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow:
    0 2px 6px rgb(15 24 38 / .06),
    0 30px 60px -22px color-mix(in srgb, var(--aksen) 55%, transparent);
}

.layanan-kepala {
  position: relative;
  overflow: hidden;
  padding: 13px 18px 14px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: linear-gradient(142deg, var(--aksen) 0%, var(--aksen-2) 100%);
}
/* Sorotan lembut di sudut kiri atas supaya bidang warnanya tidak datar */
.layanan-kepala::before {
  content: "";
  position: absolute;
  inset: -40% 30% 40% -30%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .34), transparent);
  pointer-events: none;
}
/* Angka raksasa sebagai elemen rupa, bukan sekadar penomoran */
.layanan-no {
  position: absolute;
  right: 11px;
  bottom: -12px;
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: rgb(255 255 255 / .17);
  pointer-events: none;
  user-select: none;
}
.layanan-label {
  position: relative;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgb(255 255 255 / .18);
  border: 1px solid rgb(255 255 255 / .26);
  backdrop-filter: blur(4px);
  padding: 5px 11px;
  border-radius: 99px;
}

.layanan-badan {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 18px;
}
.layanan-badan h3 { font-size: 19px; letter-spacing: -.028em; }
.layanan .alamat {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--aksen-teks);
  overflow-wrap: anywhere;
}
.layanan .ket { margin-top: 11px; color: var(--tinta-2); font-size: 14.5px; line-height: 1.58; }

.layanan ul {
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.layanan ul li {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
  background: var(--latar-2);
  border: 1px solid var(--garis);
  border-radius: 99px;
  padding: 5px 12px;
}

.layanan .buka {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--garis);
  font-size: 14px;
  font-weight: 700;
  color: var(--aksen-teks);
  display: flex;
  align-items: center;
  gap: 8px;
}
.layanan .buka i { font-style: normal; transition: transform .22s; }
.layanan:hover .buka i { transform: translateX(5px); }

.l-studium   { --aksen: var(--studium);   --aksen-2: var(--studium-2); }
.l-siapkarya { --aksen: var(--siapkarya); --aksen-2: var(--siapkarya-2); }
.l-store     { --aksen: var(--store);     --aksen-2: var(--store-2); }
.l-karir     { --aksen: var(--karir);     --aksen-2: var(--karir-2); }
.l-muhasabah { --aksen: var(--muhasabah); --aksen-2: var(--muhasabah-2); }
.l-bali      { --aksen: var(--bali);      --aksen-2: var(--bali-2); }

/* ============================================================
   Angka ringkas
   ============================================================ */
.angka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 14px;
  margin-top: 34px;
}
/* Dulu keempatnya menyatu jadi satu balok panjang dengan garis pemisah
   1px. Pemilik minta dipisah per kartu (2026-08-24) — dan memang lebih
   terbaca: tiap angka berdiri sendiri, bukan satu tabel. */
.angka > div {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  padding: 22px 20px;
  transition: transform .2s, box-shadow .22s;
}
.angka > div:hover { transform: translateY(-3px); box-shadow: var(--bayang); }
.angka b {
  display: block;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  background: linear-gradient(145deg, var(--tinta), var(--tinta-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.angka span {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--tinta-2);
  line-height: 1.45;
}

/* ============================================================
   Dua kolom & prosa
   ============================================================ */
.dua-kolom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .dua-kolom { grid-template-columns: 1fr; } }

.prosa p + p { margin-top: 17px; }
.prosa p { color: var(--tinta-2); font-size: 15.5px; }
.prosa strong { color: var(--tinta); font-weight: 700; }

/* Nama perusahaan diberi warna merek supaya menonjol dari kata bercetak
   tebal lainnya di paragraf yang sama ("belajar", "berlatih", "bekerja",
   tanggal, nomor NIB) — kata-kata itu penekanan biasa, bukan nama.
   Warnanya ikut mode: indigo di latar terang, biru langit di latar gelap,
   sama dengan judul hero dan tombolnya. */
.prosa strong.nama-pt { color: var(--merek); }

/* ============================================================
   Bidang usaha
   Delapan kartu. Warnanya TIDAK berurutan seperti pelangi — tiap
   kartu memakai satu warna sebagai aksen tipis pada judul dan
   nomornya saja, sehingga kisi ini terbaca sebagai satu kesatuan.
   ============================================================ */
.bidang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin-top: 34px;
}
.bidang article {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kbli-garis);
  border-radius: var(--radius-kecil);
  padding: 22px 20px 20px;
  overflow: hidden;
  transition: transform .2s, box-shadow .22s, border-color .2s;

  /* SATU warna untuk kedelapan kartu — ditetapkan pemilik 2026-08-24.
     Yang membedakan tiap kartu adalah ubin ikonnya, yang tetap memakai
     warna layanannya masing-masing. */
  background: var(--kbli-kartu);
}
.bidang article:hover {
  transform: translateY(-3px);
  box-shadow: var(--bayang);
  border-color: color-mix(in srgb, var(--aksen) 45%, var(--kbli-garis));
}

/* ⚠️ Kartu ini pernah diberi latar berwarna penuh (satu warna lembut per
   kartu) dan DITOLAK pemilik 2026-08-24: "jgn dibuat warna warni seluruh
   card". Warnanya sekarang terkumpul di satu ubin ikon saja.

   Ubin dipilih daripada garis tipis di atas judul karena ia membawa dua
   hal sekaligus: warna DAN bentuk. Isi kartu ini kering — nama kategori
   dan deretan nomor KBLI — jadi bentuk yang bisa dikenali sekilas jauh
   lebih menolong pembaca daripada sekadar warna. */
.bidang-ikon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-bottom: 15px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(142deg, var(--aksen), var(--aksen-2));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--aksen) 75%, transparent);
}
.bidang-ikon svg { width: 21px; height: 21px; }

.bidang h3 { font-size: 16px; letter-spacing: -.022em; }
.bidang p { margin-top: 8px; font-size: 14px; color: var(--tinta-2); line-height: 1.58; }
.bidang .kode {
  margin-top: auto;
  padding-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Warna hanya menyala di ubin ikonnya, TIDAK di latar kartu. Latar
   kartu berwarna sudah pernah dicoba dan ditolak pemilik 2026-08-24
   ("jgn dibuat warna warni gitu"); yang disukai justru ikon berwarna
   di atas kartu putih.

   Urutannya sengaja diacak, bukan mengikuti urutan warna layanan —
   kalau berurutan, kisi ini kembali terbaca sebagai deretan pelangi.
   Pasangan atas–bawah juga dijaga tidak sewarna. */
.bidang article:nth-child(1) { --aksen: var(--siapkarya); --aksen-2: var(--siapkarya-2); }
.bidang article:nth-child(2) { --aksen: var(--studium);   --aksen-2: var(--studium-2); }
.bidang article:nth-child(3) { --aksen: var(--karir);     --aksen-2: var(--karir-2); }
.bidang article:nth-child(4) { --aksen: var(--store);     --aksen-2: var(--store-2); }
.bidang article:nth-child(5) { --aksen: var(--muhasabah); --aksen-2: var(--muhasabah-2); }
.bidang article:nth-child(6) { --aksen: var(--bali);      --aksen-2: var(--bali-2); }
.bidang article:nth-child(7) { --aksen: var(--siapkarya); --aksen-2: var(--siapkarya-2); }
.bidang article:nth-child(8) { --aksen: var(--studium);   --aksen-2: var(--studium-2); }

/* ============================================================
   Rincian legalitas
   ============================================================ */
.rincian {
  margin: 34px 0 0;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--kartu);
}
.rincian > div {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 6px 32px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--garis);
}
.rincian > div:last-child { border-bottom: 0; }
.rincian > div:nth-child(odd) { background: color-mix(in srgb, var(--latar-2) 55%, transparent); }
.rincian dt { font-size: 14px; font-weight: 700; color: var(--tinta-3); }
.rincian dd { margin: 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.rincian dd a { font-weight: 700; }
.rincian .angka-tetap { font-variant-numeric: tabular-nums; letter-spacing: .03em; font-weight: 700; }
@media (max-width: 680px) {
  .rincian > div { grid-template-columns: 1fr; gap: 5px; padding: 17px 18px; }
}

.catatan {
  margin-top: 24px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--tinta-3);
  max-width: 74ch;
  padding: 14px 18px;
  border-left: 3px solid var(--garis-2);
  background: color-mix(in srgb, var(--latar-2) 70%, transparent);
  border-radius: 0 var(--radius-kecil) var(--radius-kecil) 0;
}

/* ============================================================
   Lokasi
   ============================================================ */
.lokasi-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin-top: 34px;
}
.lokasi-kartu {
  position: relative;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 22px 20px;
  background: var(--kartu);
  overflow: hidden;
}
.lokasi-kartu.utama-lokasi { border-color: var(--garis-2); box-shadow: var(--bayang); }
.lokasi-kartu .jenis {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 11px;
}
.lokasi-kartu h3 { font-size: 18px; letter-spacing: -.026em; }
.lokasi-kartu .alamat-panjang {
  margin-top: 15px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta-2);
}

/* ============================================================
   Blok unit layanan (halaman Layanan)
   ============================================================ */
.unit {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  padding-block: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--garis);
  align-items: start;
}
.unit:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .unit { grid-template-columns: 1fr; gap: 26px; } }

.unit-kiri { position: sticky; top: 100px; }
@media (max-width: 900px) { .unit-kiri { position: static; } }

.unit-nomor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(142deg, var(--aksen), var(--aksen-2));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 16px;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--aksen) 70%, transparent);
}
.unit-kiri h2 { font-size: clamp(22px, 2.7vw, 28px); letter-spacing: -.035em; }
.unit-alamat {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--aksen-teks);
  overflow-wrap: anywhere;
}
.unit-kalimat { margin-top: 10px; font-size: 15.5px; color: var(--tinta-2); line-height: 1.55; }

.tombol-unit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  padding: 11px 18px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(142deg, var(--aksen), var(--aksen-2));
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--aksen) 80%, transparent);
  transition: transform .16s, box-shadow .2s;
}
.tombol-unit:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -16px color-mix(in srgb, var(--aksen) 85%, transparent);
}
.tombol-unit i { font-style: normal; transition: transform .2s; }
.tombol-unit:hover i { transform: translateX(4px); }

.unit-daftar { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.unit-daftar li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--tinta-2);
  line-height: 1.55;
}
.unit-daftar li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 8px; height: 8px;
  border-radius: 99px;
  background: linear-gradient(142deg, var(--aksen), var(--aksen-2));
}

.u-studium   { --aksen: var(--studium);   --aksen-2: var(--studium-2); }
.u-siapkarya { --aksen: var(--siapkarya); --aksen-2: var(--siapkarya-2); }
.u-store     { --aksen: var(--store);     --aksen-2: var(--store-2); }
.u-karir     { --aksen: var(--karir);     --aksen-2: var(--karir-2); }
.u-muhasabah { --aksen: var(--muhasabah); --aksen-2: var(--muhasabah-2); }
.u-bali      { --aksen: var(--bali);      --aksen-2: var(--bali-2); }

/* ============================================================
   Bagian kontak
   Dulu dipaksa berlatar gelap sebagai penyeimbang hero gelap. Karena
   hero sudah mengikuti mode, bagian ini pun ikut mode — kalau tidak,
   di mode terang ia jadi satu-satunya blok hitam yang menggantung
   tanpa alasan.
   ============================================================ */
.kontak-gelap { background: var(--latar-2); }

.kontak-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin-top: 34px;
}
.kontak-kartu {
  border: 1px solid var(--garis);
  background: var(--kartu);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: border-color .2s, box-shadow .22s, transform .2s;
}
.kontak-kartu:hover {
  border-color: var(--garis-2);
  box-shadow: var(--bayang);
  transform: translateY(-3px);
}
.kontak-kartu h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.kontak-kartu p, .kontak-kartu a {
  margin-top: 14px;
  display: block;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.kontak-kartu a { font-weight: 700; color: var(--sorot); }
.kontak-kartu a:hover { text-decoration: underline; }
.kontak-kartu .ket {
  font-size: 14px;
  color: var(--tinta-2);
  font-weight: 400;
  margin-top: 7px;
}

/* ============================================================
   Kaki halaman
   Dulu berupa empat kolom teks berjajar dengan bobot sama — susunan
   yang terbaca datar dan kuno. Sekarang dibagi dua: blok merek yang
   lebih lega di kiri sebagai jangkar, lalu kolom tautan di kanan.
   Kontaknya diberi ikon supaya nomor dan alamat langsung terbaca
   sebagai kontak, bukan sekadar baris tautan lain.
   ============================================================ */
footer.kaki {
  position: relative;
  background: var(--gelap-2);
  color: rgb(255 255 255 / .7);
  padding-block: 62px 0;
  font-size: 15px;
  overflow: hidden;
}
/* Garis tipis di tepi atas, memudar ke samping — memberi batas tanpa
   garis keras yang memotong halaman. */
footer.kaki::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18) 22%, rgb(255 255 255 / .18) 78%, transparent);
}

.kaki-atas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: 46px;
}
@media (max-width: 900px) { .kaki-atas { grid-template-columns: 1fr; gap: 38px; } }

.kaki .merek { color: #fff; }
.kaki .merek small { opacity: .5; }

.kaki-kalimat {
  margin-top: 18px;
  max-width: 34ch;
  color: rgb(255 255 255 / .58);
  line-height: 1.65;
}

/* Lencana legalitas — ringkas, tidak menuntut perhatian, tetapi cukup
   untuk menjawab "ini perusahaan resmi atau bukan" di ujung halaman. */
.kaki-lencana { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kaki-lencana span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgb(255 255 255 / .62);
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 99px;
  padding: 5px 12px;
  white-space: nowrap;
}

.kaki-tautan {
  display: grid;
  /* Kolom kontak dibuat lebih lebar daripada dua kolom tautan: isinya
     alamat tiga baris, dan kalau selebar yang lain, nama gedungnya
     terpotong di tengah. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 32px;
}
@media (max-width: 900px) {
  .kaki-tautan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  /* Kontak turun ke barisnya sendiri selebar penuh — dipaksa muat di
     separuh lebar layar ponsel, alamatnya patah tiap dua kata. */
  .kaki-kontak { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .kaki-tautan { grid-template-columns: 1fr; gap: 26px; }
}

.kaki h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .4);
  margin: 0 0 16px;
}
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.kaki a { color: rgb(255 255 255 / .7); text-decoration: none; transition: color .15s; }
.kaki a:hover { color: #fff; }

/* Kontak: ikon disejajarkan dengan baris pertama teksnya, bukan
   ditengahkan — kalau ditengahkan, ikon alamat yang tiga baris akan
   melayang di tengah dan terlihat lepas dari tulisannya. */
.kaki-kontak li, .kaki-kontak a { display: flex; align-items: flex-start; gap: 10px; }
.kaki-kontak svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  opacity: .55;
}
.kaki-kontak a:hover svg { opacity: 1; }
.kaki-alamat { color: rgb(255 255 255 / .58); line-height: 1.6; }

.kaki-bawah {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  padding-block: 22px;
  border-top: 1px solid rgb(255 255 255 / .08);
  font-size: 13.5px;
  color: rgb(255 255 255 / .42);
}
.kaki-bawah a { color: rgb(255 255 255 / .55); font-weight: 600; }