/* ═══════════════════════════════════════════════════════════════════════
   SKYCYBER JURNAL — "AMBER TERMINAL"
   ═══════════════════════════════════════════════════════════════════════
   Dipakai dua halaman sekaligus:
     /berita          → resources/views/news/index.blade.php
     /berita/{slug}   → resources/views/news/show.blade.php

   Keduanya berbagi kartu artikel, remah jejak, baris meta monospace, dan
   kotak langganan, jadi ditaruh di satu berkas alih-alih disalin dua kali.

   Mengikuti konsep di NEW UI KONSEP/SkyCyber Blog.html dan
   NEW UI KONSEP/SkyCyber Artikel.html.

   CSS biasa, bukan Tailwind. Token, tipografi, tombol, dan tag dipinjam
   dari home-v2.css (yang wajib dimuat lebih dulu); seluruh kelas di sini
   berawalan "jn-" dan hidup di dalam .sc2, jadi halaman bertema terang
   tidak ikut berubah. Tidak ada langkah build.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ HERO PENDEK ═══════════════════════════════════════════════════════

   Berbeda dari .sc2-hero milik beranda yang setinggi layar penuh: halaman
   jurnal memimpin dengan judul, bukan dengan gambar, jadi heronya hanya
   setinggi isinya. 66px di bawah adalah tinggi bilah navigasi tetap di
   chrome-v2.css — tanpa itu remah jejak tertutup header. */

.jn-hero {
    position: relative;
    padding: calc(66px + clamp(26px, 3.2vw, 48px)) var(--pad-x) clamp(34px, 4.2vw, 62px);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
/* Varian halaman artikel: gambar utama menembus tepi kiri-kanan layar, jadi
   seluruh padding dipindah dari section ke .jn-hero__inner. */
.jn-hero--art { padding: 0; }

.jn-hero__glow {
    position: absolute;
    top: -190px;
    left: -150px;
    width: 620px;
    height: 620px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(245, 160, 27, .12), transparent 64%);
}

.jn-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; }
.jn-hero--art .jn-hero__inner {
    padding: calc(66px + clamp(26px, 3.2vw, 48px)) var(--pad-x) clamp(6px, 1.2vw, 14px);
}

.jn-hero__h1 {
    margin: clamp(16px, 2.2vw, 26px) 0 0;
    font-size: clamp(30px, 5.1vw, 70px);
    line-height: 1.01;
    letter-spacing: -.035em;
    font-weight: 500;
    max-width: 15ch;
    color: var(--paper);
    animation: jn-up .8s cubic-bezier(.2, .7, .2, 1) both;
}
/* Judul artikel lebih panjang daripada judul indeks, jadi diberi ruang
   baris lebih banyak dan lebar maksimum lebih lebar. */
.jn-hero__h1--art { max-width: 22ch; font-size: clamp(27px, 4.4vw, 60px); line-height: 1.05; }
.jn-hero__h1 .sc2-hl { color: var(--amber); }

.jn-hero__sub {
    margin: clamp(18px, 2.4vw, 28px) 0 0;
    max-width: 64ch;
    font-size: clamp(13.5px, 1.4vw, 16px);
    line-height: 1.78;
    color: var(--dim);
}

@keyframes jn-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .jn-hero__h1 { animation: none; }
}

/* ─── Remah jejak ──────────────────────────────────────────────────── */

.jn-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
.jn-crumb a { color: rgba(242, 239, 234, .5); text-decoration: none; transition: color .25s ease; }
.jn-crumb a:hover { color: var(--paper); }
.jn-crumb svg { flex: none; width: 11px; height: 11px; opacity: .55; }
.jn-crumb__here { color: var(--amber); }
/* Di halaman artikel ruas terakhir adalah kategori, bukan halaman aktif —
   amber disimpan untuk tag kategori di bawahnya supaya tidak dobel. */
.jn-crumb__here--soft { color: rgba(242, 239, 234, .7); }

/* ─── Baris meta (tanggal · lama baca · penulis) ───────────────────── */

.jn-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    align-items: center;
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}
.jn-meta__i { display: inline-flex; align-items: center; gap: 7px; }
.jn-meta svg { flex: none; width: 12px; height: 12px; opacity: .8; }
.jn-meta--sm { gap: 8px 16px; font-size: 9px; }
.jn-meta--sm svg { width: 11px; height: 11px; }

