/* ==========================================================================
   Halaman Artikel — gaya jurnal ilmiah: serif, rata kiri-kanan, kolom baca
   yang tidak terlalu lebar, section jelas terpisah. Warna & aksen tetap
   pakai token brand situs (var(--color-*) dari tema) supaya konsisten.
   ========================================================================== */

.pubangun-artikel .page-content__body {
	max-width: 960px;
}

/* Gambar inline yang diinsert penulis lewat "Add Media" bawaan editor
   klasik (bukan featured image) mewarisi `.page-content__body img` dari
   tema (dibuat untuk foto dekoratif di halaman Profil/Pengurus dkk.):
   `object-fit:cover` + `max-height:480px` MEMOTONG gambar untuk mengisi
   kotak, bukan menyesuaikan proporsi aslinya — merusak screenshot/diagram
   teknis yang datanya bisa hilang kepotong. Selector 2-class (bukan 1)
   supaya menang lawan rule tema meski dimuat belakangan (pola sama
   seperti override archive width di bawah). Properti lain (border-radius,
   cursor:zoom-in utk lightbox) sengaja tidak disentuh — masih relevan. */
.page-content__body.pubangun-artikel__body img {
	width: auto;
	max-height: none;
	object-fit: initial;
}

.pubangun-artikel__nomor {
	font-size: 0.8em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-secondary, #54595F);
	margin-bottom: 10px;
}

