/* ==========================================================================
   BERSUARA — halaman muka publik
   --------------------------------------------------------------------------
   Dimuat SETELAH app.css dan hanya oleh satu halaman. Dari app.css yang dipakai
   cuma lapisan paling bawah: huruf Plus Jakarta Sans, kanal warna merek
   (--brand-rgb, --mint-rgb), dan reset. Selebihnya arah rupa tersendiri, karena
   halaman muka punya tugas yang berbeda dari aplikasi: aplikasi harus nyaman
   dipandang delapan jam, halaman ini harus meyakinkan dalam delapan detik.

   Arahnya satu kalimat: RUANG KENDALI MALAM. Latar biru tengah malam, dan
   setiap benda penting tampak menyala dari dalam, bukan diwarnai dari luar.
   Yang menyalakannya SATU rona saja, dalam tiga tingkat kepekatan, dan
   ronanya ditetapkan di aksen.css. Gradasi yang melompati rona memang mudah
   dibuat, tapi ia penanda paling khas halaman buatan mesin — dan ia membuat
   halaman terbaca sebagai hiasan, bukan sebagai perkakas. Warna PARTAI
   (hemicycle, pita logo, petak palet) tidak ikut: itu data, dan ejaannya
   dikunci di warna_partai(), bukan di sini.

   Halaman ini SELALU gelap dan tidak ikut sakelar tema aplikasi; alasannya ada
   di app/Views/beranda/index.php.

   Semua ukuran huruf memakai clamp() dengan satuan rem di kedua ujungnya,
   sehingga pengguna yang membesarkan huruf peramban tetap terlayani.
   ========================================================================== */

/* Didaftarkan supaya nilainya bisa dianimasikan; dipakai sorotan kursor. Tanpa
   dukungan @property variabelnya tetap bekerja, hanya perpindahannya yang
   berhenti mulus. Peningkatan, bukan syarat. */
