/* =====================================================================
   HALAMAN DEPAN (landing page)
   ---------------------------------------------------------------------
   Berdiri sendiri, tidak memakai site.css — halaman ucapan dan halaman
   jualan punya tugas yang berbeda, dan mencampurnya membuat keduanya
   sulit diubah tanpa merusak yang lain.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HURUF
   ---------------------------------------------------------------------
   Deklarasi @font-face-nya TIDAK di sini, melainkan di font_face_tag()
   pada includes/functions.php, dicetak ke <style> oleh hal_aset() dan
   oleh admin/_layout.php.

   Alasannya: admin.css memakai keluarga huruf yang sama tapi sengaja
   berdiri sendiri dari berkas ini. Menaruh deklarasinya di kedua
   berkas berarti salinan kedua, dan kalau berkas hurufnya diganti
   lalu yang tersunting cuma satu, gejalanya bukan galat: yang satu
   lagi diam-diam kembali memakai huruf sistem.

   Hurufnya sendiri diinangi sendiri di assets/fonts/, bukan diambil
   dari Google. Lisensi dan asal tiap berkas di assets/fonts/LISENSI.txt.
   --------------------------------------------------------------------- */

:root{
  /* Dipakai sebagai latar tombol DAN sebagai teks, jadi harus lolos 4.5
     dua arah — dan sejak hero berlatar foto, juga di atas --bg2.
     Ketiganya sudah diukur; kalau diubah, hitung ulang dulu. */
  --a:#c0264a;            /* putih di atasnya 5.81 · teks di --bg 5.28 · di --bg2 4.62 */
  /* Menutup gradien dan lencana berteks putih, jadi satu nilai pucat di
     sini menggagalkan semuanya sekaligus. */
  --a2:#b0365c;           /* putih di atasnya 5.95 */
  --ink:#1a1416;          /* judul · 16.53 di --bg */
  --soft:#4a423c;         /* teks isi · 8.95 */
  --soft-2:#5a524a;       /* teks redup · 6.97 */
  --line:rgba(26,20,22,.11);
  --bg:#f6f4ef;           /* kertas */
  --bg-2:#ebe6dc;         /* pita meja, hanya di hero */
  --bg2:#eae5db;          /* seksi selang */
  --card:#ffffff;
  --paper:#fffdf9;        /* kertas cetak: foto dan kartu QR */
  /* Bayangan cokelat, bukan merah muda: bendanya berdiri di atas foto
     meja, dan bayangan berwarna lain langsung terbaca palsu. */
  --shadow:0 14px 40px rgba(120,95,70,.10);
  --shadow-lg:0 26px 70px rgba(120,95,70,.16);
  --radius:18px;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Satu keluarga huruf untuk seluruh halaman jualan. Fraunces dilepas:
     serif di halaman depan membuatnya terbaca seperti situs donasi. */
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:Caveat,cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.7;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.lp-wrap{width:min(1120px,100%);margin:0 auto;padding:0 20px}

/* --------------------------------------------------------------
   Tombol
   -------------------------------------------------------------- */
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
 /* Kotak membulat, BUKAN pil. Pil 999px itu bentuk desain lama; sistem
     yang sekarang memakai sudut 11-13px di seluruh tombol, dan pil di
     antara kartu bersudut 18px terbaca seperti dua sistem bercampur. */
  padding:11px 20px;border-radius:11px;
  font-size:.92rem;font-weight:600;white-space:nowrap;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.lp-btn-solid{background:var(--a);color:#fff;
  box-shadow:0 10px 24px rgba(192,38,74,.26)}
.lp-btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(192,38,74,.34)}
.lp-btn-line{border-color:var(--line);color:var(--a);background:#fff}
.lp-btn-line:hover{transform:translateY(-2px);border-color:var(--a)}
.lp-btn-lg{padding:17px 30px;font-size:1.03rem;border-radius:13px}
.lp-btn-block{width:100%;margin-top:18px}

/* --------------------------------------------------------------
   Bilah atas
   -------------------------------------------------------------- */
.lp-top{
  position:sticky;top:0;z-index:50;
  /* Kertas, bukan putih kemerahan, dan tanpa garis bawah — garisnya
     memotong halaman tepat di tempat foto hero seharusnya mengalir. */
  background:rgba(246,244,239,.82);backdrop-filter:blur(12px);
}
/* Halaman depan: bilahnya tembus supaya fotonya utuh sampai ke tepi
   atas. Yang menjaga tulisannya tetap terbaca adalah pita penerang di
   hero, bukan latar bilahnya. Halaman lain tetap berlatar kertas,
   karena di sana isi halaman menggulir lewat di bawahnya. */
.lp-top.is-tembus{background:transparent;backdrop-filter:none}

/* ...tapi hanya selama masih di puncak halaman. Begitu digulir, bilah
   tembus membuat menunya duduk tepat di atas judul dan kartu di
   bawahnya, dan dua tulisan bertumpuk terbaca sebagai halaman rusak.
   Kelasnya dipasang JavaScript; kalau skripnya gagal dimuat, bilahnya
   tetap tembus seperti sebelumnya dan tidak ada yang hilang. */
.lp-top.is-tembus.is-lekat{
  background:rgba(246,244,239,.94);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.lp-top-in{display:flex;align-items:center;gap:18px;height:70px}
.lp-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1rem;letter-spacing:-.025em}
.lp-mark{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  /* Satu warna padat. Gradien dua merah muda adalah bentuk desain lama
     dan satu-satunya yang tersisa di seluruh halaman jualan. */
  background:var(--a);color:#fff;font-size:.9rem;
}
.lp-nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.lp-nav > a:not(.lp-btn){
  padding:8px 10px;font-size:.91rem;font-weight:500;color:var(--soft);
}
.lp-nav > a:not(.lp-btn):hover{color:var(--a)}
/* "Masuk" sebagai tautan tebal, bukan tombol bergaris: dua tombol
   berdampingan di bilah atas membuat keduanya sama-sama tidak
   terbaca sebagai ajakan utama. */
.lp-nav .is-masuk{font-weight:700;color:var(--ink)}
.lp-nav .is-masuk:hover{color:var(--a)}
/* "Masuk" dikecualikan: ia juga bukan .lp-btn, dan dulu ikut
   tersembunyi di sini sehingga pengunjung HP tidak punya jalan masuk. */
@media (max-width:800px){
  .lp-nav > a:not(.lp-btn):not(.is-masuk){display:none}
}
/* Di HP tombolnya dirapatkan, BUKAN disembunyikan. Dulu .lp-btn-line
   disetel display:none di bawah 460px, dan yang ikut hilang bukan cuma
   hiasan: tombol Masuk dan Dashboard di halaman depan, serta tautan
   "Halaman depan" di tujuh halaman lain yang memakai bilah atas ini.
   Pengunjung HP karena itu tidak punya jalan masuk sama sekali kecuali
   tautan kecil di kaki halaman. Nama situs yang mengalah, bukan tombolnya. */
@media (max-width:460px){
  .lp-top-in{gap:8px}
  .lp-brand{min-width:0}
  .lp-brand span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 12px, bukan 14px: di 375px — lebar HP paling umum — nama "Bagi
     Bahagia" kurang 4px untuk muat utuh, dan dua tombol berpadding
     lebih tipis membebaskan 8px. */
  .lp-nav .lp-btn{padding:9px 12px;font-size:.85rem}
  .lp-nav > a.is-masuk{padding:8px 4px;font-size:.85rem}
}
@media (max-width:340px){
  /* Sesempit ini nama situs tinggal satu dua huruf lalu elipsis, jadi
     lebih jujur menyisakan lambangnya saja. Batasnya 340px dan bukan
     380px: HP paling umum berlebar 360px dan 375px, dan di situ namanya
     masih muat utuh. */
  .lp-brand span:last-child{display:none}
}

/* --------------------------------------------------------------
   Hero
   -------------------------------------------------------------- */
/* --------------------------------------------------------------
   HERO — adegan benda di atas meja
   --------------------------------------------------------------
   Fotonya HANYA latar. Semua yang berisi keterangan tetap HTML di
   atasnya: layar telepon, kartu QR, keterangan foto cetak. Dengan
   begitu QR-nya benar-benar bisa dipindai, teksnya tajam di layar
   retina, dan tampilan ucapan yang berubah tidak menuntut foto baru.

   DUA LAPIS PENERANG DI KIRI WAJIB ADA. Titik paling gelap fotonya
   (daun di tepi kiri) hanya memberi 3,3:1 untuk tinta, jauh di bawah
   ambang. Penerangnya berhenti di 66% supaya bendanya tetap berdiri
   di atas foto yang utuh.

   Batas dua nadanya di 61% ADALAH garis mejanya. Itu satu-satunya
   alasan angka yang sama muncul di dua tempat — jangan diubah
   sebelah saja.
   -------------------------------------------------------------- */
.lp-hero{position:relative;overflow:hidden;background:var(--bg)}
.lp-hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.lp-hero-terang,.lp-hero-terang2{position:absolute;left:0;right:0;pointer-events:none}
.lp-hero-terang{top:0;height:61%;
  background:linear-gradient(90deg,rgba(246,244,239,.96) 0%,rgba(246,244,239,.95) 40%,
             rgba(246,244,239,.62) 52%,rgba(246,244,239,0) 66%)}
.lp-hero-terang2{top:61%;bottom:0;
  background:linear-gradient(90deg,rgba(235,230,220,.96) 0%,rgba(235,230,220,.95) 40%,
             rgba(235,230,220,.62) 52%,rgba(235,230,220,0) 66%)}

/* Pita penerang di tepi atas. Bilah atas halaman depan tembus supaya
   fotonya utuh, dan tanpa pita ini menu kanan duduk tepat di atas
   dedaunan gelap di foto. */
.lp-hero-atas{position:absolute;left:0;right:0;top:0;height:118px;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,244,239,.92) 0%,rgba(246,244,239,.5) 56%,rgba(246,244,239,0) 100%)}