.pubangun-artikel .page-content__title {
	font-family: Georgia, 'Times New Roman', Times, serif;
	line-height: 1.25;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.pubangun-artikel__meta {
	/* `display:flex` sempat tidak ada di sini — `justify-content:center` di
	   bawah jadi no-op (butuh flex/grid container supaya berefek), 3 item
	   meta (tanggal/dibaca/kategori) cuma numpuk jadi teks inline tanpa
	   jarak jelas, terutama kentara saat wrap di HP. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	font-size: 0.85em;
}

.pubangun-penulis-wrap {
	max-width: 960px;
	margin: 10px auto 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
	overflow-x: auto;
}

.pubangun-penulis-table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	font-size: 0.88em;
}

.pubangun-penulis-table th,
.pubangun-penulis-table td {
	border-bottom: 1px solid var(--color-border, #e5e5e5);
	padding: 10px 16px;
	text-align: left;
	word-break: break-word;
}

.pubangun-penulis-table tr:last-child td {
	border-bottom: 0;
}

.pubangun-penulis-table th {
	background: rgba(60, 68, 156, 0.06);
	font-weight: 700;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-primary, #3c449c);
}

.pubangun-penulis-table td:first-child {
	color: var(--color-dark, #040404);
}

/* Tabel 4 kolom (Penulis/Jabatan/Institusi/Email) di lebar HP (~350-390px
   isi kolom setelah dikurangi padding halaman) TIDAK overflow secara
   teknis (table-layout:auto + word-break sudah menjamin itu, terverifikasi
   scrollWidth), tapi hasilnya tiap kata kepotong-potong tiap baris ("Rina/
   Wijay/a") — teknis-benar tapi praktis tidak terbaca. Diubah jadi tumpukan
   kartu per-penulis (bukan tabel) di bawah 640px, label kolom ditaruh lewat
   `content:attr(data-label)` jadi tidak perlu markup ganda. Tetap "utuh
   tanpa scroll" sesuai diminta sebelumnya — cuma ganti orientasi tampilan
   dari grid ke tumpukan, bukan menambah scrollbar. */
@media (max-width: 640px) {
	.pubangun-penulis-table thead { display: none; }
	.pubangun-penulis-table, .pubangun-penulis-table tbody, .pubangun-penulis-table tr, .pubangun-penulis-table td {
		display: block;
		width: 100%;
	}
	.pubangun-penulis-table tr {
		padding: 12px 16px;
		border-bottom: 1px solid var(--color-border, #e5e5e5);
	}
	.pubangun-penulis-table tr:last-child { border-bottom: 0; }
	.pubangun-penulis-table td {
		border-bottom: 0;
		padding: 3px 0;
	}
	.pubangun-penulis-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--color-primary, #3c449c);
	}
}

.pubangun-penulis-email {
	color: var(--color-primary, #3c449c);
	text-decoration: none;
}

.pubangun-penulis-email:hover {
	text-decoration: underline;
}

/* Toolbar di header: baris 1 = PDF (menonjol) + Bagikan (berwarna),
   baris 2 = Rating (bintang besar warna emas) — dipisah jadi 2 baris
   (2026-08-17, susulan) supaya rating punya ruang sendiri, tidak berebut
   tempat dengan tombol lain di baris yang sama. Gantikan tombol PDF teks
   lama + blok engagement yang dulu di bawah artikel. */
.pubangun-artikel__toolbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.pubangun-artikel__toolbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pubangun-artikel__toolbar-sep {
	width: 1px;
	height: 24px;
	background: var(--color-border, #e5e5e5);
	margin: 0 2px;
}

/* Tombol PDF sengaja BUKAN icon bundar polos seperti share — ini aksi
   utama di halaman baca, jadi dibuat menonjol: label teks kelihatan +
   latar warna primer, bukan cuma outline & tooltip seperti tombol lain. */
.pubangun-artikel__pdf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border-radius: 20px;
	background: var(--color-primary, #3c449c);
	color: #fff;
	font-family: var(--font-body, sans-serif);
	font-size: 0.9em;
	font-weight: 600;
	white-space: nowrap;
}

.pubangun-artikel__pdf-btn:hover {
	background: var(--color-dark, #040404);
	color: #fff;
	text-decoration: none;
}

.pubangun-artikel__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border, #dcdcde);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
}

.pubangun-artikel__icon-btn:hover {
	text-decoration: none;
	opacity: 0.8;
}

/* Warna permanen per ikon share (bukan cuma pas hover) — link pakai biru
   brand situs, email pakai merah aksen situs, WhatsApp hijau khasnya. */
.pubangun-share__btn--copy {
	border-color: var(--color-primary, #3c449c);
	color: var(--color-primary, #3c449c);
}

.pubangun-share__btn--email {
	border-color: var(--color-accent, #ec2c34);
	color: var(--color-accent, #ec2c34);
}

.pubangun-share__btn--wa {
	border-color: #25d366;
	color: #25d366;
}

/* Isi artikel — tipografi jurnal
   ========================================================================== */
.pubangun-artikel__body {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.02em;
	line-height: 1.75;
	color: var(--color-dark, #1a1a1a);
	/* Daftar Pustaka sering memuat URL/DOI panjang tanpa spasi (5 jenis
	   sumber wajib termasuk "website" — §2 spesifikasi teknis) — tanpa ini,
	   satu token panjang bisa mendorong halaman melebar horizontal di HP. */
	overflow-wrap: break-word;
}

.pubangun-artikel__body p {
	text-align: justify;
	margin-bottom: 1.1em;
}

.pubangun-artikel__body p.pubangun-menjorok {
	margin-left: 1.27cm;
	margin-right: 1.27cm;
}

.pubangun-artikel__body h2 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.25em;
	color: var(--color-dark, #040404);
	margin-top: 2em;
	margin-bottom: 0.7em;
}

.pubangun-artikel__body h2:first-child {
	margin-top: 0;
}

.pubangun-artikel__body h3 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 1.08em;
}

/* Sub-label gaya "Latar Belakang Masalah:", "Metode Analisis:" dst. —
   penulis biasa menulis ini sebagai teks TEBAL di awal paragraf (bukan
   heading ###), jadi hasil konversi Markdown cuma jadi <strong> ukuran
   sama dengan teks biasa. Ditonjolkan lewat CSS di sini (tanpa mengubah
   HTML) supaya tetap terbaca seperti sub-judul, bukan sekadar tebal. */
.pubangun-artikel__body p > strong:first-child {
	display: block;
	font-size: 1.06em;
	color: var(--color-primary, #3c449c);
	margin-bottom: 0.2em;
}

.pubangun-artikel__body ol,
.pubangun-artikel__body ul {
	text-align: left;
	padding-left: 1.6em;
	margin-bottom: 1.1em;
}

.pubangun-artikel__body li {
	margin-bottom: 0.4em;
}

.pubangun-artikel__body table {
	/* 5 dari 6 artikel asli (audit 2026-08-14) punya tabel data 3-5 kolom —
	   di layar HP sempit ini pasti lebih lebar dari viewport. `display:block`
	   pada <table> membuat box luarnya jadi scroll container (browser tetap
	   melakukan layout tabel internal lewat anonymous table box, trik CSS
	   standar untuk tabel responsif) — jadi kalau kepepet, yang scroll cuma
	   tabelnya sendiri secara horizontal, bukan seluruh halaman. */
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: 0.92em;
}

.pubangun-artikel__body table th,
.pubangun-artikel__body table td {
	border: 1px solid var(--color-border, #cfcfcf);
	padding: 8px 12px;
	text-align: left;
}

.pubangun-artikel__body table th {
	background: #f6f7f7;
	font-weight: 600;
}

.pubangun-media-item {
	margin: 20px 0;
	text-align: center;
}

.pubangun-media-item img {
	max-width: 100%;
	height: auto;
}

.pubangun-media-item figcaption {
	font-size: 0.85em;
	font-style: italic;
	color: var(--color-secondary, #54595F);
	margin: 8px 0;
}

.pubangun-daftar-pustaka {
	padding-left: 20px;
}

.pubangun-daftar-pustaka li {
	margin-bottom: 8px;
}

.pubangun-artikel__kata-kunci {
	font-size: 0.9em;
	font-style: italic;
	color: var(--color-secondary, #54595F);
	margin-top: 1.8em;
}

.pubangun-artikel__kata-kunci a,
.pubangun-artikel__meta a {
	color: var(--color-primary, #3c449c);
	text-decoration: none;
}

.pubangun-artikel__kata-kunci a:hover,
.pubangun-artikel__meta a:hover {
	text-decoration: underline;
}

/* Interaksi pembaca — toolbar icon-only di atas (2026-08-17), lihat
   `.pubangun-artikel__toolbar` & `.pubangun-artikel__icon-btn` di atas.
   Blok `.pubangun-artikel__engagement` (dulu bungkus share+rating di
   BAWAH artikel, kotak bordered berdiri sendiri) sudah tidak dipakai
   template, dihapus dari sini juga.
   ========================================================================== */
.pubangun-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pubangun-share__status {
	font-size: 0.8em;
	color: #007017;
	flex-basis: 100%;
	text-align: center;
}

.pubangun-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.pubangun-rating__message {
	flex-basis: 100%;
	text-align: center;
	font-size: 0.8em;
	color: #007017;
	margin: 4px 0 0;
}

.pubangun-rating__stars {
	display: flex;
	gap: 2px;
	font-size: 1.9em;
}

.pubangun-rating__star {
	/* Diperbesar dari 40px/1.3em jadi 48px/1.9em (2026-08-17, susulan) —
	   dipindah ke baris sendiri di bawah toolbar PDF/share jadi ada ruang
	   lebih, tidak perlu berbagi baris sempit dengan tombol lain lagi. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: #ccc;
	width: 48px;
	height: 48px;
	line-height: 1;
	transition: color 0.15s ease;
}

/* Terisi warna emas sampai rata-rata rating sungguhan (class `.is-filled`
   dari PHP) — bukan cuma abu-abu netral sampai di-hover seperti
   sebelumnya, supaya rating yang sudah ada langsung kelihatan jelas. */
.pubangun-rating__star.is-filled {
	color: #ffc107;
}

.pubangun-rating__star:hover {
	color: #ffc107;
}

/* Halaman arsip daftar artikel — kartu bergambar, senada dengan tampilan
   daftar Berita (.berita-item) supaya kedua halaman listing situs terasu
   satu keluarga desain. Gaya "jurnal ilmiah" (serif, justify) tetap khusus
   untuk halaman baca satu artikel (.pubangun-artikel__body), bukan di sini.
   ========================================================================== */
/* Disamakan dengan lebar halaman baca satu artikel (.pubangun-artikel
   .page-content__body, 960px) — arsip & halaman baca adalah satu alur,
   melebar/menyempit saat pindah antar keduanya terasa tidak konsisten.
   Selector DIGABUNG dua class (bukan class tunggal) supaya spesifisitas
   CSS-nya menang lawan `.page-content__body { max-width:800px }` bawaan
   tema — stylesheet tema dimuat SETELAH frontend.css plugin ini, jadi
   kalau spesifisitas cuma seri, urutan pemuatan yang menentukan dan
   aturan tema itu yang menang (bug yang sempat lolos di percobaan
   pertama: 960px ada di CSS tapi tidak pernah benar-benar kepakai). */
/* 960px sebelumnya bikin kolom kartu (main 1fr dikurangi sidebar 260px +
   gap 32px = cuma ~668px) kepepet — judul artikel jadi wrap 3 baris, teks
   excerpt sempit. Dilebarkan ke 1100px (mendekati batas `.container` tema
   1140px, bukan dibuat sama persis supaya masih ada sedikit napas) khusus
   utk halaman arsip/listing — beda dari halaman baca SATU artikel yang
   sengaja tetap 960px (lebar baca nyaman, bukan lebar kartu). */
.page-content__body.pubangun-artikel-archive__body {
	max-width: 1100px;
}

.pubangun-artikel-archive__taxo-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8em;
	font-weight: 700;
	color: var(--color-accent, #ec2c34);
	margin-bottom: 6px;
}

.pubangun-artikel-archive__back {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.9em;
	color: var(--color-primary, #3c449c);
	text-decoration: none;
}

.pubangun-artikel-archive__back:hover {
	text-decoration: underline;
}

.pubangun-artikel-archive__toolbar {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.pubangun-artikel-archive__panduan-btn {
	display: inline-block;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 10px 22px;
	background: var(--color-primary, #3c449c);
	color: #fff;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.pubangun-artikel-archive__panduan-btn:hover {
	opacity: 0.9;
}

.pubangun-artikel-archive__search {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 420px;
	gap: 8px;
}

.pubangun-artikel-archive__search input[type="text"] {
	flex: 1 1 200px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 4px;
	font-family: var(--font-body, sans-serif);
	font-size: 15px;
}

/* min-width:0 — pengaman standar flex item (defaultnya min-width:auto bisa
   menahan elemen tidak menyusut di bawah lebar konten intrinsiknya, opsi
   <select> terpanjang "Manajemen Konstruksi/Manajemen Proyek" dalam kasus
   ini). Sempat disangka ini penyebab overflow di HP, TERNYATA SALAH setelah
   diukur langsung (`scrollWidth`) — halaman aslinya tidak pernah overflow,
   cuma artefak alat screenshot CLI yang dipakai saat audit 2026-08-19. Baris
   ini tetap dipertahankan sebagai praktik defensif yang wajar, bukan fix
   untuk bug yang ternyata tidak nyata. */
.pubangun-artikel-archive__kategori-select {
	flex: 0 1 220px;
	min-width: 0;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 4px;
	font-family: var(--font-body, sans-serif);
	font-size: 15px;
	background: #fff;
	color: var(--color-dark, #040404);
}

.pubangun-artikel-archive__search button {
	background: var(--color-accent, #ec2c34);
	color: #fff;
	border: 0;
	padding: 10px 22px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
}

.pubangun-artikel-archive__search button:hover {
	opacity: 0.9;
}

.pubangun-artikel-archive__search-reset {
	display: flex;
	align-items: center;
	padding: 0 14px;
	font-size: 14px;
	color: var(--color-secondary, #54595F);
	white-space: nowrap;
}

.pubangun-artikel-archive__search-count {
	font-size: 14px;
	color: var(--color-secondary, #54595F);
	margin-bottom: 16px;
}

/* Layout dua kolom: grid utama + sidebar (Artikel Populer/Rating
   Tertinggi) — sidebar cuma dirender kalau ada isinya (lihat
   $has_sidebar di template), kalau tidak .pubangun-artikel-archive__main
   otomatis dapat lebar penuh lewat modifier --full. */
.pubangun-artikel-archive__layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.pubangun-artikel-archive__main {
	flex: 1;
	min-width: 0;
}

.pubangun-artikel-archive__layout--full .pubangun-artikel-archive__main {
	flex: 1 1 100%;
}

.pubangun-artikel-archive__sidebar {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 20px;
}

.pubangun-artikel-highlight {
	background: #fff;
	border-radius: 10px;
	padding: 16px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.pubangun-artikel-highlight__title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-secondary, #54595F);
	margin: 0 0 10px;
}

.pubangun-artikel-highlight__list {
	list-style: decimal;
	padding-left: 18px;
	margin: 0;
}

.pubangun-artikel-highlight__list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 6px 0;
	border-bottom: 1px dotted var(--color-border, #e5e5e5);
	font-size: 14px;
}

.pubangun-artikel-highlight__list li:last-child {
	border-bottom: 0;
}

.pubangun-artikel-highlight__stat {
	flex-shrink: 0;
	color: var(--color-text, #7A7A7A);
	font-size: 12.5px;
	white-space: nowrap;
}

.pubangun-artikel-archive__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pubangun-artikel-card {
	display: flex;
	gap: 20px;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
	transition: transform 0.2s, box-shadow 0.2s;
}

.pubangun-artikel-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.pubangun-artikel-card__thumb {
	flex-shrink: 0;
	width: 180px;
	display: block;
}

.pubangun-artikel-card__thumb img {
	width: 180px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
}

.pubangun-artikel-card__thumb--placeholder {
	width: 180px;
	aspect-ratio: 3 / 2;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--color-primary, #3c449c) 0%, var(--color-accent, #ec2c34) 150%);
	opacity: 0.16;
}

.pubangun-artikel-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.pubangun-artikel-card__nomor {
	font-size: 11px;
	letter-spacing: 0.03em;
	color: var(--color-secondary, #54595F);
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 3px;
	padding: 2px 7px;
}

.pubangun-artikel-card__kategori {
	font-size: 11px;
	color: var(--color-primary, #3c449c);
	background: rgba(60, 68, 156, 0.08);
	border-radius: 3px;
	padding: 2px 7px;
	text-decoration: none;
}

.pubangun-artikel-card__kategori:hover {
	background: rgba(60, 68, 156, 0.16);
}

.pubangun-artikel-card__title {
	font-size: 20px;
	margin: 0 0 6px;
}

.pubangun-artikel-card__meta {
	font-size: 13px;
	color: var(--color-text, #7A7A7A);
	margin-bottom: 8px;
}

.pubangun-artikel-card__excerpt {
	margin: 0 0 8px;
}

.pubangun-artikel-card__more {
	font-size: 14px;
	font-weight: 600;
}

.pubangun-artikel-archive__empty {
	text-align: center;
	padding: 40px 0;
}

.pubangun-artikel-archive__pagination {
	margin-top: 30px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

@media (max-width: 640px) {
	.pubangun-artikel-card { flex-direction: column; }
	.pubangun-artikel-card__thumb,
	.pubangun-artikel-card__thumb--placeholder { width: 100%; }
	.pubangun-artikel-card__thumb img { width: 100%; aspect-ratio: 16 / 9; }
	.pubangun-artikel-archive__toolbar { flex-direction: column; align-items: stretch; }
	.pubangun-artikel-archive__search { flex-wrap: wrap; }
	/* Diaudit lewat pengukuran scrollWidth sungguhan (Puppeteer, bukan cuma
	   screenshot) 2026-08-19 — TIDAK ADA overflow horizontal nyata di form
	   ini pada awalnya (dugaan awal soal <select> "menolak menyusut" salah,
	   berasal dari artefak alat screenshot CLI `msedge --screenshot` yang
	   ternyata tidak merepresentasikan viewport dengan akurat). Field-field
	   ini tetap ditumpuk 1 kolom penuh di HP murni untuk kerapian/tap-target
	   yang lebih besar, bukan untuk memperbaiki overflow yang sebenarnya
	   tidak pernah ada. */
	.pubangun-artikel-archive__search input[type="text"],
	.pubangun-artikel-archive__kategori-select,
	.pubangun-artikel-archive__search button { flex-basis: 100%; width: 100%; }
	.pubangun-artikel-archive__panduan-btn { text-align: center; }
	/* Bug ditemukan 2026-08-19: `.search { flex:1 1 420px }` di rule dasar
	   dimaksudkan sebagai LEBAR dasar saat toolbar masih flex-row (desktop).
	   Begitu toolbar berubah flex-direction:column di breakpoint ini,
	   flex-basis selalu mengikuti SUMBU UTAMA yang sekarang vertikal — 420px
	   yang sama jadi TINGGI minimum form, bukan lebar, sehingga form
	   melar 420px tinggi dan tombol "Cari" ikut stretch mengisi ruang
	   kosong itu (align-items default flex container = stretch). Direset
	   ke auto supaya tinggi form kembali mengikuti kontennya sendiri. */
	.pubangun-artikel-archive__search { flex-basis: auto; align-items: stretch; }
}

@media (max-width: 900px) {
	/* Di 800px awalnya kolom utama sempat "kejepit" ~488px lebar (960 total
	   dikurangi sidebar 260px + gap 32px) sebelum breakpoint sempit ini
	   berlaku — kartu jadi agak sesak. Ambang dinaikkan ke 900px supaya
	   layout langsung tumpuk sebelum sempat kejepit begitu. */
	.pubangun-artikel-archive__layout { flex-direction: column; }
	.pubangun-artikel-archive__sidebar { flex-basis: auto; width: 100%; position: static; flex-direction: row; flex-wrap: wrap; }
	.pubangun-artikel-highlight { flex: 1 1 260px; }
}

/* ==========================================================================
   Halaman "Struktur Artikel" (panduan penulis) — redesign 2026-08-19: panel
   hero bergradasi warna brand, kartu "terangkat" (shadow, bukan cuma
   border) dengan aksen warna kiri, tile format berwarna. Infografis alur
   bernomor dibuat pakai flex-wrap + pemisah panah, BUKAN garis penghubung
   SVG/border presisi — garis penghubung akan patah/aneh begitu item wrap
   ke baris baru di layar sempit, sedangkan pemisah panah tetap rapi di
   posisi manapun ia wrap. Trade-off yang sengaja diambil demi tetap solid
   di HP.
   ========================================================================== */
/* Halaman ini Page biasa lewat page.php tema (`.page-content__body {
   max-width:800px }`), beda dari arsip (1100px, lihat override serupa di
   atas) & halaman baca artikel (960px) — terasa lebih sempit/kaku
   dibanding keduanya begitu dibandingkan langsung. `:has()` dipakai
   (bukan class tambahan di elemen tema yang tidak saya kontrol markupnya)
   supaya lebar cuma berubah KHUSUS saat page.php membungkus shortcode
   struktur-artikel, tidak berefek ke Page lain (Profil/Pengurus/dst.)
   yang sengaja tetap 800px. */
.page-content__body:has(.pubangun-struktur-artikel) {
	max-width: 1100px;
}

.pubangun-struktur-hero {
	background: linear-gradient(135deg, rgba(60, 68, 156, 0.07), rgba(236, 44, 52, 0.05));
	border-radius: 16px;
	padding: 28px 28px 24px;
	margin-bottom: 40px;
}

.pubangun-struktur-artikel__intro {
	font-size: 1.05em;
	margin-bottom: 20px;
}

/* Sebelumnya: font serif jurnal + garis biru identik di atas SETIAP judul
   section (5x berulang persis sama) — kaku/mekanis begitu dilihat sebagai
   satu halaman utuh, juga bentrok gaya dengan kartu modern di bawahnya.
   Diganti badge bulat kecil + font sans-serif yang sama dengan UI kartu,
   supaya terasa satu bahasa desain, bukan dua gaya ditempel jadi satu. */
.pubangun-struktur-artikel__section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body, sans-serif);
	font-size: 1.25em;
	font-weight: 700;
	color: var(--color-dark, #040404);
	margin-top: 2.6em;
	margin-bottom: 1.1em;
}

.pubangun-struktur-artikel__section-title::before {
	content: '';
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-accent, #ec2c34);
}

.pubangun-struktur-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pubangun-struktur-flow__step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 8px;
	background: #fff;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: 30px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.pubangun-struktur-flow__step:hover {
	background: var(--color-primary, #3c449c);
	border-color: var(--color-primary, #3c449c);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(60, 68, 156, 0.25);
}

.pubangun-struktur-flow__step:hover .pubangun-struktur-flow__num {
	background: #fff;
	color: var(--color-primary, #3c449c);
}

.pubangun-struktur-flow__step:not(:last-child)::after {
	content: '\2192';
	margin-left: 10px;
	color: var(--color-border, #cfcfcf);
	font-size: 1.1em;
}

.pubangun-struktur-flow__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-primary, #3c449c);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	flex-shrink: 0;
	transition: background 0.15s, color 0.15s;
}

.pubangun-struktur-flow__label {
	font-size: 0.85em;
	font-weight: 500;
	white-space: nowrap;
}

.pubangun-struktur-flow__step--opsional {
	background: transparent;
	border-style: dashed;
	box-shadow: none;
}

.pubangun-struktur-flow__step--opsional .pubangun-struktur-flow__num {
	background: #fff;
	color: var(--color-secondary, #54595F);
	border: 1px solid var(--color-border, #cfcfcf);
}

.pubangun-struktur-alur {
	display: flex;
	justify-content: center;
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

/* Sama persis dengan bug crop gambar artikel yang sudah diperbaiki
   sebelumnya (2026-08-18), cuma ketinggalan dicek di halaman ini: rule
   tema `.page-content__body img { max-height:480px; object-fit:cover }`
   (didesain untuk foto dekoratif di halaman statis) ikut menembus ke sini
   karena Halaman ini juga memakai wrapper `.page-content__body` generik.
   Selector 2-class (bukan 1) SUPAYA menang lawan spesifisitas tema —
   ditemukan lewat pengukuran langsung (renderedHeight kepotong pas di
   480px, natural image 560px) 2026-08-19. */
.pubangun-struktur-artikel .pubangun-struktur-alur__img {
	width: 100%;
	max-width: 620px;
	height: auto;
	max-height: none;
	object-fit: initial;
	display: block;
	border-radius: 6px;
}

.pubangun-struktur-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 18px;
}

/* Sebelumnya: SEMUA kartu (8 dari 10 "Wajib") dapat garis tepi kiri merah
   tebal 4px identik — 8 garis merah berjajar terasa berat/monoton, bukan
   menekankan yang penting malah jadi "wallpaper". Aksen warna sekarang
   cuma di badge kecil (Wajib/Opsional), kartu sendiri netral+shadow tipis
   supaya yang menonjol adalah kontennya, bukan bingkainya. */
.pubangun-struktur-card {
	scroll-margin-top: 24px;
	background: #fff;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
	transition: transform 0.2s, box-shadow 0.2s;
}

.pubangun-struktur-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.pubangun-struktur-card:target {
	outline: 2px solid var(--color-primary, #3c449c);
	outline-offset: 3px;
}

.pubangun-struktur-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.pubangun-struktur-card__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-primary, #3c449c);
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	flex-shrink: 0;
}

.pubangun-struktur-card__title {
	font-size: 1.08em;
	margin: 0;
	flex: 1;
}

.pubangun-struktur-card__badge {
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 9px;
	border-radius: 20px;
	white-space: nowrap;
}

.pubangun-struktur-card__badge--wajib {
	background: rgba(236, 44, 52, 0.1);
	color: var(--color-accent, #ec2c34);
}

.pubangun-struktur-card__badge--opsional {
	background: #f0f0f0;
	color: var(--color-secondary, #54595F);
}

.pubangun-struktur-card__ket {
	font-size: 0.9em;
	color: var(--color-secondary, #54595F);
	margin: 0 0 6px;
}

.pubangun-struktur-card__contoh {
	font-size: 0.88em;
	font-style: italic;
	color: var(--color-dark, #040404);
	margin: 0;
}

.pubangun-struktur-spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.pubangun-struktur-spec__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	background: #fff;
	border-top: 3px solid var(--color-primary, #3c449c);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s, box-shadow 0.2s;
}

.pubangun-struktur-spec__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.09);
}

.pubangun-struktur-spec__item strong {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-secondary, #54595F);
}

.pubangun-struktur-spec__item span {
	font-size: 0.98em;
	color: var(--color-dark, #040404);
	font-weight: 600;
}

.pubangun-struktur-rules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.pubangun-struktur-rules__col {
	background: #fff;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.pubangun-struktur-rules__col h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1em;
	margin: 0 0 10px;
}

.pubangun-struktur-rules__col h3::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-primary, #3c449c);
	flex-shrink: 0;
}

.pubangun-struktur-rules__col ul {
	margin: 0;
	padding-left: 1.3em;
}

.pubangun-struktur-rules__col li {
	font-size: 0.92em;
	margin-bottom: 6px;
}

.pubangun-struktur-pustaka {
	display: grid;
	gap: 10px;
}

.pubangun-struktur-pustaka__item {
	background: #fff;
	border-radius: 8px;
	padding: 12px 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pubangun-struktur-pustaka__jenis {
	display: inline-block;
	font-weight: 700;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-primary, #3c449c);
	background: rgba(60, 68, 156, 0.08);
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 8px;
}

.pubangun-struktur-pustaka__format {
	display: block;
	font-size: 0.85em;
	font-family: Consolas, Menlo, monospace;
	color: var(--color-dark, #040404);
	word-break: break-word;
}

@media (max-width: 640px) {
	.pubangun-struktur-hero { padding: 20px; border-radius: 12px; }
}