@property --sorot {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* ----------------------------------------------------------------- token */
.lp {
  --lp-bg:        #060b12;
  --lp-bg-dalam:  #03070c;
  --lp-bg-angkat: #0a121d;

  /* Permukaan kaca. Alfanya rendah dengan sengaja: yang membuat panel terbaca
     bukan isian putihnya, melainkan garis rambut di tepi dan cahaya di
     baliknya. Naikkan angka ini dan panelnya langsung terlihat seperti kotak
     abu-abu yang ditempel. */
  --lp-kaca:      rgb(255 255 255 / .035);
  --lp-kaca-2:    rgb(255 255 255 / .055);
  --lp-line:      rgb(255 255 255 / .085);
  --lp-line-kuat: rgb(255 255 255 / .17);

  --lp-teks:      #e9eff7;
  --lp-teks-mut:  #9aabc0;
  --lp-teks-fnt:  #78899f;

  --lp-r:    1.25rem;
  --lp-r-sm: .875rem;
  --lp-r-xs: .625rem;

  --lp-pel: cubic-bezier(.16, 1, .3, 1);

  /* Aksennya datang dari aksen.css: SATU rona dalam tiga tingkat kepekatan
     (--ak-1 pekat, --ak-2 terang, --ak-3 sedang). Tidak ada nilai warna
     aksen yang ditulis di berkas ini, supaya arah rupa halaman muka dan
     layar masuk bisa diganti dari satu tempat.

     Palet warna PARTAI (hemicycle, pita logo, petak palet) tidak ikut:
     itu data, dan ejaannya dikunci di warna_partai(). */
  --lp-sig:        var(--ak-sig);
  --lp-sig-tombol: var(--ak-tombol);

  font-size: 16px;
  background: var(--lp-bg);
  color: var(--lp-teks);
}

/* app.css memberi <main> padding 1,25rem dan max-width 1600px karena di dalam
   aplikasi ia memang sebuah kolom konten. Di sini <main> adalah halamannya
   sendiri: tanpa baris ini tiap pita warna berhenti 20px sebelum tepi layar
   dan terbaca sebagai bingkai yang tidak disengaja. */
.lp main { padding: 0; max-width: none; margin: 0; }

.lp section { position: relative; }

/* ------------------------------------------------------------------ huruf */
.lp h1, .lp h2 { text-wrap: balance; color: var(--lp-teks); }

.lp h1 {
  font-size: clamp(2.35rem, 1.55rem + 3.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  /* Gradasi tipis dari putih ke biru pucat, hanya dua langkah, supaya terbaca
     sebagai cahaya yang jatuh dari atas dan bukan sebagai teks berwarna. */
  background: linear-gradient(178deg, #ffffff 30%, #b9cde2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.lp h3 { font-size: 1.0625rem; line-height: 1.35; color: var(--lp-teks); }
.lp p  { color: var(--lp-teks-mut); line-height: 1.7; }

/* Penekanan sefamili pada judul: satu frasa mengusung gradasi tanda tangan.
   Huruf dan beratnya sama dengan sekitarnya — yang berubah hanya warnanya,
   supaya terbaca sebagai sorotan, bukan sebagai jenis huruf lain yang
   ditempel. Induknya sudah meng-clip latarnya ke teks, jadi span ini harus
   membawa latar dan clip-nya sendiri agar gradasinya menang. */
.lp-nyala {
  background: var(--lp-sig);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-lead {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.68;
  max-width: 34rem;
  color: var(--lp-teks-mut);
}

.lp-wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.lp :focus-visible { outline: 2px solid rgb(var(--ak-2)); outline-offset: 3px; }

/* Tautan lompat untuk pengguna papan ketik; muncul hanya saat difokus. */
.lp .lp-lewati {
  position: absolute; left: .75rem; top: -4rem; z-index: 70;
  padding: .5rem .875rem;
  border-radius: var(--lp-r-xs);
  background: #fff; color: #08111d; font-weight: 700; font-size: .875rem;
  transition: top .18s;
}
.lp .lp-lewati:focus { top: .75rem; text-decoration: none; }

/* ------------------------------------------------------------------ butir */
/* Tetap (fixed) dan tembus klik, sesuai syaratnya: butiran di atas wadah yang
   ikut tergulir memaksa GPU menggambar ulang seluruh layar tiap frame. */
.lp-butir {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- cahaya */
/* Bola cahaya besar yang sangat kabur. Yang dicari bukan bentuknya, melainkan
   kesan bahwa latar punya kedalaman dan sumber terang di suatu tempat. */
.lp-cahaya {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Lapisan cahaya tingkat halaman. Diletakkan di belakang <main> dan di
   belakang bilah nav yang bening, sehingga cahayanya utuh sampai ke tepi
   atas layar. Tingginya dibatasi supaya tidak ikut menerangi seksi bawah. */
.lp-cahaya-atas {
  top: 0; left: 0; right: 0; bottom: auto;
  height: 54rem;
  z-index: 0;
}
.lp main { position: relative; z-index: 1; }
.lp-cahaya span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
}
.lp-cahaya-1 {
  width: 46rem; height: 34rem; top: -16rem; right: -10rem;
  background: rgb(var(--ak-1) / .6);
}
.lp-cahaya-2 {
  width: 36rem; height: 27rem; bottom: -18rem; left: -16rem;
  background: rgb(var(--ak-3) / .42);
}
.lp-cahaya-3 {
  width: 30rem; height: 24rem; top: 22%; left: 42%;
  background: rgb(var(--ak-2) / .28);
}

/* --------------------------------------------------------------- navigasi */
.lp-nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease;
}
.lp-nav-in {
  height: 4.5rem;
  display: flex; align-items: center; gap: 1.5rem;
  transition: height .4s var(--lp-pel);
}

/* Selama hero masih terlihat bilah dibiarkan bening supaya cahaya di baliknya
   tembus; begitu halaman digulir melewatinya, ia mengeras jadi kaca. */
.lp-nav.melayang {
  background: rgb(6 11 18 / .72);
  border-bottom-color: var(--lp-line);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.lp-nav.melayang .lp-nav-in { height: 3.875rem; }

@supports not (backdrop-filter: blur(1px)) {
  .lp-nav.melayang { background: rgb(6 11 18 / .96); }
}

/* Penanda setinggi satu piksel di bawah bilah. Begitu ia tergulir keluar layar,
   landing.js mengeraskan bilahnya. Diposisikan absolut supaya tidak menambah
   satu piksel pun ke tinggi halaman. */
[data-sentinel] {
  position: absolute; top: 5rem; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

.lp .lp-merek {
  display: inline-flex; align-items: center; gap: .625rem;
  font-weight: 800; font-size: 1rem; letter-spacing: .005em;
  color: var(--lp-teks);
}
.lp .lp-merek:hover { text-decoration: none; }

.lp-merek-ikon {
  width: 2.125rem; height: 2.125rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--lp-r-xs);
  color: #fff;
  background: var(--lp-sig-tombol);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .28),
    0 6px 18px -6px rgb(var(--ak-1) / .8);
}

.lp-menu {
  display: none;
  margin-inline-start: auto;
  gap: 1.875rem;
  font-size: .875rem; font-weight: 600;
}
.lp .lp-menu a {
  position: relative;
  color: var(--lp-teks-mut); white-space: nowrap;
  transition: color .25s ease;
}
.lp .lp-menu a:hover { color: var(--lp-teks); text-decoration: none; }

/* Garis tipis yang tumbuh dari tengah saat kursor singgah. */
.lp-menu a::after {
  content: '';
  position: absolute; left: 50%; right: 50%; bottom: -.4rem;
  height: 1px;
  background: rgb(var(--ak-2));
  transition: left .3s var(--lp-pel), right .3s var(--lp-pel);
}
.lp-menu a:hover::after { left: 0; right: 0; }

/* Tombol memakai margin auto; di layar lebar menu ikut memakainya sehingga
   ruang sisa terbagi dua, di ponsel menu hilang dan seluruh sisa jatuh ke
   tombol. Satu aturan, dua tata letak. */
.lp-nav .lp-tombol { margin-inline-start: auto; }
.lp-menu ~ .lp-tombol { margin-inline-start: 0; }

@media (min-width: 56rem) {
  .lp-menu { display: flex; }
}

/* ----------------------------------------------------------------- tombol */
/* Tombol utama sengaja TERANG, bukan biru. Biru di atas biru tengah malam
   cuma jadi bidang yang sedikit berbeda nadanya. Putih adalah satu-satunya
   nilai di halaman ini yang tak tersaingi apa pun, jadi ia dipakai persis
   sekali per layar: untuk hal yang memang ingin ditekan orang. */
.lp .lp-tombol {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8125rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .9375rem; font-weight: 700; letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  /* Tombol utama sekarang berani: isian dua nada tua dari rona aksen, dengan
     teks putih (lolos WCAG AA), dikelilingi cincin sian yang menyala. Ia
     jadi benda paling terang di halaman — persis yang dituju sebuah CTA. */
  color: #fff;
  background: var(--lp-sig-tombol);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    0 0 0 1px rgb(var(--ak-2) / .3),
    0 14px 34px -12px rgb(var(--ak-1) / .95),
    0 0 44px -16px rgb(var(--ak-3) / .8);
  transition: transform .3s var(--lp-pel), box-shadow .3s var(--lp-pel);
}
.lp .lp-tombol:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .4),
    0 0 0 1px rgb(var(--ak-2) / .55),
    0 18px 44px -12px rgb(var(--ak-1) / 1),
    0 0 60px -14px rgb(var(--ak-3) / .95);
}
.lp .lp-tombol:active { transform: translateY(0); }

/* Kilau yang melintas sekali saat kursor singgah. */
.lp-tombol::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .85) 47%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .75s var(--lp-pel);
  pointer-events: none;
}
.lp-tombol:hover::after { transform: translateX(130%); }

.lp .lp-tombol-hantu {
  color: var(--lp-teks);
  background: var(--lp-kaca);
  border-color: var(--lp-line-kuat);
  box-shadow: none;
}
.lp .lp-tombol-hantu:hover {
  background: var(--lp-kaca-2);
  border-color: rgb(255 255 255 / .3);
  box-shadow: none;
}
.lp-tombol-hantu::after { display: none; }

.lp .lp-tombol-kecil { padding: .5625rem 1.125rem; font-size: .875rem; }
.lp .lp-tombol-besar { padding: .9375rem 2rem; font-size: 1rem; }

/* ------------------------------------------------------------------- hero */
.lp-hero { overflow: hidden; }

.lp-hero-in {
  position: relative; z-index: 1;
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 5rem) clamp(3.5rem, 8vw, 5.5rem);
}

