/* =========================================================
   VARIAN 4 — "Lembar"
   Satu kartu besar mengambang di tengah layar: panel kiri biru dengan
   profil, panel kanan berisi halaman yang berganti. Rail ikon di luar
   kartu sebelah kanan. Kelas berawalan .lb-
   ========================================================= */

:root {
  --lb-latar:       #F2F4F7;
  --lb-kartu:       #FFFFFF;
  --lb-garis:       #E6E9EE;
  --lb-teks:        #1F2733;
  --lb-redup:       #5F6B7A;
  --lb-teks-lunak:  #3D4856;   /* teks bacaan panjang (rincian proyek), 9,3:1 di atas putih */
  /* Biru panel dipilih yang masih 4,8:1 dengan teks putih.
     Biru secerah acuan (#00B8F1) cuma 2,2:1 — teks kecil jadi sulit dibaca. */
  --lb-biru:        #0078B8;
  --lb-biru-hover:  #00679E;
  --lb-biru-terang: #1296D8;   /* hiasan & teks besar (3,3:1 di atas putih) */
  --lb-biru-muda:   #E8F4FB;   /* juga warna latar foto (tools/siapkan-foto.py) */
  --lb-merah:       #B42318;   /* pesan salah isian / gagal kirim, 6,6:1 di atas putih */
  --lb-hijau:       #177245;   /* pesan terkirim, 6,0:1 di atas putih */

  --lb-r:      30px;
  --lb-r-kecil:16px;
  --lb-sisi:   340px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lb {
  margin: 0;
  background: var(--lb-latar);
  color: var(--lb-teks);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--lb-biru-terang); outline-offset: 3px; }

.lb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lb-lewati {
  position: absolute; left: -9999px; top: 12px;
  background: var(--lb-biru); color: #fff;
  padding: 10px 18px; border-radius: 999px; z-index: 80; font-weight: 600;
}
.lb-lewati:focus { left: 20px; }

