/* ============================================================
   reatoz-publik.css — gaya halaman publik Reatoz
   ------------------------------------------------------------
   Dimuat SETELAH app.css (Bootstrap + Font Awesome).
   Identitas v1.2: CERAH · DINAMIS · ENERGETIK
     · violet elektrik (--rzt-violet) sebagai warna utama
     · magenta/pink/oranye untuk gradien dekoratif
     · lime (--rzt-lime) sebagai aksen kontras tinggi
     · latar lavender-putih (--rzt-bg), navbar kaca terang
   Nama variabel lama (--jp-navy, --jp-teal, --jp-gold, …) tetap
   dipertahankan sebagai ALIAS agar 500+ aturan & inline style
   di view tidak perlu disentuh.
   ============================================================ */

:root {
  /* --- Palet dasar Reatoz --- */
  --rzt-violet-900: #4c1d95;
  --rzt-violet: #6d28d9;
  --rzt-violet-2: #7c3aed;
  --rzt-magenta: #a21caf;
  --rzt-fuchsia: #d946ef;
  --rzt-pink: #ec4899;
  --rzt-coral: #fb7185;
  --rzt-orange: #fb923c;
  --rzt-lime: #bef264;
  --rzt-lime-2: #a3e635;
  --rzt-cyan: #22d3ee;

  /* --- Netral --- */
  --rzt-ink: #1a1235;
  --rzt-ink-soft: #5b5470;
  --rzt-line: #ece8f7;
  --rzt-bg: #fbf8ff;
  --rzt-card: #ffffff;

  /* --- Gradien & efek --- */
  --rzt-grad-hero: linear-gradient(135deg, #4c1d95 0%, #6d28d9 46%, #a21caf 100%);
  --rzt-grad-cta: linear-gradient(120deg, #7c3aed 0%, #a21caf 100%);
  --rzt-grad-vivid: linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%);
  --rzt-grad-soft: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(236, 72, 153, .12));
  --rzt-radius: 18px;
  --rzt-shadow: 0 22px 45px -30px rgba(76, 29, 149, .5);

  /* --- Alias kompatibilitas (nama lama) --- */
  --jp-navy: var(--rzt-violet-900);
  --jp-navy-2: var(--rzt-violet);
  --jp-teal: var(--rzt-violet);
  --jp-teal-dark: var(--rzt-violet-900);
  --jp-gold: var(--rzt-lime);
  --jp-ink: var(--rzt-ink);
  --jp-soft: var(--rzt-ink-soft);
  --jp-line: var(--rzt-line);
  --jp-bg: var(--rzt-bg);
  --jp-card: var(--rzt-card);
  --jp-radius: var(--rzt-radius);
  --jp-shadow: var(--rzt-shadow);
}

* { box-sizing: border-box; }

body.jp-page {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--jp-ink);
  background: var(--jp-bg);
  -webkit-font-smoothing: antialiased;
}

.jp-container { width: min(1160px, 92vw); margin: 0 auto; }
.jp-narrow { width: min(820px, 92vw); margin: 0 auto; }

a { color: var(--jp-teal-dark); text-decoration: none; }
a:hover { color: var(--jp-teal); }