@media (min-width: 62rem) {
  .lp-hero-in {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    min-height: min(41rem, calc(100dvh - 4.5rem));
  }
}

.lp-hero-teks .lp-lead { margin-top: 1.5rem; }
.lp-cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .875rem; }

/* ---------------------------------------------------- konsol kursi (hero) */
.lp-konsol {
  position: relative;
  margin: 0;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background:
    linear-gradient(168deg, rgb(255 255 255 / .07), rgb(255 255 255 / .015)),
    rgb(9 16 26 / .72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .11),
    0 40px 80px -40px rgb(0 0 0 / .9),
    0 0 110px -30px rgb(var(--ak-1) / .7),
    0 0 140px -40px rgb(var(--ak-3) / .5);
}

/* Garis rambut bergradasi di bibir atas panel: satu piksel yang menangkap
   cahaya, dan satu-satunya alasan panel ini terbaca sebagai benda. */
.lp-konsol::before {
  content: '';
  position: absolute; left: 12%; right: 12%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
}

.lp-konsol-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; font-weight: 700;
  color: var(--lp-teks-mut);
}

.lp-cip {
  padding: .1875rem .5625rem;
  border: 1px solid rgb(var(--ak-2) / .5);
  border-radius: 999px;
  background: rgb(var(--ak-2) / .14);
  color: rgb(var(--ak-2));
  font-size: .6875rem; font-weight: 700;
}

