/* ── Title ──────────────────────────────── */
.pg-title-plain {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #14161c;
    line-height: 1.2;
    margin: 0;
}

/* ── Page Header ─────────────────────── */
/* padding-top ekstra dikompensasi lewat --nvb-header-height (diset oleh
   _navbar-b.blade.php, lihat catatan di public/css/pages/home.css) — Navbar B
   mengambang absolute tanpa makan ruang layout, jadi tanpa ini judul halaman
   ketutup navbar transparan itu. Untuk navbar default variabel ini tidak
   pernah diset jadi fallback 0px dipakai dan tampilan tidak berubah. */
.sa-header{position:relative;background:#0e1649 url('/bgheader.png') center/cover no-repeat;padding:calc(26px + var(--nvb-header-height, 0px)) 0 26px;overflow:hidden}
.sa-header-bg{position:absolute;inset:0;background:linear-gradient(rgba(14,22,73,.55),rgba(14,22,73,.55)),radial-gradient(ellipse at 80% 50%,rgba(37,99,235,.35) 0%,transparent 60%),radial-gradient(ellipse at 10% 80%,rgba(139,92,246,.2) 0%,transparent 50%)}
.sa-breadcrumb{position:relative;z-index:1;display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.55);margin-bottom:12px}
.sa-breadcrumb a{color:rgba(255,255,255,.55);text-decoration:none;transition:.15s}
.sa-breadcrumb a:hover{color:#fff}
.sa-breadcrumb i{font-size:10px}
.sa-header-title{position:relative;z-index:1;font-size:clamp(1.4rem,3vw,2.2rem);font-weight:800;color:#fff;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.3)}

/* ── Main Layout ─────────────────────────── */
.pg-layout {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 28px 80px;
}

/* ── Body content ────────────────────────── */
.pg-body {
    font-size: 15px;
    line-height: 1.85;
    color: #1f2937;
}
.pg-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
    display: block;
}
.pg-body p { margin-bottom: 1.25em; }
.pg-body h1,.pg-body h2,.pg-body h3,.pg-body h4,.pg-body h5 {
    font-weight: 700;
    color: #111827;
    margin: 2em 0 .75em;
    line-height: 1.3;
}
.pg-body h2 {
    font-size: 1.4rem;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}
.pg-body h3 { font-size: 1.2rem; }
.pg-body a { color: #c3c5c8; text-decoration: underline; }
.pg-body a:hover { color: #f8f5ee; }
.pg-body ul,.pg-body ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.pg-body li { margin-bottom: .4em; }
.pg-body blockquote {
    border-left: 4px solid #0e1649;
    background: #f0f4ff;
    margin: 24px 0;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #374151;
}
.pg-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 14px;
}
.pg-body th,.pg-body td {
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    text-align: left;
}
.pg-body th {
    background: #0e1649;
    color: #fff;
    font-weight: 600;
}
.pg-body tr:nth-child(even) td { background: #f8fafc; }
.pg-body tr:hover td { background: #f0f4ff; }

/* Responsive */
@media (max-width: 600px) {
    .pg-layout  { padding: 32px 18px 56px; }
}