/* ═══ BILAH LABEL SECTION ═══════════════════════════════════════════════
   "ARTIKEL UTAMA ────────── EDISI TERBARU" */

.jn-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: clamp(18px, 2.2vw, 26px);
}
.jn-bar__lead { font: 700 9.5px/1 var(--mono); letter-spacing: .2em; color: var(--amber); white-space: nowrap; }
.jn-bar__rule { flex: 1; height: 1px; background: var(--line); }
.jn-bar__end { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--dimmer); white-space: nowrap; }

/* ═══ ARTIKEL UTAMA (kartu mendatar besar) ══════════════════════════════ */

.jn-feat {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--paper);
    text-decoration: none;
    transition: border-color .3s ease, transform .3s ease;
}
.jn-feat:hover { border-color: rgba(245, 160, 27, .45); transform: translateY(-3px); }

.jn-feat__media {
    flex: 1.25 1 380px;
    min-width: 280px;
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border-right: 1px solid var(--line);
    min-height: clamp(230px, 27vw, 370px);
}
.jn-feat__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.32, .72, 0, 1);
}
.jn-feat:hover .jn-feat__media img { transform: scale(1.04); }

.jn-feat__body {
    flex: 1 1 340px;
    min-width: 280px;
    padding: clamp(22px, 2.8vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}
.jn-feat__title {
    margin: 0;
    color: var(--paper);
    font-size: clamp(21px, 3vw, 36px);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 500;
    max-width: 26ch;
}
.jn-feat__excerpt { margin: 0; max-width: 54ch; font-size: 13.5px; line-height: 1.78; color: var(--dim); }
.jn-feat__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(242, 239, 234, .24);
    font: 600 12.5px/1 var(--sans);
    letter-spacing: -.01em;
    color: var(--amber);
}
.jn-feat__cta svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
    .jn-feat__media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 210px; }
}

/* ═══ TATA LETAK UTAMA: GRID + SISI KANAN ═══════════════════════════════ */

.jn-main {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 2.6vw, 42px);
    align-items: flex-start;
}
.jn-main__col { flex: 2.3 1 560px; min-width: 290px; }
.jn-side {
    flex: 1 1 280px;
    min-width: 260px;
    display: grid;
    gap: 14px;
    position: sticky;
    top: 86px;
}
/* Di bawah 1000px kolomnya sudah menumpuk; sticky di situ malah membuat
   sisi kanan menggantung saat digulir. */
@media (max-width: 700px) {
    .jn-side { position: static; }
}

/* ─── Penyaring kategori ───────────────────────────────────────────── */

.jn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: clamp(18px, 2.2vw, 26px);
}
.jn-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 13px;
    background: transparent;
    border: 1px solid var(--line);
    font: 500 10px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dimmer);
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.jn-chip:hover { border-color: var(--line-strong); color: var(--paper); }
.jn-chip__n { font-size: 9px; color: var(--faint); font-variant-numeric: tabular-nums; }
.jn-chip.is-on { border-color: var(--amber); background: rgba(245, 160, 27, .1); color: var(--paper); }
.jn-chip.is-on .jn-chip__n { color: var(--amber); }

.jn-count {
    padding-bottom: clamp(16px, 2vw, 22px);
    font: 500 9.5px/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ─── Grid kartu artikel ───────────────────────────────────────────── */

.jn-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
/* Varian "Baca juga" di halaman artikel: auto-fit supaya dua kartu tetap
   melebar mengisi baris, bukan menyisakan kolom kosong di kanan. */
.jn-grid--rel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.jn-card {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--paper);
    text-decoration: none;
    transition: border-color .3s ease, transform .3s ease;
}
.jn-card:hover { border-color: rgba(245, 160, 27, .42); transform: translateY(-3px); }

.jn-card__media {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    height: clamp(160px, 17vw, 210px);
}
.jn-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.32, .72, 0, 1);
}
.jn-card:hover .jn-card__media img { transform: scale(1.04); }

/* Label kategori menempel di pojok kiri atas gambar, bertumpu pada latar
   ground supaya tetap terbaca di atas gambar seterang apa pun. */