.lp-konsol-hemi { position: relative; padding: .75rem 0 .25rem; }
.lp-konsol-hemi .hemi { max-width: 22rem; position: relative; }
.lp-konsol-hemi .hemi circle { r: .078; }
.lp-konsol-hemi .hemi-angka { fill: #fff; }
.lp-konsol-hemi .hemi-label { fill: var(--lp-teks-fnt); }

.lp-busur {
  position: absolute; inset: .75rem 0 .25rem;
  width: 100%; max-width: 22rem;
  margin-inline: auto;
  color: rgb(255 255 255 / .14);
}

.lp-konsol-daftar {
  list-style: none; margin: 1rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--lp-line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem 1.25rem;
}
.lp-konsol-daftar li { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.lp-titik {
  width: .5rem; height: .5rem; flex: none; border-radius: 999px;
  box-shadow: 0 0 10px currentColor;
}

.lp-konsol-nama {
  flex: 1; min-width: 0;
  font-size: .8125rem; font-weight: 600; color: var(--lp-teks-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-konsol-angka { font-size: .9375rem; font-weight: 800; color: var(--lp-teks); }

.lp-bilah {
  margin-top: 1rem;
  display: flex; gap: 2px;
  height: .3125rem;
  border-radius: 999px;
  overflow: hidden;
}
.lp-bilah span { flex: 0 0 var(--lebar); border-radius: 999px; }

.lp-konsol figcaption {
  margin-top: 1rem;
  font-size: .78125rem; line-height: 1.55; color: var(--lp-teks-fnt);
}

/* ---------------------------------------------------------------- peserta */
.lp-peserta { padding-block: clamp(3rem, 6vw, 4.5rem); }

.lp-peserta-judul {
  max-width: 46rem;
  font-size: 1.0625rem; font-weight: 700; color: var(--lp-teks); line-height: 1.55;
}
.lp-peserta-judul span { display: block; font-weight: 500; color: var(--lp-teks-mut); }

.lp-pita {
  margin-top: 2.25rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
}
.lp-pita-jalur { display: flex; width: max-content; }
.lp-pita:hover .lp-pita-jalur { animation-play-state: paused; }

.lp-pita-deret {
  display: flex; align-items: center; gap: 1.25rem;
  margin: 0; padding: 0 .625rem; list-style: none;
}

/* Pelat putih di belakang tiap logo, sama seperti lencana partai di dalam
   aplikasi: logo partai dibuat untuk latar terang dan sebagian di antaranya
   hilang sama sekali di latar gelap tanpa pelat ini. */
.lp-pita-deret li {
  width: 4.5rem; height: 4.5rem; flex: none;
  display: grid; place-items: center;
  padding: .6875rem;
  background: #fff;
  border-radius: var(--lp-r-sm);
  box-shadow: 0 12px 28px -16px rgb(0 0 0 / .95);
  transition: transform .35s var(--lp-pel);
}
.lp-pita-deret li:hover { transform: translateY(-4px) scale(1.04); }
.lp-pita-deret img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------- masalah */
/* Bagian terberat halaman ini juga bagian tergelapnya. Turun dua langkah dari
   latar dasar, dengan garis cahaya di kedua bibirnya sebagai batas cerita. */
.lp-masalah {
  background: var(--lp-bg-dalam);
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
.lp-masalah::before,
.lp-masalah::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .13), transparent);
}
.lp-masalah::before { top: 0; }
.lp-masalah::after  { bottom: 0; }

.lp-masalah-kepala { max-width: 42rem; }
.lp-masalah-kepala p { margin-top: 1.125rem; font-size: 1.0625rem; }

.lp-masalah-kisi {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  display: grid; gap: 2rem 3rem;
}
@media (min-width: 48rem) {
  .lp-masalah-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-nyeri-utama { grid-column: 1 / -1; }
}

.lp-nyeri { border-top: 1px solid var(--lp-line); padding-top: 1.375rem; }
.lp-nyeri p { margin-top: .5rem; font-size: .9375rem; }

.lp-nyeri-utama {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background-color: rgb(255 255 255 / .028);
  padding: clamp(1.625rem, 3vw, 2.25rem);
}
.lp-nyeri-utama h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); }
.lp-nyeri-utama p { max-width: 48rem; font-size: 1rem; }

.lp-nyeri-ikon { color: var(--warn-line); margin-bottom: 1rem; }