.lp-hero-kedua{display:inline-flex;align-items:center;font-size:1.03rem;font-weight:600;
  color:var(--ink);text-decoration:none;border-bottom:2px solid rgba(26,20,22,.26);padding-bottom:3px}
.lp-hero-kedua:hover{color:var(--a);border-color:var(--a)}

.lp-hero-in{position:relative;display:grid;gap:clamp(20px,4vw,34px);align-items:center;
  /* padding-block, BUKAN shorthand: .lp-wrap yang memberi jarak 20px di
     samping, dan shorthand di sini menolkannya — teksnya menempel ke
     tepi layar di HP. */
  padding-block:clamp(24px,5vw,52px) clamp(32px,6vw,64px)}
@media (min-width:980px){
  .lp-hero .lp-wrap{width:min(1240px,100%)}
  .lp-hero-in{grid-template-columns:minmax(0,556px) minmax(0,1fr)}
}

/* Layar lebar. Fotonya memang sudah penuh sampai tepi, tapi adegannya
   berhenti di 1240px, jadi di 1680px ada 240px kertas kosong di kanan
   dan adegannya terbaca terlalu ke tengah.

   Pitanya dilebarkan, kolom teks dinaikkan sedikit saja (600px, masih
   panjang baris yang enak dibaca — bukan mengikuti lebar pita), dan
   adegannya dirapatkan ke kanan alih-alih ditengahkan. Ukuran adegannya
   sendiri boleh tumbuh sedikit, tapi ada batasnya: aspect-ratio-nya
   tetap, jadi tiap 100px lebar menambah 107px tinggi, dan hero yang
   terlalu tinggi mendorong tombol ajakannya keluar layar laptop. */
@media (min-width:1440px){
  .lp-hero .lp-wrap{width:min(1440px,100%)}
  .lp-hero-in{grid-template-columns:minmax(0,600px) minmax(0,1fr)}
}
/* Satu tingkat lagi untuk layar sangat lebar. Kolom teksnya ikut naik,
   bukan cuma pitanya: kalau teksnya dipatok sementara adegannya
   dirapatkan ke kanan, seluruh kelebihan ruang berkumpul jadi satu
   lubang di tengah, dan itu terbaca lebih buruk daripada tepi kosong
   yang mau dihilangkan. */
@media (min-width:1760px){
  .lp-hero .lp-wrap{width:min(1560px,100%)}
  .lp-hero-in{grid-template-columns:minmax(0,660px) minmax(0,1fr)}
}

/* Di layar sempit fotonya turun jadi pita bawah dan teksnya kembali ke
   kertas polos. Penerang mendatar tidak bisa dipakai di sini: kolomnya
   selebar layar, jadi teksnya akan jatuh di atas bagian foto yang gelap. */
@media (max-width:979px){
  .lp-hero-foto{inset:auto 0 0 0;height:430px}
  .lp-hero-terang{top:0;bottom:430px;height:auto;background:var(--bg)}
  .lp-hero-terang2{top:auto;bottom:364px;height:66px;
    background:linear-gradient(180deg,var(--bg) 0%,rgba(246,244,239,.55) 52%,rgba(246,244,239,0) 100%)}
}

.lp-eyebrow{
  margin:0 0 14px;font-size:.72rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--a);
}
/* Tiga tingkat yang jaraknya sengaja jauh (13 -> 70 -> 30). Tiga
   ukuran yang mirip membuat mata menyapu bolak-balik mencari tempat
   berhenti; lompatan besar menjadikan urutan bacanya terbaca seketika.
   Yang terbesar adalah kata yang berganti, karena itulah yang paling
   ingin diketahui pengunjung: apakah ini untuk acara saya. */
.lp-h1{margin:0 0 20px}
.lp-h1 > span{display:block}
.lp-h-label{margin:0 0 12px;font-size:.81rem;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--soft-2)}
.lp-h-kata{margin:0 0 16px;position:relative;font-family:var(--display);font-weight:800;line-height:1;
  letter-spacing:-.052em;font-size:clamp(1.9rem,5.6vw,4.375rem);white-space:nowrap}
.lp-h-bungkus{display:inline-block}
/* Kata tetap hitam; yang berwarna cuma garisnya. Kata setinggi 70px
   yang berkedip tiap tiga detik terbaca seperti banner iklan, sedangkan
   garis yang menyapu terbaca seperti seseorang menggarisbawahi. Lebar
   garis mengikuti kata karena pembungkusnya inline-block. */
.lp-h-garis{display:block;height:.13em;margin-top:.13em;border-radius:99px;
  background:var(--kata,var(--a));transform-origin:left center}
