/* Template "Personal" — arah "berkas kerja konsultan" (umbrella 6318, D40).
   Aturan template bundled: warna HANYA var(--t-*) dari TokenWarnaLanding
   (CssTemplateBundledTest), tanpa literal warna, color-mix, maupun bayangan.
   Rona tipis dibuat dengan pseudo-elemen ber-opacity. CSS polos: tanpa
   @layer/@apply/!important. Dimuat sesudah landing.css Vite, jadi aturan di
   sini menang atas utility. Kelas berawalan p- supaya tak bertabrakan dengan
   ns-* milik view dasar yang ikut dirender di dalam layout ini. */

/* ---------- Font di-host di folder template (CSP font-src) ---------- */
@font-face {
    font-family: "Familjen Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/newsreader-latin-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-display: swap;
    font-weight: 200 800;
    src: url("fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations"), url("fonts/newsreader-latin-wght-italic.woff2") format("woff2");
}

@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.personal {
    --f-ui: "Familjen Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
    --f-prosa: "Newsreader", Georgia, "Times New Roman", serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

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

.personal :focus-visible {
    outline: 2px solid var(--t-accent-text);
    outline-offset: 3px;
    border-radius: 3px;
}

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

.personal h1,
.personal h2,
.personal h3,
.personal h4,
.personal p,
.personal figure,
.personal blockquote {
    margin: 0;
}

.personal h1,
.personal h2,
.personal h3 {
    text-wrap: balance;
}

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

.personal img {
    max-width: 100%;
}

.personal svg.lucide {
    width: 1.05em;
    height: 1.05em;
    stroke-width: 1.9;
    flex-shrink: 0;
}

.personal .p-wadah {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

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

.personal .p-lompat {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 40;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--t-accent);
    color: var(--t-on-accent);
    font-weight: 600;
}

.personal .p-lompat:focus {
    top: 12px;
}

/* ---------- Atom ---------- */
.personal .p-tombol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding-inline: 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: var(--f-ui);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.15s, border-color 0.15s;
}

.personal .p-tombol--utama {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-tombol--utama:hover {
    opacity: 0.88;
}

.personal .p-tombol--garis {
    background: transparent;
    color: var(--t-text);
    border-color: var(--t-line);
}

.personal .p-tombol--garis:hover {
    border-color: var(--t-text);
}

.personal .p-tombol--terbalik {
    background: transparent;
    color: var(--t-on-footer);
    border-color: var(--t-on-footer);
}

.personal .p-tombol--terbalik:hover {
    opacity: 0.8;
}

.personal .p-tombol--kecil {
    height: 38px;
    padding-inline: 14px;
    font-size: 14.5px;
}

.personal .p-panah {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--t-line);
    font-size: 15px;
    font-weight: 600;
    transition: border-color 0.15s;
}

.personal .p-panah:hover {
    border-bottom-color: var(--t-text);
}

.personal .p-mono {
    font-family: var(--f-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--t-muted);
    font-variant-numeric: tabular-nums;
    font-variant-ligatures: none;
}

.personal .p-label {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-muted);
    font-variant-ligatures: none;
}

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

.personal .p-kepala-isi {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 66px;
}

.personal .p-merek {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-right: auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.personal .p-merek img {
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.personal .p-logo-gelap {
    display: none;
}

.personal .p-merek-tanda {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

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

.personal .p-nav {
    display: none;
    align-items: center;
    gap: 2px;
}

.personal .p-nav > a,
.personal .p-nav-induk-tombol {
    position: relative;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.78;
    transition: opacity 0.15s;
}

.personal .p-nav > a:hover,
.personal .p-nav > a[aria-current="page"],
.personal .p-nav-induk-tombol:hover,
.personal .p-nav-induk-tombol[aria-current="page"] {
    opacity: 1;
}

.personal .p-nav > a[aria-current="page"]::after,
.personal .p-nav-induk-tombol[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 1px;
    height: 2px;
    background: var(--t-accent);
}

.personal .p-nav-induk {
    position: relative;
}

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

.personal .p-nav-anak {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    background: var(--t-bg);
    color: var(--t-text);
}

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

.personal .p-nav-anak a {
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 15px;
}

.personal .p-nav-anak a:hover {
    background: var(--t-surface);
}

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

.personal .p-kepala-aksi {
    display: flex;
    align-items: center;
    gap: 8px;
}

.personal .p-masuk {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 14.5px;
    font-weight: 500;
    opacity: 0.8;
}

.personal .p-masuk:hover {
    opacity: 1;
}

.personal .p-ikon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.personal .p-ikon:hover {
    border-color: var(--t-on-header);
}

.personal .p-ikon svg.lucide {
    width: 18px;
    height: 18px;
}

.personal .p-kepala-ajak {
    display: none;
}

.personal .p-ik-matahari,
.personal .p-ik-tutup {
    display: none;
}

.personal .p-kepala.is-open .p-ik-buka {
    display: none;
}

.personal .p-kepala.is-open .p-ik-tutup {
    display: block;
}

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

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

.personal .p-laci-isi {
    display: grid;
    padding-block: 8px 18px;
}

.personal .p-laci-isi > a:not(.p-tombol) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--t-line);
    font-size: 18px;
    font-weight: 600;
}

.personal .p-laci-isi > a[aria-current="page"] {
    color: var(--t-accent-text);
}

.personal .p-laci-isi > .p-laci-anak {
    padding-left: 16px;
    font-size: 16px;
    font-weight: 500;
}

.personal .p-laci-isi > .p-laci-cucu {
    padding-left: 32px;
}

.personal .p-laci-grup {
    padding: 13px 0 6px;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t-muted);
}