/* ------------------------------------------------------------- cara kerja */
.lp-alur { padding-block: clamp(4.5rem, 10vw, 8rem); }

.lp-alur-in { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

/* Judul di kiri, langkahnya di kanan, dan judul itu menempel selama mata
   menuruni ketiga langkah. Konteksnya tidak pernah hilang dari layar. */
@media (min-width: 62rem) {
  .lp-alur-in { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
  .lp-alur-kepala { position: sticky; top: 7rem; }
}

.lp-alur-kepala p { margin-top: 1.125rem; max-width: 32rem; }

.lp-tangga { list-style: none; margin: 0; padding: 0; }
.lp-tangga li { position: relative; padding: 0 0 2.5rem 4rem; }
.lp-tangga li:last-child { padding-bottom: 0; }

/* Rel penghubung antar langkah: menegaskan bahwa ini satu alur, bukan tiga
   fitur terpisah yang kebetulan bertumpuk. */
.lp-tangga li::before {
  content: '';
  position: absolute; left: 1.34rem; top: 3rem; bottom: .5rem;
  width: 1px;
  background: linear-gradient(rgb(var(--ak-1) / .9), transparent);
}
.lp-tangga li:last-child::before { display: none; }

.lp-tangga-ikon {
  position: absolute; left: 0; top: 0;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 999px;
  color: rgb(var(--ak-2));
  border: 1px solid rgb(var(--ak-1) / .4);
  background:
    linear-gradient(160deg, rgb(var(--ak-1) / .28), rgb(var(--ak-3) / .12));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .18),
    0 0 30px -8px rgb(var(--ak-1) / 1);
}

.lp-tangga h3 { padding-top: .625rem; font-size: 1.125rem; }
.lp-tangga p { margin-top: .5rem; font-size: .9375rem; max-width: 40rem; }

/* -------------------------------------------------------------- tangkapan */
.lp-bingkai {
  position: relative;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: rgb(255 255 255 / .03);
  padding: .5rem;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .1),
    0 50px 90px -50px rgb(0 0 0 / 1),
    0 0 100px -40px rgb(var(--ak-1) / .5);
}
.lp-bingkai::before {
  content: '';
  position: absolute; left: 18%; right: 18%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .5), transparent);
}
.lp-bingkai img,
.lp-bingkai video {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--lp-r) - .5rem);
}

/* ------------------------------------------------------------------ fitur */
.lp-fitur {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  background: var(--lp-bg-angkat);
}
.lp-fitur::before,
.lp-fitur::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .11), transparent);
}
.lp-fitur::before { top: 0; }
.lp-fitur::after  { bottom: 0; }

.lp-fitur h2 { max-width: 22ch; }

.lp-bento {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
/* TUJUH sel, dan cacahnya tidak boleh berubah sembarangan.

   Sel lebar memakan 2 petak pada dua kolom dan 3 petak pada tiga kolom, jadi
   jumlah petak yang terpakai selalu 8 dan 9 — keduanya habis dibagi jumlah
   kolomnya, sehingga tidak pernah ada petak kosong menganga di baris terakhir.

   Menambah atau mengurangi satu sel merusak keduanya sekaligus: yang berikutnya
   pas cuma sebelas. Kalau perlu menambah, ganti isi sel yang ada. */
@media (min-width: 48rem) {
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-sel-lebar { grid-column: span 2; }
}
@media (min-width: 68rem) {
  .lp-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-sel-lebar { grid-column: span 3; }
}

.lp-sel {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 1.875rem);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background-color: var(--lp-kaca);
  overflow: hidden;
}
.lp-sel h3 { margin-top: 1.125rem; }
.lp-sel p { margin-top: .5rem; font-size: .9375rem; }
.lp-sel > svg { color: rgb(var(--ak-2)); }