.lp-h-sub{margin:0;font-family:var(--display);font-weight:600;line-height:1.2;
  letter-spacing:-.028em;color:#3a332e;font-size:clamp(1.1rem,2.7vw,1.875rem)}

@keyframes lpKata{from{opacity:0}to{opacity:1}}
@keyframes lpSapu{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lp-h-kata.is-ganti .lp-h-teks{animation:lpKata .3s ease-out both}
.lp-h-kata.is-ganti .lp-h-garis{animation:lpSapu .42s cubic-bezier(.2,.8,.25,1) both}
@media (prefers-reduced-motion:reduce){
  .lp-h-kata.is-ganti .lp-h-teks,.lp-h-kata.is-ganti .lp-h-garis{animation:none}
}
.lp-script{font-family:var(--script);font-weight:600;color:var(--a);font-size:1.16em;line-height:1}
.lp-lead{margin:0 0 26px;font-size:clamp(1rem,2.4vw,1.14rem);color:var(--soft);max-width:46ch}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap}
.lp-cta-center{justify-content:center}
.lp-note{margin:24px 0 0;font-size:.85rem;font-weight:500;color:var(--soft-2)}

/* --------------------------------------------------------------
   Adegan: benda-benda di atas meja
   --------------------------------------------------------------
   Tiap benda adalah container-nya sendiri, dan seluruh isinya
   berukuran cqw. Dengan begitu satu set aturan isi cukup untuk dua
   tata letak: bendanya mengecil sebagai satu kesatuan, bukan
   teksnya menyusut sendiri-sendiri.

   Yang membedakan "benda di atas meja" dari "kartu melayang" cuma
   bayangannya: satu lapis kontak rapat di titik sentuh, satu lapis
   ambien lebar. Hilangkan salah satunya dan adegannya langsung
   terbaca seperti kolase.
   -------------------------------------------------------------- */
.lp-adegan{position:relative;width:100%;max-width:628px;aspect-ratio:628/672;margin-inline:auto}
/* Layar lebar: adegannya tumbuh sedikit dan dirapatkan ke kanan.
   HARUS di bawah aturan dasar di atas, bukan digabung ke blok hero di
   bagian atas berkas: kekhususan keduanya sama persis, jadi yang
   menentukan tinggal urutan sumber, dan di atas ia tidak pernah
   berlaku sama sekali. */
@media (min-width:1440px){
  /* Dibatasi tinggi layar juga, bukan cuma lebar. aspect-ratio-nya
     tetap, jadi tiap piksel lebar membawa 1,07 piksel tinggi, dan di
     laptop 900px adegan selebar 760 akan mendorong tombol ajakannya
     ke bawah garis lipat. 76vh menahannya di sana tanpa perlu
     media query tinggi tersendiri. */
  .lp-adegan{max-width:min(680px,76vh);margin-inline:auto 0}
}
@media (min-width:1760px){
  .lp-adegan{max-width:min(760px,76vh)}
}
/* Posisi benda dalam PERSEN, bukan satuan container. Tiap benda adalah
   container-nya sendiri (supaya isinya bisa memakai cqw), jadi satuan
   cqw yang diwariskan dari sini akan mengacu ke benda itu sendiri —
   melingkar, dan hasilnya nol. Ini sudah pernah menggigit sekali. */
/* Peramban tanpa container query menyembunyikan adegannya, bukan
   menampilkannya rusak. Hero-nya tetap utuh: judul, ajakan, semuanya. */
@supports not (container-type:inline-size){.lp-adegan{display:none}}

/* Tiap benda dua lapis, dan ini WAJIB. Lapis luar cuma menentukan
   tempat dan ukuran (persen), lapis dalam yang membawa rupa. Sebabnya:
   satuan cqw pada aturan yang menempel di container TIDAK mengacu ke
   container itu sendiri — ia melompat ke container di atasnya, dan
   kalau tidak ada, ke lebar viewport. Sudut 5.6cqw sempat jadi 71px
   gara-gara itu. Lapis dalam bukan container, jadi cqw-nya benar. */
.lp-obj{position:absolute;margin:0;container-type:inline-size}

.lp-adegan picture{display:block;min-width:0}

/* ---------------------------------------------------------------------
   Kontras tulisan kecil di dalam maket
   ---------------------------------------------------------------------
   Empat tulisan di adegan hero terbaca mesin pemeriksa sebagai teks
   sungguhan, bukan bagian gambar: keterangan foto cetak, durasi lagu,
   alamat di bawah QR, dan durasi pesan suara. Ukurannya memang cuma
   4 sampai 9 px di layar, tapi Lighthouse tetap menuntut kontras 4.5
   dan menjatuhkan nilai aksesibilitas seluruh halaman karenanya.

   Keempatnya karena itu digelapkan sedikit sampai lolos, dengan rona
   hangat yang sama seperti semula. Selisihnya tidak terlihat di ukuran
   sekecil itu, dan menolong siapa pun yang memperbesar halaman.

   Angka di tiap baris adalah rasio terhadap latar di belakangnya.
   Kalau warnanya diubah, hitung ulang: batasnya 4.5.
   --------------------------------------------------------------------- */

/* --- foto cetak --- */
.lp-cetak{background:var(--paper);border-radius:2.9cqw;padding:6cqw 6cqw 5cqw;
  box-shadow:2cqw 3.5cqw 6cqw rgba(120,95,70,.18),10cqw 16cqw 28cqw rgba(120,95,70,.20)}
.lp-cetak picture{aspect-ratio:134/106}
.lp-cetak img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1.5cqw}
.lp-cetak-ket{display:block;margin-top:4.5cqw;font-family:var(--script);font-size:10.4cqw;
  line-height:1;color:#7c736d;text-align:center}  /* 4.56 di --paper */

/* --- telepon --- */
.lp-hp{height:100%;border-radius:13.8cqw;background:#15110f;padding:2.85cqw;
  box-shadow:2.4cqw 4cqw 6.5cqw rgba(120,95,70,.20),9cqw 14.6cqw 24cqw rgba(120,95,70,.24)}
.lp-hp-layar{width:100%;height:100%;border-radius:11.4cqw;overflow:hidden;
  background:#fffaf5;display:flex;flex-direction:column}
.lp-hp-layar > picture{height:83.7cqw;flex-shrink:0}
.lp-hp-layar > picture img{display:block;width:100%;height:100%;object-fit:cover}
.lp-hp-isi{padding:6.5cqw;display:flex;flex-direction:column;gap:2.85cqw}
.lp-hp-label{font-size:3.25cqw;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--a)}
.lp-hp-nama{font-size:11cqw;font-weight:800;letter-spacing:-.045em;line-height:1}
.lp-hp-surat{margin:0;font-size:4.3cqw;line-height:1.6;color:#6b6259}
.lp-hp-lagu{display:flex;align-items:center;gap:3.25cqw;border:1px solid rgba(26,20,22,.1);
  border-radius:4cqw;padding:2.85cqw 3.65cqw;font-size:3.85cqw;font-weight:600;color:var(--soft)}
.lp-hp-putar{width:8.5cqw;height:8.5cqw;border-radius:50%;background:var(--a);flex-shrink:0;
  display:grid;place-items:center}
.lp-hp-putar svg{width:3.7cqw;height:3.7cqw;fill:#fff}
.lp-hp-durasi{margin-left:auto;font-size:3.45cqw;font-weight:500;color:#7a726d;font-variant-numeric:tabular-nums} /* 4.54 */
.lp-hp-album{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.lp-hp-album picture,.lp-hp-album > span{height:15.4cqw}
.lp-hp-album img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2.4cqw}
.lp-hp-album > span{border-radius:2.4cqw;background:rgba(26,20,22,.07);display:grid;place-items:center;
  font-size:3.65cqw;font-weight:700;color:#7a716a}

/* --- kartu QR --- */
.lp-qr{background:var(--paper);border-radius:5.6cqw;padding:9.2cqw 9.2cqw 7.7cqw;text-align:center;
  box-shadow:2.8cqw 4.2cqw 7cqw rgba(120,95,70,.20),11cqw 18cqw 31cqw rgba(120,95,70,.22)}
.lp-qr-img{display:block;width:81.7cqw;height:auto;margin:0 auto}
.lp-qr-ajak{margin:5.6cqw 0 1.4cqw;font-family:var(--script);font-size:14.1cqw;line-height:1;color:var(--a)}
.lp-qr-url{margin:0;font-size:4.9cqw;letter-spacing:.05em;color:#7c746e} /* 4.51 di --paper */

/* --- kartu pesan suara --- */
.lp-suara{background:var(--card);border-radius:6.7cqw;padding:6.7cqw 7.3cqw;
  display:flex;flex-direction:column;gap:5cqw;
  box-shadow:2.2cqw 3.4cqw 5.6cqw rgba(120,95,70,.18),9cqw 14.6cqw 24.7cqw rgba(120,95,70,.20)}
.lp-suara-kepala{display:flex;align-items:center;gap:4.5cqw;font-size:6.2cqw;font-weight:700}
.lp-suara-ikon{width:14cqw;height:14cqw;border-radius:3.9cqw;background:#2f4fa0;flex-shrink:0;
  display:grid;place-items:center}
.lp-suara-ikon svg{width:6.7cqw;height:6.7cqw;stroke:#fff;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lp-suara-durasi{margin-left:auto;font-size:5.3cqw;font-weight:500;color:#7e746e;font-variant-numeric:tabular-nums} /* 4.55 di putih */
.lp-suara-gelombang{display:flex;align-items:flex-end;gap:1.4cqw;height:13.5cqw}
.lp-suara-gelombang i{display:block;width:1.7cqw;border-radius:1cqw;background:rgba(47,79,160,.5)}

/* --- catatan tulisan tangan --- */
.lp-catatan{background:#fffaef;border-radius:5.1cqw;padding:8.2cqw 8.9cqw;
  box-shadow:1.9cqw 3.2cqw 5.7cqw rgba(120,95,70,.16),9cqw 14cqw 24cqw rgba(120,95,70,.18)}
.lp-catatan p{margin:0;font-family:var(--script);font-size:11.4cqw;line-height:1.32;color:#3a332e}

/* --- tempat tiap benda: layar lebar (kotak adegan 628 x 672) --- */
.lp-obj-foto1  {left:3.822%; top:13.393%;width:21.338%;transform:rotate(-11deg)}
.lp-obj-hp     {left:23.567%;top:.595%;  width:39.172%;height:71.131%;transform:rotate(-3.5deg)}
.lp-obj-foto2  {left:.318%;  top:45.833%;width:19.427%;transform:rotate(6deg)}
.lp-obj-qr     {left:8.917%; top:69.345%;width:22.611%;transform:rotate(9deg)}
.lp-obj-suara  {left:71.338%;top:64.583%;width:28.344%;transform:rotate(-5deg)}
.lp-obj-catatan{left:73.248%;top:6.25%;  width:25.159%;transform:rotate(4deg)}

/* --- tempat tiap benda: layar sempit (kotak adegan 390 x 432) --- */
@media (max-width:979px){
  .lp-adegan{max-width:390px;aspect-ratio:390/432}
  /* Dua benda dibuang, bukan dikecilkan. Di 390px benda kelima dan
     keenam saling menutupi sampai tidak ada yang terbaca, dan yang
     paling mudah dikorbankan adalah yang isinya sudah terlihat di
     layar telepon. */
  .lp-obj-foto2,.lp-obj-catatan{display:none}
  .lp-obj-foto1{left:3.59%;  top:9.259%; width:27.692%}
  .lp-obj-hp   {left:44.615%;top:5.556%; width:48.205%;height:77.315%}
  .lp-obj-qr   {left:7.692%; top:49.537%;width:30.256%}
  .lp-obj-qr .lp-qr-url{display:none}
  .lp-obj-suara{left:60%;    top:66.667%;width:34.359%}
}

/* --------------------------------------------------------------
   Bagian umum
   -------------------------------------------------------------- */
.lp-sec{padding:clamp(46px,7vw,84px) 0}
.lp-alt{background:var(--bg2)}
.lp-h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,4.4vw,2.4rem);line-height:1.2;
  margin:0 0 10px;text-align:center;letter-spacing:-.035em;
}
.lp-sub{margin:0 auto 36px;text-align:center;color:var(--soft);max-width:52ch}

.lp-empty{
  max-width:44ch;margin:0 auto;padding:26px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius);
  background:var(--card);color:var(--soft);font-size:.92rem;
}
.lp-empty p{margin:0 0 8px}
.lp-empty p:last-child{margin:0}

/* --------------------------------------------------------------
   Langkah
   -------------------------------------------------------------- */
.lp-steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:34px}
.lp-step{text-align:center;padding:0 8px}
.lp-step-no{
  width:46px;height:46px;border-radius:50%;margin:0 auto 14px;
  display:grid;place-items:center;font-weight:700;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,var(--a),var(--a2));
  box-shadow:0 10px 22px rgba(26,20,22,.28);
}
.lp-step h3{margin:0 0 6px;font-size:1.02rem}
.lp-step p{margin:0;color:var(--soft);font-size:.92rem}

/* --------------------------------------------------------------
   Kartu fitur
   -------------------------------------------------------------- */
.lp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.lp-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;
}
.lp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.lp-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(26,20,22,.1);font-size:1.35rem;margin-bottom:14px;
}
.lp-card h3{margin:0 0 8px;font-size:1.02rem;line-height:1.35}
.lp-card p{margin:0;color:var(--soft);font-size:.9rem}

/* --------------------------------------------------------------
   Etalase contoh
   -------------------------------------------------------------- */
.lp-showcase{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.lp-demo{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:22px 16px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;
}
.lp-demo:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.lp-demo-phone{
  width:104px;height:186px;border-radius:18px;padding:7px;margin-bottom:12px;
  background:#2c1a24;box-shadow:0 12px 26px rgba(60,20,40,.28);
}
.lp-demo-screen{
  display:grid;place-items:center;width:100%;height:100%;border-radius:12px;
  background:linear-gradient(150deg,var(--a,var(--a)),var(--b,var(--a2)));
  position:relative;isolation:isolate;
}
/* Warnanya dari tema pilihan pelanggan, jadi kontras nama di atasnya tak
   bisa dijamin dari sini — dan menggelapkan temanya berarti mengubah
   ucapan milik orang. Yang digelapkan cuma lapisan di kartu ini; pada
   0.45 ketiga tema paling terang lewat 4.5. text-shadow tidak dihitung
   WCAG, jadi tidak bisa diandalkan. */
.lp-demo-screen::after{
  content:'';position:absolute;inset:0;border-radius:12px;z-index:-1;
  background:rgba(40,18,30,.45);
}
.lp-demo-name{
  font-family:var(--script);font-size:1.5rem;color:#fff;line-height:1.1;
  padding:0 8px;text-shadow:0 2px 6px rgba(0,0,0,.18);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:88px;
}
.lp-demo strong{font-size:.95rem}
.lp-demo small{color:var(--soft);font-size:.82rem}

/* --------------------------------------------------------------
   Harga
   -------------------------------------------------------------- */
.lp-prices{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));align-items:start}
.lp-price{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);padding:30px 26px;box-shadow:var(--shadow);
}
.lp-price.is-featured{
  border-color:var(--a);box-shadow:0 24px 60px rgba(26,20,22,.2);
  transform:translateY(-6px);
}
@media (max-width:720px){.lp-price.is-featured{transform:none}}
.lp-badge{
  position:absolute;top:-13px;left:50%;translate:-50% 0;
  padding:5px 15px;border-radius:999px;white-space:nowrap;
  background:var(--a);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.03em;
}
.lp-price h3{margin:0 0 4px;font-size:1.2rem}
.lp-price-tag{margin:0 0 16px;color:var(--soft);font-size:.88rem;min-height:2.6em}
.lp-amount{
  margin:0 0 18px;font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,4.6vw,2.1rem);line-height:1.15;color:var(--a);
}
.lp-amount span{display:block;font-family:var(--sans);font-size:.78rem;font-weight:500;color:var(--soft)}
.lp-perks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.lp-perks li{position:relative;padding-left:26px;font-size:.9rem;color:var(--soft)}
.lp-perks li::before{
  content:"✓";position:absolute;left:0;top:0;
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(26,20,22,.12);color:var(--a);font-size:.7rem;font-weight:700;
}