.personal .p-laci .p-tombol {
    width: 100%;
    margin-top: 16px;
}

@media (min-width: 560px) {
    .personal .p-kepala-ajak {
        display: inline-flex;
    }
}

@media (min-width: 920px) {
    .personal .p-nav,
    .personal .p-masuk {
        display: flex;
    }

    .personal .p-tombol-laci,
    .personal .p-kepala.is-open .p-laci {
        display: none;
    }
}

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

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

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

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

/* ---------- Seksi beranda ---------- */
/* Anchor (#newsletter sesudah kirim formulir, tautan seksi) tak tertutup kepala lengket. */
.personal [data-seksi],
.personal .ns-newsletter {
    scroll-margin-top: 88px;
}

.personal .p-seksi {
    padding-block: 56px;
}

.personal .p-seksi + .p-seksi {
    padding-top: 0;
}

.personal .p-seksi-kepala {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 20px;
    margin-bottom: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--t-text);
}

.personal .p-seksi-kepala h2 {
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.personal .p-seksi-kepala > .p-mono {
    flex: 1;
    min-width: max-content;
}

.personal .p-seksi-kepala > .p-panah,
.personal .p-seksi-jenis {
    margin-left: auto;
}

.personal .p-seksi-jenis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

@media (min-width: 720px) {
    .personal .p-wadah {
        padding-left: max(40px, env(safe-area-inset-left, 0px));
        padding-right: max(40px, env(safe-area-inset-right, 0px));
    }

    .personal .p-seksi {
        padding-block: 80px;
    }
}

/* ---------- Hero ---------- */
.personal .p-hero {
    padding-block: 44px 64px;
}

.personal .p-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--t-muted);
    font-variant-ligatures: none;
}

.personal .p-titik {
    position: relative;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--t-accent);
}

.personal .p-titik::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1.5px solid var(--t-accent);
    border-radius: 50%;
    animation: p-denyut 2.4s ease-out infinite;
}

@keyframes p-denyut {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

.personal .p-hero-peran {
    margin-bottom: 14px;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--t-muted);
}

.personal .p-hero-h1 {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 26px);
    margin-top: 22px;
}