/* ================= PANGGUNG ================= */
.lb-panggung {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 28px 104px 28px 40px;
  overflow: hidden;
}
/* Hiasan: titik-titik di kiri atas dan tanda silang pudar di kanan atas */
.lb-panggung::before {
  content: '';
  position: absolute; left: 34px; top: 26px;
  width: 150px; height: 92px;
  background-image: radial-gradient(#C9D2DD 1.6px, transparent 1.7px);
  background-size: 15px 15px;
  opacity: .9;
}
.lb-panggung::after {
  content: '';
  position: absolute; left: 30%; top: -26px;
  width: 110px; height: 110px;
  background:
    linear-gradient(45deg, transparent 45%, #E1E6EC 45%, #E1E6EC 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #E1E6EC 45%, #E1E6EC 55%, transparent 55%);
  opacity: .9;
}

/* ================= KARTU ================= */
.lb-kartu {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px;
  height: clamp(620px, 88vh, 800px);
  display: grid;
  grid-template-columns: var(--lb-sisi) minmax(0, 1fr);
  background: var(--lb-kartu);
  border-radius: var(--lb-r);
  box-shadow: 0 30px 70px -40px rgba(30, 50, 80, .35), 0 2px 8px rgba(30, 50, 80, .05);
  overflow: hidden;
}

/* ---------- Panel kiri ---------- */
.lb-sisi {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 32px 28px;
  background: var(--lb-biru);
  color: #fff;
  text-align: center;
}
.lb-sisi__foto {
  width: 176px; height: 176px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, .95);
  overflow: hidden;
  background: #DDEAF2;
  box-shadow: 0 16px 34px -18px rgba(0, 20, 40, .6);
  margin-bottom: 24px;
}
.lb-sisi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.lb-sisi__nama { margin: 0 0 4px; font-size: 27px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.lb-sisi__peran { margin: 0 0 18px; font-size: 14px; color: rgba(255, 255, 255, .92); }

.lb-sisi__sosial { display: flex; gap: 8px; margin-bottom: 30px; }
.lb-sisi__sosial a {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  transition: background 180ms ease, color 180ms ease;
}
.lb-sisi__sosial a:hover { background: #fff; color: var(--lb-biru); }
/* Ikon: garis (amplop) maupun isi penuh (logo merek — path-nya membawa fill sendiri) */
.lb-sisi__sosial svg {
  display: block; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Sakelar bahasa: pil putih di pojok kanan atas KARTU — di layar lebar jatuh di area putih (tempat
   orang biasa mencari pilihan bahasa), di HP di atas kepala biru. Latar putih sendiri, jadi isi lembar
   yang tergulir di bawahnya tidak menabrak. Teks #5F6B7A di putih = 5,4:1; putih di #0078B8 = 4,8:1. */
.lb-bahasa {
  position: absolute; top: 20px; right: 22px; z-index: 4;
  display: flex; align-items: center; gap: 2px;
  padding: 4px 4px 4px 11px;
  background: #fff; border: 1px solid var(--lb-garis); border-radius: 999px;
  box-shadow: 0 10px 24px -16px rgba(30, 50, 80, .55);
}
.lb-bahasa__ikon {
  width: 18px; height: 18px; margin-right: 5px;
  fill: none; stroke: var(--lb-biru); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.lb-bahasa a {
  display: grid; place-items: center;
  min-width: 42px; min-height: 32px; padding: 0 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  color: var(--lb-redup); text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.lb-bahasa a:hover { color: var(--lb-biru); background: var(--lb-biru-muda); }
.lb-bahasa a[aria-current="true"] { background: var(--lb-biru); color: #fff; }

.lb-sisi__kaki { margin: auto 0 0; font-size: 12px; color: rgba(255, 255, 255, .85); }

/* ---------- Tombol pil ---------- */
.lb-pil {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 28px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 500; text-decoration: none;
  border: 2px solid var(--lb-garis);
  background: transparent; color: var(--lb-teks);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.lb-pil:hover { border-color: var(--lb-biru); color: var(--lb-biru); }
.lb-pil--putih { border-color: rgba(255, 255, 255, .9); color: #fff; }
.lb-pil--putih:hover { background: #fff; color: var(--lb-biru); border-color: #fff; }
.lb-pil--biru { background: var(--lb-biru); border-color: var(--lb-biru); color: #fff; }
.lb-pil--biru:hover { background: var(--lb-biru-hover); border-color: var(--lb-biru-hover); color: #fff; }

/* ---------- Panel kanan ---------- */
.lb-isi {
  position: relative;
  overflow-y: auto;
  padding: 50px clamp(28px, 4vw, 56px) 56px;
  scrollbar-width: thin;
  scrollbar-color: #CBD3DD transparent;
}

/* Tiap lembar hanya tampil satu kalau JS hidup; tanpa JS semuanya berurutan */
.js-lembar .lb-lembar { display: none; }
.js-lembar .lb-lembar.aktif { display: block; animation: lb-masuk 420ms cubic-bezier(.22, .68, .32, 1); }
.lb-lembar + .lb-lembar { margin-top: 56px; }
.js-lembar .lb-lembar + .lb-lembar { margin-top: 0; }
@keyframes lb-masuk {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-lembar .lb-lembar.aktif { animation: none; }
}

/* ---------- Judul ---------- */
.lb-judul {
  position: relative;
  margin: 48px 0 26px;
  padding-bottom: 12px;
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
}
.lb-judul span { color: var(--lb-biru-terang); }
.lb-judul::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 3px; border-radius: 3px;
  background: var(--lb-biru-muda);
  box-shadow: 0 0 0 0 transparent;
}
.lb-judul::before {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 18px; height: 3px; border-radius: 3px;
  background: var(--lb-biru-terang);
  z-index: 1;
}
.lb-judul--atas { margin-top: 0; font-size: clamp(26px, 2.8vw, 34px); }
.lb-subjudul { margin: 0 0 20px; font-size: 18px; font-weight: 600; }

.lb-p { margin: 0 0 22px; color: var(--lb-redup); max-width: 60ch; }
.lb-p--besar { font-size: 16.5px; }

/* ---------- Tentang ---------- */
.lb-perkenalan {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px); align-items: center;
}
.lb-perkenalan__foto {
  width: clamp(200px, 22vw, 270px); aspect-ratio: 1;
  border-radius: 50%;
  border: 12px solid #fff;
  box-shadow: 0 24px 50px -24px rgba(30, 50, 80, .45), 0 0 0 1px var(--lb-garis);
  overflow: hidden;
  background: var(--lb-biru-muda);
}
.lb-perkenalan__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }

.lb-putar { margin: 0 0 4px; min-height: 1.6em; font-size: 15px; color: var(--lb-redup); }
.lb-putar span { display: inline-block; transition: opacity 300ms ease, transform 300ms ease; }
.lb-putar span.ganti { opacity: 0; transform: translateY(6px); }

.lb-nama {
  margin: 0 0 16px;
  font-size: clamp(32px, 3.8vw, 46px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
}
.lb-aksi { display: flex; flex-wrap: wrap; gap: 12px; }

.lb-layanan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 34px; }
.lb-layanan article { display: flex; gap: 18px; align-items: flex-start; }
.lb-layanan h4 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; }
.lb-layanan p { margin: 0; font-size: 14px; color: var(--lb-redup); }

.lb-ikon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  fill: none; stroke: var(--lb-biru-terang); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.lb-ikon--kecil { width: 22px; height: 22px; }

/* "Dalam Angka" (K-25): tiga kotak lega, satu angka per kotak. Versi 9 angka dalam 3 kelompok
   (8 Okt) ditolak Sendy: kurang relevan & sesak di layar ≤ 1366px. */
.lb-angka {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.lb-angka > div {
  padding: 22px 16px;
  border: 1px solid var(--lb-garis);
  border-radius: var(--lb-r-kecil);
  text-align: center;
  container-type: inline-size;   /* ukuran huruf angka mengikuti lebar KOTAK, bukan lebar layar */
}
/* 17cqi = 17% lebar isi kotak: "12 minutes" (angka terpanjang) pas mengisi kotak tanpa meluber.
   Dulu clamp(…3vw…) mengikuti layar → angka meluber keluar kotak di ≤ 1366px (versi Inggris).
   Di bawah 1000px kotaknya menumpuk jadi satu kolom (terlalu sempit untuk tiga sejajar). */
.lb-angka strong {
  display: block;
  font-size: clamp(18px, 17cqi, 38px); font-weight: 600; line-height: 1.1; color: var(--lb-biru);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lb-angka span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--lb-redup); }
@media (max-width: 1000px) { .lb-angka { grid-template-columns: 1fr; } }

/* ---------- Perjalanan ---------- */
.lb-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px); }
/* Kontak: dua kolom hanya kalau tiap kolom muat alamat email utuh (±286px: ikon 36 + teks 250).
   Kalau tidak muat, otomatis satu kolom — dulu minmax(0, 1fr) membuat email menembus kolom form. */
.lb-dua--kontak { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.lb-garis { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--lb-biru-muda); }
.lb-garis li { position: relative; padding: 0 0 26px 26px; }
.lb-garis li:last-child { padding-bottom: 0; }
.lb-garis li::before {
  content: '';
  position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lb-biru-terang);
}
.lb-garis__cap {
  display: inline-block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 12px; border-radius: 999px;
  background: var(--lb-biru-muda); color: var(--lb-biru);
}
.lb-garis h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.lb-garis p { margin: 0; font-size: 14px; color: var(--lb-redup); }
.lb-garis .lb-garis__org { margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--lb-teks-lunak); }
.lb-garis .lb-garis__org:last-child { margin-bottom: 0; }
.lb-subjudul--jarak { margin-top: 34px; }

/* Testimoni (K-29): rekomendasi LinkedIn, dikutip apa adanya */
.lb-testi {
  position: relative; margin: 0; padding: 26px 28px 22px;
  border: 1px solid var(--lb-garis); border-radius: var(--lb-r-kecil); background: #FBFCFD;
}
.lb-testi::before {
  content: '\201C'; position: absolute; top: 4px; right: 22px;
  font-size: 96px; font-weight: 600; line-height: 1; color: var(--lb-biru-muda);
}
.lb-testi__kutip { position: relative; margin: 0 0 20px; }
.lb-testi__kutip p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--lb-teks-lunak); }
.lb-testi__kutip small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--lb-redup); }
.lb-testi__oleh { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; }
.lb-testi__inisial {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-size: 15px; font-weight: 600; background: var(--lb-biru-muda); color: var(--lb-biru);
}
.lb-testi__oleh > span:not(.lb-testi__inisial) { flex: 1 1 180px; min-width: 0; }
.lb-testi__oleh b { display: block; font-size: 15px; font-weight: 600; color: var(--lb-teks); }
.lb-testi__oleh small { display: block; font-size: 13px; color: var(--lb-redup); }
.lb-testi__sumber { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--lb-biru); text-decoration: none; }
.lb-testi__sumber:hover { text-decoration: underline; }