/* --------------------------------------------------------------
   Ulasan
   -------------------------------------------------------------- */
/* Grid, BUKAN columns. Kolom koran mengalir turun dulu baru pindah
   kolom, jadi dengan empat kartu yang tingginya berbeda urutan bacanya
   jadi 1-2 di kolom kiri, 3 di tengah, 4 di kanan — terbaca acak, dan
   satu kolom selalu jauh lebih panjang dari yang lain. */
.lp-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:18px;align-items:start}
.lp-review{
  margin:0;padding:22px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.lp-stars{color:#f5a524;font-size:.95rem;letter-spacing:2px;margin-bottom:10px}
.lp-stars span{color:rgba(0,0,0,.13)}
.lp-review blockquote{margin:0 0 16px;font-size:.94rem;color:var(--ink);line-height:1.65}
.lp-review figcaption{display:flex;align-items:center;gap:11px}
.lp-review figcaption img,.lp-avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;
}
.lp-avatar{
  display:grid;place-items:center;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--a),var(--a2));
}
.lp-review figcaption strong{display:block;font-size:.88rem}
.lp-review figcaption small{display:block;color:var(--soft);font-size:.78rem}

/* --------------------------------------------------------------
   Penutup & kaki
   -------------------------------------------------------------- */
/* Dulu band ini gradien merah muda penuh, dan tombol utamanya
   background:var(--a) — persis warna yang sama dengan latarnya sendiri.
   Tombol paling penting di halaman ini praktis tidak terlihat.

   Sekarang ia memakai nada selang yang sama dengan seksi lain, jadi
   tombolnya kembali menonjol tanpa perlu aturan khusus, dan gradien
   merah muda penuh lebar — salah satu penanda halaman donasi yang
   sudah kita hindari di mana-mana — hilang dari halaman ini. */