.lp-sel-merek {
  display: flex; flex-direction: column;
  border-color: rgb(var(--ak-1) / .5);
  background-color: transparent;
  background-image:
    radial-gradient(120% 140% at 0% 0%, rgb(var(--ak-1) / .34), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgb(var(--ak-3) / .3), transparent 55%),
    linear-gradient(152deg, rgb(var(--ak-1) / .22), rgb(6 11 18 / .25));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .12),
    0 0 60px -30px rgb(var(--ak-1) / .9);
}
.lp-sel-merek > svg { color: rgb(var(--ak-2)); }
.lp-sel-merek h3 { font-size: 1.3125rem; }
.lp-sel-merek p { color: #cdd8e8; max-width: 44ch; }

/* Sel unggulan kedua: Impor Pleno. Diberi rona aksen yang lebih terang supaya kisi bento
   tidak menjadi enam kotak kaca yang seragam, dan supaya dua sel lebar itu
   membentuk irama, bukan pengulangan. */
.lp-sel-impor {
  display: flex; flex-direction: column; gap: 1.25rem;
  border-color: rgb(var(--ak-2) / .4);
  background-color: transparent;
  background-image:
    radial-gradient(120% 150% at 100% 0%, rgb(var(--ak-2) / .26), transparent 55%),
    radial-gradient(120% 150% at 0% 100%, rgb(var(--ak-3) / .3), transparent 55%),
    linear-gradient(152deg, rgb(var(--ak-3) / .16), rgb(6 11 18 / .25));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .12),
    0 0 60px -30px rgb(var(--ak-3) / .9);
}
.lp-sel-impor > .lp-sel-isi > svg { color: rgb(var(--ak-2)); }
.lp-sel-impor h3 { font-size: 1.3125rem; }
.lp-sel-impor p { color: #cdd8e8; max-width: 52ch; }

/* Lima lapis pemeriksaan sebagai deret pil: bukan hiasan, itu nama lima
   lapis yang benar-benar diuji pengimpor sebelum menulis satu angka pun. */
.lp-impor-lapis {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.lp-impor-lapis span {
  padding: .3125rem .75rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: -.01em;
  color: rgb(var(--ak-2));
  border: 1px solid rgb(var(--ak-2) / .35);
  background: rgb(var(--ak-2) / .1);
}

/* Palet 24 warna partai yang dipakai aplikasi. Bukan hiasan: inilah kunci
   warna grafik kursi dan tiap lencana partai. */
.lp-palet { margin-top: auto; padding-top: 2rem; display: flex; gap: 3px; }
.lp-palet span {
  flex: 1; height: .5rem; border-radius: 2px;
  box-shadow: 0 0 12px -2px currentColor;
}

/* Sel bergambar: teks di atas, tangkapan layar menyembul dari bibir bawah dan
   naik sedikit saat disinggahi. Yang terlihat cuma pucuknya, dan justru itu
   yang membuat orang ingin melihat sisanya. */
.lp-sel-gambar { padding-bottom: 0; }
.lp-sel-gambar .lp-sel-isi { padding-bottom: 1.5rem; }
.lp-sel-foto {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lp-line);
  border-bottom: 0;
  border-top-left-radius: var(--lp-r-sm);
  border-top-right-radius: var(--lp-r-sm);
  box-shadow: 0 -24px 50px -30px rgb(0 0 0 / .95);
  /* Membesar dari bibir ATAS, bukan dari tengah: kalau dari tengah, sisi
     bawahnya terangkat dan menyisakan celah di dasar kartu. */
  transform-origin: top center;
  transition: transform .55s var(--lp-pel);
}
.lp-sel-gambar:hover .lp-sel-foto { transform: scale(1.045); }

/* -------------------------------------------------------------- data lama */
.lp-peta { padding-block: clamp(4.5rem, 10vw, 8rem); }

.lp-peta-kepala h2 { max-width: 20ch; }
.lp-peta-kepala .lp-lead { margin-top: 1.375rem; max-width: 40rem; }

/* Ketiga kegunaan sengaja tidak disejajarkan jadi tiga kolom seragam. Kolom
   yang lebarnya berbeda dan barisnya bergeser membuat mata membacanya satu
   per satu, bukan memindainya sebagai daftar belanja. */
.lp-guna { margin-top: clamp(2.75rem, 5vw, 4rem); display: grid; gap: 2.25rem; }
.lp-guna > div { padding-left: 2.75rem; position: relative; }
.lp-guna p { margin-top: .5rem; font-size: .9375rem; }

@media (min-width: 62rem) {
  .lp-guna {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 3rem; row-gap: 3.5rem;
  }
  .lp-guna > div:nth-child(1) { grid-column: 1 / span 5; }
  .lp-guna > div:nth-child(2) { grid-column: 7 / span 5; }
  .lp-guna > div:nth-child(3) { grid-column: 3 / span 7; }
}

.lp-guna-ikon { position: absolute; left: 0; top: .0625rem; color: rgb(var(--ak-2)); }

/* Kalimat inti seluruh halaman. Ukurannya jelas di atas badan teks karena
   inilah satu-satunya klaim yang harus terbawa pulang. */
.lp-tegas {
  position: relative;
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding-left: clamp(1.5rem, 2.5vw, 2rem);
  font-size: clamp(1.25rem, .98rem + 1.1vw, 1.75rem);
  line-height: 1.42; font-weight: 700;
  max-width: 46rem;
}
.lp .lp-tegas { color: var(--lp-teks); }
.lp-tegas::before {
  content: '';
  position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 3px; border-radius: 3px;
  background: linear-gradient(rgb(var(--ak-2)), rgb(var(--ak-1) / 0));
  box-shadow: 0 0 20px rgb(var(--ak-1) / .9);
}

/* --------------------------------------------------------------- penutup */
.lp-tutup {
  padding-block: clamp(5rem, 11vw, 8.5rem);
  overflow: hidden;
  background: linear-gradient(180deg, var(--lp-bg), #071627 55%, var(--lp-bg));
}
.lp-cahaya-tutup .lp-cahaya-1 {
  width: 60rem; height: 30rem;
  top: auto; bottom: -18rem; right: auto; left: 50%;
  margin-left: -30rem;
  background: rgb(var(--ak-3) / .5);
}

.lp-tutup-in { position: relative; z-index: 1; max-width: 52rem; text-align: center; }
.lp-tutup h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); }
.lp-tutup p { margin-top: 1.125rem; font-size: 1.0625rem; }
.lp-tutup .lp-tombol { margin-top: 2.25rem; }