.jn-card__cat {
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px 11px;
    background: var(--ink);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font: 700 8.5px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
}

.jn-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(18px, 2vw, 24px);
}
.jn-card__title {
    margin: 0;
    font-size: clamp(15.5px, 1.8vw, 18.5px);
    line-height: 1.28;
    letter-spacing: -.022em;
    font-weight: 500;
    color: var(--paper);
}
.jn-card__excerpt { margin: 0; flex: 1; font-size: 12.5px; line-height: 1.72; color: rgba(242, 239, 234, .54); }
.jn-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 4px;
    padding-top: 15px;
    border-top: 1px solid var(--line-soft);
    font: 600 12px/1 var(--sans);
    letter-spacing: -.01em;
    color: var(--amber);
}
.jn-card__cta svg { width: 13px; height: 13px; }

/* Kartu tanpa gambar: bidang bergaris diagonal memakai warna aksen artikel
   (kolom cover_color), jadi kartu kosong tetap punya identitas. */
.jn-card__blank, .jn-feat__blank {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--panel);
}
.jn-card__blank::before, .jn-feat__blank::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 9px, var(--jn-accent, var(--amber)) 9px, var(--jn-accent, var(--amber)) 10px);
    opacity: .16;
}
.jn-card__blank svg, .jn-feat__blank svg {
    position: relative;
    width: 34px;
    height: 34px;
    color: var(--jn-accent, var(--amber));
    opacity: .55;
}
.jn-feat__blank svg { width: 46px; height: 46px; }

/* ─── Kaki grid: jumlah artikel ────────────────────────────────────── */

.jn-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(24px, 3vw, 38px);
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

.jn-empty {
    padding: clamp(30px, 4vw, 54px);
    border: 1px dashed rgba(242, 239, 234, .18);
    text-align: center;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(242, 239, 234, .5);
}

/* ═══ PANEL SISI KANAN ══════════════════════════════════════════════════ */

.jn-panel { border: 1px solid var(--line); background: var(--panel); }
.jn-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font: 700 9.5px/1 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .52);
}
.jn-panel__head svg { width: 13px; height: 13px; }
.jn-panel__lead { display: inline-flex; align-items: center; gap: 9px; }
.jn-panel__body { padding: 4px 16px 12px; }

/* ─── Kotak langganan (sisi kanan) ─────────────────────────────────── */

.jn-sub {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    padding: clamp(20px, 2.2vw, 26px);
    border: 1px solid rgba(245, 160, 27, .34);
    background: linear-gradient(150deg, rgba(245, 160, 27, .1), var(--panel) 62%);
}
.jn-sub__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242, 239, 234, .18);
    background: var(--ink);
    color: var(--amber);
}
.jn-sub__ico svg { width: 20px; height: 20px; }
.jn-sub__title { margin: 0; font-size: 17px; line-height: 1.22; letter-spacing: -.024em; font-weight: 500; color: var(--paper); }
.jn-sub__desc { margin: 0; font-size: 12.5px; line-height: 1.7; color: rgba(242, 239, 234, .58); }
.jn-sub__fine { font: 500 8.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 234, .34); }

.jn-sub__row { display: flex; border: 1px solid rgba(242, 239, 234, .22); background: var(--ink); }
.jn-sub__row:focus-within { border-color: rgba(245, 160, 27, .5); }
.jn-sub__input {
    flex: 1;
    min-width: 0;
    padding: 12px 13px;
    border: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--paper);
}
.jn-sub__input::placeholder { color: rgba(242, 239, 234, .34); }
.jn-sub__input:focus { outline: none; }
.jn-sub__send {
    flex: none;
    display: grid;
    place-items: center;
    padding: 12px 14px;
    border: 0;
    background: var(--amber);
    color: var(--on-amber);
    cursor: pointer;
    transition: background .25s ease;
}
.jn-sub__send:hover { background: var(--amber-hi); }
.jn-sub__send svg { width: 15px; height: 15px; }

/* Pesan sukses setelah form dikirim (flash `subscribe_success`). */
.jn-note {
    padding: 11px 13px;
    border: 1px solid rgba(245, 160, 27, .34);
    background: rgba(245, 160, 27, .08);
    font-size: 12px;
    line-height: 1.6;
    color: var(--paper);
}