.lp-final{
  padding:clamp(50px,8vw,86px) 0;text-align:center;color:var(--ink);
  background:var(--bg2);border-top:1px solid var(--line);
}
.lp-final h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,4.6vw,2.4rem);margin:0 0 10px;letter-spacing:-.035em;
}
.lp-final p{margin:0 0 26px;color:var(--soft)}
/* Catatan lama di sini soal "putih penuh tanpa opacity" sudah tidak
   berlaku: bandnya bukan lagi merah muda penuh, jadi warnanya mengikuti
   aksen biasa seperti tautan lain di halaman ini. */
.lp-final-note{margin:18px 0 0;font-size:.94rem;color:var(--soft)}
/* Ajakan kedua sebagai tautan, bukan tombol berlatar putih: putih di
   atas nada selang cuma beda 1,26 dan garis tepinya lebih tipis lagi.
   Polanya sama dengan hero. */
.lp-final-kedua{display:inline-flex;align-items:center;font-size:1rem;font-weight:600;
  color:var(--ink);text-decoration:none;border-bottom:2px solid rgba(26,20,22,.26);
  padding-bottom:3px}
.lp-final-kedua:hover{color:var(--a);border-color:var(--a)}
.lp-final-note a{
  color:var(--a);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.lp-final-note a:hover{text-decoration-thickness:2px}

.lp-foot{padding:26px 0;border-top:1px solid var(--line);background:var(--bg)}
.lp-foot-in{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:.84rem;color:var(--soft);
}
.lp-foot-links{display:flex;gap:16px;flex-wrap:wrap}
.lp-foot-links a:hover{color:var(--a)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .lp-btn,.lp-card,.lp-demo{transition:none}
  .lp-bouquet .tl-stem{animation:none}
}

/* =====================================================================
   Halaman formulir pemesanan
   ===================================================================== */
.lp-form-page{padding:clamp(34px,6vw,64px) 0 clamp(50px,8vw,88px)}
.lp-form-wrap{max-width:720px}

.lp-form-head{text-align:center;margin-bottom:30px}
.lp-form-head h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.15;
  margin:0 0 12px;letter-spacing:-.035em;
}
.lp-form-head .lp-lead{margin:0 auto;max-width:44ch}

.lp-form{
  background:var(--card);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(22px,4vw,34px);box-shadow:var(--shadow);
  display:grid;gap:18px;
}
.lp-row2{display:grid;gap:18px}
@media (min-width:620px){.lp-row2{grid-template-columns:1fr 1fr}}

.lp-form label{display:grid;gap:7px}
.lp-form label > span{font-size:.88rem;font-weight:600;color:var(--ink)}
.lp-form label > span b{color:var(--a);font-weight:600}
.lp-form label > small{font-size:.78rem;color:var(--soft)}

/* Ruas isian WAJIB >= 16px. Di bawah itu Safari iOS memperbesar seluruh
   halaman tiap ruas disentuh — ambang keras di WebKit, tidak bisa
   dimatikan tanpa mengunci cubit-zoom. Jangan diturunkan demi kerapian;
   kalau terasa terlalu besar, kecilkan padding-nya. */
.lp-form input,.lp-form select,.lp-form textarea{
  width:100%;padding:12px 14px;
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fffdfe;border:1.5px solid var(--line);border-radius:13px;
  outline:none;transition:border-color .18s ease,box-shadow .18s ease;
}
.lp-form textarea{resize:vertical;min-height:130px;line-height:1.65}
.lp-form input:focus,.lp-form select:focus,.lp-form textarea:focus{
  border-color:var(--a);box-shadow:0 0 0 4px rgba(26,20,22,.12);
}
.lp-form-note{margin:0;text-align:center;font-size:.79rem;color:var(--soft);line-height:1.6}

/* Kartu acara di halaman coba. Radionya disembunyikan secara visual tapi
   tetap di pohon aksesibilitas dan tetap bisa difokus, jadi tombol panah
   dan pembaca layar bekerja seperti radio biasa. --tpl-a/--tpl-b disisipkan
   inline dari warna preset tema, sama dengan kartu di admin/template.php. */
.lp-pilih{margin:0;padding:0;border:0;min-width:0}
.lp-pilih legend{padding:0;margin-bottom:9px;font-size:.88rem;font-weight:600;color:var(--ink)}
.lp-pilih legend b{color:var(--a);font-weight:600}
.lp-pilih-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.lp-pilih-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.lp-form .lp-pilih-opsi{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:10px;cursor:pointer;
  background:#fffdfe;border:1.5px solid var(--line);border-radius:13px;
  transition:border-color .15s ease,background-color .15s ease;
}
.lp-pilih-opsi input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.lp-pilih-swatch{
  flex:none;width:24px;height:24px;border-radius:7px;
  background:linear-gradient(135deg,var(--tpl-a),var(--tpl-b));
}
.lp-pilih-nama{font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.3;min-width:0}
/* Di HP, dua kolom menyisakan ±85px untuk nama, dan "Penyemangat" butuh
   94px. Swatch dipindah ke atas supaya namanya dapat lebar kartu penuh. */
@media (max-width:419px){
  .lp-form .lp-pilih-opsi{flex-direction:column;align-items:flex-start;gap:7px;padding:10px 8px 9px 10px}
  .lp-pilih-swatch{width:20px;height:20px;border-radius:6px}
}
.lp-pilih-lagi{margin:12px 0 0;font-size:.82rem;line-height:1.5;color:var(--soft-2)}
.lp-pilih-fitur{display:none;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.lp-pilih-fitur li{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  font-size:.76rem;font-weight:600;color:var(--soft);
  background:var(--bg);border:1px solid var(--line);
}
.lp-pilih-fitur b{
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--a);
}
.lp-pilih-judul{margin-top:14px}
.lp-pilih:has(input[name=template]):not(:has(input[value=bebas]:checked)) .lp-pilih-judul{display:none}
@media (hover:hover){.lp-form .lp-pilih-opsi:hover{border-color:rgba(26,20,22,.28)}}
/* Keadaan terpilih digambar lewat saudara radionya, bukan :has(), supaya
   tetap terlihat di peramban HP lama. ::after ini menempel ke label
   (satu-satunya leluhur yang diposisikan) dan menutup garis aslinya. */
.lp-pilih-nama::after{
  content:"";position:absolute;inset:-1.5px;border-radius:13px;
  border:1.5px solid transparent;pointer-events:none;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.lp-pilih-opsi input:checked ~ .lp-pilih-nama::after{border-color:var(--a);background:rgba(192,38,74,.06)}
.lp-pilih-opsi input:focus-visible ~ .lp-pilih-nama::after{border-color:var(--a);box-shadow:0 0 0 4px rgba(26,20,22,.12)}

.lp-alert{
  margin:0 0 18px;padding:13px 16px;border-radius:13px;
  background:rgba(26,20,22,.1);color:#b32b52;
  font-size:.9rem;font-weight:600;line-height:1.55;
}

/* --------------------------------------------------------------
   Halaman "pesanan terkirim"
   -------------------------------------------------------------- */
.lp-done{
  text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(34px,6vw,54px) clamp(22px,4vw,40px);box-shadow:var(--shadow);
}
.lp-done-ico{
  width:64px;height:64px;border-radius:50%;margin:0 auto 20px;
  display:grid;place-items:center;font-size:1.7rem;color:#fff;
  background:linear-gradient(135deg,#3fae7a,#5fc99a);
  box-shadow:0 12px 30px rgba(63,174,122,.34);
}
.lp-done h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,4.4vw,2.05rem);margin:0 0 12px;
}
.lp-done p{margin:0 auto 12px;max-width:46ch;color:var(--soft)}
.lp-done-note{
  padding:14px 18px;border-radius:14px;
  background:rgba(26,20,22,.07);color:var(--soft);font-size:.9rem;
}
.lp-done .lp-cta{margin-top:24px}

/* =====================================================================
   Halaman masuk & daftar
   ===================================================================== */
