/*
 * Tampilan halaman artikel situntas.id/artikel/{slug}.
 *
 * Berkas statis, BUKAN entri Vite: dimuat hanya di halaman artikel lewat
 * @pushOnce di seo/_author-byline.blade.php, dengan ?v=<filemtime> sebagai
 * pemecah cache. Mengubah berkas ini tidak butuh `npm run build`.
 *
 * Token warna (--ink, --primary, --paper, dst.) berasal dari landing.css.
 * Setiap pilar punya warna aksen sendiri (data-pilar di <article>), dipakai
 * untuk cip kategori, garis subjudul, nomor daftar isi, butir daftar, dan
 * kepala tabel. Semua pasangan aksen sudah dihitung: lolos WCAG AA 4,5:1 di
 * atas putih DAN di atas warna lembutnya sendiri.
 *
 * Aturan spesifisitas: landing.css punya `.seo-prose a:not(.btn)` (0,2,1).
 * Tautan di sini yang butuh warna lain ditulis minimal (0,2,1) dan menang
 * karena berkas ini dimuat sesudahnya.
 */

/* ── Token ────────────────────────────────────────────────────────────── */
/* Dideklarasikan HANYA di pembungkus halaman. Blok penulis juga tampil di
   berkas artikel lama tanpa pembungkus ini, jadi aturannya memakai nilai
   cadangan var(--x, cadangan), bukan deklarasi ulang: deklarasi di elemen itu
   sendiri akan menimpa warna aksen pilar yang diwarisinya. */
.artikel-halaman {
    --a-teks: #2D3B4E;
    --a-garis: #E3E8EF;
    --a-garis-kuat: #CFD8E3;
    --a-latar: #F7F9FC;
    --a-kertas: #FFFEFA;
    --aksen: #3B54DF;
    --aksen-lembut: #EEF1FE;
    --aksen-garis: #CDD5FB;
}