/* ─── Daftar kategori ──────────────────────────────────────────────── */

.jn-catlist { display: grid; }
.jn-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    font-family: var(--sans);
    font-size: 12.5px;
    text-align: left;
    color: rgba(242, 239, 234, .72);
    cursor: pointer;
    transition: color .25s ease;
}
.jn-cat:last-child { border-bottom: 0; }
.jn-cat:hover { color: var(--amber); }
.jn-cat.is-on { color: var(--amber); }
.jn-cat__name { display: flex; align-items: center; gap: 10px; }
.jn-cat__dot { width: 5px; height: 5px; background: var(--amber); opacity: .7; }
.jn-cat.is-on .jn-cat__dot { opacity: 1; }
.jn-cat__n { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ─── Daftar artikel terbaru ───────────────────────────────────────── */

.jn-list { display: grid; }
.jn-list a {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--paper);
    text-decoration: none;
    transition: color .25s ease;
}
.jn-list a:last-child { border-bottom: 0; }
.jn-list a:hover { color: var(--amber); }
.jn-list__n { flex: none; font: 700 10px/1.5 var(--mono); letter-spacing: .1em; color: var(--amber); }
.jn-list__t { display: block; font-size: 12.5px; line-height: 1.48; letter-spacing: -.012em; }
.jn-list__m { display: block; margin-top: 7px; font: 500 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 234, .36); }

/* ─── Kotak ajakan di sisi kanan ───────────────────────────────────── */

.jn-ask {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: clamp(18px, 2vw, 22px);
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--paper);
    text-decoration: none;
    transition: border-color .3s ease;
}
.jn-ask:hover { border-color: rgba(245, 160, 27, .45); }
.jn-ask__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(242, 239, 234, .18);
    background: var(--ink);
    color: var(--amber);
}
.jn-ask__ico svg { width: 18px; height: 18px; }
.jn-ask__t { display: block; font-size: 13.5px; line-height: 1.35; letter-spacing: -.014em; }
.jn-ask__m { display: block; margin-top: 6px; font: 500 9px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.jn-ask__go { flex: none; color: var(--amber); }
.jn-ask__go svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════════════
   HALAMAN ARTIKEL — /berita/{slug}
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Bilah progres baca ───────────────────────────────────────────── */
/* Kelasnya (.sc-progress) sudah ada di chrome-v2.css sejak header
   diredesign tapi belum pernah dipakai halaman mana pun; halaman artikel
   inilah pemakainya. z-index 80 di sana sengaja di atas bilah navigasi. */

/* ─── Kepala artikel ───────────────────────────────────────────────── */

.jn-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    margin-top: clamp(20px, 2.6vw, 38px);
}

.jn-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(22px, 3vw, 38px);
    padding: 18px 0;
    border-top: 1px solid var(--line);
}
.jn-byline__who { display: flex; align-items: center; gap: 13px; }
.jn-byline__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: rgba(245, 160, 27, .12);
    border: 1px solid rgba(245, 160, 27, .34);
    font: 700 12px/1 var(--mono);
    letter-spacing: .04em;
    color: var(--amber);
}
.jn-byline__name { display: block; font-size: 13.5px; letter-spacing: -.012em; color: var(--paper); }
.jn-byline__role { display: block; margin-top: 4px; font: 500 9.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* ─── Tombol bagikan ───────────────────────────────────────────────── */

.jn-share { display: flex; align-items: center; gap: 12px; }
.jn-share__label { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.jn-share__set { display: flex; gap: 8px; }
.jn-share__btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(242, 239, 234, .18);
    color: rgba(242, 239, 234, .62);
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.jn-share__btn:hover { color: var(--amber); border-color: var(--amber); background: rgba(242, 239, 234, .06); }
.jn-share__btn svg { width: 15px; height: 15px; }

/* ─── Gambar utama artikel ─────────────────────────────────────────── */

.jn-cover {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border-top: 1px solid var(--line);
    height: clamp(220px, 38vw, 500px);
}
.jn-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jn-cover figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 100%;
    padding: 11px 16px;
    background: rgba(11, 11, 13, .84);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    max-width: min(100%, 78ch);
    font: 500 9.5px/1.6 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(242, 239, 234, .58);
}
.jn-cover figcaption svg { flex: none; width: 12px; height: 12px; margin-top: 1px; }

/* ─── Badan artikel: rel daftar isi + prosa ────────────────────────── */

.jn-art {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 3.6vw, 68px);
    align-items: flex-start;
}
.jn-art__rail {
    flex: 1 1 260px;
    min-width: 240px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 86px;
}
.jn-art__main { flex: 2.4 1 520px; min-width: 300px; max-width: 720px; }
@media (max-width: 700px) {
    .jn-art__rail { position: static; width: 100%; }
}

