/* Gaya khusus halaman kategori SEO (undangan-digital-*.html).
   Dipakai bersama oleh semua halaman yang dibangkitkan
   tools/buat-halaman-kategori.js. Sisanya memakai assets/style.css. */

/* Bagian kepala halaman. JANGAN memakai kelas .legal untuk ini walau
   jaraknya kebetulan sama: .legal a mematok color:var(--accent-dark) dan
   itu lebih spesifik daripada .btn-primary, sehingga tombol utama di
   dalamnya berubah jadi tulisan cokelat di atas latar cokelat — 1.51:1,
   nyaris tak terbaca. Sudah pernah terjadi, 2026-10-24. */
.kat-hero{padding-top:var(--s6);padding-bottom:var(--s6);}

.kat-lead{max-width:680px;}
.kat-lead p{font-size:16.5px;line-height:1.75;color:var(--ink-mid);}
/* p{} di style.css tidak memberi margin sama sekali, dan di beranda itu
   tidak pernah terlihat karena tiap .section-head cuma berisi satu
   paragraf. Di sini pembukanya dua paragraf, dan tanpa aturan ini
   keduanya menempel jadi satu blok yang berat dibaca di HP. */
.kat-lead p + p{margin-top:var(--s2);}
.kat-aksi{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4);}
.kat-daftar{max-width:680px;}
.kat-daftar li{margin-bottom:10px;line-height:1.7;}

/* Kartu tema. Memakai .step-card dari style.css untuk kotak & bingkainya;
   yang perlu ditambah cuma bidang fotonya, karena .step-foto dipatok 4/3
   untuk foto lanskap di beranda, sementara thumbnail tema berformat
   potret 2:3 dan akan terpotong parah. */
.tema-foto{margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--s3);aspect-ratio:2/3;background:var(--paper-2);}
.tema-foto img{width:100%;height:100%;object-fit:cover;display:block;}

.tema-harga{display:inline-block;font-size:13px;font-weight:600;color:var(--ink-mid);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;margin-bottom:var(--s2);}

/* .step-card p dipatok 14px untuk keterangan pendek di beranda. Di sini
   paragrafnya BUKAN keterangan: itu teks yang dibaca orang untuk memilih
   tema, dan aturan konten kita mematok teks badan minimal 16px. Hanya
   kartu tema yang dinaikkan; kartu langkah "Proses" tetap 14px. */
.tema-kartu p{font-size:16px;}
.tema-kartu .tema-harga{font-size:13px;}

/* Tautan pratinjau adalah aksi utama tiap kartu, jadi ia harus bisa
   ditekan jempol — sebagai teks sebaris tingginya cuma 17px, jauh di
   bawah 44px yang kita patok. */
.tema-aksi{margin-bottom:0;}
.tema-aksi a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;}

/* a{} di style.css sengaja color:inherit tanpa garis bawah, dan tiap
   halaman memberi gayanya sendiri (.legal a hanya berlaku di dalam
   section .legal, yang tidak dipakai di sini). Tautan yang tidak terlihat
   sebagai tautan tidak akan diklik. */
.tema-aksi a,
.legal-terkait a,
.kat-lead .eyebrow a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}

/* Tautan remah diberi ruang tekan, walau sebagai satu tautan terpisah
   tanpa tetangga ia tidak perlu penuh 44px. */
.kat-lead .eyebrow a{display:inline-block;padding:7px 0;}

/* Baris "lihat juga" dipatok 14px di style.css; di sini dinaikkan ke
   16px mengikuti aturan teks badan minimal 16px. */
.legal-terkait{font-size:16px;}