[data-pilar="absensi-wajah"]               { --aksen: #0E7490; --aksen-lembut: #E8F9FC; --aksen-garis: #A9E6F1; }
[data-pilar="cbt"]                         { --aksen: #6D28D9; --aksen-lembut: #F3EFFE; --aksen-garis: #D9CCFB; }
[data-pilar="e-jurnal"]                    { --aksen: #047857; --aksen-lembut: #E8F8F1; --aksen-garis: #A9E5CD; }
[data-pilar="jadwal-otomatis"]             { --aksen: #4338CA; --aksen-lembut: #EEF0FE; --aksen-garis: #CACEF8; }
[data-pilar="e-poin"]                      { --aksen: #BE123C; --aksen-lembut: #FEEFF2; --aksen-garis: #F9C7D2; }
[data-pilar="aplikasi-surat-sekolah"]      { --aksen: #B45309; --aksen-lembut: #FEF6E7; --aksen-garis: #F6D9A6; }
[data-pilar="notifikasi-whatsapp-sekolah"] { --aksen: #15803D; --aksen-lembut: #EAF8EF; --aksen-garis: #AEE3C1; }
[data-pilar="portal-orang-tua-siswa"]      { --aksen: #0369A1; --aksen-lembut: #E9F5FC; --aksen-garis: #AFD9F1; }
[data-pilar="data-induk-siswa"]            { --aksen: #1D4ED8; --aksen-lembut: #EDF3FE; --aksen-garis: #C3D5FA; }
[data-pilar="e-humas"]                     { --aksen: #B91C1C; --aksen-lembut: #FEF0F0; --aksen-garis: #F6C6C6; }
[data-pilar="e-ajar"]                      { --aksen: #0F766E; --aksen-lembut: #E7F7F5; --aksen-garis: #A6E0D8; }
[data-pilar="e-7kaih"]                     { --aksen: #A21CAF; --aksen-lembut: #FBEEFD; --aksen-garis: #EDC4F3; }
[data-pilar="racik-ajar"]                  { --aksen: #7E22CE; --aksen-lembut: #F6EEFD; --aksen-garis: #DEC6F7; }
[data-pilar="e-rapor"]                     { --aksen: #2563EB; --aksen-lembut: #EEF4FF; --aksen-garis: #C5D7FB; }
[data-pilar="e-piket"]                     { --aksen: #C2410C; --aksen-lembut: #FEF1E9; --aksen-garis: #F8CDB2; }
[data-pilar="e-kesiswaan"]                 { --aksen: #BE185D; --aksen-lembut: #FDEEF5; --aksen-garis: #F6C4DA; }

/* ── Kepala artikel ───────────────────────────────────────────────────── */
.artikel-halaman .artikel-kepala {
    margin-bottom: 1.75rem;
}

.seo-prose a.artikel-kategori {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.8rem 0.3rem 0.65rem;
    border: 1px solid var(--aksen-garis);
    border-radius: 999px;
    background: var(--aksen-lembut);
    color: var(--aksen);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.seo-prose a.artikel-kategori::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--aksen);
}

.seo-prose a.artikel-kategori:hover {
    border-color: var(--aksen);
    background: #fff;
}

.artikel-halaman .seo-prose h1 {
    margin-bottom: 0;
    font-size: clamp(1.85rem, 4.2vw, 2.65rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* ── Penulis ──────────────────────────────────────────────────────────── */
.artikel-byline {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.15rem 0 0;
}

.artikel-byline-foto {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    background: #2CCFB6;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--aksen-garis, #CDD5FB);
}

.artikel-byline-teks {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.artikel-byline .artikel-byline-nama {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.4;
}

.seo-prose .artikel-byline-nama a {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.seo-prose .artikel-byline-nama a:hover {
    color: var(--aksen, var(--primary-deep));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.artikel-byline .artikel-byline-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.artikel-byline-meta > span + span::before {
    content: "\00B7";
    margin: 0 0.45rem;
    color: #9AA6B8;
}

/* Berkas artikel lama mencetak tanggalnya sendiri (.artikel-meta) tepat di
   atas blok penulis. Rapatkan keduanya jadi satu kelompok. */
.artikel-meta + .artikel-byline {
    margin: -0.95rem 0 1.9rem;
}

/* ── Sampul ───────────────────────────────────────────────────────────── */
.artikel-halaman .artikel-sampul {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 1.75rem;
    border-radius: 16px;
    box-shadow: 0 22px 44px -32px rgba(16, 36, 62, 0.55);
}

/* ── Daftar isi ───────────────────────────────────────────────────────── */
.artikel-daftar-isi {
    margin: 0 0 2.25rem;
    border: 1px solid var(--aksen-garis);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--aksen-lembut) 0, #fff 5.5rem);
    overflow: hidden;
}

.artikel-daftar-isi summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.2rem;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-weight: 800;
    font-size: 1rem;
}

.artikel-daftar-isi summary::-webkit-details-marker { display: none; }

.artikel-daftar-isi summary::before {
    content: "";
    flex: none;
    width: 1.1rem;
    height: 0.8rem;
    background:
        linear-gradient(var(--aksen), var(--aksen)) 0 0 / 100% 2px no-repeat,
        linear-gradient(var(--aksen), var(--aksen)) 0 50% / 70% 2px no-repeat,
        linear-gradient(var(--aksen), var(--aksen)) 0 100% / 85% 2px no-repeat;
}

.artikel-daftar-isi summary::after {
    content: "";
    margin-left: auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 160ms ease;
}

.artikel-daftar-isi details[open] summary::after {
    transform: translateY(15%) rotate(-135deg);
}

.artikel-daftar-isi-jumlah {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: 0.85rem;
}

.artikel-daftar-isi ol {
    margin: 0;
    padding: 0 1.2rem 1rem;
    list-style: none;
    counter-reset: daftar-isi;
}

.artikel-daftar-isi li {
    display: flex;
    gap: 0.75rem;
    padding: 0.42rem 0;
    border-top: 1px dashed var(--a-garis);
    counter-increment: daftar-isi;
    line-height: 1.45;
}

.artikel-daftar-isi li::before {
    content: counter(daftar-isi, decimal-leading-zero);
    flex: none;
    min-width: 1.5rem;
    padding-top: 0.08rem;
    color: var(--aksen);
    font-weight: 800;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.seo-prose .artikel-daftar-isi a {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
}

.seo-prose .artikel-daftar-isi a:hover {
    color: var(--aksen);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Isi: tipografi dasar ─────────────────────────────────────────────── */
.artikel-isi {
    color: var(--a-teks);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.artikel-isi p {
    margin: 0 0 1.15em;
    /* landing.css mewarnai SETIAP <p> dengan --ink-soft dan 1.05rem lewat
       selektor elemen. Kembalikan ke warisan supaya paragraf ikut warna dan
       ukuran wadahnya: badan teks, jawaban FAQ, sel tabel, kartu templat. */
    color: inherit;
    font-size: inherit;
}

.artikel-isi .artikel-pembuka {
    margin-bottom: 1.6rem;
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1.7;
}

.artikel-isi strong,
.artikel-isi b {
    color: var(--ink);
    font-weight: 700;
}

.artikel-isi h2 {
    margin: 3.1rem 0 1rem;
    color: var(--ink);
    font-size: clamp(1.4rem, 2.8vw, 1.72rem);
    line-height: 1.3;
    letter-spacing: -0.012em;
    scroll-margin-top: 6.5rem;
    text-wrap: balance;
}

.artikel-isi h2::before {
    content: "";
    display: block;
    width: 2.75rem;
    height: 0.3rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--aksen) 0 60%, var(--aksen-garis) 60% 100%);
}

.artikel-isi h3 {
    margin: 2.1rem 0 0.65rem;
    padding-left: 0.85rem;
    border-left: 3px solid var(--aksen-garis);
    color: var(--ink);
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.4;
}

.artikel-isi h4 {
    margin: 1.6rem 0 0.5rem;
    color: var(--ink);
    font-size: 1.02rem;
}

/* Tautan: warna merek, garis bawah tipis yang menebal saat disorot. */
.seo-prose .artikel-isi a:not(.btn) {
    color: var(--primary-deep);
    text-decoration: underline;
    text-decoration-color: rgba(59, 84, 223, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color 150ms ease;
}

.seo-prose .artikel-isi a:not(.btn):hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

/* Tautan keluar (sanitizer memberi target=_blank hanya pada domain lain). */
.seo-prose .artikel-isi a[target="_blank"]::after {
    content: "\2197";
    display: inline-block;
    margin-left: 0.12em;
    font-size: 0.8em;
    text-decoration: none;
}

.artikel-isi hr {
    height: 1px;
    margin: 2.75rem 0;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--a-garis-kuat), transparent);
}

/* ── Isi: daftar ──────────────────────────────────────────────────────── */
.artikel-isi ul,
.artikel-isi ol {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    color: var(--a-teks);
    font-size: inherit;
    line-height: 1.75;
}

.artikel-isi li {
    position: relative;
    margin-bottom: 0.6rem;
}

.artikel-isi ul > li {
    padding-left: 1.55rem;
}

.artikel-isi ul > li::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.72em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--aksen);
    box-shadow: 0 0 0 3px var(--aksen-lembut);
}

.artikel-isi ol {
    counter-reset: butir;
}

.artikel-isi ol > li {
    min-height: 1.75rem;
    padding-left: 2.45rem;
    counter-increment: butir;
}

.artikel-isi ol > li::before {
    content: counter(butir);
    position: absolute;
    left: 0;
    top: 0.14em;
    display: grid;
    place-items: center;
    width: 1.72rem;
    height: 1.72rem;
    border: 1px solid var(--aksen-garis);
    border-radius: 50%;
    background: var(--aksen-lembut);
    color: var(--aksen);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.artikel-isi li > ul,
.artikel-isi li > ol {
    margin: 0.55rem 0 0.2rem;
}

.artikel-isi li p:last-child {
    margin-bottom: 0;
}

/* ── Isi: tabel ───────────────────────────────────────────────────────── */
.artikel-tabel {
    position: relative;
    margin: 1.75rem 0 2.1rem;
    border: 1px solid var(--a-garis-kuat);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 36, 62, 0.04), 0 12px 28px -22px rgba(16, 36, 62, 0.28);
    overflow: hidden;
}

.artikel-tabel-gulir {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.artikel-tabel-gulir:focus-visible {
    outline: 3px solid var(--aksen);
    outline-offset: -3px;
    border-radius: 14px;
}

.artikel-tabel table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--a-teks);
    font-size: 0.95rem;
    line-height: 1.55;
}

.artikel-tabel caption {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--a-garis);
    background: var(--a-latar);
    caption-side: top;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
}

.artikel-tabel caption::before {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.55rem;
    border-radius: 3px;
    background: var(--aksen);
    vertical-align: 0.06em;
}

.artikel-tabel th,
.artikel-tabel td {
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--a-garis);
    border-bottom: 1px solid var(--a-garis);
    text-align: left;
    vertical-align: top;
}

.artikel-tabel tr > :last-child {
    border-right: 0;
}

.artikel-tabel tbody tr:last-child > *,
.artikel-tabel table > tr:last-child > * {
    border-bottom: 0;
}

.artikel-tabel thead th,
.artikel-tabel thead td {
    border-bottom: 2px solid var(--aksen-garis);
    background: var(--aksen-lembut);
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.artikel-tabel tbody tr:nth-child(even) > * {
    background: #FAFBFD;
}

.artikel-tabel tbody tr:hover > * {
    background: var(--aksen-lembut);
}

.artikel-tabel tbody td:first-child {
    color: var(--ink);
    font-weight: 500;
}

.artikel-tabel td p,
.artikel-tabel th p {
    margin: 0 0 0.4em;
}

.artikel-tabel td p:last-child,
.artikel-tabel th p:last-child {
    margin-bottom: 0;
}

.artikel-tabel td ul,
.artikel-tabel td ol {
    margin: 0;
    font-size: inherit;
}

.artikel-tabel--lebar table {
    font-size: 0.9rem;
}

.artikel-tabel--lebar th,
.artikel-tabel--lebar td {
    padding: 0.65rem 0.8rem;
}

/* Penanda "masih ada kolom di kanan" (dinyalakan artikel.js saat tabel
   lebih lebar daripada layarnya). */
.artikel-tabel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.25rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(16, 36, 62, 0.10));
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.artikel-tabel.is-terpotong::after {
    opacity: 1;
}

/* ── Isi: kartu templat (blockquote) ──────────────────────────────────── */
.artikel-templat {
    margin: 1.6rem 0 2.1rem;
    border: 1px solid #EBE3CF;
    border-radius: 14px;
    background: var(--a-kertas);
    box-shadow: 0 14px 30px -26px rgba(92, 67, 15, 0.55);
    overflow: hidden;
}

.artikel-templat-alat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.5rem 0.4rem 1.05rem;
    border-bottom: 1px solid #F0E8D4;
    background: #FBF5E6;
}

/* Tiga titik ala lembar dokumen: hiasan, tanpa makna untuk pembaca layar. */
.artikel-templat-alat::before {
    content: "";
    width: 2.4rem;
    height: 0.6rem;
    background:
        radial-gradient(circle, #E9B949 0 45%, transparent 50%) 0 50% / 0.6rem 0.6rem no-repeat,
        radial-gradient(circle, #E3CF9C 0 45%, transparent 50%) 0.9rem 50% / 0.6rem 0.6rem no-repeat,
        radial-gradient(circle, #E3CF9C 0 45%, transparent 50%) 1.8rem 50% / 0.6rem 0.6rem no-repeat;
}

.artikel-salin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.8rem;
    border: 1px solid #E2D3AE;
    border-radius: 8px;
    background: #fff;
    color: #6B4A05;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.artikel-salin::before,
.artikel-bagikan-salin::before {
    content: "";
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    background: currentColor;
    -webkit-mask: var(--ikon-salin) center / contain no-repeat;
    mask: var(--ikon-salin) center / contain no-repeat;
}

.artikel-salin,
.artikel-bagikan-salin {
    --ikon-salin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5'/%3E%3C/svg%3E");
}

.artikel-bagikan-salin {
    --ikon-salin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

.artikel-salin.is-berhasil,
.artikel-bagikan-salin.is-berhasil {
    --ikon-salin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.artikel-salin:hover {
    border-color: #C9A85B;
    background: #FFF6DE;
}

.artikel-salin.is-berhasil {
    border-color: #86CFA2;
    background: #EAF8EF;
    color: #0B6B35;
}

.artikel-templat blockquote {
    margin: 0;
    padding: 1.15rem 1.4rem 1.25rem;
    border: 0;
    border-left: 4px solid var(--aksen);
    color: var(--ink);
    font-size: 0.98rem;
    font-style: normal;
    line-height: 1.75;
}

.artikel-templat blockquote p {
    margin: 0 0 0.7em;
}

.artikel-templat blockquote p:last-child {
    margin-bottom: 0;
}

.artikel-isian {
    padding: 0.02em 0.2em;
    border-radius: 4px;
    background: #FFF1C9;
    color: #6B4A05;
    font-weight: 500;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ── Isi: tanya jawab ─────────────────────────────────────────────────── */
.artikel-faq {
    margin: 3.25rem 0 0;
    padding: 1.35rem 1.4rem 1.5rem;
    border: 1px solid var(--a-garis);
    border-radius: 18px;
    background: var(--a-latar);
}

.artikel-faq > h2 {
    margin-top: 0.2rem;
}

.artikel-faq-butir {
    margin-top: 0.85rem;
    padding: 1rem 1.15rem 1.05rem;
    border: 1px solid var(--a-garis);
    border-radius: 12px;
    background: #fff;
}

.artikel-faq-butir h3 {
    display: flex;
    gap: 0.65rem;
    margin: 0 0 0.45rem;
    padding-left: 0;
    border-left: 0;
    font-size: 1.04rem;
}

.artikel-faq-butir h3::before {
    content: "?";
    content: "?" / "";
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: var(--aksen);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.artikel-faq-jawab {
    padding-left: 2.15rem;
    color: var(--a-teks);
    font-size: 1rem;
    line-height: 1.75;
}

.artikel-faq-jawab > :last-child {
    margin-bottom: 0;
}

/* ── Setelah isi: bagikan, referensi, bacaan terkait ──────────────────── */
.artikel-bagikan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 2.75rem 0 0;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--a-garis);
    border-radius: 14px;
    background: #fff;
}

.artikel-bagikan .artikel-bagikan-judul {
    margin: 0 auto 0 0;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.seo-prose .artikel-bagikan a,
.artikel-bagikan button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--a-garis-kuat);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.seo-prose .artikel-bagikan a.artikel-bagikan-wa {
    border-color: #AEE3C1;
    background: #EFFAF3;
    color: #0B6B35;
}

.seo-prose .artikel-bagikan a.artikel-bagikan-wa:hover {
    border-color: #25D366;
}

.artikel-bagikan-wa svg {
    width: 1rem;
    height: 1rem;
    color: #1EA952;
}

.artikel-bagikan button:hover {
    border-color: var(--aksen);
}

.artikel-bagikan button.is-berhasil {
    border-color: #86CFA2;
    background: #EAF8EF;
    color: #0B6B35;
}

.artikel-referensi {
    margin-top: 2.5rem;
    padding: 1.2rem 1.3rem 1.1rem;
    border: 1px solid var(--a-garis);
    border-radius: 14px;
    background: #fff;
}

.artikel-referensi h2 {
    margin: 0 0 0.6rem;
    font-size: 1.08rem;
}

.artikel-referensi ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rujukan;
    color: var(--a-teks);
    font-size: 0.92rem;
}

.artikel-referensi li {
    display: flex;
    gap: 0.6rem;
    margin: 0;
    padding: 0.45rem 0;
    border-top: 1px dashed var(--a-garis);
    counter-increment: rujukan;
    line-height: 1.5;
}

.artikel-referensi li::before {
    content: counter(rujukan) ".";
    flex: none;
    min-width: 1.3rem;
    color: var(--aksen);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.seo-prose .artikel-referensi a {
    color: var(--primary-deep);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.artikel-halaman .artikel-terkait {
    margin-top: 2.75rem;
    padding-top: 0;
    border-top: 0;
}

.artikel-halaman .artikel-terkait h2 {
    margin: 0 0 0.9rem;
    font-size: 1.25rem;
}

.artikel-halaman .artikel-terkait ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.artikel-halaman .artikel-terkait li {
    padding: 0;
    border: 0;
}

.seo-prose .artikel-terkait a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    height: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--a-garis);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.seo-prose .artikel-terkait a::after {
    content: "\2192";
    flex: none;
    color: var(--aksen);
    font-weight: 800;
}

.seo-prose .artikel-terkait a:hover {
    border-color: var(--aksen-garis);
    color: var(--ink);
    box-shadow: 0 12px 24px -20px rgba(16, 36, 62, 0.45);
    transform: translateY(-2px);
}

/* ── Layar sempit ─────────────────────────────────────────────────────── */
@media (max-width: 719.98px) {
    .artikel-isi {
        font-size: 1.02rem;
        line-height: 1.75;
    }

    .artikel-isi .artikel-pembuka {
        font-size: 1.1rem;
    }

    .artikel-isi h2 {
        margin-top: 2.5rem;
    }

    .artikel-tabel--sedang table { min-width: 30rem; }
    .artikel-tabel--lebar table { min-width: 42rem; }

    .artikel-tabel th,
    .artikel-tabel td {
        padding: 0.65rem 0.8rem;
    }

    .artikel-templat blockquote {
        padding: 1rem 1.05rem 1.1rem;
    }

    .artikel-faq {
        padding: 1.1rem 0.9rem 1.2rem;
        border-radius: 14px;
    }

    .artikel-faq-butir {
        padding: 0.9rem 0.95rem;
    }

    .artikel-faq-jawab {
        padding-left: 0;
    }

    .artikel-bagikan .artikel-bagikan-judul {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seo-prose .artikel-terkait a,
    .artikel-daftar-isi summary::after,
    .artikel-tabel::after {
        transition: none;
    }

    .seo-prose .artikel-terkait a:hover {
        transform: none;
    }
}

/* ── Cetak: templat surat sering dicetak langsung dari halaman ini ────── */
@media print {
    .artikel-daftar-isi,
    .artikel-bagikan,
    .artikel-templat-alat,
    .artikel-terkait,
    .cta-box {
        display: none !important;
    }

    .artikel-tabel,
    .artikel-templat {
        box-shadow: none;
        break-inside: avoid;
    }

    .artikel-tabel-gulir {
        overflow: visible;
    }
}