/* Template "Portal Tutorial & Berita" — arah A · Catatan Lab (umbrella 6318, D37).
   Aturan template bundled: warna HANYA var(--t-*) dari TokenWarnaLanding
   (CssTemplateBundledTest), tanpa literal warna maupun color-mix. Tint dibuat
   dengan pseudo-elemen ber-opacity. CSS polos: tanpa @layer/@apply/!important.
   Dimuat sesudah landing.css Vite, jadi aturan di sini menang atas utility. */

/* ---------- Font di-host di folder template (CSP font-src) ---------- */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: italic;
    font-display: swap;
    font-weight: 200 800;
    src: url("fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations"), url("fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
}

/* JetBrains Mono variabel (sumbu wght 100–800, @fontsource-variable, OFL) —
   menutup bobot 400–700 yang dipakai label, path, nomor bab, dan kode (6430). */
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

/* ---------- Dasar ---------- */
body.portal {
    --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --lebar-display: 112%;
    --r: 4px;
    --r-lg: 8px;
    --gap: 28px;
    --sec: 60px;
    --pad: 32px;

    margin: 0;
    background: var(--t-bg);
    color: var(--t-text);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.portal[data-kepadatan="rapat"] {
    --gap: 18px;
    --sec: 38px;
}

.portal a {
    color: inherit;
    text-decoration: none;
}

.portal a:hover {
    color: var(--t-primary);
}

.portal a:focus-visible,
.portal button:focus-visible {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
}

.portal ::selection {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.portal h1,
.portal h2,
.portal h3,
.portal h4 {
    margin: 0;
    text-wrap: balance;
}

.portal p {
    margin: 0;
}

.portal ul,
.portal ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal svg.lucide {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.14em;
}

.portal .wadah {
    max-width: 1180px;
    margin-inline: auto;
    padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
    padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

.portal .layar-baca {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.portal .lompat-isi {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 30;
    padding: 10px 14px;
    border-radius: var(--r);
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-weight: 700;
}

.portal .lompat-isi:focus {
    top: 12px;
    color: var(--t-on-primary);
}

/* ---------- Pita atas (cms_landing.utility_bar) ---------- */
.portal .pita {
    background: var(--t-primary);
    color: var(--t-on-primary);
    font: 500 12px/1.3 var(--f-mono);
}

.portal .pita-isi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 34px;
}

.portal .pita-kiri,
.portal .pita-tautan {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
}

.portal .pita-label {
    opacity: 0.85;
}

.portal .pita a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Kepala situs ---------- */
.portal .kepala {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--t-header-bg);
    color: var(--t-on-header);
    border-bottom: 1px solid var(--t-line);
}

.portal .kepala-isi {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 68px;
}

.portal .merek {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.portal .merek img {
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.portal .merek:hover {
    color: inherit;
}

.portal .logo-gelap {
    display: none;
}

.portal .merek-glyph {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r);
    background: var(--t-accent);
    color: var(--t-on-accent);
    font: 700 13px/1 var(--f-mono);
}

.portal .merek-teks {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.portal .nav-utama {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 15px;
}

.portal .nav-utama > a,
.portal .nav-induk-tombol {
    padding-block: 22px;
    border-bottom: 2px solid transparent;
}

.portal .nav-utama > a[aria-current="page"],
.portal .nav-induk-tombol[aria-current="page"] {
    border-bottom-color: var(--t-accent);
}

.portal .nav-utama > a:hover {
    color: inherit;
    border-bottom-color: var(--t-line);
}

.portal .nav-induk {
    position: relative;
}

.portal .nav-induk-tombol {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-top: 0;
    border-inline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.portal .nav-anak {
    display: none;
    position: absolute;
    top: 100%;
    left: -14px;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
    background: var(--t-bg);
    color: var(--t-text);
    font-weight: 500;
}

.portal .nav-induk:hover .nav-anak,
.portal .nav-induk:focus-within .nav-anak {
    display: grid;
}

.portal .nav-anak a {
    padding: 8px 10px;
    border-radius: var(--r);
}

.portal .nav-anak .nav-cucu {
    padding-left: 22px;
    font-size: 14px;
}

.portal .kepala-aksi {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.portal .tombol-ikon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
}

.portal .tombol-ikon:hover {
    color: inherit;
    border-color: var(--t-primary);
}

.portal .tombol-laci {
    display: none;
}

.portal .ik-matahari {
    display: none;
}

.portal .laci {
    display: none;
    border-top: 1px solid var(--t-line);
}

.portal .kepala.is-open .laci {
    display: block;
}

.portal .laci-isi {
    display: grid;
    padding-block: 10px 18px;
    font-weight: 700;
}

.portal .laci-isi a,
.portal .laci-grup {
    padding-block: 10px;
    border-bottom: 1px solid var(--t-line);
}

.portal .laci-grup {
    font: 500 12px var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-muted);
}

.portal .laci-anak {
    padding-left: 16px;
    font-weight: 500;
}

.portal .laci-cucu {
    padding-left: 32px;
}

/* Mode gelap: tukar ikon sakelar dan logo (logo footer dirancang untuk latar gelap). */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="terang"]) .portal .ik-matahari,
    :root:not([data-tema="terang"]) .portal .logo-gelap {
        display: block;
    }

    :root:not([data-tema="terang"]) .portal .ik-bulan,
    :root:not([data-tema="terang"]) .portal .logo-terang {
        display: none;
    }
}

:root[data-tema="gelap"] .portal .ik-matahari,
:root[data-tema="gelap"] .portal .logo-gelap {
    display: block;
}

:root[data-tema="gelap"] .portal .ik-bulan,
:root[data-tema="gelap"] .portal .logo-terang {
    display: none;
}

/* ---------- Atom ---------- */
.portal .label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font: 500 11.5px/1.3 var(--f-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal .label-sep {
    color: var(--t-muted);
}

.portal .label-kat {
    color: var(--kat);
}

.portal .tingkat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.portal .tingkat .bar {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.portal .tingkat i {
    display: block;
    width: 4px;
    border-radius: 1px;
    background: var(--t-line);
}

.portal .tingkat i:nth-child(1) {
    height: 5px;
}

.portal .tingkat i:nth-child(2) {
    height: 8.5px;
}

.portal .tingkat i:nth-child(3) {
    height: 12px;
}

.portal .tingkat[data-n="1"] i:nth-child(1),
.portal .tingkat[data-n="2"] i:nth-child(-n+2),
.portal .tingkat[data-n="3"] i {
    background: var(--t-primary);
}

.portal .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font: 500 12.5px/1.45 var(--f-mono);
    color: var(--t-muted);
}

.portal .meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.portal .byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    font-size: 14px;
}

.portal .byline-nama {
    font-weight: 700;
}

.portal .av {
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    object-fit: cover;
    font-family: var(--f-body);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.portal .av-1 {
    background: var(--t-primary);
    color: var(--t-on-primary);
}

.portal .av-2 {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.portal .av-3 {
    background: var(--t-text);
    color: var(--t-bg);
}

.portal .avs {
    display: inline-flex;
    flex-shrink: 0;
}

.portal .avs:empty {
    display: none;
}

.portal .avs .av {
    border: 2px solid var(--t-bg);
}

.portal .avs .av + .av {
    margin-left: -9px;
}

body.portal[data-avatar="0"] .kartu .avs,
body.portal[data-avatar="0"] .sorotan-teks .avs,
body.portal[data-avatar="0"] .baris-kecil .avs {
    display: none;
}

/* Sampul tanpa foto: tutorial = kertas milimeter, artikel = kertas bergaris, berita = raster cetak. */
.portal .sampul {
    position: relative;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    padding: 14px 16px;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-size: 15px;
}

.portal .sampul::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--t-on-primary) 1px, transparent 1px), linear-gradient(90deg, var(--t-on-primary) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.1;
}

.portal .sampul-teks {
    position: relative;
    font: 600 1em/1.25 var(--f-mono);
    overflow-wrap: anywhere;
}

.portal .sampul-tutorial .sampul-teks::before {
    content: "$ ";
    opacity: 0.55;
}

.portal .sampul-artikel {
    background: var(--t-text);
    color: var(--t-bg);
}

.portal .sampul-artikel::before {
    background-image: linear-gradient(transparent 25px, var(--t-bg) 25px);
    background-size: 100% 26px;
    opacity: 0.12;
}

.portal .sampul-berita {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.portal .sampul-berita::before {
    background-image: radial-gradient(var(--t-on-accent) 1.2px, transparent 1.6px);
    background-size: 11px 11px;
    opacity: 0.16;
}

.portal .sampul-foto {
    display: block;
    padding: 0;
    object-fit: cover;
}

.portal .thumb .sampul {
    aspect-ratio: 4 / 3;
    padding: 8px 10px;
    font-size: 10.5px;
}

.portal .ringkas {
    color: var(--t-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.portal[data-kepadatan="rapat"] .kartu .ringkas,
body.portal[data-kepadatan="rapat"] .ks-ringkas {
    display: none;
}

.portal .tombol {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding-inline: 18px;
    border-radius: var(--r);
    font-weight: 700;
    white-space: nowrap;
}

.portal .tombol-aksen,
.portal .tombol-aksen:hover {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.portal .tombol-garis {
    border: 1px solid var(--t-line);
}

/* ---------- Seksi ---------- */
.portal .seksi {
    padding-block: var(--sec);
}

.portal .seksi + .seksi {
    padding-top: 0;
}

/* Pita berlatar (seri) butuh ruang atas walau mengikuti seksi lain:
   `.seksi.seksi-seri` menyamai spesifisitas `.seksi + .seksi` di atasnya. */
.portal .seksi.seksi-seri,
.portal .seksi-seri + .seksi {
    padding-top: var(--sec);
}

.portal .seksi-kepala {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: calc(var(--gap) * 0.9);
}

.portal .seksi-judul {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.018em;
}

.portal .tautan-seksi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 13px var(--f-mono);
    color: var(--t-accent-text);
    white-space: nowrap;
}

/* Pembuka (hero) saat belum ada naskah unggulan */
.portal .pembuka {
    display: grid;
    gap: 14px;
    padding-block: 12px;
}

.portal .pembuka-judul {
    max-width: 22ch;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -0.022em;
}

.portal .pembuka-judul .accent {
    color: var(--t-accent-text);
}

.portal .pembuka-lede {
    max-width: 60ch;
    font-size: 18px;
    color: var(--t-muted);
}

/* Sorotan (varian utama) */
.portal .sorotan {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: calc(var(--gap) * 1.5);
}

.portal .sorotan-besar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.portal .sorotan-besar .sampul,
.portal .slide .sampul {
    font-size: 26px;
    border-radius: var(--r-lg);
}

.portal .sorotan-teks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.portal .sorotan-judul {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 42px;
    line-height: 1.03;
    letter-spacing: -0.022em;
}

.portal .sorotan-ringkas {
    max-width: 60ch;
    font-size: 17px;
}

.portal .sorotan-kaki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.portal .sorotan-daftar {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.portal .sorotan-kecil {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 16px;
    padding-block: 18px;
    border-top: 1px solid var(--t-line);
}

.portal .sorotan-kecil.tanpa-gambar {
    grid-template-columns: minmax(0, 1fr);
}

.portal .sorotan-kecil:first-child {
    border-top: 0;
    padding-top: 0;
}

.portal .sorotan-kecil h3 {
    margin-block: 6px;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 700;
    font-size: 17.5px;
    line-height: 1.25;
}

.portal .utama-daftar {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--gap) 56px;
    align-items: start;
}

.portal .utama-daftar .sorotan-judul {
    font-size: 46px;
}

.portal .slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.portal .slider::-webkit-scrollbar {
    display: none;
}

.portal .slide {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    scroll-snap-align: start;
}

.portal .slider-kendali {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.portal .titik-slide {
    display: flex;
    flex: 1;
    gap: 6px;
}

.portal .titik-slide i {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--t-line);
}

.portal .titik-slide i.aktif {
    background: var(--t-primary);
}

/* Terbaru per jenis + Terpopuler */
.portal .terbaru {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
}

.portal .terbaru.tanpa-populer {
    grid-template-columns: minmax(0, 1fr);
}

.portal .terbaru-utama {
    min-width: 0;
}

.portal .blok-jenis + .blok-jenis {
    margin-top: calc(var(--sec) * 0.85);
}

.portal .blok-kepala {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--t-text);
}

.portal .blok-judul {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
}

.portal .grid-kartu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--gap) * 1.2) var(--gap);
}