/* ---------- NAVBAR (kaca terang) ---------- */
.jp-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid var(--rzt-line);
  box-shadow: 0 12px 32px -28px rgba(76, 29, 149, .6);
}
.jp-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 74px;
}
.jp-brand { display: inline-flex; align-items: center; gap: 10px; }
.jp-brand img, .jp-brand svg { height: 44px; width: auto; }
/* Navbar terang: logo tampil polos tanpa alas putih. */
.jp-nav .jp-brand-mark { background: transparent; border-radius: 0; padding: 0; box-shadow: none; }
.jp-nav .jp-brand-text { color: var(--rzt-violet-900); }
.jp-nav .jp-brand-text span { color: var(--rzt-pink); font-weight: 400; }
.jp-nav-toggle {
  display: none; border: 1px solid var(--rzt-line); background: #fff;
  color: var(--rzt-ink); border-radius: 10px; width: 42px; height: 42px; font-size: 1.1rem; cursor: pointer;
}
.jp-nav-links { display: flex; align-items: center; gap: 4px; }
.jp-nav-links a {
  color: var(--rzt-ink-soft); font-size: .92rem; font-weight: 500;
  padding: 9px 14px; border-radius: 10px; transition: .18s;
}
.jp-nav-links a:hover { color: var(--rzt-violet-900); background: rgba(124, 58, 237, .1); }
.jp-nav-links a.is-aktif { color: #fff; background: var(--rzt-violet); box-shadow: 0 10px 20px -12px rgba(109, 40, 217, .9); }
.jp-nav-cta {
  margin-left: 8px; background: var(--rzt-grad-cta); color: #fff !important;
  padding: 10px 18px !important; font-weight: 600 !important;
  box-shadow: 0 12px 22px -14px rgba(162, 28, 175, .95);
}
.jp-nav-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ---------- TOMBOL ---------- */
.jp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px; padding: 12px 22px;
  font-weight: 600; font-size: .94rem; cursor: pointer; transition: .18s;
  text-decoration: none !important;
}
.jp-btn i { font-size: .88em; }
.jp-btn-primary { background: var(--rzt-grad-cta); color: #fff; box-shadow: 0 14px 26px -18px rgba(109, 40, 217, .95); }
.jp-btn-primary:hover { filter: brightness(1.07); color: #fff; transform: translateY(-1px); }
.jp-btn-gold { background: var(--rzt-lime); color: var(--rzt-ink); }
.jp-btn-gold:hover { background: var(--rzt-lime-2); color: var(--rzt-ink); }
.jp-btn-ghost { border-color: rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .08); }
.jp-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.jp-btn-outline { border-color: var(--jp-line); background: #fff; color: var(--jp-ink); }
.jp-btn-outline:hover { border-color: var(--rzt-violet); color: var(--jp-teal-dark); background: rgba(124, 58, 237, .05); }
.jp-btn-sm { padding: 8px 16px; font-size: .85rem; }
.jp-btn[disabled], .jp-btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* ---------- HERO ---------- */
.jp-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(760px 340px at 92% -12%, rgba(251, 146, 60, .42), transparent 62%),
    radial-gradient(640px 300px at 6% 112%, rgba(34, 211, 238, .34), transparent 58%),
    radial-gradient(520px 260px at 58% 118%, rgba(190, 242, 100, .26), transparent 62%),
    var(--rzt-grad-hero);
}
.jp-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
}
.jp-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px;
  align-items: center; padding: 84px 0 90px;
}
.jp-overline {
  display: inline-block; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: var(--rzt-lime);
  background: rgba(255, 255, 255, .1); border-radius: 999px;
  padding: 6px 13px; margin-bottom: 14px;
}
.jp-hero h1 {
  font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.12; margin: 0 0 18px;
  font-weight: 700; letter-spacing: -.02em; color: #fff;
}
.jp-hero p { color: #ece7ff; font-size: 1.02rem; line-height: 1.75; margin: 0 0 28px; max-width: 560px; }
.jp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.jp-hero-panel {
  background: rgba(24, 8, 74, .34);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 22px; padding: 26px;
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .7);
}
.jp-hero-panel h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rzt-lime); margin: 0 0 18px; font-weight: 700; }
.jp-stat { display: flex; align-items: baseline; justify-content: space-between; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.18); }
.jp-stat:last-child { border-bottom: 0; }
.jp-stat strong { font-size: 1.7rem; color: #fff; font-weight: 700; }
.jp-stat span { color: #ddd1ff; font-size: .88rem; }
.jp-hero-note { margin-top: 18px; font-size: .78rem; color: #ddd1ff; display: flex; gap: 8px; align-items: center; }

/* ---------- SECTION ---------- */
.jp-section { padding: 76px 0; }
.jp-section-alt { background: #fff; border-top: 1px solid var(--jp-line); border-bottom: 1px solid var(--jp-line); }
.jp-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.jp-section-head h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); margin: 0; font-weight: 600; letter-spacing: -.015em; color: var(--jp-ink); }
.jp-section-head p { margin: 8px 0 0; color: var(--jp-soft); max-width: 620px; line-height: 1.7; }
.jp-link-more { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.jp-link-more i { font-size: .75em; margin-left: 4px; }

/* ---------- KARTU KONTEN ---------- */
.jp-grid { display: grid; gap: 22px; }
.jp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.jp-card {
  background: var(--jp-card); border: 1px solid var(--jp-line); border-radius: var(--jp-radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--jp-shadow); transition: .2s;
}
.jp-card:hover { transform: translateY(-3px); border-color: rgba(124, 58, 237, .38); box-shadow: 0 26px 50px -32px rgba(76, 29, 149, .55); }
.jp-card-media { display: block; aspect-ratio: 16 / 10; background: #f1ecff; overflow: hidden; }
.jp-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-card-media-kosong {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--rzt-grad-soft);
  color: var(--rzt-violet); font-size: 1.8rem;
}
.jp-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.jp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--jp-soft); margin-bottom: 10px; }
.jp-meta i { margin-right: 5px; color: var(--rzt-pink); }
.jp-card h3 { font-size: 1.06rem; line-height: 1.45; margin: 0 0 10px; font-weight: 600; }
.jp-card h3 a { color: var(--jp-ink); }
.jp-card h3 a:hover { color: var(--jp-teal-dark); }
.jp-card p { color: var(--jp-soft); font-size: .9rem; line-height: 1.7; margin: 0 0 16px; }
.jp-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--jp-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jp-kategori {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rzt-violet-900);
  background: rgba(124, 58, 237, .1); border-radius: 999px; padding: 5px 11px;
}
.jp-chip {
  display: inline-block; font-size: .8rem; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--jp-line); background: #fff; color: var(--jp-soft);
}
.jp-chip:hover, .jp-chip.is-aktif { border-color: var(--rzt-violet); color: var(--rzt-violet-900); background: rgba(124,58,237,.08); }