/* ─── Daftar isi ───────────────────────────────────────────────────── */

.jn-toc { display: grid; }
.jn-toc a {
    display: flex;
    gap: 11px;
    align-items: baseline;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(242, 239, 234, .56);
    text-decoration: none;
    transition: color .25s ease, background .25s ease, padding-left .25s ease, box-shadow .25s ease;
}
.jn-toc a:last-child { border-bottom: 0; }
.jn-toc a:hover { color: var(--paper); background: rgba(242, 239, 234, .06); }
.jn-toc a.is-on {
    color: var(--paper);
    background: rgba(242, 239, 234, .06);
    padding-left: 20px;
    box-shadow: inset 2px 0 0 var(--amber);
}
.jn-toc__n { flex: none; font: 700 9px/1.7 var(--mono); letter-spacing: .06em; color: var(--amber); }
.jn-pct { font: 700 9.5px/1 var(--mono); letter-spacing: .1em; color: var(--amber); font-variant-numeric: tabular-nums; }

/* Kotak ajakan di bawah daftar isi */
.jn-rail-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(16px, 1.8vw, 22px);
    border: 1px solid var(--line);
    background: var(--panel);
}
.jn-rail-cta__label { font: 700 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 234, .48); }
.jn-rail-cta__t { font-size: 14.5px; line-height: 1.45; letter-spacing: -.016em; color: var(--paper); }

/* ═══ PROSA ARTIKEL ═════════════════════════════════════════════════════

   Isi artikel datang dari basis data sebagai HTML lepas (h2, h3, p, ul,
   ol, blockquote, strong, code, tabel, gambar) yang ditulis admin lewat
   /admin/konten. Tidak ada kelas apa pun yang bisa ditempelkan ke sana,
   jadi seluruh gayanya disetel lewat pemilih turunan di bawah ini.

   Nomor 01, 02, 03 di depan setiap <h2> dibuat penghitung CSS, bukan
   ditulis admin — persis ritme konsep, tanpa menuntut apa pun dari isi. */

.jn-prose { counter-reset: jn-sec; }

/* Penanda nomor dipasang mutlak, BUKAN sebagai item flex. Isi artikel
   datang sebagai HTML lepas, jadi sebuah <h2> bisa saja berisi <strong>
   atau tautan di tengah kalimat; di dalam flex container tiap potongan
   teks jadi item terpisah dan judulnya pecah jadi beberapa kolom. */
.jn-prose > h2 {
    counter-increment: jn-sec;
    position: relative;
    margin: 0;
    padding: clamp(26px, 3.2vw, 44px) 0 0 clamp(26px, 2.4vw, 34px);
    border-top: 1px solid var(--line);
    scroll-margin-top: 92px;
    font-size: clamp(19px, 2.5vw, 30px);
    line-height: 1.14;
    letter-spacing: -.028em;
    font-weight: 500;
    color: var(--paper);
}
.jn-prose > h2::before {
    content: counter(jn-sec, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: clamp(26px, 3.2vw, 44px);
    font-family: var(--mono);
    font-size: .36em;
    font-weight: 700;
    /* .36em x 3.2 = 1.15em, sama tinggi dengan satu baris judul, jadi
       nomornya duduk sejajar baris pertama berapa pun ukuran layarnya. */
    line-height: 3.2;
    letter-spacing: .14em;
    color: var(--amber);
}
/* Judul pertama tidak perlu garis pemisah — di atasnya sudah ada tepi
   section, bukan bagian lain. */
.jn-prose > h2:first-child { border-top: 0; padding-top: 0; }
.jn-prose > h2:first-child::before { top: 0; }

.jn-prose > h3 {
    position: relative;
    margin: clamp(26px, 3vw, 38px) 0 0;
    padding-left: 23px;
    scroll-margin-top: 92px;
    font-size: clamp(15.5px, 1.75vw, 19px);
    line-height: 1.32;
    letter-spacing: -.02em;
    font-weight: 500;
    color: var(--paper);
}
.jn-prose > h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .68em;
    width: 12px;
    height: 1px;
    background: var(--amber);
}