.portal .kartu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.portal .kartu-isi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.portal .kartu-judul {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.22;
}

.portal .kartu .ringkas {
    font-size: 14.5px;
    line-height: 1.55;
}

.portal .kartu-bab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12.5px var(--f-mono);
    color: var(--t-accent-text);
}

.portal .daftar-artikel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 36px;
}

.portal .baris-kecil {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.portal .baris-kecil > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.portal .baris-kecil h3,
.portal .baris-kecil h4 {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.25;
}

.portal .daftar-berita li {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding-block: 13px;
    border-top: 1px solid var(--t-line);
}

.portal .daftar-berita li:first-child {
    border-top: 0;
    padding-top: 0;
}

.portal .tgl-blok {
    font: 600 11.5px/1.2 var(--f-mono);
    color: var(--t-muted);
    text-transform: uppercase;
}

.portal .tgl-blok b {
    display: block;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--t-text);
}

.portal .daftar-berita h3 {
    margin-top: 4px;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.35;
}

.portal .populer {
    position: sticky;
    top: 92px;
}

.portal .populer li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding-block: 14px;
    border-top: 1px solid var(--t-line);
}

.portal .populer li:first-child {
    border-top: 0;
    padding-top: 0;
}

.portal .populer li > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.portal .peringkat {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    color: var(--t-accent-text);
    font-variant-numeric: tabular-nums;
}