.personal .p-hero-h1 .nama {
    color: var(--t-primary);
    font-size: clamp(52px, 9.6vw, 132px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.045em;
    overflow-wrap: break-word;
}

.personal .p-hero-h1 .judul {
    max-width: 24ch;
    font-size: clamp(24px, 2.9vw, 36px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.personal .p-hero-h1 .judul em {
    font-family: var(--f-prosa);
    font-weight: 500;
}

.personal .p-hero-sub {
    max-width: 56ch;
    margin-top: 20px;
    color: var(--t-muted);
    font-size: 18px;
    line-height: 1.6;
}

.personal .p-hero-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.personal .p-sosial {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 30px;
    font-size: 14.5px;
    font-weight: 500;
}

.personal .p-sosial a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--t-line);
}

.personal .p-sosial a:hover {
    border-bottom-color: var(--t-text);
}

.personal .p-sosial svg.lucide {
    width: 14px;
    height: 14px;
}

.personal .p-hero-grid {
    display: grid;
    gap: 44px;
}

.personal .p-potret {
    position: relative;
    width: calc(100% - 14px);
    max-width: 280px;
    margin: 0 14px 14px 0;
}

.personal .p-potret::before {
    content: "";
    position: absolute;
    inset: 14px -14px -14px 14px;
    border: 1px solid var(--t-text);
}

.personal .p-potret-isi {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-potret-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.personal .p-inisial {
    font-size: clamp(110px, 15vw, 190px);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
}

.personal .p-potret-ket {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    color: var(--t-on-accent);
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.personal .p-potret-ket b {
    display: block;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.personal .p-potret--foto .p-potret-ket {
    background: var(--t-footer-bg);
    color: var(--t-on-footer);
}

/* Varian rata tengah */
.personal .p-hero--tengah .p-hero-isi {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.personal .p-hero--tengah .p-hero-h1 {
    align-items: center;
}

.personal .p-hero--tengah .p-hero-h1 .judul {
    max-width: 28ch;
}

.personal .p-hero--tengah .p-hero-aksi,
.personal .p-hero--tengah .p-sosial {
    justify-content: center;
}

.personal .p-avatar-besar {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-avatar-besar .p-inisial {
    font-size: 40px;
    letter-spacing: -0.04em;
}

/* Varian kartu profil */
.personal .p-hero-kartu {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    background: var(--t-surface);
}

.personal .p-hero-kartu-potret {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
    overflow: hidden;
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-hero-kartu-potret .p-potret-foto {
    position: absolute;
    inset: 0;
}

.personal .p-hero-teks {
    padding: 28px 24px 32px;
}

.personal .p-hero-kartu .p-hero-h1 .nama {
    font-size: clamp(46px, 6.4vw, 86px);
}

.personal .p-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 22px;
}

.personal .p-chip {
    padding: 4px 10px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    color: var(--t-muted);
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 720px) {
    .personal .p-hero {
        padding-block: 72px 96px;
    }
}

@media (min-width: 820px) {
    .personal .p-hero-kartu {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    }

    .personal .p-hero-teks {
        padding: 44px 48px;
    }
}

@media (min-width: 900px) {
    .personal .p-hero-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 72px;
        align-items: end;
    }

    .personal .p-potret {
        justify-self: end;
        max-width: 400px;
    }
}

/* ---------- Jasa = daftar harga ---------- */
.personal .p-jasa-daftar {
    border-top: 1px solid var(--t-line);
}

.personal .p-jasa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 20px;
    padding-block: 22px;
    border-bottom: 1px solid var(--t-line);
}

.personal .p-jasa-grup {
    grid-column: 1 / -1;
    color: var(--t-accent-text);
    font-family: var(--f-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.personal .p-jasa-isi {
    grid-column: 1 / -1;
    min-width: 0;
}

.personal .p-jasa-isi h3 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.personal .p-jasa-isi p {
    max-width: 62ch;
    margin-top: 5px;
    color: var(--t-muted);
    font-size: 15.5px;
}

.personal .p-harga {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-variant-ligatures: none;
}

.personal .p-harga small {
    color: var(--t-muted);
    font-size: 11.5px;
    letter-spacing: 0.02em;
}

.personal .p-harga b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.personal .p-jasa-ajak {
    grid-column: 2;
    justify-self: end;
}

@media (min-width: 760px) {
    .personal .p-jasa {
        grid-template-columns: 150px minmax(0, 1fr) 190px 110px;
        align-items: baseline;
        gap: 8px 28px;
        padding-block: 26px;
    }

    .personal .p-jasa-grup {
        grid-column: 1;
    }

    .personal .p-jasa-isi {
        grid-column: 2;
    }

    .personal .p-harga {
        grid-column: 3;
        align-items: flex-end;
        text-align: right;
    }

    .personal .p-jasa-ajak {
        grid-column: 4;
    }
}

/* ---------- Kartu (portofolio, testimoni) — opsi gaya_kartu ---------- */
.personal .p-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px 24px;
}

.personal .p-kartu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 10px 10px 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
}

body.personal[data-kartu="garis"] .p-kartu {
    border-color: var(--t-line);
}

body.personal[data-kartu="isi"] .p-kartu {
    background: var(--t-surface);
}

.personal .p-kartu-badan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline: 8px;
}

.personal .p-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 3px;
    background: var(--t-surface);
}

.personal .p-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.personal .p-porto:hover .p-thumb img {
    transform: scale(1.03);
}

.personal .p-thumb-kosong {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--t-primary);
    font-family: var(--f-mono);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.personal .p-thumb-kosong::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--t-primary);
    opacity: 0.1;
}

.personal .p-porto h3 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.22;
}