/* ------------------------------------------------------------------- kaki */
.lp-kaki {
  padding-block: 2.75rem;
  border-top: 1px solid var(--lp-line);
  background: var(--lp-bg-dalam);
}
.lp-kaki-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem;
  font-size: .8125rem;
}
.lp-kaki p { color: var(--lp-teks-fnt); }
.lp-kaki-tahun { margin-inline-start: auto; }

/* ==========================================================================
   GERAK
   --------------------------------------------------------------------------
   Empat lapis, dan tiap lapis punya alasan yang bisa disebut dalam satu
   kalimat. Yang tidak punya alasan tidak dibuat.

   Masuk    hero naik berurutan saat halaman dibuka; urutannya menuntun mata:
            judul, janji, tombol, lalu bukti.
   Singkap  bagian bawah muncul saat digulir; ini yang membuat halaman terasa
            bercerita alih-alih sekadar panjang.
   Konsol   busur ditarik, kursi muncul satu per satu, angkanya berhitung naik;
            gerak ini menjelaskan cara kerja Sainte-Lague tanpa satu kata pun.
   Sorot    cahaya mengikuti kursor di atas kartu; satu-satunya gerak yang
            menjawab perbuatan orangnya secara langsung.

   Semuanya berhenti total di bawah prefers-reduced-motion, dan tidak satu pun
   menyembunyikan isi bila JavaScript gagal dimuat.
   ========================================================================== */