.portal .populer h3 {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
}

/* Seri */
.portal .seksi-seri {
    background: var(--t-surface);
}

.portal .grid-seri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.portal .kartu-seri {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
    background: var(--t-bg);
}

.portal .ks-atas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.portal .ks-judul {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.15;
}

.portal .ks-ringkas {
    font-size: 14px;
}

.portal .ks-bab li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding-block: 6px;
    border-top: 1px dashed var(--t-line);
    font-size: 13.5px;
}

.portal .ks-bab .no {
    font: 600 12px/1.6 var(--f-mono);
    color: var(--t-accent-text);
    font-variant-numeric: tabular-nums;
}

.portal .ks-kaki {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    font: 500 12.5px var(--f-mono);
    color: var(--t-muted);
}

/* Per kategori */
.portal .grid-kat {
    display: grid;
    grid-template-columns: repeat(var(--kol, 2), minmax(0, 1fr));
    gap: calc(var(--gap) * 1.3) 40px;
}

.portal .blok-kat {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding-top: 14px;
    border-top: 3px solid var(--kat);
}

.portal .blok-kat-kepala {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.portal .blok-kat-kepala h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 20px;
}

.portal .titik {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--kat);
}

.portal .blok-kat ul li {
    display: grid;
    gap: 3px;
    padding-block: 10px;
    border-top: 1px solid var(--t-line);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
}

/* Penulis, tag */
.portal .grid-penulis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.portal .kartu-penulis {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
}

.portal .kartu-penulis:hover {
    color: inherit;
    border-color: var(--t-primary);
}

.portal .kp-isi {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.portal .kp-nama {
    font-weight: 700;
    font-size: 16px;
}

.portal .kp-headline {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--t-muted);
}

.portal .kp-hitung {
    margin-top: 6px;
    font: 500 11.5px var(--f-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.portal .awan-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portal .chip-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    font: 500 13.5px var(--f-mono);
    white-space: nowrap;
}

.portal .chip-tag small {
    font-size: 11.5px;
    color: var(--t-muted);
}

/* Ajakan (cta_band) */
.portal .ajakan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    border: 1px dashed var(--t-muted);
    border-radius: var(--r-lg);
}