.personal .p-porto h3 a:hover,
.personal .p-log-judul a:hover,
.personal .p-seri-kepala h3 a:hover,
.personal .p-bab a:hover b {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.personal .p-ringkas {
    color: var(--t-muted);
    font-size: 15px;
}

.personal .p-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.personal .p-tag {
    padding: 2px 9px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    color: var(--t-muted);
    font-size: 12.5px;
}

.personal .p-unggulan {
    color: var(--t-accent-text);
}

@media (min-width: 640px) {
    .personal .p-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .personal .p-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Testimoni ---------- */
.personal .p-testi-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

body.personal .p-testi {
    gap: 18px;
    padding: 26px 26px 24px;
}

.personal .p-bintang {
    color: var(--t-accent-text);
    font-size: 15px;
    letter-spacing: 0.18em;
}

.personal .p-bintang-redup {
    opacity: 0.3;
}

.personal .p-kutip {
    height: 52px;
    margin-top: 6px;
    color: var(--t-accent-text);
    font-family: var(--f-prosa);
    font-size: 112px;
    line-height: 1;
}

.personal .p-testi blockquote {
    font-family: var(--f-prosa);
    font-size: 19px;
    line-height: 1.55;
}

.personal .p-testi--utama blockquote {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.42;
    letter-spacing: -0.005em;
}

.personal .p-testi-kaki {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    padding-top: 6px;
}

.personal .p-testi-orang {
    display: flex;
    align-items: center;
    gap: 12px;
}

.personal .p-testi-orang b {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
}

.personal .p-testi-orang small {
    display: block;
    color: var(--t-muted);
    font-size: 13.5px;
}

.personal .p-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-size: 14px;
    font-weight: 700;
    object-fit: cover;
}

.personal .p-testi-proyek {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: var(--t-accent-text);
    font-size: 13.5px;
    font-weight: 600;
}

@media (min-width: 640px) {
    .personal .p-testi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .personal .p-testi--utama {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1000px) {
    .personal .p-testi-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }

    .personal .p-testi--utama {
        grid-column: 1;
        grid-row: 1 / 3;
    }
}

/* ---------- Tulisan = log bertanggal ---------- */
.personal .p-log {
    border-top: 1px solid var(--t-line);
}

.personal .p-log-item {
    display: grid;
    gap: 6px;
    padding-block: 22px;
    border-bottom: 1px solid var(--t-line);
}

.personal .p-log-judul {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.28;
}

.personal .p-log-badan > p {
    max-width: 64ch;
    margin-top: 6px;
    color: var(--t-muted);
    font-size: 15.5px;
}

.personal .p-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 10px;
}

.personal .p-jenis {
    padding: 3px 7px;
    border: 1px solid var(--t-line);
    border-radius: 3px;
    color: var(--t-muted);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.personal .p-jenis--tutorial {
    border-color: var(--t-primary);
    color: var(--t-primary);
}

.personal .p-jenis--berita {
    border-color: var(--t-accent-text);
    color: var(--t-accent-text);
}

.personal .p-tingkat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--t-muted);
    font-size: 13px;
    white-space: nowrap;
}

.personal .p-tingkat-titik {
    display: inline-flex;
    gap: 3px;
}

.personal .p-tingkat-titik i {
    width: 7px;
    height: 7px;
    border: 1px solid var(--t-muted);
    border-radius: 50%;
    box-sizing: border-box;
}

.personal .p-tingkat[data-n="1"] .p-tingkat-titik i:nth-child(-n + 1),
.personal .p-tingkat[data-n="2"] .p-tingkat-titik i:nth-child(-n + 2),
.personal .p-tingkat[data-n="3"] .p-tingkat-titik i {
    border-color: var(--t-accent);
    background: var(--t-accent);
}

@media (min-width: 760px) {
    .personal .p-log-item {
        grid-template-columns: 140px minmax(0, 1fr) 120px;
        gap: 28px;
        align-items: baseline;
    }

    .personal .p-log-baca {
        text-align: right;
    }
}

/* ---------- Seri tutorial ---------- */
.personal .p-seri {
    display: grid;
    gap: 28px;
}