.lp-auth-wrap{max-width:460px}
.lp-auth-form{display:grid;gap:16px}
.lp-alert.is-ok{background:rgba(63,174,122,.12);color:#1f7a54}

.lp-google{
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:13px 20px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;
  font-size:.94rem;font-weight:600;color:var(--ink);
  transition:transform .18s ease,border-color .18s ease;
}
.lp-google:hover{transform:translateY(-2px);border-color:var(--a)}
.lp-google svg{width:19px;height:19px;flex:0 0 auto}

.lp-or{
  display:flex;align-items:center;gap:12px;margin:20px 0;
  color:var(--soft);font-size:.8rem;
}
.lp-or::before,.lp-or::after{content:"";flex:1;height:1px;background:var(--line)}

.lp-auth-switch{
  margin:20px 0 0;text-align:center;font-size:.88rem;color:var(--soft);
}
.lp-auth-switch a{color:var(--a);font-weight:600}
.lp-auth-switch a:hover{text-decoration:underline}

/* =====================================================================
   Halaman pembayaran
   ===================================================================== */
.lp-done-ico.is-wait{background:linear-gradient(135deg,#c08a2a,#e0ab4a);box-shadow:0 12px 30px rgba(192,138,42,.34)}

.pay-sum{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;
  background:linear-gradient(135deg,rgba(26,20,22,.09),rgba(120,95,70,.14));
  border:1px solid var(--line);
}
.pay-sum span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.pay-sum b{font-size:1.05rem}
.pay-total{text-align:right}
.pay-total b{font-family:var(--display);font-size:1.6rem;color:var(--a)}

.pay-why summary{
  cursor:pointer;list-style:none;padding:10px 0;
  font-size:.88rem;font-weight:600;color:var(--a);
}
.pay-why summary::-webkit-details-marker{display:none}
.pay-why summary::before{content:"▸ ";display:inline-block;transition:transform .18s}
.pay-why[open] summary::before{content:"▾ "}
.pay-why ul{margin:0 0 10px;padding-left:22px;color:var(--soft);font-size:.88rem;line-height:1.8}
.pay-why li small{opacity:.7}
.pay-why p{margin:0;font-size:.84rem;color:var(--soft)}

.pay-rek{
  text-align:center;padding:24px 20px;border-radius:16px;
  border:1px dashed var(--line);background:#fffdfe;
}
.pay-rek h3{margin:0 0 12px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft)}
.pay-bank{margin:0;font-size:1rem;font-weight:700}
.pay-no{
  margin:6px 0;font-family:var(--display);font-size:1.7rem;
  letter-spacing:.06em;color:var(--a);word-break:break-all;
}
.pay-an{margin:0 0 14px;font-size:.9rem;color:var(--soft)}
.pay-qris{width:min(220px,70%);margin:16px auto 0;border-radius:12px}
.pay-tip{margin:14px 0 0;font-size:.84rem;color:var(--soft)}

/* Pembayaran otomatis */
.pay-auto{display:grid;gap:10px}
.pay-auto-note{margin:0;text-align:center;font-size:.83rem;color:var(--soft);line-height:1.6}
.pay-sandbox{
  margin:0;padding:10px 14px;border-radius:12px;text-align:center;
  background:rgba(214,148,42,.14);color:#96631a;font-size:.82rem;font-weight:600;
}

/* ==================================================================
   Halaman hukum — Kebijakan Privasi & Ketentuan Layanan
   ------------------------------------------------------------------
   Teks panjang yang dibaca berurutan, bukan dipindai. Lebarnya
   dipatok ~68 karakter: lebih lebar dari itu mata kehilangan baris
   saat berpindah ke kiri.
   ================================================================== */
.lg-page{padding:clamp(34px,6vw,64px) 0 clamp(50px,8vw,88px)}
.lg-wrap{max-width:760px}

.lg-judul{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,5.5vw,2.6rem);line-height:1.15;
  color:var(--ink);margin:0 0 8px;text-wrap:balance;
}
.lg-tanggal{
  font-size:.86rem;color:var(--soft);margin:0 0 30px;
}

.lg-isi{font-size:1rem;line-height:1.75;color:var(--ink)}
.lg-isi p{margin:0 0 16px;max-width:68ch}

.lg-ringkas{
  padding:18px 20px;margin:0 0 34px !important;
  background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:1.02rem;
}

.lg-isi h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.15rem,3.4vw,1.4rem);line-height:1.3;
  color:var(--ink);margin:38px 0 14px;
  padding-top:20px;border-top:1px solid var(--line);
}
.lg-isi h2:first-child{margin-top:0;padding-top:0;border-top:0}

.lg-daftar{margin:0 0 18px;padding-left:22px;max-width:68ch}
.lg-daftar li{margin-bottom:8px}

.lg-isi a{color:var(--a);text-decoration:underline;text-underline-offset:2px}
.lg-isi a:hover{text-decoration-thickness:2px}

.lg-isi code{
  font-size:.9em;padding:2px 6px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--line);
}