.portal .ajakan > div:first-child {
    display: grid;
    gap: 6px;
}

.portal .ajakan h2 {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.15;
}

.portal .ajakan p {
    max-width: 60ch;
    color: var(--t-muted);
}

.portal .ajakan-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- Kaki situs ---------- */
.portal .kaki {
    padding-block: 52px 26px;
    background: var(--t-footer-bg);
    color: var(--t-on-footer);
    font-size: 14px;
}

.portal .kaki-isi {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.portal .kaki-merek img {
    width: auto;
    max-width: 220px;
}

.portal .kaki-merek p {
    max-width: 38ch;
    margin-top: 14px;
    opacity: 0.78;
}

.portal .kaki h2 {
    margin-bottom: 12px;
    font: 600 11.5px var(--f-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.portal .kaki ul {
    display: grid;
    gap: 8px;
}

.portal .kaki a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.portal .kaki-bawah {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    margin-top: 40px;
    padding-top: 18px;
    font: 500 12px var(--f-mono);
    opacity: 0.85;
}

.portal .kaki-bawah::before {
    content: "";
    position: absolute;
    inset: 0 var(--pad) auto;
    height: 1px;
    background: var(--t-on-footer);
    opacity: 0.22;
}

.portal .kaki-tautan {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

/* ---------- Lebar menengah ---------- */
@media (max-width: 1080px) {
    .portal .grid-seri {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal .terbaru {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 40px;
    }

    .portal .grid-kartu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal .nav-utama {
        gap: 16px;
        font-size: 14px;
    }
}

/* ---------- Lebar ponsel ---------- */
@media (max-width: 760px) {
    body.portal {
        --pad: 16px;
        --sec: 40px;
    }

    .portal .pita-tautan {
        display: none;
    }

    .portal .kepala-isi {
        gap: 10px;
        min-height: 58px;
    }

    .portal .nav-utama {
        display: none;
    }

    .portal .tombol-laci {
        display: grid;
    }

    .portal .merek-teks {
        font-size: 18px;
    }

    .portal .merek img {
        max-width: 160px;
    }

    .portal .seksi-judul {
        font-size: 23px;
    }

    .portal .sorotan,
    .portal .utama-daftar,
    .portal .slide {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .portal .sorotan-judul,
    .portal .utama-daftar .sorotan-judul,
    .portal .pembuka-judul {
        font-size: 29px;
    }

    .portal .sorotan-besar .sampul,
    .portal .slide .sampul {
        font-size: 17px;
    }

    .portal .sorotan-kecil {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
    }

    .portal .terbaru {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .portal .populer {
        position: static;
    }

    .portal .grid-kartu {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .portal .grid-kartu .kartu {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .portal .grid-kartu .kartu .sampul {
        aspect-ratio: 1 / 1;
        padding: 8px;
        font-size: 10px;
    }

    .portal .grid-kartu .ringkas {
        display: none;
    }

    .portal .kartu-judul {
        font-size: 17px;
    }

    .portal .daftar-artikel,
    .portal .grid-kat,
    .portal .grid-penulis {
        grid-template-columns: minmax(0, 1fr);
    }

    .portal .grid-seri {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 84%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .portal .grid-seri > * {
        scroll-snap-align: start;
    }

    .portal .ajakan {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }

    .portal .kaki-isi {
        grid-template-columns: 1fr 1fr;
    }

    .portal .kaki-merek {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Halaman dalam (6418 T5b): strip kategori, kepala halaman, daftar, penulis,
   seri, detail tulisan. Warna tetap hanya var(--t-*); mode gelap mengikuti
   token tanpa aturan tambahan.
   ========================================================================== */

/* ---------- Strip kategori (layout) ---------- */
.portal .strip-kat {
    border-bottom: 1px solid var(--t-line);
}

.portal .strip-kat-isi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
    min-height: 44px;
    font-size: 14px;
    color: var(--t-muted);
}

.portal .strip-kat a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 10px;
    white-space: nowrap;
}

.portal .strip-kat a[aria-current] {
    color: var(--t-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--t-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* ---------- Kepala halaman & breadcrumb path ---------- */
.portal .kepala-hal {
    padding-block: 44px 30px;
    border-bottom: 1px solid var(--t-line);
}

.portal .bc {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font: 500 13px var(--f-mono);
    color: var(--t-muted);
    overflow-wrap: anywhere;
}

.portal .bc > * + *::before {
    content: "/";
    opacity: 0.7;
}

.portal .bc [aria-current] {
    color: var(--t-text);
}

.portal .judul-hal {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 54px;
    line-height: 1;
    letter-spacing: -0.028em;
}

.portal .judul-hal .hash {
    color: var(--t-accent-text);
}

.portal .desk-hal {
    max-width: 62ch;
    margin-top: 14px;
    font-size: 18px;
    color: var(--t-muted);
}

.portal .hitung-hal {
    margin-top: 14px;
    font: 500 13px var(--f-mono);
    color: var(--t-muted);
}

.portal .kepala-hal .awan-tag {
    margin-top: 22px;
}

.portal .pil-baris {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.portal .pil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding-inline: 14px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: var(--t-bg);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.portal .pil small {
    font: 500 12px var(--f-mono);
    color: var(--t-muted);
}

.portal .pil:hover {
    border-color: var(--t-primary);
}

.portal .pil[aria-current="true"],
.portal .pil[aria-current="true"]:hover {
    border-color: var(--t-text);
    background: var(--t-text);
    color: var(--t-bg);
}

.portal .pil[aria-current="true"] small {
    color: inherit;
    opacity: 0.75;
}

.portal .chip-tag:hover {
    border-color: var(--t-primary);
}

.portal .chip-tag[aria-current="page"] {
    border-color: var(--t-text);
    background: var(--t-text);
    color: var(--t-bg);
}

.portal .chip-tag[aria-current="page"] small {
    color: inherit;
}

.portal .strip-seri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.portal .seri-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
}

.portal .seri-mini:hover {
    color: inherit;
    border-color: var(--t-primary);
}

.portal .seri-mini strong {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.2;
}

/* ---------- Paginasi & keadaan kosong ---------- */
.portal .paginasi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 52px;
    font: 600 14px var(--f-mono);
}

.portal .paginasi a,
.portal .paginasi span {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    box-sizing: border-box;
    padding-inline: 10px;
    border: 1px solid var(--t-line);
    border-radius: var(--r);
}

.portal .paginasi a:hover {
    border-color: var(--t-primary);
}

.portal .paginasi [aria-current] {
    border-color: var(--t-text);
    background: var(--t-text);
    color: var(--t-bg);
}

.portal .paginasi .kosong {
    border-color: transparent;
    color: var(--t-muted);
}

.portal .kosong-hasil {
    display: grid;
    justify-items: start;
    gap: 12px;
    padding: 36px;
    border: 1px dashed var(--t-muted);
    border-radius: var(--r-lg);
}

.portal .kosong-hasil h2 {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 24px;
}

.portal .kosong-hasil .desk-hal {
    margin: 0;
    font-size: 16px;
}

.portal .kosong-hasil .pil-baris {
    margin: 0;
}

/* ---------- Daftar baris (profil penulis) ---------- */
.portal .daftar-baris {
    display: flex;
    flex-direction: column;
}

.portal .baris {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 22px;
    padding-block: 22px;
    border-top: 1px solid var(--t-line);
}

.portal .baris:first-child {
    padding-top: 0;
    border-top: 0;
}

.portal .baris-isi {
    min-width: 0;
}

.portal .baris-judul {
    margin-block: 6px;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.22;
}

.portal .baris-ringkas {
    font-size: 15px;
}

.portal .baris-kaki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 10px;
}

body.portal[data-avatar="0"] .baris .avs {
    display: none;
}

body.portal[data-kepadatan="rapat"] .baris-ringkas {
    display: none;
}

/* ---------- Dua kolom & samping ---------- */
.portal .dua-kolom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
    padding-block: 32px var(--sec);
}

.portal .dua-kolom.tanpa-samping {
    grid-template-columns: minmax(0, 1fr);
}

.portal .samping-judul {
    margin-bottom: 10px;
    font: 600 11.5px var(--f-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.portal .samping-seri {
    display: grid;
    gap: 10px;
}

.portal .samping-daftar li {
    display: grid;
    gap: 3px;
    padding-block: 10px;
    border-top: 1px dashed var(--t-line);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.35;
}

.portal .samping-daftar li:first-child {
    padding-top: 0;
    border-top: 0;
}

/* ---------- Profil penulis ---------- */
.portal .profil-jalur {
    padding-top: 28px;
}

.portal .profil {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    padding-block: 12px 30px;
}

.portal .profil-nama {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 48px;
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.portal .profil-headline {
    margin-top: 8px;
    font-size: 18px;
    color: var(--t-muted);
}

.portal .profil-bio {
    margin-top: 16px;
    font-size: 16.5px;
}

.portal .profil-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.portal .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

.portal a.chip:hover {
    border-color: var(--t-primary);
}

.portal .chip-isi {
    background: var(--t-surface);
}

.portal .tab-jenis {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--t-line);
    scrollbar-width: none;
}

.portal .tab-jenis a {
    margin-bottom: -1px;
    padding: 12px 14px;
    border-bottom: 2px solid transparent;
    font-weight: 700;
    font-size: 15px;
    color: var(--t-muted);
    white-space: nowrap;
}

.portal .tab-jenis a[aria-current="true"] {
    border-bottom-color: var(--t-accent);
    color: var(--t-text);
}

.portal .tab-jenis small {
    margin-left: 6px;
    font: 500 12px var(--f-mono);
}

/* ---------- Seri ---------- */
.portal .seri-kepala {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 48px;
    align-items: end;
    padding-block: 40px 36px;
    border-bottom: 1px solid var(--t-line);
}

.portal .seri-kepala .judul-hal {
    margin-top: 14px;
}

.portal .seri-kepala-sampul .sampul {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    font-size: 22px;
}

.portal .seri-fakta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 22px;
    font: 500 12px var(--f-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.portal .seri-fakta b {
    display: block;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--t-text);
}

.portal .seri-aksi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.portal .seri-aksi .byline-nama a,
.portal .art-nama a {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--t-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.portal .daftar-bab {
    padding-block: 12px var(--sec);
}

.portal .bab-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    padding-block: 24px;
    border-top: 1px solid var(--t-line);
}

.portal .bab-item:first-child {
    border-top: 0;
}

.portal .bab-no {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
    color: var(--t-accent-text);
}

.portal .bab-isi {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.portal .bab-judul {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
}

.portal .bab-isi .ringkas {
    font-size: 15px;
}

.portal .bab-kanan {
    padding-top: 4px;
}

/* ---------- Detail tulisan ---------- */
.portal .art-kepala {
    padding-top: 36px;
}

.portal .art-lencana {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    font: 500 12.5px var(--f-mono);
    color: var(--t-muted);
}

.portal .lencana-seri,
.portal .lencana-seri:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--t-accent);
    color: var(--t-on-accent);
    font: 600 12.5px var(--f-mono);
}

.portal .art-judul {
    max-width: 21ch;
    margin-top: 18px;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 52px;
    line-height: 1.02;
    letter-spacing: -0.028em;
}

.portal .art-lead {
    max-width: 60ch;
    margin-top: 18px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--t-muted);
}

.portal .art-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 26px;
    padding-block: 16px;
    border-block: 1px solid var(--t-line);
}

.portal .art-nama {
    margin-bottom: 2px;
    font-size: 15.5px;
}

.portal .art-sampul {
    margin-top: 28px;
}

.portal .art-sampul .sampul {
    aspect-ratio: 21 / 8;
    border-radius: var(--r-lg);
    font-size: 30px;
}

.portal .art-badan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 64px;
    align-items: start;
    margin-top: 44px;
    padding-bottom: var(--sec);
}

.portal .art-utama {
    min-width: 0;
}

.portal .samping {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.portal .toc a {
    display: block;
    padding: 5px 0 5px 12px;
    border-left: 2px solid var(--t-line);
    font-size: 14px;
    line-height: 1.4;
    color: var(--t-muted);
}

.portal .toc .h3 a {
    padding-left: 26px;
    font-size: 13.5px;
}

.portal .toc a[aria-current] {
    border-left-color: var(--t-accent);
    color: var(--t-text);
    font-weight: 700;
}

.portal .toc-ponsel {
    display: none;
    margin-bottom: 26px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
}

.portal .toc-ponsel summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-weight: 700;
    cursor: pointer;
}

.portal .toc-ponsel .toc {
    padding: 0 16px 14px;
}

.portal .kotak-seri {
    padding: 16px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
    background: var(--t-surface);
}

.portal .kotak-seri-judul {
    display: block;
    margin-bottom: 10px;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.2;
}

.portal .bab-daftar li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding-block: 7px;
    border-top: 1px dashed var(--t-line);
    font-size: 13.5px;
    line-height: 1.4;
}

.portal .bab-daftar .no {
    font: 600 12px var(--f-mono);
    color: var(--t-muted);
}

.portal .bab-daftar li[aria-current] {
    font-weight: 700;
}

.portal .bab-daftar small {
    display: block;
    margin-top: 2px;
    font: 600 11px var(--f-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--t-accent-text);
}

/* Isi tulisan (pengganti .ns-prose yang ber---ns-*) */
.portal .prosa {
    max-width: 68ch;
    font-size: 17.5px;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.portal .prosa > * + * {
    margin-top: 1.1em;
}

.portal .prosa h2 {
    margin-top: 1.9em;
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.012em;
    scroll-margin-top: 92px;
}

.portal .prosa h3 {
    margin-top: 1.5em;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    scroll-margin-top: 92px;
}

.portal .prosa h4 {
    margin-top: 1.4em;
    font-weight: 700;
    font-size: 17.5px;
}

.portal .prosa ul,
.portal .prosa ol {
    padding-left: 1.4em;
}

.portal .prosa ul {
    list-style: disc;
}

.portal .prosa ol {
    list-style: decimal;
}

.portal .prosa li + li {
    margin-top: 0.4em;
}

.portal .prosa li::marker {
    color: var(--t-accent-text);
}

.portal .prosa a {
    color: var(--t-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.portal .prosa blockquote {
    margin-inline: 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--t-accent);
    color: var(--t-muted);
    font-style: italic;
}

.portal .prosa img,
.portal .prosa video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-lg);
}

.portal .prosa iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--t-surface);
}

.portal .prosa hr {
    border: 0;
    border-top: 1px solid var(--t-line);
}

.portal .prosa table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.portal .prosa th,
.portal .prosa td {
    padding: 8px 12px;
    border: 1px solid var(--t-line);
    text-align: left;
}

.portal .prosa th {
    background: var(--t-surface);
}

.portal .prosa :not(pre) > code {
    padding: 0.08em 0.38em;
    border: 1px solid var(--t-line);
    border-radius: 4px;
    background: var(--t-surface);
    font: 500 0.86em var(--f-mono);
}

.portal .prosa pre {
    overflow-x: auto;
    padding: 16px 18px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
    background: var(--t-surface);
    font: 400 14px/1.7 var(--f-mono);
    tab-size: 4;
}

.portal .prosa pre code {
    font: inherit;
}

/* Blok kode T3d: pembungkus .ns-kode + tombol Salin dipasang sorot.js. */
.portal .prosa .ns-kode {
    margin: 1.5em 0 0;
}

.portal .prosa .ns-kode > pre {
    padding: 2.6rem 18px 16px;
    border-radius: var(--r-lg);
    font: 400 14px/1.7 var(--f-mono);
}

.portal .prosa .ns-kode > pre > code {
    font-family: var(--f-mono);
}

.portal .ns-kode-salin {
    border-radius: var(--r);
    font: 600 12px var(--f-mono);
}

.portal .nav-bab {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
}

.portal .nav-bab a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
}

.portal .nav-bab a:hover {
    color: inherit;
    border-color: var(--t-primary);
}

.portal .nav-bab .nav-bab-sesudah {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}

.portal .nav-bab small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 12px var(--f-mono);
    color: var(--t-muted);
}

.portal .nav-bab strong {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.25;
}

.portal .art-kaki {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--t-line);
}

.portal .bagikan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font: 500 13px var(--f-mono);
    color: var(--t-muted);
}