.lb-bar { margin-bottom: 18px; }
.lb-bar > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.lb-bar b { font-size: 14px; font-weight: 500; }
.lb-bar span { font-size: 12.5px; color: var(--lb-redup); }
.lb-bar i {
  display: block; height: 8px; border-radius: 999px;
  background: var(--lb-latar);
  border: 1px solid var(--lb-garis);
  overflow: hidden;
}
.lb-bar em {
  display: block; height: 100%; width: 0;
  background: var(--lb-biru-terang); border-radius: 999px;
  transition: width 900ms cubic-bezier(.22, .68, .32, 1);
}
/* Panjang bar mengikuti seberapa sering dipakai — bukan persentase karangan */
.lb-bar.jalan[data-level="tiap-hari"] em { width: 100%; }
.lb-bar.jalan[data-level="sering"]    em { width: 72%; }
.lb-bar.jalan[data-level="kadang"]    em { width: 46%; background: #9AA6B4; }
@media (prefers-reduced-motion: reduce) { .lb-bar em { transition: none; } }

/* ---------- Portofolio ---------- */
.lb-saring { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.lb-saring button {
  font-family: inherit; font-size: 13.5px;
  min-height: 40px; padding: 7px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--lb-redup);
  border: 1px solid var(--lb-garis);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.lb-saring button:hover { color: var(--lb-biru); border-color: var(--lb-biru-terang); }
.lb-saring button.aktif { background: var(--lb-biru); border-color: var(--lb-biru); color: #fff; }

/* Kartu: gambar di atas, teks di bawah; seluruh kartu bisa diklik (tombol di judul
   diregangkan lewat ::after) dan membuka popup rincian. Tanpa JS, rincian tampil di kartu. */
.lb-karya { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lb-karya article {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--lb-garis);
  border-radius: var(--lb-r-kecil);
  background: #fff;
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.lb-karya article:hover {
  border-color: #CFE3F1;
  box-shadow: 0 18px 34px -26px rgba(0, 90, 140, .5);
  transform: translateY(-3px);
}
.lb-karya article:has(.lb-karya__buka:focus-visible) { outline: 3px solid var(--lb-biru-terang); outline-offset: 3px; }
.lb-karya article.sembunyi { display: none; }

.lb-karya__gambar {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--lb-biru-muda);
  border-bottom: 1px solid var(--lb-garis);
  overflow: hidden;
}
.lb-karya__gambar img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
  transition: transform 500ms cubic-bezier(.22, .68, .32, 1);
}
.lb-karya article:hover .lb-karya__gambar img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .lb-karya article:hover .lb-karya__gambar img { transform: none; } }
/* Proyek tanpa layar (skrip, alat baris perintah): ubin ikon */
.lb-karya__gambar--ikon { display: grid; place-items: center; }
.lb-karya__gambar--ikon svg {
  width: 58px; height: 58px;
  fill: none; stroke: var(--lb-biru-terang); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.lb-kode {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 1.6;
  padding: 3px 11px; border-radius: 999px;
  background: #fff; color: var(--lb-biru);
  box-shadow: 0 4px 12px -6px rgba(30, 50, 80, .45);
}

.lb-karya__teks { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.lb-karya h4 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.lb-karya__buka {
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
}
/* Hanya kalau JS hidup: tanpa JS rincian tampil di kartu, dan lapisan ini akan menutupi tautannya */
.js-lembar .lb-karya__buka::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.lb-karya__buka:focus-visible { outline: none; }
.lb-karya__cap { font-size: 12.5px; color: var(--lb-redup); line-height: 1.5; }
.lb-karya__ringkas { margin: 2px 0 0; font-size: 13.5px; color: var(--lb-redup); line-height: 1.65; }

.lb-kosong { display: none; margin: 14px 0 0; color: var(--lb-redup); }
.lb-kosong.tampak { display: block; }

/* Rincian proyek: tampil di dalam kartu kalau JS mati (satu kolom), di popup kalau JS hidup
   (kepala → galeri → isi dua kolom). Aturan dasar di bawah = versi di dalam kartu; versi popup
   ditimpa di bagian "Popup rincian proyek". */
.lb-karya__rinci { padding: 0 18px 20px; font-size: 13.8px; color: var(--lb-redup); }
.js-lembar .lb-karya__rinci { display: none; }
.lb-rinci__galeri figure { margin: 0 0 14px; }
.lb-rinci__galeri img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--lb-garis);
  background: var(--lb-biru-muda);
}
.lb-rinci__galeri figcaption { margin-top: 6px; font-size: 12.5px; color: var(--lb-redup); line-height: 1.5; }

.lb-rinci__kisah { display: grid; gap: 12px; margin-bottom: 20px; }
.lb-rinci__blok { padding: 16px 18px; border-radius: 14px; background: #F6F8FA; }
.lb-rinci__blok--hasil { background: var(--lb-biru-muda); }
.lb-rinci__blok h5,
.lb-rinci__sub {
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lb-biru-hover);   /* #00679E: 5,5:1 di atas biru muda (#0078B8 cuma 4,3:1 di sana) */
}
.lb-rinci__blok p { margin: 0; line-height: 1.7; color: var(--lb-teks-lunak); }

.lb-rinci__fitur { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.lb-rinci__fitur li { position: relative; padding-left: 28px; line-height: 1.6; color: var(--lb-teks-lunak); }
.lb-rinci__fitur li::before {          /* tanda centang dalam lingkaran biru muda */
  content: ''; position: absolute; left: 0; top: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--lb-biru-muda) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.lb-rinci__riwayat {
  margin: 0 0 20px; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--lb-garis); line-height: 1.7;
}

.lb-rinci__meta { display: grid; gap: 14px; margin: 0 0 20px; }
.lb-rinci__meta dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lb-redup); }
.lb-rinci__meta dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; color: var(--lb-teks); line-height: 1.5; }
.lb-rinci__tek { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lb-rinci__tek li {
  font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--lb-teks);
  padding: 5px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--lb-garis);
}
.lb-rinci__tautan { margin: 0 0 16px; }
.lb-rinci__catatan { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--lb-redup); }