.personal .p-seri-kepala {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.personal .p-seri-kepala h3 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.personal .p-seri-kepala > p:not(.p-label) {
    max-width: 46ch;
    color: var(--t-muted);
    font-size: 16px;
}

.personal .p-bab {
    border-top: 1px solid var(--t-line);
}

.personal .p-bab a {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px 14px;
    align-items: baseline;
    padding-block: 16px;
    border-bottom: 1px solid var(--t-line);
}

.personal .p-bab-no {
    color: var(--t-accent-text);
    font-family: var(--f-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.personal .p-bab b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.personal .p-bab-info {
    grid-column: 2;
}

@media (min-width: 560px) {
    .personal .p-bab a {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .personal .p-bab-info {
        grid-column: auto;
    }
}

@media (min-width: 900px) {
    .personal .p-seri {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 56px;
    }
}

/* ---------- Newsletter — formulir bersama (kelas ns-*) diberi token ---------- */
.personal .p-nl {
    display: grid;
    gap: 24px;
    padding: 28px 22px;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    background: var(--t-surface);
}

.personal .p-nl h2 {
    margin-top: 10px;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.personal .p-nl > div > p:not(.p-label) {
    max-width: 46ch;
    margin-top: 10px;
    color: var(--t-muted);
}

.personal .p-nl .ns-form {
    gap: 14px;
}

.personal .p-nl .ns-form-label {
    color: var(--t-muted);
    font-family: var(--f-mono);
}

.personal .p-nl .ns-form-label .req {
    color: var(--t-accent-text);
}

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

.personal .p-nl .ns-form-input:focus {
    border-color: var(--t-primary);
    box-shadow: none;
}

.personal .p-nl label {
    color: var(--t-muted);
}

.personal .p-nl label a {
    color: var(--t-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.personal .p-nl .ns-btn {
    height: 46px;
    padding-inline: 20px;
    border-radius: 6px;
    font-family: var(--f-ui);
    font-size: 15.5px;
    font-weight: 600;
}

.personal .p-nl .ns-btn-primary {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-nl .ns-btn-primary:hover {
    filter: none;
    transform: none;
    opacity: 0.88;
}

.personal .p-nl .ns-alert {
    border-color: var(--t-line);
    border-radius: 6px;
    background: var(--t-bg);
    color: var(--t-text);
}

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

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

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

@media (min-width: 860px) {
    .personal .p-nl {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 48px;
        padding: 44px 48px;
    }
}

/* ---------- Penutup gelap: ajakan kontak (cta_band) + kaki ---------- */
.personal .p-cta {
    padding-block: 72px 64px;
    background: var(--t-footer-bg);
    color: var(--t-on-footer);
}

.personal .p-cta-isi {
    display: grid;
    gap: 28px;
}

.personal .p-cta .p-label {
    color: var(--t-on-footer);
    opacity: 0.6;
}

.personal .p-cta h2 {
    margin-top: 16px;
    font-size: clamp(38px, 6.4vw, 84px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.personal .p-cta-isi p:not(.p-label) {
    max-width: 44ch;
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.75;
}

.personal .p-cta-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.personal .p-kaki {
    padding-bottom: 28px;
    background: var(--t-footer-bg);
    color: var(--t-on-footer);
    font-size: 14.5px;
}

.personal .p-kaki-garis {
    height: 1px;
    background: var(--t-on-footer);
    opacity: 0.16;
}

.personal .p-kaki-sambung {
    display: none;
}

.personal main:has(> .p-cta:last-child) + .p-kaki .p-kaki-sambung {
    display: block;
}

.personal .p-kaki-isi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding-block: 44px 36px;
}

.personal .p-kaki-merek {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1 / -1;
    max-width: 40ch;
}

.personal .p-kaki-merek .p-merek-teks {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.personal .p-kaki-merek img {
    width: auto;
    max-width: 200px;
    object-fit: contain;
    object-position: left;
}

.personal .p-kaki-merek p {
    line-height: 1.55;
    opacity: 0.7;
}

.personal .p-kaki-kolom h2 {
    margin-bottom: 12px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}

.personal .p-kaki-kolom li + li {
    margin-top: 8px;
}

.personal .p-kaki-kolom a,
.personal .p-kaki-bawah a {
    opacity: 0.85;
}

.personal .p-kaki-kolom a:hover,
.personal .p-kaki-bawah a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.personal .p-kaki-bawah {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    padding-top: 20px;
    font-family: var(--f-mono);
    font-size: 12px;
    opacity: 0.7;
}

.personal .p-kaki-tautan {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

@media (min-width: 720px) {
    .personal .p-cta {
        padding-block: 112px 88px;
    }
}

@media (min-width: 820px) {
    .personal .p-kaki-isi {
        grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    }

    .personal .p-kaki-merek {
        grid-column: auto;
    }
}

@media (min-width: 900px) {
    .personal .p-cta-isi {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: end;
        gap: 56px;
    }
}

/* =====================================================================
   Halaman dalam — tulisan (T6b-1 #6431): kepala halaman, remah, pil,
   paginasi, detail tulisan, penulis, seri, cari.
   ===================================================================== */

/* ---------- Kepala halaman & remah ---------- */
.personal .p-hal-kepala {
    padding-block: 40px 32px;
}

.personal .p-remah {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
    color: var(--t-muted);
    font-family: var(--f-mono);
    font-size: 12.5px;
}

.personal .p-remah a {
    text-decoration: underline;
    text-decoration-color: var(--t-line);
    text-underline-offset: 3px;
}

.personal .p-remah a:hover {
    text-decoration-color: var(--t-text);
}

.personal .p-remah [aria-current="page"] {
    overflow: hidden;
    max-width: min(40ch, 100%);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personal .p-hal-judul {
    font-size: clamp(42px, 7vw, 88px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.personal .p-pagar {
    color: var(--t-accent-text);
}

.personal .p-hal-desk {
    max-width: 60ch;
    margin-top: 16px;
    color: var(--t-muted);
    font-size: 18px;
    line-height: 1.6;
}

.personal .p-hal-hitung {
    display: block;
    margin-top: 14px;
}

.personal .p-hal-badan {
    padding-bottom: 80px;
}

/* ---------- Pil saring ---------- */
.personal .p-saring {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.personal .p-dua-kolom-utama > .p-saring {
    margin: 0 0 24px;
}

.personal .p-pil {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding-inline: 14px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s;
}

.personal .p-pil:hover {
    border-color: var(--t-text);
}

.personal .p-pil small {
    font-family: var(--f-mono);
    font-size: 11px;
    opacity: 0.7;
}

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

/* ---------- Kosong & paginasi ---------- */
.personal .p-kosong {
    padding: 40px 24px;
    border: 1px dashed var(--t-line);
    border-radius: 6px;
    text-align: center;
}

.personal .p-kosong h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.personal .p-kosong p {
    max-width: 56ch;
    margin: 8px auto 0;
    color: var(--t-muted);
}

.personal .p-kosong .p-saring {
    justify-content: center;
    margin-top: 20px;
}

.personal .p-paginasi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 36px;
    font-family: var(--f-mono);
    font-size: 14px;
}

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

.personal .p-paginasi a:hover {
    border-color: var(--t-text);
}

.personal .p-paginasi [aria-current="page"] {
    border-color: var(--t-text);
    background: var(--t-text);
    color: var(--t-bg);
}

.personal .p-paginasi .p-paginasi-mati {
    border-color: transparent;
    color: var(--t-muted);
}

.personal mark {
    padding-inline: 2px;
    border-radius: 2px;
    background: var(--t-accent);
    color: var(--t-on-accent);
}

/* ---------- Bilah progres baca (stack kepala-bawah) ---------- */
.personal .p-progres {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: var(--t-accent);
    transform: scaleX(0);
    transform-origin: left center;
}

/* ---------- Detail tulisan ---------- */
.personal .p-tulisan {
    display: grid;
    gap: 0 64px;
    padding-block: 28px 80px;
}

.personal .p-rel {
    display: none;
}

.personal .p-rel-isi {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 12px;
}

.personal .p-rel-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.personal .p-rel-meta dt,
.personal .p-rel-judul {
    color: var(--t-muted);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.personal .p-rel-meta dd {
    margin: 2px 0 0;
    font-size: 14.5px;
    font-weight: 500;
}

.personal .p-rel-judul {
    margin-bottom: 10px;
}

.personal .p-toc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--t-line);
}

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

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

.personal .p-toc a:hover {
    color: var(--t-text);
}

.personal .p-toc a[aria-current="true"] {
    border-left-color: var(--t-accent);
    color: var(--t-text);
    font-weight: 600;
}

.personal .p-tulisan-utama {
    min-width: 0;
}

.personal .p-art-kepala {
    padding-block: 12px 32px;
}

.personal .p-art-lencana {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.personal .p-seri-pita {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--t-muted);
    font-size: 13.5px;
    font-weight: 500;
}

.personal .p-seri-pita a {
    border-bottom: 1px solid var(--t-line);
    color: var(--t-text);
}

.personal .p-art-judul {
    margin-top: 20px;
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.03;
    overflow-wrap: anywhere;
}

.personal .p-lede {
    max-width: 52ch;
    margin-top: 18px;
    color: var(--t-muted);
    font-family: var(--f-prosa);
    font-size: clamp(19px, 2vw, 22px);
    line-height: 1.5;
}

.personal .p-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--t-line);
}

.personal .p-byline-avatar {
    display: flex;
    flex-shrink: 0;
}

.personal .p-byline-avatar .p-avatar + .p-avatar {
    margin-left: -10px;
    border: 2px solid var(--t-bg);
}

.personal .p-byline .p-avatar,
.personal .p-kotak-penulis .p-avatar {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-byline-nama {
    font-size: 15.5px;
    font-weight: 600;
}

.personal .p-byline-nama a {
    border-bottom: 1px solid var(--t-line);
}

.personal .p-byline-nama a:hover {
    border-bottom-color: var(--t-text);
}

.personal .p-sampul {
    overflow: hidden;
    margin-top: 28px;
    border: 1px solid var(--t-line);
    border-radius: 4px;
}

.personal .p-sampul img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

.personal .p-toc-ponsel {
    margin-bottom: 28px;
    padding: 4px 16px;
    border: 1px solid var(--t-line);
    border-radius: 6px;
}

.personal .p-toc-ponsel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 12px;
    font-size: 15px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.personal .p-toc-ponsel summary::-webkit-details-marker {
    display: none;
}

.personal .p-toc-ponsel[open] summary svg.lucide {
    transform: rotate(180deg);
}

.personal .p-toc-ponsel .p-toc {
    margin-bottom: 14px;
}

/* Prosa isi CMS */
.personal .p-prosa {
    min-width: 0;
    font-family: var(--f-prosa);
    font-size: 18.5px;
    line-height: 1.72;
    overflow-wrap: break-word;
}

.personal .p-prosa > * + * {
    margin-top: 20px;
}

.personal .p-prosa > p:first-child {
    font-size: 1.1em;
    line-height: 1.6;
}

.personal .p-prosa h2,
.personal .p-prosa h3 {
    font-family: var(--f-ui);
    scroll-margin-top: 96px;
}

.personal .p-prosa h2 {
    margin-top: 52px;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.18;
}

.personal .p-prosa h3 {
    margin-top: 32px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

.personal .p-prosa strong {
    font-weight: 600;
}

.personal .p-prosa ul,
.personal .p-prosa ol {
    padding-left: 1.3em;
}

.personal .p-prosa ul {
    list-style: disc;
}

.personal .p-prosa ol {
    list-style: decimal;
}

.personal .p-prosa li + li {
    margin-top: 8px;
}

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

.personal .p-prosa blockquote {
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--t-accent);
    color: var(--t-muted);
    font-style: italic;
}

.personal .p-prosa img {
    height: auto;
    border-radius: 4px;
}

.personal .p-prosa figcaption {
    margin-top: 8px;
    color: var(--t-muted);
    font-family: var(--f-ui);
    font-size: 14px;
}

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

.personal .p-prosa table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-family: var(--f-ui);
    font-size: 15px;
}

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

.personal .p-prosa :not(pre) > code {
    padding: 2px 6px;
    border: 1px solid var(--t-line);
    border-radius: 4px;
    background: var(--t-surface);
    font-family: var(--f-mono);
    font-size: 0.78em;
    font-variant-ligatures: none;
}

.personal .p-prosa pre {
    overflow-x: auto;
    padding: 16px 18px;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    background: var(--t-surface);
    font: 400 13.5px/1.7 var(--f-mono);
    font-variant-ligatures: none;
    tab-size: 4;
}

.personal .p-prosa pre code {
    font: inherit;
}

/* Blok kode T3d: pembungkus .ns-kode + tombol Salin dipasang sorot.js. */
.personal .p-prosa .ns-kode {
    margin-block: 30px;
}

.personal .p-prosa .ns-kode > pre {
    padding: 2.8rem 18px 18px;
    border-radius: 6px;
}

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

.personal .ns-kode-salin {
    border-radius: 5px;
    font: 600 12px/1 var(--f-ui);
}

/* Penutup detail */
.personal .p-akhir {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 48px;
}

.personal .p-akhir .p-tags {
    margin-top: 0;
}

.personal a.p-tag:hover {
    border-color: var(--t-text);
    color: var(--t-text);
}

.personal .p-akhir-judul {
    margin-bottom: 14px;
    color: var(--t-muted);
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.personal .p-bab-nav {
    display: grid;
    gap: 12px;
}

.personal .p-bab-nav a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    transition: border-color 0.15s;
}

.personal .p-bab-nav a:hover {
    border-color: var(--t-text);
}

.personal .p-bab-nav .p-mono {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.personal .p-bab-nav b {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
}

.personal .p-bab-nav-sesudah {
    align-items: flex-end;
    text-align: right;
}

.personal .p-kotak-penulis {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 28px;
    border-top: 1px dashed var(--t-line);
}

.personal .p-kotak-penulis .p-akhir-judul {
    margin-bottom: 0;
}

.personal .p-kotak-penulis-baris {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.personal .p-kotak-nama {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.personal .p-kotak-penulis-baris p {
    max-width: 60ch;
    margin-top: 4px;
    color: var(--t-muted);
    font-size: 15.5px;
}

.personal .p-kotak-penulis-baris .p-kotak-bio {
    margin-top: 10px;
    color: var(--t-text);
}

.personal .p-kotak-penulis-baris .p-panah {
    margin-top: 12px;
}

.personal .p-terkait ul {
    border-top: 1px solid var(--t-line);
}

.personal .p-terkait-item a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-block: 14px;
    border-bottom: 1px solid var(--t-line);
    font-size: 16.5px;
    font-weight: 600;
}

.personal .p-terkait-item a:hover span:first-child {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.personal .p-terkait-item .p-mono {
    flex-shrink: 0;
}

.personal .p-nl--ringkas {
    padding: 24px;
}

.personal .p-nl--ringkas h2 {
    margin-top: 8px;
    font-size: 22px;
}

/* ---------- Penulis ---------- */
.personal .p-kartu-penulis {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    transition: border-color 0.15s;
}

body.personal[data-kartu] .p-kartu-penulis {
    padding: 18px;
}

.personal .p-kartu-penulis:hover {
    border-color: var(--t-text);
}

.personal .p-kartu-penulis .p-avatar {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-kartu-penulis-isi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.personal .p-kartu-penulis-nama {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.personal .p-kartu-penulis-headline {
    color: var(--t-muted);
    font-size: 14.5px;
}

.personal .p-profil {
    display: grid;
    gap: 24px;
    padding-block: 40px 36px;
}

.personal .p-profil-foto .p-avatar {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.personal .p-profil-isi .p-remah {
    margin-bottom: 18px;
}

.personal .p-profil-nama {
    color: var(--t-primary);
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.personal .p-profil-headline {
    max-width: 40ch;
    margin-top: 14px;
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.personal .p-profil-bio {
    max-width: 64ch;
    margin-top: 18px;
    font-size: 17.5px;
}

.personal .p-profil-isi .p-chips {
    margin-top: 20px;
}

.personal .p-profil-isi .p-sosial {
    margin-top: 20px;
}

.personal .p-dua-kolom {
    display: grid;
    gap: 40px;
}

.personal .p-dua-kolom-utama {
    min-width: 0;
}

.personal .p-samping-seri {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--t-line);
}

.personal .p-samping-seri a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: 14px;
    border-bottom: 1px solid var(--t-line);
}

.personal .p-samping-seri b {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
}

.personal .p-samping-seri a:hover b {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ---------- Seri ---------- */
.personal .p-seri-hal .p-label {
    margin-bottom: 14px;
}

.personal .p-angka {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 24px;
    padding-block: 14px;
    border-block: 1px solid var(--t-line);
}

.personal .p-angka div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.personal .p-angka b {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.personal .p-angka span {
    color: var(--t-muted);
    font-size: 14px;
}

.personal .p-seri-hal .p-hero-aksi {
    align-items: center;
}

.personal .p-seri-penulis {
    color: var(--t-muted);
    font-size: 15px;
}

.personal .p-seri-penulis a {
    border-bottom: 1px solid var(--t-line);
    color: var(--t-text);
}

.personal .p-bab-isi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.personal .p-bab-ringkas {
    color: var(--t-muted);
    font-size: 15px;
}

.personal .p-bab--hal .p-bab-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

/* ---------- Cari ---------- */
.personal .p-cari {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 640px;
    margin-top: 26px;
}

.personal .p-input {
    flex: 1 1 220px;
    min-width: 0;
    height: 46px;
    padding-inline: 14px;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    background: var(--t-surface);
    color: var(--t-text);
    font: inherit;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.personal .p-input:focus {
    border-color: var(--t-primary);
    outline: none;
}

.personal .p-input::placeholder {
    color: var(--t-muted);
}

@media (min-width: 640px) {
    .personal .p-bab-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .personal .p-bab-nav-sesudah:only-child {
        grid-column: 2;
    }

    .personal .p-profil {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 36px;
        align-items: start;
    }
}

@media (min-width: 720px) {
    .personal .p-hal-kepala {
        padding-block: 60px 44px;
    }

    .personal .p-prosa {
        font-size: 19.5px;
    }
}

@media (min-width: 960px) {
    .personal .p-dua-kolom {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 64px;
    }
}

@media (min-width: 1000px) {
    .personal .p-tulisan {
        grid-template-columns: 200px minmax(0, 720px);
    }

    .personal .p-rel {
        display: block;
        grid-row: 1 / span 2;
    }

    .personal .p-toc-ponsel {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .personal *,
    .personal *::before,
    .personal *::after {
        animation: none;
        transition: none;
    }
}