/* =============================================================
   Kerangka Publik — gaya khusus halaman publik (tanpa sidebar).

   Dimuat SETELAH dash-v2*.css dan landing-v2.css. Isinya sengaja tipis:
   navbar, tombol, dan token warna semuanya sudah datang dari landing-v2.css,
   sedangkan kartu & tabel isi halaman datang dari dash-v2-page.css. Yang
   ditulis di sini hanya perekat di antara keduanya.
   ============================================================= */

/* Kerangka dasbor memberi `body.dz` latar abu dan mengunci tinggi lewat
   grid sidebar. Kerangka ini tidak punya sidebar, jadi keduanya dilepas.

   Kelas `lp` sengaja tidak dipakai di body (lihat catatan di publik-v2.php),
   jadi dasar tipografinya ditulis di sini — tanpa reset `p { margin:0 }` yang
   akan merusak halaman prosa. */
body.dzp {
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    color: var(--ink, #0f172a);
    background: var(--paper, #fff);
    display: block;
    min-height: 100vh;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
body.dzp a { text-decoration: none; }
body.dzp img { max-width: 100%; height: auto; }

/* ---- Prosa halaman statis (Kebijakan Privasi, Ketentuan Layanan) ----
   Isinya HTML mentah dari editor admin, jadi tidak ada kelas yang bisa
   disasar — penataannya lewat tag langsung di dalam kartu isi. */
.dzp-main .card-body > p,
.dzp-main .card-body > ul,
.dzp-main .card-body > ol { margin-bottom: 1rem; line-height: 1.8; color: var(--ink-2, #475569); }
.dzp-main .card-body > ul,
.dzp-main .card-body > ol { padding-left: 1.35rem; }
.dzp-main .card-body > ul li,
.dzp-main .card-body > ol li { margin-bottom: .4rem; }
.dzp-main .card-body > h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 1.9rem 0 .7rem; }
.dzp-main .card-body > h4 { font-size: .98rem; font-weight: 700; margin: 1.3rem 0 .5rem; }
.dzp-main .card-body > h3:first-child,
.dzp-main .card-body > h4:first-child { margin-top: 0; }
/* :not(.btn) WAJIB.

   Tanpa itu aturan ini ikut mengecat SEMUA tombol di dalam kartu — dan tombol
   di panel ini berupa <a class="btn">, bukan <button>. Hasilnya teks biru di
   atas latar biru: tombol "Lihat Detail" ada tapi tulisannya tidak terbaca.
   Aturan prosa hanya boleh menyentuh tautan di dalam kalimat. */
.dzp-main .card-body a:not(.btn) { color: var(--blue, #2b7fff); }
.dzp-main .card-body a:not(.btn):hover { text-decoration: underline; }

.dzp-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s5, 1.5rem); }

/* Ruang di atas dilebihkan karena navbar publik melayang (sticky) — tanpa
   itu, judul halaman tertutup navbar saat halaman pertama dibuka. */
.dzp-main { padding: var(--s6, 2rem) 0 var(--s8, 4.5rem); min-height: 62vh; }

/* ---- Kepala halaman ---- */
.dzp-head { margin-bottom: var(--s5, 1.5rem); }
.dzp-crumb { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--ink-3, #94a3b8); margin-bottom: .4rem; }
.dzp-crumb a { color: var(--ink-3, #94a3b8); }
.dzp-crumb a:hover { color: var(--blue, #2b7fff); }
.dzp-crumb svg { width: 14px; height: 14px; }
.dzp-head h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.2; letter-spacing: -.02em; margin: 0; }

/* ---- Ajakan daftar di kaki isi ---- */
.dzp-ajak {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s5, 1.5rem);
    flex-wrap: wrap;
    margin-top: var(--s6, 2rem); padding: var(--s5, 1.5rem);
    border: 1px solid var(--line, #e8edf4); border-radius: var(--r-lg, 16px);
    background: linear-gradient(135deg, rgba(43,127,255,.07), rgba(147,51,234,.05));
}
.dzp-ajak b { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.dzp-ajak span { font-size: .9rem; color: var(--ink-2, #475569); }

/* ---- Footer ---- */
.dzp-foot {
    border-top: 1px solid var(--line, #e8edf4);
    background: var(--paper-2, #f8fafc);
    padding: var(--s7, 3rem) 0 var(--s5, 1.5rem);
}
/* Kolom Informasi diberi jatah lebih lebar: isinya judul halaman buatan admin
   yang panjangnya tidak bisa diramalkan ("Keuntungan Join Digiza ID" pecah jadi
   dua baris di kolom sempit), sementara Navigasi dan Akun isinya pendek-pendek
   dan tetap. */
.dzp-foot-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1.6fr .9fr;
    gap: var(--s6, 2rem);
    padding-bottom: var(--s6, 2rem);
}

/* Dua lajur begitu halamannya lebih dari empat. Satu lajur panjang membuat
   kolom di sebelahnya menganga dan kaki halaman jadi tinggi tanpa guna. */
.dzp-f-list-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4, 1rem); }
.dzp-foot-brand .lp-logo { margin-bottom: .75rem; }
.dzp-foot-brand p { font-size: .86rem; line-height: 1.7; color: var(--ink-2, #475569); max-width: 42ch; }

/* margin-top:0 ditulis eksplisit. Reset landing-v2.css hanya menjangkau
   h1..h5 — h6 tidak ikut, jadi tanpa ini ia mewarisi margin atas bawaan
   peramban dan judul kolomnya turun sendiri di halaman depan saja. */
.dzp-foot h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3, #94a3b8); margin: 0 0 .7rem; }
/* display:block hanya untuk tautan di dalam KOLOM, bukan seluruh footer.

   Sebelumnya disasar `.dzp-foot a`, jadi ikut kena tautan di baris hak cipta
   paling bawah — "CR." dipaksa jadi blok sendiri dan turun ke baris kedua,
   memutus kalimat yang seharusnya utuh. */
.dzp-foot-grid a { display: block; font-size: .88rem; color: var(--ink-2, #475569); padding: .28rem 0; transition: color .18s; }
.dzp-foot a:hover { color: var(--blue, #2b7fff); }
.dzp-foot-kosong { font-size: .84rem; color: var(--ink-3, #94a3b8); }

.dzp-foot-bawah {
    border-top: 1px solid var(--line, #e8edf4);
    padding-top: var(--s4, 1rem);
    font-size: .84rem; color: var(--ink-3, #94a3b8);
    text-align: center;
}
/* Isinya satu kalimat dari pengaturan footer. Semua bagiannya dibuat sebaris —
   termasuk <p> kalau editornya menyisipkan itu. */
.dzp-foot-bawah p,
.dzp-foot-bawah a,
.dzp-foot-bawah span { display: inline; margin: 0; }

/* =============================== RESPONSIVE =============================== */
@media (max-width: 900px) {
    /* Merek melebar penuh, tiga kolom tautan berbagi baris di bawahnya —
       kalau semuanya ditumpuk satu lajur, footernya jadi sangat panjang. */
    .dzp-foot-grid { grid-template-columns: 1fr 1.4fr 1fr; }
    .dzp-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .dzp-main { padding-top: var(--s5, 1.5rem); }
    .dzp-ajak { flex-direction: column; align-items: stretch; text-align: center; }
    .dzp-ajak .lp-btn { width: 100%; }

    /* Susunan kaki halaman diatur ulang, bukan sekadar dipersempit.

       Dengan dua lajur apa adanya, Navigasi (4 tautan) berdampingan dengan
       Informasi (7 tautan, sebagian pecah dua baris) — kolom kiri berhenti di
       tengah sementara kanan terus memanjang, lalu Akun terdampar sendirian
       di bawah. Yang terlihat: kaki halaman tinggi, timpang, dan ompong.

       Sekarang: Navigasi dan Akun disandingkan (sama-sama pendek dan
       jumlahnya tetap), lalu Informasi mengambil satu baris penuh untuk
       dirinya sendiri dalam dua lajur. */
    .dzp-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s5, 1.5rem) var(--s4, 1rem); }
    .dzp-f-nav  { order: 1; }
    .dzp-f-akun { order: 2; }
    .dzp-f-info { order: 3; grid-column: 1 / -1; }

    /* Judul halaman yang panjang tetap boleh pecah dua baris — yang dirapikan
       jaraknya, supaya baris keduanya menempel ke barisnya sendiri dan tidak
       tersamar sebagai tautan terpisah. */
    .dzp-foot a { padding: .3rem 0; line-height: 1.35; }
    .dzp-foot-brand p { font-size: .84rem; }
}

@media (max-width: 380px) {
    /* Di layar sangat sempit dua lajur menyisakan ~140px per tautan — judul
       panjang jadi pecah tiga baris. Satu lajur lebih terbaca. */
    .dzp-f-list-2 { grid-template-columns: 1fr; }
}