/* ---------- Popup rincian proyek ----------
   Lebar hampir selayar (maks. 1180px), SATU area gulir. Urutan: kepala → galeri → isi
   (kolom utama: Masalah & Hasil berdampingan, lalu "Yang dikerjakan" dua kolom;
   kolom samping: info, teknologi, tautan, catatan — ikut menempel saat digulir). */
.lb-popup {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 0; border: 0;
  border-radius: 24px;
  background: #fff; color: var(--lb-teks);
  box-shadow: 0 40px 90px -30px rgba(10, 30, 60, .55);
  overflow: hidden;
}
.lb-popup::backdrop { background: rgba(20, 32, 48, .6); }
.lb-popup[open] { animation: lb-masuk 320ms cubic-bezier(.22, .68, .32, 1); }
@media (prefers-reduced-motion: reduce) { .lb-popup[open] { animation: none; } }
html:has(.lb-popup[open]) { overflow: hidden; }

/* Area isi menerima fokus saat popup dibuka (autofocus, tabindex=-1): bukan tombol × — jadi tak
   ada cincin fokus tebal di situ, dan panah/PageDown langsung menggulir isi. */
.lb-popup__isi:focus { outline: none; }
.lb-popup__isi {
  max-height: calc(100vh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #CBD3DD transparent;
}
.lb-popup__tutup {
  position: absolute; right: 20px; top: 20px; z-index: 3;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--lb-garis); background: #fff; color: var(--lb-teks);
  font: 400 26px/1 'Poppins', sans-serif; cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(30, 50, 80, .5);
}
.lb-popup__tutup:hover { color: var(--lb-biru); border-color: var(--lb-biru-terang); }