/* ---------- KEUNGGULAN ---------- */
.jp-fitur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.jp-fitur-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jp-fitur-item { background: #fff; border: 1px solid var(--jp-line); border-radius: 16px; padding: 24px; }
.jp-fitur-ikon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, .16), rgba(236, 72, 153, .13)); color: var(--rzt-violet); margin-bottom: 16px; font-size: 1.1rem;
}
.jp-fitur-item h4 { font-size: .98rem; margin: 0 0 8px; font-weight: 600; }
.jp-fitur-item p { font-size: .85rem; line-height: 1.65; color: var(--jp-soft); margin: 0; }

/* ---------- BANNER HALAMAN ---------- */
.jp-banner {
  background:
    radial-gradient(560px 240px at 96% -20%, rgba(251, 146, 60, .38), transparent 62%),
    radial-gradient(420px 200px at 4% 120%, rgba(34, 211, 238, .3), transparent 60%),
    var(--rzt-grad-hero);
  color: #fff; padding: 56px 0 52px; position: relative; overflow: hidden;
}
.jp-banner::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(190, 242, 100, .3), transparent 70%);
}
.jp-banner h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0 0 10px; font-weight: 600; color: #fff; }
.jp-banner p { margin: 0; color: #ece7ff; max-width: 680px; line-height: 1.7; }
.jp-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: #cbbcf5; margin-bottom: 14px; }
.jp-breadcrumb a { color: #e9e3ff; }

/* ---------- WARNA TEKS DI PERMUKAAN GELAP ----------
   AppStack memasang `strong { color: var(--bs-emphasis-color) }` global,
   sehingga <strong> di atas latar gelap tampil gelap. Wariskan warna induk. */
.jp-footer strong,
.jp-cta-band strong,
.jp-banner strong,
.jp-hero strong,
.jp-cta-card strong { color: inherit; }

/* ---------- PITA AJAKAN (BAND) ---------- */
/* Latar gradien gelap: warna judul/teks harus eksplisit karena aturan
   heading global memasang warna gelap langsung pada elemen. */
.jp-cta-band { color: #fff; }
.jp-cta-band h2,
.jp-cta-band h3,
.jp-cta-band h4 { color: #fff; }
.jp-cta-band p { color: #ece7ff; }
.jp-cta-band .jp-overline { color: var(--rzt-lime); background: rgba(255, 255, 255, .14); }

/* ---------- DETAIL / RICH TEXT ---------- */
.jp-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.jp-article { background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius); padding: 34px; box-shadow: var(--jp-shadow); }
.jp-article-cover { border-radius: 14px; overflow: hidden; margin-bottom: 26px; }
.jp-article-cover img { width: 100%; display: block; }
.jp-article h1 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.28; margin: 0 0 16px; font-weight: 600; }
.jp-content { font-size: .97rem; line-height: 1.85; color: #2a3b4c; }
.jp-content p { margin: 0 0 16px; }
.jp-content h2, .jp-content h3, .jp-content h4 { margin: 28px 0 12px; font-weight: 600; color: var(--jp-ink); }
.jp-content ul, .jp-content ol { margin: 0 0 18px; padding-left: 22px; }
.jp-content li { margin-bottom: 8px; }
.jp-content img { max-width: 100%; border-radius: 12px; height: auto; }
.jp-content blockquote { margin: 22px 0; padding: 16px 22px; border-left: 3px solid var(--jp-gold); background: #f8fafc; color: var(--jp-soft); }
.jp-content a { text-decoration: underline; }

.jp-side { display: grid; gap: 18px; }
.jp-side-card { background: #fff; border: 1px solid var(--jp-line); border-radius: 16px; padding: 22px; }
.jp-side-card h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--jp-soft); margin: 0 0 16px; font-weight: 600; }
.jp-side-list { display: grid; gap: 14px; }
.jp-side-item { display: flex; gap: 12px; align-items: flex-start; }
.jp-side-item img { width: 64px; height: 52px; object-fit: cover; border-radius: 9px; background: #e7eef4; }
.jp-side-ikon { width: 64px; height: 52px; flex: 0 0 64px; border-radius: 9px; background: #eef3f7; display: grid; place-items: center; color: #93a7b8; font-size: 1rem; }
.jp-side-item a { font-size: .86rem; font-weight: 500; line-height: 1.5; color: var(--jp-ink); }
.jp-side-item span { display: block; font-size: .74rem; color: var(--jp-soft); margin-top: 4px; }
.jp-cta-card { background: var(--rzt-grad-hero); color: #fff; box-shadow: 0 26px 50px -34px rgba(76, 29, 149, .9); }
.jp-cta-card h4 { color: var(--rzt-lime); }
.jp-cta-card p { font-size: .87rem; color: #ddd1ff; line-height: 1.65; }
.jp-cta-card .jp-btn { width: 100%; margin-top: 10px; }

/* ---------- INFO PRODUK ---------- */
.jp-fitur-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.jp-fitur-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.6; color: #2a3b4c; }
.jp-fitur-list i { color: var(--jp-teal); margin-top: 4px; }

/* ---------- LOWONGAN ---------- */
.jp-job { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 22px 24px; }
.jp-job h3 { margin: 0 0 6px; font-size: 1.02rem; }
.jp-job p { margin: 0; }
.jp-job-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.jp-tag { font-size: .72rem; border-radius: 999px; padding: 4px 10px; background: #f1f5f9; color: var(--jp-soft); display: inline-flex; gap: 5px; align-items: center; }
.jp-badge-buka { background: rgba(124,58,237,.16); color: var(--jp-teal-dark); font-weight: 600; }

/* ---------- FORM ---------- */
.jp-form-card { background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius); padding: 30px; box-shadow: var(--jp-shadow); }
.jp-field { margin-bottom: 16px; }
.jp-field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 7px; color: #33475b; }
.jp-field .wajib { color: #d9534f; }
.jp-captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.jp-captcha-gambar {
  display: block; width: 168px; height: 52px; border: 1px solid var(--jp-line);
  border-radius: 9px; background: #f2f7fb; user-select: none;
}
.jp-captcha-refresh {
  border: 0; background: transparent; color: var(--jp-teal-dark); cursor: pointer;
  font-size: .82rem; font-weight: 600; padding: 4px; display: inline-flex; align-items: center; gap: 6px;
}
.jp-captcha-refresh:hover { color: var(--jp-teal); text-decoration: underline; }
.jp-captcha .jp-input { max-width: 220px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }

.jp-input, .jp-select, .jp-textarea {
  width: 100%; border: 1px solid #d8e2ec; border-radius: 11px; padding: 11px 14px;
  font-family: inherit; font-size: .92rem; color: var(--jp-ink); background: #fff;
  transition: .16s;
}
.jp-input:focus, .jp-select:focus, .jp-textarea:focus {
  outline: none; border-color: var(--rzt-violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
}
.jp-textarea { min-height: 130px; resize: vertical; }
.jp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jp-hint { font-size: .76rem; color: var(--jp-soft); margin-top: 6px; }
.jp-alert { border-radius: 12px; padding: 14px 16px; font-size: .88rem; margin-bottom: 18px; display: flex; gap: 10px; align-items: flex-start; }
.jp-alert-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.jp-alert-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.jp-alert-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ---------- KONTAK ---------- */
.jp-kontak-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: start; }
.jp-kontak-item { display: flex; gap: 14px; margin-bottom: 22px; }
.jp-kontak-ikon { width: 42px; height: 42px; border-radius: 12px; background: rgba(124,58,237,.16); color: var(--jp-teal-dark); display: grid; place-items: center; flex: 0 0 42px; }
.jp-kontak-item strong { display: block; font-size: .82rem; color: var(--jp-soft); font-weight: 500; margin-bottom: 3px; }
.jp-kontak-item span, .jp-kontak-item a { font-size: .94rem; color: var(--jp-ink); line-height: 1.6; }

/* ---------- PAGINATION ---------- */
.jp-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.jp-pagination a, .jp-pagination span {
  min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--jp-line); background: #fff; font-size: .86rem; color: var(--jp-soft); padding: 0 12px;
}
.jp-pagination a:hover { border-color: var(--jp-teal); color: var(--jp-teal-dark); }
.jp-pagination .is-aktif { background: var(--rzt-violet); border-color: var(--rzt-violet); color: #fff; }
.jp-pagination .is-disabled { opacity: .45; }

.jp-empty { text-align: center; padding: 60px 24px; background: #fff; border: 1px dashed #d9d0f2; border-radius: var(--jp-radius); color: var(--jp-soft); }
.jp-empty i { font-size: 1.9rem; color: #b3c2d0; margin-bottom: 12px; display: block; }

.jp-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.jp-search { display: flex; gap: 8px; background: #fff; border: 1px solid var(--jp-line); border-radius: 12px; padding: 5px; }
.jp-search input { border: 0; padding: 8px 10px; font-family: inherit; font-size: .88rem; min-width: 200px; outline: none; }
.jp-search button { border: 0; background: var(--rzt-grad-cta); color: #fff; border-radius: 9px; padding: 0 14px; cursor: pointer; }

/* ---------- FOOTER ---------- */
.jp-footer { background: linear-gradient(160deg, #2a1065 0%, #4c1d95 58%, #6d28d9 100%); color: #cbbcf5; padding: 56px 0 26px; margin-top: 0; }
.jp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.1); }
.jp-footer h5 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; font-weight: 600; }
.jp-footer p { font-size: .86rem; line-height: 1.75; margin: 0 0 14px; }
.jp-footer a { color: #cbbcf5; font-size: .86rem; line-height: 2; }
.jp-footer a:hover { color: #fff; }
.jp-footer-brand { display: inline-flex; margin-bottom: 14px; }
.jp-footer-brand img, .jp-footer-brand svg { height: 42px; width: auto; }
.jp-sosial { display: flex; gap: 10px; margin-top: 16px; }
.jp-sosial a {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; color: #d7e3ec; font-size: .9rem;
}
.jp-sosial a:hover { background: var(--rzt-grad-cta); border-color: transparent; color: #fff; }
.jp-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: .78rem; color: #b6a6e0; }
.jp-footer-legal { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: .74rem; color: #b6a6e0; }
.jp-legal-note {
  margin: 22px 0 0; padding: 14px 18px; border-radius: 12px; background: rgba(124, 58, 237, .07);
  border: 1px solid rgba(124, 58, 237, .18); color: var(--rzt-ink-soft); font-size: .82rem; line-height: 1.6;
}

/* ---------- RESPONSIF ---------- */
@media (max-width: 991.98px) {
  .jp-hero-inner { grid-template-columns: 1fr; padding: 62px 0 70px; gap: 34px; }
  .jp-detail-grid { grid-template-columns: 1fr; }
  .jp-kontak-grid { grid-template-columns: 1fr; }
  .jp-footer-grid { grid-template-columns: 1fr 1fr; }
  .jp-fitur, .jp-fitur-dua { grid-template-columns: 1fr 1fr; }
  .jp-grid-3, .jp-grid-2 { grid-template-columns: 1fr 1fr; }

  .jp-nav-toggle { display: inline-grid; place-items: center; }
  .jp-nav-links {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: #fff; padding: 14px 5vw 20px; gap: 2px;
    border-bottom: 1px solid var(--rzt-line);
    box-shadow: 0 22px 40px -30px rgba(76, 29, 149, .55);
    display: none;
  }
  .jp-nav-links.is-open { display: flex; }
  .jp-nav-links a { padding: 12px; }
  .jp-nav-cta { margin: 8px 0 0; text-align: center; }
}

@media (max-width: 640px) {
  .jp-section { padding: 54px 0; }
  .jp-grid-3, .jp-grid-2 { grid-template-columns: 1fr; }
  .jp-fitur, .jp-fitur-dua { grid-template-columns: 1fr; }
  .jp-footer-grid { grid-template-columns: 1fr; }
  .jp-article { padding: 22px; }
  .jp-form-row { grid-template-columns: 1fr; }
  .jp-job { grid-template-columns: 1fr; }
  .jp-job .jp-btn { width: 100%; }
  .jp-banner { padding: 40px 0; }
}

/* ---------- LOKASI / PETA ---------- */
#lokasi { scroll-margin-top: 90px; }
.jp-lokasi-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: stretch; }
.jp-lokasi-card {
  background: #fff; border: 1px solid var(--jp-line); border-radius: var(--jp-radius);
  padding: 30px; box-shadow: var(--jp-shadow);
}
.jp-lokasi-card h3 { font-size: 1.15rem; margin: 0 0 8px; font-weight: 600; }
.jp-lokasi-sub { color: var(--jp-soft); font-size: .9rem; line-height: 1.7; margin: 0 0 22px; }
.jp-lokasi-list .jp-kontak-item:last-child { margin-bottom: 0; }
.jp-lokasi-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.jp-map {
  position: relative; border: 1px solid var(--jp-line); border-radius: var(--jp-radius);
  overflow: hidden; background: #e7eef4; min-height: 400px; box-shadow: var(--jp-shadow);
}
.jp-map iframe { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }
.jp-map-kosong {
  position: absolute; inset: 0; z-index: 0; display: grid; place-content: center; gap: 10px;
  text-align: center; color: #7b8fa1; font-size: .86rem; padding: 30px;
}
.jp-map-kosong a { font-weight: 600; }
.jp-map-kosong i { font-size: 1.8rem; color: #a5b7c6; }

@media (max-width: 991.98px) {
  .jp-lokasi-grid { grid-template-columns: 1fr; }
  .jp-map, .jp-map iframe, .jp-map-kosong { min-height: 320px; }
}

/* ---------- PORTOFOLIO ---------- */
.jp-teknologi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.jp-teknologi span {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  background: #edf6f4; color: var(--jp-teal-dark); font-size: .7rem; font-weight: 600;
  border: 1px solid #d6ebe7;
}
.jp-meta .jp-kategori { margin-bottom: 0; }

/* ---------- TOGGLE TEMA PUBLIK ---------- */
.jp-theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--rzt-line);
  background: #fff; color: var(--rzt-violet); cursor: pointer;
  margin-left: 4px; font-size: .95rem; transition: .18s;
}
.jp-theme-toggle:hover { background: rgba(124, 58, 237, .1); color: var(--rzt-violet-900); border-color: var(--rzt-violet); }
.jp-theme-toggle .jp-ikon-terang { display: none; }
html[data-theme="dark"] .jp-theme-toggle .jp-ikon-gelap { display: none; }
html[data-theme="dark"] .jp-theme-toggle .jp-ikon-terang { display: inline-block; }
html[data-theme="dark"] .jp-theme-toggle { background: var(--jp-card); color: #d8b4fe; }

@media (max-width: 991.98px) {
  .jp-theme-toggle { align-self: flex-start; margin: 6px 0; }
}

/* ---------- TEMA GELAP PUBLIK ---------- */
html[data-theme="dark"] {
  --jp-ink: #ede9fe;
  --jp-soft: #b3a8d6;
  --jp-line: #322a52;
  --jp-bg: #0d0820;
  --jp-card: #171034;
  --jp-shadow: 0 18px 40px -28px rgba(0,0,0,.85);
  color-scheme: dark;
}
html[data-theme="dark"] body.jp-page { background: var(--jp-bg); color: var(--jp-ink); }
html[data-theme="dark"] .jp-nav { background: rgba(13, 8, 32, .92); }
html[data-theme="dark"] .jp-section-alt { background: #120b28; border-color: var(--jp-line); }
html[data-theme="dark"] .jp-card { background: var(--jp-card); border-color: var(--jp-line); }
html[data-theme="dark"] .jp-card:hover { border-color: #4c3a86; }
html[data-theme="dark"] .jp-card-media { background: #241a45; }
html[data-theme="dark"] .jp-card h3 a { color: var(--jp-ink); }
html[data-theme="dark"] .jp-card h3 a:hover { color: #d8b4fe; }
html[data-theme="dark"] .jp-card p,
html[data-theme="dark"] .jp-section-head p { color: var(--jp-soft); }
html[data-theme="dark"] .jp-chip { background: var(--jp-card); border-color: var(--jp-line); color: var(--jp-soft); }
html[data-theme="dark"] .jp-chip:hover,
html[data-theme="dark"] .jp-chip.is-aktif { color: #d8b4fe; border-color: var(--jp-teal); }
html[data-theme="dark"] .jp-fitur-item { background: var(--jp-card); border-color: var(--jp-line); }
html[data-theme="dark"] .jp-article,
html[data-theme="dark"] .jp-side-card,
html[data-theme="dark"] .jp-form-card,
html[data-theme="dark"] .jp-lokasi-card { background: var(--jp-card); border-color: var(--jp-line); }
html[data-theme="dark"] .jp-content { color: #ded7f4; }
html[data-theme="dark"] .jp-content h2,
html[data-theme="dark"] .jp-content h3,
html[data-theme="dark"] .jp-content h4 { color: var(--jp-ink); }
html[data-theme="dark"] .jp-content blockquote { background: #1e1640; color: var(--jp-soft); }
html[data-theme="dark"] .jp-side-ikon { background: #241a45; color: #b3a8d6; }
html[data-theme="dark"] .jp-side-item a { color: var(--jp-ink); }
html[data-theme="dark"] .jp-btn-outline { background: var(--jp-card); border-color: var(--jp-line); color: var(--jp-ink); }
html[data-theme="dark"] .jp-btn-outline:hover { color: #d8b4fe; border-color: var(--jp-teal); }
html[data-theme="dark"] .jp-field label { color: #ded7f4; }
html[data-theme="dark"] .jp-input,
html[data-theme="dark"] .jp-select,
html[data-theme="dark"] .jp-textarea { background: #120b28; border-color: #33285c; color: var(--jp-ink); }
html[data-theme="dark"] .jp-input::placeholder,
html[data-theme="dark"] .jp-textarea::placeholder { color: #8b7fb0; }
html[data-theme="dark"] .jp-captcha-gambar { background: #f3eefe; }
html[data-theme="dark"] .jp-captcha-refresh { color: #d8b4fe; }
html[data-theme="dark"] .jp-alert-success { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(110,231,183,.3); }
html[data-theme="dark"] .jp-alert-danger { background: rgba(248,113,113,.12); color: #fca5a5; border-color: rgba(252,165,165,.3); }
html[data-theme="dark"] .jp-alert-info { background: rgba(96,165,250,.12); color: #93c5fd; border-color: rgba(147,197,253,.3); }
html[data-theme="dark"] .jp-tag { background: #241a45; color: var(--jp-soft); }
html[data-theme="dark"] .jp-pagination a,
html[data-theme="dark"] .jp-pagination span { background: var(--jp-card); border-color: var(--jp-line); color: var(--jp-soft); }
html[data-theme="dark"] .jp-pagination .is-aktif { background: var(--jp-teal); border-color: var(--jp-teal); color: #fff; }
html[data-theme="dark"] .jp-empty { background: var(--jp-card); border-color: #4c3a86; }
html[data-theme="dark"] .jp-empty i { color: #8b7fb0; }
html[data-theme="dark"] .jp-search { background: var(--jp-card); border-color: var(--jp-line); }
html[data-theme="dark"] .jp-search input { background: transparent; color: var(--jp-ink); }
html[data-theme="dark"] .jp-map { background: #241a45; }
html[data-theme="dark"] .jp-map-kosong,
html[data-theme="dark"] .jp-lokasi-sub { color: var(--jp-soft); }
html[data-theme="dark"] .jp-legal-note { background: rgba(124,58,237,.16); border-color: rgba(216,180,254,.28); color: #e6ddff; }
html[data-theme="dark"] .jp-teknologi span { background: #241a45; border-color: #3f3270; color: #d8b4fe; }
html[data-theme="dark"] .jp-kategori { color: #d8b4fe; background: rgba(124,58,237,.2); }
html[data-theme="dark"] .jp-fitur-list li { color: #ded7f4; }
html[data-theme="dark"] .jp-kontak-item span,
html[data-theme="dark"] .jp-kontak-item a { color: var(--jp-ink); }
html[data-theme="dark"] .jp-footer { background: #0a0518; }
html[data-theme="dark"] .jp-link-more,
html[data-theme="dark"] .jp-content a { color: #d8b4fe; }
html[data-theme="dark"] .jp-link-more:hover,
html[data-theme="dark"] .jp-content a:hover { color: #e9e3ff; }
html[data-theme="dark"] .jp-side-item a:hover { color: #d8b4fe; }
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 { color: var(--jp-ink); }
html[data-theme="dark"] .jp-hero h1,
html[data-theme="dark"] .jp-banner h1,
html[data-theme="dark"] .jp-footer h5 { color: #fff; }
html[data-theme="dark"] .jp-overline { color: var(--jp-gold) !important; }

/* ---------- GALERI PUBLIK ---------- */
.jp-galeri-publik .jp-card-media { aspect-ratio: 4 / 3; }
.jp-galeri-publik .jp-card-media img { transition: transform .3s; }
.jp-galeri-publik .jp-card:hover .jp-card-media img { transform: scale(1.04); }
.jp-galeri-hit { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--jp-soft); }
.jp-galeri-detail-foto { display: block; width: 100%; max-height: 76vh; object-fit: contain; background: #1a1136; border-radius: 14px; }
.jp-galeri-detail-info { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--jp-soft); font-size: .84rem; margin-top: 14px; }
html[data-theme="dark"] .jp-galeri-detail-foto { background: #0a0518; }