.lp-js .lp-masuk {
  animation: lp-naik .95s var(--lp-pel) both;
  animation-delay: var(--tunda, 0s);
}
@keyframes lp-naik {
  from { opacity: 0; transform: translateY(1.75rem); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.lp-js .lp-konsol.lp-masuk { animation-name: lp-konsol-masuk; animation-duration: 1.1s; }
@keyframes lp-konsol-masuk {
  from { opacity: 0; transform: translateY(2.5rem) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.lp-js .reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity .85s var(--lp-pel) var(--tunda, 0s),
    transform .85s var(--lp-pel) var(--tunda, 0s);
}
.lp-js .reveal.tampil { opacity: 1; transform: none; }

/* Tangkapan layar naik mengikuti gulir, bukan sekali muncul lalu diam. Dipakai
   hanya bila peramban punya lini masa gulir bawaan; kalau tidak, gambarnya
   tampil biasa saja dan tidak ada yang hilang. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-js .lp-bingkai {
      animation: lp-bingkai-naik linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 88%;
    }
    @keyframes lp-bingkai-naik {
      from { opacity: .55; transform: translateY(2.5rem) scale(.975); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ----------------------------------------------------------- konsol hidup */
/* Kelas `hidup` dipasang landing.js begitu konsolnya masuk layar. Busur ditarik
   lebih dulu, kursi menyusul satu per satu di atasnya, baru bilah proporsi
   tersingkap. Urutannya sengaja: itulah urutan Sainte-Lague membagi kursi. */
.lp-js [data-kursi] .lp-busur path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lp-js [data-kursi].hidup .lp-busur path {
  transition: stroke-dashoffset 1.4s var(--lp-pel) .15s;
  stroke-dashoffset: 0;
}

.lp-js [data-kursi] .hemi circle {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.lp-js [data-kursi].hidup .hemi circle {
  animation: lp-kursi .6s cubic-bezier(.34, 1.5, .64, 1) both;
  animation-delay: calc(.5s + var(--i, 0) * .1s);
}
@keyframes lp-kursi {
  from { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.28); }
  to   { opacity: 1; transform: scale(1); }
}

.lp-js [data-kursi] .hemi text { opacity: 0; }
.lp-js [data-kursi].hidup .hemi text { animation: lp-pudar .7s ease-out .55s both; }
@keyframes lp-pudar { from { opacity: 0 } to { opacity: 1 } }

.lp-js [data-kursi] .lp-konsol-daftar li { opacity: 0; }
.lp-js [data-kursi].hidup .lp-konsol-daftar li {
  animation: lp-naik-kecil .6s var(--lp-pel) both;
  animation-delay: calc(.85s + var(--i, 0) * .08s);
}
@keyframes lp-naik-kecil {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}

.lp-js [data-kursi] .lp-bilah { clip-path: inset(0 100% 0 0); }
.lp-js [data-kursi].hidup .lp-bilah { animation: lp-singkap 1.1s var(--lp-pel) 1.05s both; }
@keyframes lp-singkap { to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------------ sorot */
[data-sorot] {
  --mx: 50%; --my: 0%; --sorot: 0;
  background-image: radial-gradient(
    26rem 20rem at var(--mx) var(--my),
    rgb(var(--ak-1) / calc(var(--sorot) * .30)),
    transparent 68%
  );
  transition:
    --sorot .45s ease,
    border-color .45s ease,
    transform .45s var(--lp-pel),
    box-shadow .45s var(--lp-pel);
}
[data-sorot]:hover {
  --sorot: 1;
  border-color: var(--lp-line-kuat);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -40px rgb(0 0 0 / 1);
}

/* Sel bermerek sudah punya gradasi sendiri; sorotannya ditumpuk di atasnya. */
.lp-sel-merek[data-sorot] {
  background-image:
    radial-gradient(26rem 20rem at var(--mx) var(--my),
      rgb(255 255 255 / calc(var(--sorot) * .13)), transparent 68%),
    linear-gradient(152deg, rgb(38 88 138 / .55), rgb(6 11 18 / .2));
}

/* ---------------------------------------------------------------- hanyut */
@media (prefers-reduced-motion: no-preference) {
  .lp-pita-jalur { animation: lp-geser 58s linear infinite; }

  /* Bola cahaya hanyut sangat pelan. Periodenya sengaja tidak bulat dan tidak
     sama, supaya ketiganya tidak pernah kembali ke posisi awal bersamaan dan
     latarnya tidak pernah terasa berulang. */
  .lp-cahaya-1 { animation: lp-hanyut-a 26s ease-in-out infinite alternate; }
  .lp-cahaya-2 { animation: lp-hanyut-b 34s ease-in-out infinite alternate; }
  .lp-cahaya-3 { animation: lp-hanyut-a 41s ease-in-out infinite alternate reverse; }
}

@keyframes lp-geser { to { transform: translateX(-50%); } }
@keyframes lp-hanyut-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4rem, 2.5rem, 0) scale(1.12); }
}
@keyframes lp-hanyut-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(3.5rem, -2rem, 0) scale(1); }
}

/* ------------------------------------------------------------ gerak minim */
@media (prefers-reduced-motion: reduce) {
  /* Pita berhenti dan berubah jadi kisi biasa; salinan keduanya yang tadinya
     hanya untuk menyambung putaran ikut disembunyikan. */
  .lp-pita { mask-image: none; -webkit-mask-image: none; }
  .lp-pita-jalur { width: 100%; flex-wrap: wrap; justify-content: center; }
  .lp-pita-deret { flex-wrap: wrap; justify-content: center; }
  .lp-pita-deret[aria-hidden] { display: none; }
  .lp-pita-deret li:hover { transform: none; }

  .lp-js .lp-masuk,
  .lp-js [data-kursi].hidup .hemi circle,
  .lp-js [data-kursi].hidup .hemi text,
  .lp-js [data-kursi].hidup .lp-bilah,
  .lp-js [data-kursi].hidup .lp-konsol-daftar li { animation: none; }

  .lp-js [data-kursi] .hemi circle { opacity: 1; transform: none; }
  .lp-js [data-kursi] .hemi text { opacity: 1; }
  .lp-js [data-kursi] .lp-bilah { clip-path: none; }
  .lp-js [data-kursi] .lp-konsol-daftar li { opacity: 1; }
  .lp-js [data-kursi] .lp-busur path { stroke-dashoffset: 0; }

  .lp-js .reveal { opacity: 1; transform: none; transition: none; }

  [data-sorot], [data-sorot]:hover { transform: none; }
  .lp-sel-gambar:hover .lp-sel-foto { transform: none; }
  .lp .lp-tombol:hover { transform: none; }
  .lp-tombol::after { display: none; }
}