.lb-popup__kepala { padding: 32px 88px 22px 56px; }
.lb-popup__kode {
  display: inline-block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.6;
  padding: 3px 12px; border-radius: 999px;
  background: var(--lb-biru-muda); color: var(--lb-biru-hover);
}
.lb-popup__judul {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
  color: var(--lb-teks);
}
.lb-popup__cap { margin: 0; font-size: 14.5px; color: var(--lb-redup); }

/* Galeri: satu gambar besar di tengah + deret gambar kecil */
.lb-popup__galeri { padding: 22px 56px 18px; background: #F2F4F7; border-block: 1px solid var(--lb-garis); }
.lb-galeri__utama { margin: 0; text-align: center; }
.lb-galeri__utama a { display: inline-block; max-width: 100%; border-radius: 14px; }
.lb-galeri__utama img {
  display: block; width: auto; height: auto;
  /* Sisakan ruang untuk kepala + keterangan + deret gambar kecil, supaya di layar laptop
     (768px) deretnya tetap terlihat tanpa menggulir */
  max-width: 100%; max-height: min(58vh, calc(100vh - 400px), 620px);
  margin: 0 auto;
  border-radius: 14px; border: 1px solid var(--lb-garis);
  background: #fff;
  box-shadow: 0 24px 50px -30px rgba(30, 50, 80, .5);
}
.lb-galeri__utama figcaption {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; font-size: 14px; color: var(--lb-redup);
}
.lb-galeri__utama figcaption span { color: var(--lb-teks); font-weight: 500; font-variant-numeric: tabular-nums; }
.lb-galeri__deret {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 12px; padding: 2px; overflow-x: auto; scrollbar-width: none;
}
.lb-galeri__deret button {
  flex: 0 0 auto; width: 112px; aspect-ratio: 16 / 9;
  padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  background: #fff; cursor: pointer; opacity: .6;
  transition: opacity 180ms ease, border-color 180ms ease;
}
.lb-galeri__deret button:hover { opacity: 1; }
.lb-galeri__deret button[aria-current="true"] { opacity: 1; border-color: var(--lb-biru); }
.lb-galeri__deret img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Isi: dua kolom */
.lb-popup__rincian { padding: 40px 56px 48px; }
.lb-popup .lb-rinci__teks {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start;
  font-size: 15px; color: var(--lb-teks-lunak);
}
.lb-popup .lb-rinci__kisah { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 36px; }
.lb-popup .lb-rinci__blok { padding: 22px 24px; border-radius: 16px; }
.lb-popup .lb-rinci__blok h5, .lb-popup .lb-rinci__sub { margin-bottom: 12px; font-size: 12px; }
.lb-popup .lb-rinci__blok p { font-size: 15.5px; line-height: 1.8; }
.lb-popup .lb-rinci__fitur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-bottom: 28px; }
.lb-popup .lb-rinci__fitur li { font-size: 15px; line-height: 1.65; padding-left: 32px; }
.lb-popup .lb-rinci__fitur li::before { width: 21px; height: 21px; top: 1px; }
.lb-popup .lb-rinci__riwayat { font-size: 14.5px; color: var(--lb-redup); }
.lb-popup .lb-rinci__samping {
  position: sticky; top: 24px;
  padding: 24px; border-radius: 18px;
  border: 1px solid var(--lb-garis); background: #FBFCFD;
}
.lb-popup .lb-rinci__meta { gap: 18px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--lb-garis); }
.lb-popup .lb-rinci__meta dd { font-size: 15px; }
.lb-popup .lb-rinci__tautan { display: flex; width: 100%; }