.jn-prose > h4 {
    margin: clamp(22px, 2.4vw, 30px) 0 0;
    font: 700 10px/1.5 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dimmer);
}

.jn-prose p {
    margin: clamp(14px, 1.7vw, 20px) 0 0;
    font-size: clamp(13.5px, 1.35vw, 15.5px);
    line-height: 1.9;
    color: rgba(242, 239, 234, .7);
}

.jn-prose strong, .jn-prose b { color: var(--paper); font-weight: 600; }
.jn-prose em, .jn-prose i { color: rgba(242, 239, 234, .8); font-style: italic; }

.jn-prose a {
    color: var(--amber);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(245, 160, 27, .4);
    transition: color .25s ease, text-decoration-color .25s ease;
}
.jn-prose a:hover { color: var(--amber-hi); text-decoration-color: var(--amber-hi); }

/* Daftar — baris bergaris rambut, ritme yang sama dengan tabel dan
   lembar spesifikasi di halaman lain. */
.jn-prose ul, .jn-prose ol {
    margin: clamp(16px, 1.9vw, 22px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
    counter-reset: jn-li;
}
.jn-prose li {
    position: relative;
    padding: 13px 0 13px 22px;
    border-bottom: 1px solid var(--line-soft);
    font-size: clamp(13px, 1.3vw, 14.5px);
    line-height: 1.8;
    color: rgba(242, 239, 234, .74);
}
.jn-prose ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    /* setengah tinggi baris pertama, dikurangi setengah tinggi kotak */
    margin-top: .78em;
    width: 5px;
    height: 5px;
    background: var(--amber);
}
.jn-prose ol > li { counter-increment: jn-li; padding-left: 32px; }
.jn-prose ol > li::before {
    content: counter(jn-li, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 13px;
    /* 10px x 2.6 = 26px, setinggi satu baris teks butirnya */
    font: 700 10px/2.6 var(--mono);
    letter-spacing: .06em;
    color: var(--amber);
}
/* Daftar bersarang: garis atas dan jarak luarnya dilepas supaya tidak
   terbaca sebagai daftar baru. */
.jn-prose li > ul, .jn-prose li > ol { margin-top: 10px; border-top: 0; }
.jn-prose li > ul > li:last-child, .jn-prose li > ol > li:last-child { padding-bottom: 0; border-bottom: 0; }

.jn-prose blockquote {
    margin: clamp(22px, 2.6vw, 32px) 0 0;
    padding: clamp(20px, 2.4vw, 32px);
    border: 1px solid rgba(245, 160, 27, .34);
    border-left: 3px solid var(--amber);
    background: rgba(245, 160, 27, .07);
}
.jn-prose blockquote p {
    margin: 0;
    font-size: clamp(15px, 1.85vw, 20px);
    line-height: 1.55;
    letter-spacing: -.022em;
    font-weight: 500;
    color: rgba(242, 239, 234, .9);
}
.jn-prose blockquote p + p { margin-top: 14px; }

.jn-prose code {
    padding: 2px 6px;
    background: rgba(245, 160, 27, .1);
    border: 1px solid rgba(245, 160, 27, .22);
    font-family: var(--mono);
    font-size: .88em;
    color: var(--amber);
}
.jn-prose pre {
    margin: clamp(20px, 2.4vw, 28px) 0 0;
    padding: clamp(16px, 1.8vw, 22px);
    background: var(--panel);
    border: 1px solid var(--line);
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(242, 239, 234, .78);
}
.jn-prose pre code { padding: 0; background: none; border: 0; color: inherit; font-size: inherit; }

.jn-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: clamp(22px, 2.6vw, 32px) 0 0;
    border: 1px solid var(--line);
}
.jn-prose figcaption {
    margin-top: 10px;
    font: 500 9.5px/1.6 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

.jn-prose hr { margin: clamp(28px, 3.4vw, 44px) 0 0; border: 0; border-top: 1px solid var(--line); }

/* Tabel dibungkus pembungkus bergulir oleh JS halaman ini, jadi tabel
   lebar menggulir di dalam kotaknya sendiri alih-alih melebarkan halaman. */
.jn-tablewrap { margin: clamp(22px, 2.6vw, 32px) 0 0; overflow-x: auto; border: 1px solid var(--line); }
.jn-prose table { width: 100%; min-width: 460px; border-collapse: collapse; }
.jn-prose th, .jn-prose td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    font-size: 13.5px;
    line-height: 1.66;
    color: rgba(242, 239, 234, .7);
}
.jn-prose th {
    font: 700 9.5px/1.6 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
    background: var(--panel);
}
.jn-prose tr > th:first-child, .jn-prose tr > td:first-child { border-left: 0; }
.jn-prose thead tr:first-child > th { border-top: 0; }