.lg-tabel{
  width:100%;margin:0 0 26px;
  border-collapse:collapse;font-size:.94rem;
}
.lg-tabel th,.lg-tabel td{
  padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.lg-tabel th{
  font-weight:600;color:var(--soft);
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
.lg-tabel tbody tr:last-child td{border-bottom:0}

.lg-akhir{
  margin-top:34px !important;padding-top:20px;
  border-top:1px solid var(--line);color:var(--soft);
}

/* Tabel di layar sempit: bertumpuk, bukan digencet.
   ------------------------------------------------------------------
   Percobaan pertama memakai overflow-x supaya tabelnya menggulir
   menyamping. Hasilnya di 375px: kolom pertama menyempit sampai satu
   kata per baris ("Nama, / email, kata / sandi") — terbaca, tapi
   menyakitkan. Tabel tiga kolom berisi kalimat memang tidak muat di
   layar 6 inci, dan menggulir menyamping di tengah teks bacaan justru
   membuat orang kehilangan tempat.

   Jadi tiap baris dipecah jadi kartu, dan judul kolomnya dicetak
   ulang di atas tiap sel lewat data-label. Atributnya diisi dari
   <th> tabelnya sendiri oleh kode, bukan diketik tangan — jadi label
   tidak bisa melenceng dari judul kolom saat isinya diubah. */
@media (max-width:640px){
  .lg-tabel thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .lg-tabel,.lg-tabel tbody,.lg-tabel tr,.lg-tabel td{display:block;width:100%}
  .lg-tabel tr{
    padding:16px 0;border-bottom:1px solid var(--line);
  }
  .lg-tabel tbody tr:last-child{border-bottom:0}
  .lg-tabel td{padding:0 0 10px;border:0}
  .lg-tabel td:last-child{padding-bottom:0}
  .lg-tabel td::before{
    content:attr(data-label);display:block;
    font-size:.72rem;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:var(--soft);margin-bottom:3px;
  }
}

/* Tautan swalayan di bawah ajakan utama — hadir, tapi tidak bersaing. */
.lp-quiet{
  display:inline-block;margin-top:6px;
  color:var(--a);text-decoration:none;
  font-weight:600;font-size:.92rem;
  border-bottom:1px solid color-mix(in srgb,var(--a) 35%,transparent);
}
.lp-quiet:hover{border-bottom-color:var(--a)}

/* =====================================================================
   FASE 2 — acara, kartu fitur bermockup, perbandingan, tanya jawab
   ===================================================================== */

.lp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.lp-wrap-sempit{width:min(760px,100%)}
.lp-eyebrow-center{text-align:center}

/* --------------------------------------------------------------
   Mau bikin untuk apa
   -------------------------------------------------------------- */
.lp-acara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:26px}
.lp-acara-kartu{
  display:flex;flex-direction:column;gap:9px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease;
}
.lp-acara-kartu:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.lp-acara-kartu:focus-visible{outline:3px solid var(--ac,var(--a));outline-offset:3px}
.lp-acara-ikon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  /* color-mix membuat tint-nya mengikuti --ac tanpa menuliskan enam
     nilai rgba. Peramban lama jatuh ke abu netral, bukan ke tanpa latar. */
  background:rgba(26,20,22,.06);
  background:color-mix(in srgb,var(--ac) 11%,transparent);
}
.lp-acara-ikon svg{width:21px;height:21px;fill:none;stroke:var(--ac);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.lp-acara-kartu strong{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.lp-acara-tag{font-size:.86rem;color:var(--soft);line-height:1.55}
/* Chip sengaja netral, bukan sewarna kartunya. Enam kartu dikali tiga
   chip berwarna itu delapan belas benda berwarna dalam satu blok, dan
   hijau Penyemangat cuma mencapai 4,0:1 di atas tint-nya sendiri. */
.lp-acara-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.lp-acara-chips span{font-size:.72rem;font-weight:600;color:var(--soft);
  background:rgba(26,20,22,.055);padding:4px 10px;border-radius:999px}
.lp-acara-kartu.is-kosong{background:rgba(255,255,255,.5);border-style:dashed;box-shadow:none}
.lp-acara-kartu.is-kosong strong{color:var(--soft-2)}
@media (prefers-reduced-motion:reduce){
  .lp-acara-kartu{transition:none}
  .lp-acara-kartu:hover{transform:none}
}

/* --------------------------------------------------------------
   Kartu fitur: empat besar bermockup, empat ringkas
   -------------------------------------------------------------- */
.lp-fitur-utama{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:18px;margin-top:26px}
.lp-fitur-besar{display:flex;gap:18px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.lp-fitur-besar h3{margin:0 0 5px;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.lp-fitur-besar p{margin:0;font-size:.86rem;color:var(--soft);line-height:1.6}

.lp-fitur-ringkas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;margin-top:14px}
.lp-fitur-kecil{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.lp-fitur-kecil h3{margin:0 0 5px;font-size:.95rem;font-weight:700}
.lp-fitur-kecil p{margin:0;font-size:.8rem;color:var(--soft);line-height:1.55}

/* Mockup kecil: semuanya CSS, tidak ada gambar yang diunduh. */
.lp-mock{width:154px;height:118px;flex-shrink:0;border-radius:14px;background:var(--bg2);
  display:grid;place-items:center;position:relative;overflow:hidden}

.mk-amplop{width:104px;height:68px;background:#fff6f0;border:1.5px solid #e0c3a4;border-radius:5px;
  position:relative;box-shadow:0 6px 16px rgba(120,95,70,.16)}
.mk-tutup{position:absolute;left:-1.5px;right:-1.5px;top:-1.5px;height:42px;background:#efdcc6;
  border:1.5px solid #e0c3a4;border-radius:5px 5px 0 0;clip-path:polygon(0 0,100% 0,50% 100%)}
.mk-segel{position:absolute;left:50%;top:36px;transform:translateX(-50%);width:24px;height:24px;
  border-radius:50%;background:var(--a);box-shadow:0 3px 8px rgba(192,38,74,.34)}

.mk-lagu{display:flex;align-items:center;gap:9px;position:absolute;top:22px;left:16px;right:16px}
.mk-sampul{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--a2),var(--a));flex-shrink:0}
.mk-baris{display:flex;flex-direction:column;gap:5px;flex-grow:1}
.mk-baris i{display:block;height:7px;border-radius:4px;background:rgba(26,20,22,.42)}
.mk-baris i:last-child{width:52%;height:5px;background:rgba(26,20,22,.2)}
.mk-gelombang{position:absolute;left:16px;right:16px;bottom:24px;height:26px;
  display:flex;align-items:flex-end;gap:2.5px}
.mk-gelombang i{display:block;flex:1;border-radius:2px;background:rgba(192,38,74,.5)}

.mk-kartu{background:var(--paper);border-radius:9px;padding:9px 9px 7px;text-align:center;
  box-shadow:0 8px 20px rgba(120,95,70,.18)}
.mk-kartu .lp-qr-img{width:64px;height:auto;display:block;margin:0 auto}
.mk-kartu-ket{display:block;margin-top:4px;font-family:var(--script);font-size:.9rem;
  line-height:1;color:var(--a)}

.mk-titik{position:absolute;top:30px;display:flex;gap:9px}
.mk-titik i{width:13px;height:13px;border-radius:50%;background:#fff;border:1.5px solid rgba(192,38,74,.4)}
.mk-titik i.is-isi{background:var(--a);border-color:var(--a)}
.mk-tombol{position:absolute;bottom:26px;display:grid;grid-template-columns:repeat(3,30px);gap:6px}
.mk-tombol i{height:24px;border-radius:7px;background:#fff;border:1px solid rgba(26,20,22,.14)}

@media (max-width:560px){
  .lp-fitur-besar{flex-direction:column;align-items:flex-start}
  .lp-mock{width:100%;height:132px}
}

/* --------------------------------------------------------------
   Tabel perbandingan
   -------------------------------------------------------------- */
.lp-tabel-bungkus{margin-top:26px;overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card)}
.lp-tabel{width:100%;min-width:640px;border-collapse:collapse;font-size:.88rem}
.lp-tabel th,.lp-tabel td{padding:13px 16px;text-align:left;vertical-align:top;line-height:1.5}
.lp-tabel thead th{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft-2);border-bottom:1px solid var(--line)}
.lp-tabel tbody th{font-weight:700;color:var(--ink);width:24%}
.lp-tabel tbody td{color:var(--soft)}
.lp-tabel tbody tr + tr th,.lp-tabel tbody tr + tr td{border-top:1px solid var(--line)}
/* Kolom kita diberi latar, bukan teks berwarna: teks berwarna di lima
   baris sekaligus terbaca seperti iklan, latar tipis cukup menandainya. */
.lp-tabel .is-kita{background:rgba(192,38,74,.05)}
.lp-tabel thead .is-kita{color:var(--a)}
.lp-tabel tbody .is-kita{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------
   Tanya jawab
   -------------------------------------------------------------- */
.lp-tanya{margin-top:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);overflow:hidden}
.lp-tanya details + details{border-top:1px solid var(--line)}
.lp-tanya summary{padding:16px 20px;font-size:.98rem;font-weight:700;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:12px}
.lp-tanya summary::-webkit-details-marker{display:none}
.lp-tanya summary::after{content:"";margin-left:auto;width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--soft-2);border-bottom:2px solid var(--soft-2);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.lp-tanya details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.lp-tanya summary:focus-visible{outline:3px solid var(--a);outline-offset:-3px}
.lp-tanya p{margin:0;padding:0 20px 18px;font-size:.9rem;color:var(--soft);line-height:1.65;max-width:62ch}
@media (prefers-reduced-motion:reduce){.lp-tanya summary::after{transition:none}}

/* =====================================================================
   KATALOG GAYA (/gaya)
   ---------------------------------------------------------------------
   Tiap kartu memakai warna gayanya sendiri lewat --ga dan --ga2, jadi
   satu set aturan cukup untuk sepuluh kartu yang semuanya berbeda.
   Pratinjau kecilnya memakai warna latar sungguhan dari
   theme_backgrounds(), bukan warna karangan — kalau presetnya diubah,
   kartunya ikut berubah sendiri.
   ===================================================================== */
.gaya-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:18px;margin-top:30px}
.gaya-kartu{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}

/* --- pratinjau kecil --- */
.gaya-intip{padding:26px 22px 24px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:7px;min-height:168px;justify-content:center}
.gaya-intip.is-kiri{align-items:flex-start;text-align:left}
.gi-label{font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ga)}
.gi-nama{font-family:var(--script);font-size:2rem;line-height:1;color:var(--ga)}
.gi-garis{width:44px;height:2px;border-radius:2px;background:var(--ga2);margin:3px 0}
.gi-baris{width:76%;height:7px;border-radius:4px;background:currentColor;opacity:.16}
.gi-baris.is-pendek{width:52%}
/* Latar gelap: garis-garisnya harus terang, bukan gelap di atas gelap. */
.gaya-intip.is-gelap{color:#fff}
.gaya-intip.is-gelap .gi-baris{opacity:.3}

/* --- keterangan --- */
.gaya-isi{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.gaya-isi h2{margin:0;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.gaya-isi > p{margin:0;font-size:.86rem;color:var(--soft);line-height:1.55}
.gaya-ciri{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.gaya-ciri li{display:flex;gap:10px;font-size:.8rem;color:var(--ink)}
.gaya-ciri span{flex:0 0 66px;color:var(--soft-2);font-weight:600}
.gaya-lihat{margin-top:auto;padding-top:10px;font-size:.86rem;font-weight:600;
  color:var(--ga);text-decoration:none;align-self:flex-start}
.gaya-lihat:hover{text-decoration:underline}

/* ── Halaman lapor ────────────────────────────────────────────────
   Formulir tanpa satu baris JavaScript pun. Orang yang sedang
   melaporkan sesuatu yang menyakitinya adalah orang terakhir yang
   pantas gagal karena satu berkas gagal dimuat. */
.lapor-form{display:grid;gap:6px;margin:22px 0 10px}
.lapor-label{
  font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--ink);
  margin-top:14px;
}
.lapor-label small{font-weight:500;color:var(--soft-2)}
.lapor-isian{
  width:100%;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);
  font-family:var(--sans);font-size:.95rem;color:var(--ink);
}
.lapor-isian:focus{outline:2px solid var(--a2);outline-offset:1px}
.lapor-bantu{margin:2px 0 0;font-size:.8rem;color:var(--soft-2)}

.lapor-pilih{border:0;padding:0;margin:14px 0 0;display:grid;gap:8px}
.lapor-pilih .lapor-label{margin:0 0 2px;padding:0}
.lapor-opsi{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);cursor:pointer;font-size:.92rem;color:var(--soft);
}
.lapor-opsi:hover{border-color:var(--a2)}
.lapor-opsi input{margin-top:2px;flex:0 0 auto}

.lapor-sasaran{
  margin:0;padding:12px 14px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line);font-size:.92rem;
}
.lapor-sasaran small{display:block;margin-top:3px;color:var(--soft-2);word-break:break-all}

.lapor-galat,.lapor-catatan{
  margin:0 0 4px;padding:12px 14px;border-radius:12px;font-size:.92rem;
  border:1px solid var(--line);background:var(--card);color:var(--soft);
}
.lapor-galat{border-color:#e9b9c7;background:#fdf2f5;color:#8d2f47}

/* Umpan bot: harus ada di DOM dan terisi kalau diisi, tapi tidak
   pernah terlihat dan tidak pernah dibacakan pembaca layar.
   display:none dilewati sebagian bot, jadi dipindahkan keluar layar. */
.lapor-umpan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lapor-form > .lp-btn{justify-self:start;margin-top:18px}

/* Lambang merek. Ukurannya dalam persen ubin, bukan piksel: ubinnya
   berbeda-beda (28, 30, 32, dan 52px), dan satu angka persen menjaga
   bingkai kosong di sekelilingnya tetap sebanding di keempatnya. */
.merek-svg{width:64%;height:64%;display:block}

/* ==================================================================
   Artikel: daftar dan satu artikel
   ------------------------------------------------------------------
   Sengaja berawalan ar-, bukan memakai ulang lg-. Kelas lg- milik
   halaman Privasi dan Ketentuan; mengubahnya demi artikel akan ikut
   mengubah dua halaman hukum itu tanpa ada yang memperhatikan.
   ================================================================== */

/* Footer tetap di dasar layar walau isinya pendek. Dibatasi ke
   halaman artikel lewat :has() supaya halaman lain tidak berubah. */
body:has(> .ar-page){min-height:100svh;display:flex;flex-direction:column}
body:has(> .ar-page) > .ar-page{flex:1 0 auto}

.ar-page{padding:clamp(28px,5vw,56px) 0 clamp(56px,8vw,96px)}
.ar-wrap{max-width:720px}

.ar-draf{
  margin:0 0 18px;padding:10px 14px;border-radius:12px;
  background:rgba(214,148,42,.14);color:#7a5114;font-size:.88rem;
}

.ar-remah{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 18px;font-size:.86rem;color:var(--soft-2);
}
.ar-remah a{font-weight:600;color:var(--soft)}
.ar-remah a:hover{color:var(--a)}

.ar-judul{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,5.6vw,3rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 14px;text-wrap:balance;
}
.ar-meta{margin:0;font-size:.9rem;color:var(--soft-2)}
.ar-pengantar{margin:0;font-size:1.08rem;line-height:1.65;color:var(--soft);max-width:60ch}

/* aspect-ratio + object-fit: sampul berukuran apa pun menempati kotak
   yang sama, dan tempatnya sudah dipesan sebelum gambarnya tiba. */
.ar-sampul{
  margin:28px 0 0;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);background:var(--bg2);
}
.ar-sampul img{width:100%;height:100%;object-fit:cover}

.ar-lead{
  margin:28px 0 0;font-size:clamp(1.12rem,2.6vw,1.28rem);
  line-height:1.6;font-weight:500;color:var(--ink);
}

.ar-toc{
  margin:32px 0 0;padding:20px 22px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.ar-toc-judul{
  margin:0 0 10px;font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soft-2);
}
.ar-toc ol{margin:0;padding-left:20px;display:grid;gap:6px}
.ar-toc li::marker{color:var(--soft-2);font-weight:600}
.ar-toc a{font-weight:600;color:var(--ink)}
.ar-toc a:hover{color:var(--a)}

/* Isi: 18px, ~65 karakter per baris. */
.ar-isi{margin-top:36px;font-size:1.125rem;line-height:1.75;color:var(--soft)}
.ar-isi > *{margin:0 0 20px}
.ar-isi h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.35rem,3.6vw,1.65rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--ink);margin:48px 0 14px;
  /* Bilah atas menempel; tanpa ini lompatan daftar isi mendarat
     dengan judulnya tertutup bilah. */
  scroll-margin-top:96px;
}
.ar-isi h3{font-size:1.2rem;font-weight:800;color:var(--ink);margin:32px 0 10px}
.ar-isi strong{color:var(--ink)}
.ar-isi a{color:var(--a);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ar-isi a:hover{text-decoration-thickness:2px}
.ar-isi ul,.ar-isi ol{padding-left:24px}
.ar-isi li{margin-bottom:10px}
.ar-isi li::marker{color:var(--a)}
.ar-isi img{height:auto;border-radius:14px}
.ar-isi blockquote{padding:4px 0 4px 20px;border-left:3px solid var(--a);color:var(--ink)}

.ar-cta{
  display:grid;justify-items:start;gap:12px;
  margin-top:48px;padding:clamp(24px,4vw,36px);
  border-radius:var(--radius);background:var(--ink);color:#fff;
}
.ar-cta h2{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,3.4vw,1.6rem);line-height:1.25;color:#fff;
}
.ar-cta p{margin:0 0 6px;color:rgba(255,255,255,.8);max-width:52ch}