.portal .bagikan a,
.portal .bagikan button {
    padding: 6px 11px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: transparent;
    color: var(--t-text);
    font: inherit;
    cursor: pointer;
}

.portal .bagikan a:hover,
.portal .bagikan button:hover {
    border-color: var(--t-primary);
}

.portal .bagikan button[data-tersalin] {
    border-color: var(--t-accent);
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.portal .kotak-penulis {
    display: grid;
    gap: 22px;
    margin-top: 40px;
    padding: 24px;
    border: 1px solid var(--t-line);
    border-radius: var(--r-lg);
}

.portal .kotak-penulis h2 {
    font: 600 11.5px var(--f-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.portal .kp-baris {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
}

.portal .kp-baris + .kp-baris {
    padding-top: 22px;
    border-top: 1px dashed var(--t-line);
}

.portal .kp-baris .kp-nama {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 18px;
}

.portal .kp-bio {
    margin-top: 8px;
    font-size: 15px;
}

.portal .kp-baris .tautan-seksi {
    margin-top: 8px;
}

@media (max-width: 1080px) {
    .portal .strip-seri {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal .art-badan {
        gap: 40px;
        grid-template-columns: minmax(0, 1fr) 240px;
    }

    .portal .seri-kepala {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .portal .dua-kolom {
        gap: 40px;
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

@media (max-width: 760px) {
    .portal .strip-kat-isi {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .portal .kepala-hal {
        padding-block: 28px 22px;
    }

    .portal .judul-hal {
        font-size: 36px;
    }

    .portal .desk-hal {
        font-size: 16px;
    }

    .portal .pil-baris {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .portal .strip-seri {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 72%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .portal .kosong-hasil {
        padding: 22px;
    }

    .portal .baris {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 14px;
    }

    .portal .baris-ringkas {
        display: none;
    }

    .portal .baris-judul {
        font-size: 17px;
    }

    .portal .dua-kolom {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .portal .profil {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .portal .profil-nama {
        font-size: 33px;
    }

    .portal .seri-kepala {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-top: 26px;
    }

    .portal .seri-kepala-sampul .sampul {
        aspect-ratio: 16 / 9;
        font-size: 17px;
    }

    .portal .bab-item {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
    }

    .portal .bab-kanan {
        display: none;
    }

    .portal .bab-no {
        font-size: 28px;
    }

    .portal .bab-judul {
        font-size: 18px;
    }

    .portal .art-kepala {
        padding-top: 22px;
    }

    .portal .art-judul {
        font-size: 31px;
    }

    .portal .art-lead {
        font-size: 17px;
    }

    .portal .art-sampul .sampul {
        aspect-ratio: 16 / 9;
        font-size: 17px;
    }

    .portal .art-badan {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 24px;
    }

    .portal .samping {
        display: none;
    }

    .portal .toc-ponsel {
        display: block;
    }

    .portal .prosa {
        font-size: 16.5px;
    }

    .portal .prosa h2 {
        font-size: 23px;
    }

    .portal .prosa pre,
    .portal .prosa .ns-kode > pre {
        font-size: 12.5px;
    }

    .portal .nav-bab {
        grid-template-columns: minmax(0, 1fr);
    }

    .portal .nav-bab .nav-bab-sesudah {
        grid-column: auto;
        align-items: flex-start;
        text-align: left;
    }

    .portal .kotak-penulis {
        padding: 18px;
    }

    /* Merek panjang + tiga tombol ikon melewati 375px (luapan 2px sejak
       T5a): merek boleh menyusut dan teksnya terpotong elipsis. */
    .portal .merek {
        flex-shrink: 1;
        min-width: 0;
    }

    .portal .merek-teks {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .portal .kepala-aksi {
        flex-shrink: 0;
        gap: 4px;
    }
}

/* ==========================================================================
   Pencarian (6426 T5c): kotak cari kepala layout + halaman /cari.
   ========================================================================== */
.portal .cari-kecil {
    display: flex;
    align-items: center;
    flex: 0 1 260px;
    min-width: 0;
    height: 38px;
    margin-left: auto;
    padding-inline: 14px 4px;
    box-sizing: border-box;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: var(--t-bg);
    color: var(--t-text);
}

.portal .cari-kecil:focus-within {
    border-color: var(--t-primary);
}

.portal .cari-kecil input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    outline: 0;
}

.portal .cari-kecil input::placeholder,
.portal .cari-besar input::placeholder {
    color: var(--t-muted);
}

.portal .cari-kecil button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--t-muted);
    font-size: 16px;
    cursor: pointer;
}

.portal .cari-kecil + .kepala-aksi {
    margin-left: 0;
}

.portal .tombol-cari {
    display: none;
}

.portal .cari-besar {
    display: flex;
    gap: 8px;
    max-width: 740px;
    margin-top: 22px;
}

.portal .cari-besar input {
    flex: 1;
    min-width: 0;
    height: 54px;
    box-sizing: border-box;
    padding-inline: 18px;
    border: 2px solid var(--t-text);
    border-radius: var(--r);
    background: var(--t-bg);
    color: var(--t-text);
    font: inherit;
    font-size: 19px;
}

.portal .cari-besar input:focus {
    outline: 2px solid var(--t-primary);
    outline-offset: 2px;
}

.portal .cari-besar .tombol {
    height: 54px;
    border: 0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.portal .hasil-info {
    margin-top: 16px;
    font: 500 14px var(--f-mono);
    color: var(--t-muted);
}

.portal mark {
    padding: 0 0.1em;
    border-radius: 2px;
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.portal .samping-cari {
    display: grid;
    gap: 28px;
}

/* Selebar kotak cari tampil, menu tak boleh menyusut di bawah isinya —
   kalau tidak, item terakhirnya tertutup kotak cari; kotak cari yang
   menyusut (sampai 150px). */
@media (min-width: 1081px) {
    .portal .nav-utama {
        flex: 1 0 auto;
    }

    .portal .cari-kecil {
        min-width: 150px;
    }
}

@media (max-width: 1080px) {
    .portal .cari-kecil {
        display: none;
    }

    .portal .cari-kecil + .kepala-aksi {
        margin-left: auto;
    }

    .portal .tombol-cari {
        display: grid;
    }
}

@media (max-width: 760px) {
    .portal .cari-besar input,
    .portal .cari-besar .tombol {
        height: 48px;
    }

    .portal .cari-besar input {
        font-size: 17px;
    }

    /* Pil di keadaan kosong membungkus: sebagai item grid ber-justify-items
       start ia tak menyusut, jadi gulir mendatar (.pil-baris ponsel) justru
       melebarkan halaman. */
    .portal .kosong-hasil .pil-baris {
        flex-wrap: wrap;
        max-width: 100%;
        overflow-x: visible;
    }
}

/* ==========================================================================
   Seksi newsletter beranda (6433): pita warna utama, formulir langganan
   bersama (kelas ns-* milik landing.shared._newsletter-form) diberi warna
   token. Hanya var(--t-*), jadi mode gelap ikut berganti.
   ========================================================================== */
.portal .seksi-newsletter {
    background: var(--t-primary);
    color: var(--t-on-primary);
}

/* Spesifisitas setara `.portal .seksi + .seksi` (yang menolkan padding atas
   seksi berurutan) dan ditulis sesudahnya: pita berwarna butuh ruang atas. */
.portal .seksi.seksi-newsletter,
.portal .seksi-newsletter + .seksi {
    padding-top: var(--sec);
}

.portal .ns-newsletter {
    scroll-margin-top: 92px;
}

.portal .nl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.portal .nl h2 {
    font-family: var(--f-display);
    font-stretch: var(--lebar-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -0.018em;
}

.portal .nl-teks p {
    max-width: 46ch;
    margin-top: 10px;
    opacity: 0.85;
}

.portal .nl .ns-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.portal .nl .ns-form-field {
    grid-column: 1;
}

.portal .nl .ns-form-label {
    color: var(--t-on-primary);
    font-family: var(--f-mono);
    opacity: 0.85;
}

.portal .nl .ns-form-label .req {
    color: inherit;
}

.portal .nl .ns-form-input {
    height: 46px;
    box-sizing: border-box;
    border-color: var(--t-line);
    border-radius: var(--r);
    background: var(--t-bg);
    color: var(--t-text);
    font-family: var(--f-body);
    font-size: 16px;
}

.portal .nl .ns-form-input:focus {
    border-color: var(--t-accent);
    box-shadow: none;
    outline: 2px solid var(--t-accent);
    outline-offset: 1px;
}

.portal .nl label {
    grid-column: 1 / -1;
    color: var(--t-on-primary);
    font-size: 13px;
}

.portal .nl label a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.portal .nl input[type="checkbox"] {
    accent-color: var(--t-accent);
}

.portal .nl .ns-btn {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    height: 46px;
    padding-inline: 20px;
    border-radius: var(--r);
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
}

.portal .nl .ns-btn-primary,
.portal .nl .ns-btn-primary:hover {
    background: var(--t-accent);
    color: var(--t-on-accent);
    filter: none;
    transform: none;
}

.portal .nl .ns-btn:focus-visible {
    outline: 2px solid var(--t-on-primary);
}

.portal .nl .ns-alert {
    border-color: var(--t-line);
    border-radius: var(--r-lg);
    background: var(--t-bg);
    color: var(--t-text);
}

.portal .nl .ns-alert--success svg.lucide {
    color: var(--t-kat-success);
}

.portal .nl .ns-alert--danger {
    border-color: var(--t-kat-danger);
}

.portal .nl .ns-alert ul {
    padding-left: 18px;
    list-style: disc;
}

@media (max-width: 760px) {
    .portal .nl {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .portal .nl h2 {
        font-size: 25px;
    }

    .portal .nl .ns-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .portal .nl .ns-btn {
        grid-column: auto;
        grid-row: auto;
    }
}