/* Proyek tanpa tangkapan layar: tanpa galeri, modal sedikit lebih ramping */
.lb-popup--teks { width: min(1040px, calc(100vw - 48px)); }
.lb-popup--teks .lb-popup__galeri { display: none; }
.lb-popup--teks .lb-popup__kepala { border-bottom: 1px solid var(--lb-garis); }

/* ---------- Sekarang ---------- */
.lb-catatan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lb-catatan article {
  border: 1px solid var(--lb-garis);
  border-radius: var(--lb-r-kecil);
  padding: 22px;
  background: linear-gradient(180deg, var(--lb-biru-muda), #fff 55%);
}
.lb-catatan__cap {
  display: inline-block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 12px; border-radius: 999px;
  background: var(--lb-biru); color: #fff;
}
.lb-catatan h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.lb-catatan p { margin: 0; font-size: 13.8px; color: var(--lb-redup); }

.lb-prinsip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.lb-prinsip li { position: relative; padding-left: 26px; font-size: 14.5px; }
.lb-prinsip li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--lb-biru-terang);
}

/* ---------- Kontak ---------- */
.lb-kontak { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lb-kontak li { display: flex; gap: 14px; align-items: flex-start; }
.lb-kontak span { display: grid; font-size: 14px; color: var(--lb-redup); }
.lb-kontak b { color: var(--lb-teks); font-weight: 600; }
.lb-kontak span { min-width: 0; }
.lb-kontak a { color: var(--lb-biru); text-decoration: none; overflow-wrap: anywhere; }  /* pengaman layar super sempit */
.lb-kontak a:hover { text-decoration: underline; }

.lb-form { display: grid; gap: 6px; }
.lb-form label { font-size: 13px; font-weight: 500; margin-top: 8px; }
.lb-form input, .lb-form textarea {
  width: 100%;
  font-family: inherit; font-size: 14.5px; color: var(--lb-teks);
  padding: 12px 16px;
  border: 1px solid var(--lb-garis);
  border-radius: 14px;
  background: #fff;
  resize: vertical;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.lb-form input::placeholder, .lb-form textarea::placeholder { color: #8E99A7; }
.lb-form input:focus, .lb-form textarea:focus {
  outline: none; border-color: var(--lb-biru-terang);
  box-shadow: 0 0 0 4px var(--lb-biru-muda);
}
.lb-form [aria-invalid="true"] { border-color: var(--lb-merah); }
.lb-form [aria-invalid="true"]:focus { border-color: var(--lb-merah); box-shadow: 0 0 0 4px #FCE9E7; }
.lb-form .lb-pil { justify-self: start; margin-top: 14px; }
.lb-form .lb-pil:disabled { opacity: .6; cursor: progress; }
.lb-form__nota { margin: 6px 0 0; font-size: 13px; color: var(--lb-biru); min-height: 1.2em; }
.lb-form__nota[data-jenis="salah"] { color: var(--lb-merah); }
.lb-form__nota[data-jenis="ok"] { color: var(--lb-hijau); }
.lb-form__nota a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Tombol lanjut di akhir lembar ----------
   Supaya pengunjung sadar isinya berganti per lembar (bukan hanya lewat rail). "Selanjutnya"
   biru penuh (ajakan utama), "Sebelumnya" bergaris. */
.lb-lanjut {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid var(--lb-garis);
}
.lb-lanjut a {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 10px 22px;
  border: 1px solid var(--lb-garis); border-radius: var(--lb-r-kecil);
  color: var(--lb-teks); text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.lb-lanjut a:hover { border-color: var(--lb-biru-terang); color: var(--lb-biru); }
.lb-lanjut span { display: grid; line-height: 1.35; }
.lb-lanjut small {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lb-redup);
}
.lb-lanjut b { font-size: 15.5px; font-weight: 600; }
.lb-lanjut svg {
  flex: 0 0 auto; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lb-lanjut__maju { margin-left: auto; text-align: right; }
.lb-lanjut .lb-lanjut__maju { background: var(--lb-biru); border-color: var(--lb-biru); color: #fff; }
.lb-lanjut .lb-lanjut__maju small { color: #fff; }   /* putih di atas #0078B8 = 4,8:1 */
.lb-lanjut .lb-lanjut__maju:hover { background: var(--lb-biru-hover); border-color: var(--lb-biru-hover); color: #fff; }

/* ================= RAIL & PANAH ================= */
.lb-rail {
  position: absolute; right: 26px; top: 50%;
  transform: translateY(calc(-50% - 44px));
  z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 8px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 14px 30px -18px rgba(30, 50, 80, .45);
}
.lb-rail a {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: #8793A2; text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}
.lb-rail a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lb-rail a:hover { color: var(--lb-biru); background: var(--lb-biru-muda); }
.lb-rail a.aktif { color: var(--lb-biru); }
.lb-rail b {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--lb-teks); color: #fff;
  font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 8px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 170ms ease, transform 170ms ease;
}
.lb-rail a:hover b, .lb-rail a:focus-visible b { opacity: 1; transform: translateY(-50%) translateX(0); }

.lb-panah {
  position: absolute; right: 26px; top: 50%;
  transform: translateY(calc(50% + 110px));
  z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
}
.lb-panah button {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer;
  color: #8793A2;
  box-shadow: 0 10px 24px -16px rgba(30, 50, 80, .5);
  transition: color 180ms ease;
}
.lb-panah button:hover { color: var(--lb-biru); }
.lb-panah svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Kaki halaman: di layar lebar hak cipta sudah ada di panel biru, jadi hanya tampil di HP */
.lb-bawah {
  display: none;
  text-align: center; font-size: 12.5px; color: var(--lb-redup);
}

/* ================= LAYAR SEDANG ================= */
@media (max-width: 1100px) {
  :root { --lb-sisi: 290px; }
  .lb-perkenalan { grid-template-columns: 1fr; justify-items: start; }
  .lb-catatan { grid-template-columns: 1fr; }
}

/* ================= LAYAR KECIL =================
   Kartu jadi selebar layar, panel kiri jadi kepala halaman,
   rail pindah ke bar bawah. */
@media (max-width: 860px) {
  .lb-panggung { padding: 0; display: block; }
  .lb-panggung::before, .lb-panggung::after { display: none; }

  .lb-kartu {
    height: auto; max-width: none;
    grid-template-columns: 1fr;
    border-radius: 0; box-shadow: none;
  }
  .lb-sisi { padding: 34px 20px 28px; }
  .lb-sisi__foto { width: 128px; height: 128px; margin-bottom: 16px; }
  .lb-sisi__sosial { margin-bottom: 18px; }
  .lb-sisi__kaki { display: none; }
  .lb-bahasa { top: 12px; right: 12px; }
  .lb-sisi { padding-top: 64px; }   /* ruang untuk sakelar bahasa di atas foto */

  /* Tombol lanjut membagi lebar layar; yang sendirian (lembar pertama/terakhir) tetap di sisinya */
  .lb-lanjut { margin-top: 40px; padding-top: 22px; gap: 10px; }
  .lb-lanjut a { flex: 1 1 140px; padding: 10px 16px; gap: 10px; }
  .lb-lanjut a:only-child { flex-grow: 0; }
  .lb-lanjut__maju { justify-content: flex-end; }

  .lb-isi { overflow: visible; padding: 34px 20px 110px; }

  .lb-rail {
    position: fixed; top: auto; bottom: 12px; right: 50%;
    transform: translateX(50%);
    flex-direction: row; gap: 2px;
    padding: 6px 8px;
  }
  .lb-rail b { display: none; }
  .lb-panah { display: none; }
  .lb-bawah { display: block; padding: 4px 0 90px; }   /* 90px: ruang untuk rail mengambang */

  .lb-dua, .lb-layanan, .lb-karya, .lb-angka, .lb-prinsip { grid-template-columns: 1fr; }

  /* Popup di HP: hampir selayar, semua satu kolom; kolom samping pindah ke bawah & tidak menempel */
  .lb-popup, .lb-popup--teks { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 18px; }
  .lb-popup__isi { max-height: calc(100vh - 16px); }
  .lb-popup__tutup { right: 12px; top: 12px; width: 40px; height: 40px; }
  .lb-popup__kepala { padding: 26px 64px 18px 20px; }
  .lb-popup__galeri { padding: 16px 14px 14px; }
  .lb-galeri__utama img { max-height: 44vh; border-radius: 10px; }
  .lb-galeri__utama figcaption { font-size: 13px; margin-top: 10px; }
  .lb-galeri__deret { justify-content: flex-start; }
  .lb-galeri__deret button { width: 84px; }
  .lb-popup__rincian { padding: 24px 20px 28px; }
  .lb-popup .lb-rinci__teks { grid-template-columns: 1fr; gap: 24px; }
  .lb-popup .lb-rinci__kisah, .lb-popup .lb-rinci__fitur { grid-template-columns: 1fr; }
  .lb-popup .lb-rinci__kisah { margin-bottom: 28px; }
  .lb-popup .lb-rinci__blok { padding: 18px 20px; }
  .lb-popup .lb-rinci__blok p { font-size: 15px; }
  .lb-popup .lb-rinci__samping { position: static; padding: 20px; }
  /* Foto sudah tampil di kepala halaman — foto besar Tentang disembunyikan supaya tidak dobel
     (permintaan Sendy 23 Sep) */
  .lb-perkenalan__foto { display: none; }
  /* Nama & kata berputar juga sudah ada di kepala halaman — lembar Tentang langsung ke paragraf
     (permintaan Sendy 23 Sep). Judul lembar disembunyikan secara visual saja: pembaca layar
     tetap mendapat judulnya. */
  .lb-putar { display: none; }
  .lb-nama {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .lb-perkenalan { justify-items: stretch; }
}