/* ─── Kaki badan artikel ───────────────────────────────────────────── */

.jn-artfoot {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(26px, 3.2vw, 42px);
    padding-top: clamp(20px, 2.4vw, 30px);
    border-top: 1px solid var(--line);
}

/* ─── Panel penulis ────────────────────────────────────────────────── */

.jn-author {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2.4vw, 34px);
    align-items: center;
}
.jn-author__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border: 1px solid rgba(245, 160, 27, .34);
    background: rgba(245, 160, 27, .1);
    font: 700 24px/1 var(--mono);
    letter-spacing: .04em;
    color: var(--amber);
}
.jn-author__body { flex: 1 1 300px; min-width: 250px; }
.jn-author__name { margin: 12px 0 0; font-size: clamp(17px, 2.1vw, 22px); letter-spacing: -.024em; font-weight: 500; color: var(--paper); }
.jn-author__desc { margin: 9px 0 0; max-width: 58ch; font-size: 13px; line-height: 1.74; color: rgba(242, 239, 234, .58); }

/* ─── Bilah buletin amber ──────────────────────────────────────────── */

.jn-band {
    padding: clamp(34px, 4.6vw, 78px) var(--pad-x);
    border-top: 1px solid var(--line);
    background: var(--amber);
    color: var(--on-amber);
    text-align: center;
}
.jn-band__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.jn-band__label { font: 700 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.jn-band__title {
    margin: clamp(18px, 2.4vw, 30px) 0 0;
    max-width: 26ch;
    font-size: clamp(23px, 3.6vw, 46px);
    line-height: 1.06;
    letter-spacing: -.032em;
    font-weight: 600;
    color: var(--on-amber);
}
.jn-band__desc { margin: 20px 0 0; max-width: 58ch; font-size: 14.5px; line-height: 1.7; color: rgba(20, 16, 5, .76); }
.jn-band__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; max-width: 540px; margin-top: 28px; }
.jn-band__input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(20, 16, 5, .3);
    background: rgba(255, 255, 255, .6);
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--on-amber);
}
.jn-band__input::placeholder { color: rgba(20, 16, 5, .48); }
.jn-band__input:focus { outline: none; border-color: var(--on-amber); background: rgba(255, 255, 255, .82); }
.jn-band__btn {
    flex: none;
    padding: 14px 22px;
    border: 0;
    background: var(--on-amber);
    color: var(--amber);
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease;
}
.jn-band__btn:hover { background: #000; }
.jn-band__fine { margin-top: 22px; font: 700 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 16, 5, .6); }
.jn-band__note {
    margin-top: 20px;
    padding: 11px 15px;
    border: 1px solid rgba(20, 16, 5, .3);
    background: rgba(255, 255, 255, .5);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--on-amber);
}

/* ═══ LAYAR KECIL ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .jn-hero__h1 { max-width: none; }
    .jn-byline { gap: 14px; }
    .jn-share { width: 100%; justify-content: space-between; }
    .jn-artfoot { gap: 16px; }
    .jn-author__mark { width: 64px; height: 64px; font-size: 19px; }
    .jn-prose li { gap: 11px; }
}