/* ---------- Daftar dan kartu ---------- */
.ar-kepala{margin:0 0 36px}
.ar-grid{
  display:grid;gap:24px;margin-top:24px;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}
.ar-bawah{max-width:720px}

.ar-kartu{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.ar-kartu:focus-visible{outline:3px solid var(--a);outline-offset:3px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ar-kartu{transition:transform .2s ease-out,box-shadow .2s ease-out}
  .ar-kartu:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
}
.ar-kartu-foto{
  display:grid;place-items:center;aspect-ratio:16/9;
  background:var(--bg2);color:var(--a);
}
.ar-kartu-foto img{width:100%;height:100%;object-fit:cover}
.ar-kosong{width:44px;height:44px;opacity:.45}
.ar-kartu-teks{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px 22px 22px}
.ar-kartu-judul{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:1.15rem;line-height:1.3;color:var(--ink);text-wrap:balance;
}
.ar-kartu:hover .ar-kartu-judul{color:var(--a)}
.ar-kartu-ringkas{
  color:var(--soft);font-size:.95rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ar-kartu-meta{margin-top:auto;padding-top:6px;font-size:.84rem;color:var(--soft-2)}

@media (min-width:760px){
  .ar-kartu-utama{flex-direction:row}
  .ar-kartu-utama .ar-kartu-foto{flex:0 0 56%;aspect-ratio:auto;min-height:340px}
  .ar-kartu-utama .ar-kartu-teks{justify-content:center;gap:12px;padding:36px 40px}
  .ar-kartu-utama .ar-kartu-judul{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2}
  .ar-kartu-utama .ar-kartu-ringkas{font-size:1.02rem;-webkit-line-clamp:4}
  .ar-kartu-utama .ar-kartu-meta{margin-top:8px}
}

.ar-lain{margin-top:clamp(56px,8vw,88px)}
.ar-lain-judul{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(1.35rem,3.6vw,1.65rem);color:var(--ink);
}