/* ============================================================
   TUAH "Paper" — editorial/newspaper skin for PUBLIC reader.
   Locked design system: quality-newspaper feel (Monocle DNA),
   mobile-first. Scoped to body.is-public so the internal
   newsroom stays utilitarian. Loads AFTER reader.css (override).
   Principles: Reading First · Whitespace is Respect · Calm Wins ·
   gold ≤5% · hairlines not shadows · documentary photography.
   ============================================================ */

body.is-public {
    /* Monocle-ish: WHITE canvas, warmth comes from a faint newsprint grain
       (not a yellow/cream tint). Ink + gold ≤5%. */
    --color-bg: #fbfaf7;              /* warm white, not cream */
    --color-surface: #f4f2ec;
    --color-border: #e7e3d9;
    --color-text: #191817;
    --color-text-2: #6f695f;
    --color-primary: #191817;
    --color-accent: #b3892f;          /* Tuah gold — used sparingly */
    --paper-hair: #e7e3d9;

    /* Newsprint texture: monochrome fractal-noise grain at very low opacity,
       inlined as an SVG data-URI (CSP script/img-safe). */
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
    color: var(--color-text);
}

/* ── Masthead ─────────────────────────────────────────────── */
body.is-public .rd-header {
    background: var(--color-bg);
    backdrop-filter: none;
    border-bottom: 2px solid var(--color-text);
}
/* Wordmark — serif caps + "Tuah Curve" gold swash (echoes the logo) */
body.is-public .rd-brand {
    font-family: var(--font-reading);
    font-weight: 600; font-size: 26px; letter-spacing: 0.18em;
    color: var(--color-text); position: relative; padding: 2px 6px 8px 2px;
}
body.is-public .rd-brand::after {
    content: ""; position: absolute; left: 4%; right: 10%; bottom: 0; height: 9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 Q30,-1 52,6 T98,5' fill='none' stroke='%23b3892f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* Dateline + live clock — now a utility on the left of the top bar (no strip). */
body.is-public .rd-mast-date {
    font-family: var(--font-ui);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-text-2); white-space: nowrap;
}
body.is-public .rd-mast-date time { font-variant-numeric: tabular-nums; }

/* Real logo (web/img/tuah-logo.svg). File is a raster-in-SVG on white with wide
   margins → drop the white via multiply blend and crop the padding via a window. */
body.is-public .rd-brand:has(.rd-brand__img) {
    display: block; width: 264px; height: 62px; overflow: hidden;   /* logo agak besar */
    position: relative; padding: 0;
}
body.is-public .rd-brand:has(.rd-brand__img)::after { content: none; }
body.is-public .rd-brand__img {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: 265px; width: auto; mix-blend-mode: multiply;
}
/* ── Header lengket (menciut saat menggulir) ──────────────────────────────
   .rd-header memang sudah position:sticky (reader.css), tapi selama ini mati
   karena overflow-x:hidden di html/body — sudah diperbaiki jadi `clip`.
   Header penuh terlalu tinggi untuk dipaku (masthead + hingga 3 lapis nav
   ≈ 200px, hampir sepertiga layar ponsel). Jadi saat menggulir kita ciutkan:
   yang tersisa hanya wordmark kecil, nav kategori, dan alat — cukup untuk
   berpindah rubrik tanpa merebut ruang baca. Kelas .is-stuck dipasang atlas.js. */
body.is-public .rd-header {
    transition: box-shadow 0.2s ease;
}
body.is-public .rd-header.is-stuck {
    box-shadow: 0 2px 14px rgba(25, 24, 23, 0.10);
}
/* Yang disembunyikan saat menempel: tanggal, tagline, nav format, strip ramai.
   Sub-nav DAERAH RIAU sengaja DIPERTAHANKAN — itu navigasi di dalam rubrik yang
   sedang dibaca (DNA produk); kehilangannya di tengah artikel panjang Riau
   justru menyulitkan. */
body.is-public .rd-header.is-stuck .rd-mast-date,
body.is-public .rd-header.is-stuck .rd-masthead .tuah-tagline,
body.is-public .rd-header.is-stuck .rd-nav--formats:not(.rd-nav--riau),
body.is-public .rd-header.is-stuck .rd-utility {
    display: none;
}
body.is-public .rd-header.is-stuck .rd-header__bar { min-height: 48px; }
/* Logo adalah "jendela" ber-overflow-hidden (lihat .rd-brand:has(.rd-brand__img)
   di atas), jadi jendela DAN gambar di dalamnya harus diperkecil sebanding —
   62:265 → 40:171 — kalau tidak, logo akan terpotong alih-alih mengecil. */
body.is-public .rd-header.is-stuck .rd-brand:has(.rd-brand__img) { width: 170px; height: 40px; }
body.is-public .rd-header.is-stuck .rd-brand__img { height: 171px; }
body.is-public .rd-header.is-stuck .rd-sections .wrap { height: 42px; }
@media (max-width: 720px) {
    body.is-public .rd-header.is-stuck .rd-brand:has(.rd-brand__img) { width: 132px; height: 32px; }
    body.is-public .rd-header.is-stuck .rd-brand__img { height: 137px; }
    body.is-public .rd-header.is-stuck .rd-sections .wrap { height: 38px; }
}
/* Hormati preferensi gerak minimal. */
@media (prefers-reduced-motion: reduce) {
    body.is-public .rd-header { transition: none; }
}
/* ── Anti-hantu (bayangan/dobel) saat header lengket digulir ───────────────
   Chrome kadang meninggalkan JEJAK piksel baris nav ketika .rd-header menempel
   & di-repaint tiap frame — tampak seperti nav "goyang"/dobel (lihat foto mitra:
   baris kategori tergambar dua kali, saling geser). Solusi: beri baris bar & nav
   lapisan kompositor sendiri (translateZ) agar di-repaint terpisah dari konten
   yang lewat di belakangnya, jadi tak ada sisa frame lama.
   PENTING: transform TIDAK dipasang di .rd-header — .rd-drawer (position:fixed)
   ada di dalamnya; induk ber-transform akan menjadi containing block-nya dan
   merusak drawer layar-penuh. .rd-header__bar & .rd-sections tak memuat elemen
   fixed apa pun, jadi aman dipromosikan. */
body.is-public .rd-header__bar,
body.is-public .rd-sections {
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Puncak beranda: .rd-main sudah memberi padding-atas (--space-4 = 32px). Elemen
   pertama isi (mis. .rd-layout, margin-atas --space-5 = 40px) MENUMPUK di atasnya
   → ±72px pita kosong sebelum garis mozaik (ditandai mitra). Nolkan margin-atas
   elemen pertama saja; padding .rd-main sudah cukup jadi napas. */
body.is-public .rd-main > .wrap > :first-child { margin-top: 0; }

/* Masthead lockup: logo + tagline "Jernih dalam Memahami." ditumpuk, di tengah */
body.is-public .rd-masthead {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    justify-self: center; text-align: center;
}
body.is-public .rd-masthead .tuah-tagline {
    margin: 0; font-family: var(--font-reading); font-style: italic;
    font-size: 13px; letter-spacing: 0.01em; color: var(--color-text-2); white-space: nowrap;
}

/* Slim masthead bar — 3 zones so the logo sits dead-centre (Monocle) while
   utilities (search / auth) balance at the edges. Still compact. */
body.is-public .rd-header__bar {
    min-height: 60px; display: grid;
    grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2);
}
body.is-public .rd-brand { justify-self: center; }
body.is-public .rd-header__side { display: flex; align-items: center; gap: var(--space-2); }
body.is-public .rd-header__side--l { justify-self: start; }
body.is-public .rd-header__side--r { justify-self: end; }
/* Search reduced to an icon (Monocle) */
body.is-public .rd-searchbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; color: var(--color-text); border-radius: 999px;
}
body.is-public .rd-searchbtn:hover { color: var(--color-accent); }
@media (max-width: 640px) {
    body.is-public .rd-mast-date { display: none; } /* too long for phones; logo stays centred */
    body.is-public .rd-header__bar { min-height: 52px; gap: 4px; }
    body.is-public .rd-brand:has(.rd-brand__img) { width: 188px; height: 46px; }
    body.is-public .rd-brand__img { height: 196px; }
    body.is-public .rd-masthead .tuah-tagline { font-size: 11px; }
    body.is-public .rd-header__side { gap: 2px; }
    body.is-public .rd-burger { width: 38px; height: 38px; }
}

/* Section nav (Monocle-style pipe nav) — serif, centred, scrolls on mobile */
body.is-public .rd-sections { border-top: 1px solid var(--paper-hair); border-bottom: 1px solid var(--paper-hair); }
body.is-public .rd-sections .wrap { display: flex; align-items: center; justify-content: safe center; height: 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.is-public .rd-sections .wrap::-webkit-scrollbar { display: none; }
body.is-public .rd-sections a {
    font-family: var(--font-reading); font-size: 18px; color: var(--color-text);
    text-decoration: none; white-space: nowrap; opacity: 1;
}
body.is-public .rd-sections a:not(:first-child)::before {
    content: "|"; color: var(--paper-hair); margin: 0 18px; font-family: var(--font-ui);
}
body.is-public .rd-sections a:hover { color: var(--color-accent); }

/* Bigger search icon (search-first) + AI "cari pemahaman" spark */
body.is-public .rd-searchbtn--lg { width: 44px; height: 44px; }
body.is-public .rd-aibtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; font-size: 20px; text-decoration: none;
    border-radius: 999px; line-height: 1;
}
body.is-public .rd-aibtn:hover { background: rgba(179,137,47,0.12); }

/* ── Brand tagline (design/11-BRAND-TAGLINE-SYSTEM.md) ─────────
   Regular weight, slightly looser tracking, ~30–40% of logo height,
   colour follows theme (dark text on light, light on dark), max 2 lines. */
.tuah-tagline {
    font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
    font-weight: 400; letter-spacing: 0.02em; line-height: 1.25;
    color: var(--color-text); margin: 0;
    text-wrap: balance; /* rapikan jadi maksimal dua baris */
}
.tuah-tagline--hero { font-size: clamp(16px, 2.2vw, 22px); }
.tuah-tagline--md { font-size: 16px; }
.tuah-tagline--sm { font-size: 13px; letter-spacing: 0.04em; }
/* Homepage brand line — slim, calm, centred; introduces positioning once. */
.rd-brandline { text-align: center; padding: var(--space-3) 0 var(--space-2); }
@media (max-width: 480px) { .tuah-tagline--hero { font-size: 16px; } }

/* Hamburger (☰) — replaces top-right login; opens the drawer.
   The checkbox overlays the burger as the real, keyboard-focusable control
   (Tab → Space toggles); the label is the visual. */
body.is-public .rd-burger-wrap { position: relative; display: inline-flex; }
body.is-public .rd-menu-toggle {
    -webkit-appearance: none; appearance: none;
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; z-index: 2;
}
body.is-public .rd-menu-toggle:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 8px;
}
body.is-public .rd-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 42px; height: 42px; cursor: pointer;
}
body.is-public .rd-burger span { display: block; width: 22px; height: 2px; background: var(--color-text); margin: 0 auto; transition: transform .2s, opacity .2s; }

/* ── Layer 2 · format nav ─────────────────────────────────── */
body.is-public .rd-nav--formats { border-bottom: 1px solid var(--paper-hair); }
body.is-public .rd-nav--formats .wrap {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    height: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
body.is-public .rd-nav--formats a {
    font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-text-2); text-decoration: none; white-space: nowrap;
}
body.is-public .rd-nav--formats a:hover { color: var(--color-accent); }

/* ── Tombol Sahabat di masthead (menggantikan bilah hijau penuh-lebar) ────── */
body.is-public .rd-sahabat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: var(--radius-button);
    border: 1px solid var(--color-accent-2);
    background: color-mix(in srgb, var(--color-accent-2) 16%, transparent);
    color: var(--color-text); font-family: var(--font-ui); font-size: 12.5px;
    font-weight: 700; text-decoration: none; white-space: nowrap;
}
body.is-public .rd-sahabat:hover { background: color-mix(in srgb, var(--color-accent-2) 30%, transparent); }
body.is-public .rd-sahabat__ico { color: var(--color-danger); font-size: 13px; line-height: 1; }
@media (max-width: 720px) { body.is-public .rd-sahabat__txt { display: none; } }
/* Cari · ✨ Pahami · ♥ Dukung SUDAH ada di bottom-nav (selalu terlihat di HP).
   Mengulanginya di header membuat sisi kanan meluber & MENABRAK logo di layar sempit.
   DITARUH DI SINI (setelah definisi dasar .rd-aibtn/.rd-sahabat) agar menang urutan-
   sumber — media query TAK menambah specificity. Di ponsel sisakan MENU (☰) saja. */
@media (max-width: 640px) {
    body.is-public .rd-searchbtn,
    body.is-public .rd-aibtn,
    body.is-public .rd-sahabat { display: none; }
}

/* ── Utility strip: Format + Ramai digabung dalam satu pita tipis ─────────── */
body.is-public .rd-utility { border-bottom: 1px solid var(--paper-hair); }
body.is-public .rd-utility__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    height: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.is-public .rd-utility__bar::-webkit-scrollbar { display: none; }
body.is-public .rd-utility__formats,
body.is-public .rd-utility__trending { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
body.is-public .rd-utility__trending { gap: 12px; padding-left: 20px; border-left: 1px solid var(--paper-hair); }
body.is-public .rd-utility__formats a {
    font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--color-text-2); text-decoration: none;
}
body.is-public .rd-utility__trending a {
    font-family: var(--font-ui); font-size: 12.5px; color: var(--color-text-2); text-decoration: none;
}
body.is-public .rd-utility a:hover { color: var(--color-accent); }

/* Sub-nav DAERAH RIAU — dasar sama seperti bilah Format, dengan tiga pembeda:
   (1) tint lembut agar tak tertukar dengan Format tepat di bawahnya,
   (2) rata kiri: 12 daerah lebih enak dibaca mengalir dari kiri daripada center,
   (3) TETAP tampil di HP — ini konteks lokal penting; Format pindah ke drawer di
   HP, sub-nav daerah TIDAK (selektor `nav.rd-nav--riau` menang spesifisitas atas
   aturan display:none Format). */
body.is-public .rd-nav--riau { background: var(--color-surface); }
body.is-public .rd-nav--riau .wrap { justify-content: flex-start; }
body.is-public .rd-nav--riau a.is-active { color: var(--color-accent); }
@media (max-width: 640px) {
    body.is-public nav.rd-nav--riau { display: block; }
}

/* Layer 1 primary — active category in gold */
body.is-public .rd-nav--primary a.is-active { color: var(--color-accent); font-weight: 700; }

/* ── Layer 3 · trending strip ─────────────────────────────── */
body.is-public .rd-trending { border-bottom: 1px solid var(--paper-hair); background: var(--color-surface); }
body.is-public .rd-trending .wrap {
    display: flex; align-items: center; gap: 16px; height: 36px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    font-family: var(--font-ui); font-size: 12.5px;
}
body.is-public .rd-trending .wrap::-webkit-scrollbar { display: none; }
body.is-public .rd-trending__flag { font-weight: 700; color: var(--color-text); white-space: nowrap; }
body.is-public .rd-trending a { color: var(--color-text-2); text-decoration: none; white-space: nowrap; }
body.is-public .rd-trending a:hover { color: var(--color-accent); }

/* Mobile masthead nav — placed AFTER the base .rd-sections/.rd-trending rules so
   these overrides actually win. Start at Beranda (no centre-clip), smaller, tidy. */
@media (max-width: 640px) {
    body.is-public .rd-sections .wrap { justify-content: flex-start; height: 44px; padding-right: 24px; }
    body.is-public .rd-sections a { font-size: 15px; }
    body.is-public .rd-sections a:not(:first-child)::before { margin: 0 12px; }
    body.is-public .rd-trending .wrap { justify-content: flex-start; height: 32px; font-size: 12px; gap: 12px; padding-right: 24px; }
}

/* ── Drawer (☰) — CSS-only, toggled by the #rd-menu checkbox ─ */
body.is-public .rd-drawer__scrim {
    position: fixed; inset: 0; z-index: 55; background: rgba(20,18,16,0.38);
    opacity: 0; visibility: hidden; transition: opacity .2s;
}
body.is-public .rd-drawer {
    position: fixed; top: 0; right: 0; z-index: 60; height: 100%;
    width: min(360px, 85vw); background: var(--color-bg);
    border-left: 1px solid var(--paper-hair); box-shadow: -8px 0 24px rgba(20,18,16,.08);
    transform: translateX(100%); transition: transform .22s ease; overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-6);
}
/* Toggle via :has() so the checkbox can live beside the burger (not just as a
   direct sibling of the drawer) — lets it be a keyboard-focusable control. */
body.is-public .rd-header:has(#rd-menu:checked) .rd-drawer { transform: translateX(0); }
body.is-public .rd-header:has(#rd-menu:checked) .rd-drawer__scrim { opacity: 1; visibility: visible; }
body.is-public .rd-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em;
    font-size: var(--text-meta); color: var(--color-text-2);
    border-bottom: 2px solid var(--color-text); padding-bottom: var(--space-2); margin-bottom: var(--space-3);
}
body.is-public .rd-drawer__close { cursor: pointer; font-size: 18px; color: var(--color-text); }
body.is-public .rd-drawer__section { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
body.is-public .rd-drawer__section > .rd-eyebrow { margin-bottom: var(--space-1); }
body.is-public .rd-drawer__section a {
    font-family: var(--font-reading); font-size: 17px; color: var(--color-text);
    text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--paper-hair);
}
body.is-public .rd-drawer__section a:hover { color: var(--color-accent); }
body.is-public .rd-drawer__section a.btn { border-bottom: none; }

@media (max-width: 640px) {
    body.is-public .rd-nav--formats { display: none; } /* lives in the drawer on phones */
}

/* ── "Cari Pemahaman" (Tanya TUAH) landing ────────────────── */
body.is-public .rd-tanya { max-width: 720px; margin: var(--space-7) auto; text-align: center; }
body.is-public .rd-tanya__mark { font-size: 34px; line-height: 1; margin-bottom: var(--space-2); }
body.is-public .rd-tanya__h {
    font-family: var(--font-reading); font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(28px, 5vw, 46px); line-height: 1.1; margin: 0;
}
body.is-public .rd-tanya__h em { color: var(--color-accent); font-style: italic; }
body.is-public .rd-tanya__sub {
    font-family: var(--font-reading); color: var(--color-text-2);
    font-size: clamp(16px, 2.2vw, 20px); max-width: 60ch; margin: var(--space-3) auto 0;
}
body.is-public .rd-tanya__form {
    display: flex; gap: var(--space-2); max-width: 620px; margin: var(--space-5) auto 0;
}
body.is-public .rd-tanya__form input {
    flex: 1; font-family: var(--font-reading); font-size: 18px;
    padding: 14px 18px; border: 1px solid var(--color-border);
    background: var(--color-bg); color: var(--color-text); border-radius: 2px;
}
body.is-public .rd-tanya__form input:focus { outline: none; border-color: var(--color-accent); }
body.is-public .rd-tanya__form button {
    font-family: var(--font-ui); font-weight: 700; padding: 0 24px;
    background: var(--color-text); color: #fff; border: none; border-radius: 2px; cursor: pointer;
}
body.is-public .rd-tanya__form button:hover { background: var(--color-accent); }
body.is-public .rd-tanya__form button:disabled { opacity: 0.85; cursor: default; }
body.is-public .rd-tanya__form.is-thinking { position: relative; }
body.is-public .rd-tanya__form.is-thinking::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent) no-repeat;
    background-size: 40% 100%; animation: rd-thinking 1s linear infinite;
}
@keyframes rd-thinking { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
body.is-public .rd-tanya__examples {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
    margin-top: var(--space-3); font-family: var(--font-ui); font-size: var(--text-caption);
}
body.is-public .rd-tanya__examples span { color: var(--color-text-2); }
body.is-public .rd-tanya__examples a {
    color: var(--color-text); text-decoration: none;
    border: 1px solid var(--paper-hair); border-radius: 999px; padding: 5px 12px;
}
body.is-public .rd-tanya__examples a:hover { border-color: var(--color-accent); color: var(--color-accent); }
body.is-public .rd-tanya__note {
    margin-top: var(--space-5); font-family: var(--font-ui); font-size: var(--text-caption);
    color: var(--color-text-2); max-width: 54ch; margin-left: auto; margin-right: auto;
}
/* AI answer box (Cari Pemahaman result) */
body.is-public .rd-answer {
    max-width: 720px; margin: var(--space-5) auto 0; text-align: left;
    border: 1px solid var(--color-accent); border-radius: 4px;
    padding: var(--space-4); background: rgba(179,137,47,0.05);
}
body.is-public .rd-answer__label {
    font-family: var(--font-ui); font-size: var(--text-meta); text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--color-accent); font-weight: 700;
}
body.is-public .rd-answer__label span { color: var(--color-text-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
body.is-public .rd-answer__body { font-family: var(--font-reading); font-size: 19px; line-height: 1.6; margin-top: var(--space-2); }
body.is-public .rd-answer__disclaimer { font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-2); margin: var(--space-2) 0 0; }
body.is-public .rd-answer__sources { max-width: 720px; margin: var(--space-5) auto 0; text-align: left; }
body.is-public .rd-answer__src { padding: var(--space-2) 0; border-top: 1px solid var(--paper-hair); }
body.is-public .rd-answer__src:first-of-type { border-top: none; }
body.is-public .rd-answer__src h3 { font-family: var(--font-reading); font-size: var(--text-h3); margin: 0; }
body.is-public .rd-answer__src h3 a { color: var(--color-text); text-decoration: none; }
body.is-public .rd-answer__src h3 a:hover { color: var(--color-accent); }
body.is-public .rd-answer__src p { margin: 4px 0 0; font-size: var(--text-caption); }

/* ── Vertical (kanal) bar → section rules ─────────────────── */
body.is-public .rd-topicbar { border-bottom: 1px solid var(--paper-hair); }
body.is-public .rd-pill { background: transparent; border-color: var(--paper-hair); }

/* ── Article: editorial typography ────────────────────────── */
/* Story-type badge → quiet uppercase label (no loud pill) */
body.is-public .badge {
    background: transparent !important; color: var(--color-text-2) !important;
    padding: 0; font-family: var(--font-ui); font-weight: 700;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    border: none; box-shadow: none;
}
body.is-public .rd-kicker { color: var(--color-accent); letter-spacing: 0.16em; }
body.is-public .rd-article__title {
    font-family: var(--font-reading);
    font-weight: 600; letter-spacing: -0.02em; line-height: 1.08;
}
body.is-public .rd-article__lead {
    font-family: var(--font-reading);
    font-style: italic; color: #3a3630;
    /* Standfirst DI BAWAH foto: dipusatkan, lebih kecil dari sebelumnya
       (dulu clamp 19–24px terasa terlalu besar). */
    font-size: clamp(15px, 1.7vw, 18px); line-height: 1.55;
    max-width: 720px; margin: var(--space-3) auto var(--space-2); text-align: center;
}
body.is-public .rd-article__meta { font-family: var(--font-ui); }
body.is-public .rd-article__cover {
    border-radius: 2px; border: 1px solid var(--paper-hair);
}

/* Reading body — serif, generous rhythm, drop cap, teks RATA KIRI (ragged-right).
   Justify di web + hyphenation Bahasa Indonesia yang lemah menimbulkan "sungai"
   spasi putih; rata kiri lebih terbaca dan lebih "jernih". */
body.is-public .prose {
    font-family: var(--font-reading);
    font-size: 19px; line-height: 1.75; color: var(--color-text);
    /* Rata kiri-kanan (gaya jurnal), desktop & mobile; hyphens:auto meredam celah
       antar-kata di kolom sempit. */
    text-align: justify;
    -webkit-hyphens: auto; hyphens: auto;
    overflow-wrap: break-word;
}
/* Jaga konten lebar di badan artikel agar tak menembus layar mobile (clip). */
body.is-public .prose table { display: block; max-width: 100%; overflow-x: auto; }
body.is-public .prose pre { max-width: 100%; overflow-x: auto; }

/* Struktur artikel SEO (dari ProseMarkdown): subjudul "##", kutipan ">", poin "-".
   Memberi napas antar-bagian agar mudah dipindai pembaca & mesin telusur. */
body.is-public .prose h3 {
    font-size: var(--text-h3); line-height: 1.3;
    margin: var(--space-4) 0 var(--space-2);
    text-align: left;
}
body.is-public .prose h3:first-child { margin-top: 0; }
body.is-public .prose ul { margin: var(--space-3) 0; padding-left: 1.4em; }
body.is-public .prose li { margin: 0 0 var(--space-1); text-align: left; }
body.is-public .prose blockquote {
    margin: var(--space-4) 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-4);
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-reading);
    font-size: 1.12em; line-height: 1.55;
    color: var(--color-text);
    text-align: left;               /* kutipan pendek jangan dirata kiri-kanan */
    font-style: normal;
}

/* ── Auth shell (masuk/lupa/reset/MFA) — fokus, tanpa chrome pembaca ──────── */
body.is-auth {
    background: var(--color-surface);
    min-height: 100vh;
    display: flex; align-items: flex-start; justify-content: center;
}
.auth-shell {
    width: 100%; max-width: 420px;
    padding: var(--space-8) var(--space-3) var(--space-6);
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4);
}
.auth-brand {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: var(--color-text);
}
.auth-wordmark {
    font-family: var(--font-reading); font-weight: 600;
    font-size: 34px; letter-spacing: 0.14em; text-indent: 0.14em;
}
.auth-tagline {
    font-family: var(--font-ui); font-size: var(--text-meta);
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-2);
}
.auth-shell > div { margin: 0 !important; max-width: none !important; } /* netralkan margin auto view */
.auth-foot {
    text-align: center; font-family: var(--font-ui);
    font-size: var(--text-meta); color: var(--color-text-2);
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0;
}
.auth-foot a { color: var(--color-text-2); }
.auth-foot a:hover { color: var(--color-text); }

/* Share row — quiet sans links, hairline framed */
body.is-public .rd-share { border-top: 1px solid var(--paper-hair); border-bottom: 1px solid var(--paper-hair); padding: 10px 0; }
body.is-public .rd-share a, body.is-public .rd-share button {
    font-family: var(--font-ui); border: none; background: transparent;
    color: var(--color-text-2); padding: 0; opacity: 1;
}
body.is-public .rd-share a:hover, body.is-public .rd-share button:hover { color: var(--color-accent); }

/* Sources / cards → hairline blocks, no shadow */
body.is-public .card,
body.is-public .card--surface {
    background: transparent; border: none;
    border-top: 2px solid var(--color-text); border-radius: 0;
    box-shadow: none; padding: 16px 0;
}
body.is-public .rd-eyebrow { color: var(--color-text); font-family: var(--font-ui); }

/* Author box */
body.is-public .rd-authorbox { border-top: 1px solid var(--paper-hair); border-bottom: 1px solid var(--paper-hair); }

/* ── Home & lists: serif headlines, hairline rows ─────────── */
body.is-public .rd-hero__title a,
body.is-public .rd-card__title a { color: var(--color-text); }
body.is-public .rd-hero__title,
body.is-public .rd-card__title { font-family: var(--font-reading); font-weight: 600; letter-spacing: -0.01em; }
body.is-public .rd-hero__excerpt,
body.is-public .rd-card__excerpt { font-family: var(--font-reading); }
body.is-public .rd-listrow { border-top: 1px solid var(--paper-hair); }

/* Front-page 3-up band — Monocle signature: columns split by vertical hairlines,
   framed by a heavy top rule. Kept calm (generous padding = "whitespace is respect"). */
body.is-public .rd-frontgrid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 2px solid var(--color-text);
    margin-top: var(--space-2);
}
body.is-public .rd-frontcol {
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-left: 1px solid var(--paper-hair);
}
body.is-public .rd-frontcol:first-child { border-left: none; padding-left: 0; }
body.is-public .rd-frontcol:last-child { padding-right: 0; }
body.is-public .rd-frontcol__thumb { aspect-ratio: 16 / 10; margin-bottom: var(--space-2); }
body.is-public .rd-frontcol .rd-card__title { font-size: var(--text-h3); margin: 6px 0 0; }
body.is-public .rd-frontcol .rd-card__excerpt { margin-top: 6px; color: var(--color-text-2); }
body.is-public .rd-frontcol .rd-card__meta { margin-top: 8px; }
@media (max-width: 720px) {
    body.is-public .rd-frontgrid { grid-template-columns: 1fr; }
    body.is-public .rd-frontcol {
        border-left: none; border-top: 1px solid var(--paper-hair);
        padding: var(--space-3) 0;
    }
    body.is-public .rd-frontcol:first-child { border-top: none; padding-top: var(--space-3); }
}

/* Documentary placeholder (no loud gradient) */
body.is-public .rd-thumb--ph {
    background:
        linear-gradient(0deg, rgba(25,24,23,.04), rgba(25,24,23,.04)),
        repeating-linear-gradient(135deg, #e9e3d7 0 14px, #efe9dd 14px 28px);
    color: #8c8577;
}

/* Most-read rail — serif gold numerals */
body.is-public .rd-widget { background: transparent; border: none; }
body.is-public .rd-widget__head {
    background: transparent; border-left: none;
    border-bottom: 2px solid var(--color-text); padding-left: 0;
    font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-meta);
}
body.is-public .rd-pop__num { font-family: var(--font-reading); color: var(--color-accent); }
/* Judul dipangkas 3 baris (ellipsis) → tiap entri ringkas & seragam, tak meninggi */
body.is-public .rd-pop__title {
    color: var(--color-text); flex: 1; min-width: 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Newsletter block → quiet paper panel */
body.is-public .rd-newsletter { background: transparent; border: none; border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); border-radius: 0; }

/* ── Article layout: Monocle-style centered head + 3-col grid ──── */
/* Centered head block (kicker · headline · standfirst), wide measure */
body.is-public .rd-arthead {
    max-width: 860px; margin: var(--space-4) auto 0; text-align: center;
}
body.is-public .rd-artkicker {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent);
    margin-bottom: 14px;
}
body.is-public .rd-artkicker .badge { color: var(--color-accent) !important; }
body.is-public .rd-artkicker a { color: var(--color-accent); text-decoration: none; }
body.is-public .rd-artkicker__sep { color: var(--paper-hair); }
body.is-public .rd-arthead .rd-article__title {
    font-size: clamp(30px, 5vw, 54px); line-height: 1.06; margin: 0;
}
body.is-public .rd-arthead .rd-article__lead {
    max-width: 720px; margin: 18px auto 0; text-align: center;
    font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5;
}
/* ── Label SERI di kepala artikel: DI TENGAH + penanda rubrik yang jelas ──────
   Bug: .rd-serieslabel memakai display:flex (default rata-KIRI), jadi "TUAH
   LEGACY" menempel di tepi sementara kicker & judul di tengah. Selain dipusatkan,
   nama seri dibuat lebih terbaca — diapit garis rambut emas seperti penanda
   kolom/rubrik majalah, bukan sekadar kicker kedua yang mudah terlewat. */
body.is-public .rd-arthead .rd-serieslabel {
    justify-content: center; align-items: center; gap: 10px;
    margin: 12px auto 4px;
}
body.is-public .rd-arthead .rd-serieslabel__name {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 13px; letter-spacing: 0.16em;
}
body.is-public .rd-arthead .rd-serieslabel__name::before,
body.is-public .rd-arthead .rd-serieslabel__name::after {
    content: ""; width: 26px; height: 1px;
    background: var(--color-accent); opacity: 0.5;
}

/* Hero — pakai grid yang SAMA persis dengan .rd-artgrid, foto ditaruh di kolom
   tengah (kolom baca) → tepi kiri/kanan foto SEGARIS dengan badan teks di bawah.
   Landscape 16:9, tinggi dibatasi agar tidak terlalu besar. */
body.is-public .rd-arthero {
    display: grid; grid-template-columns: 210px minmax(0, 680px) 210px;
    gap: 44px; justify-content: center; align-items: start;
    max-width: none; margin: var(--space-5) auto 0;
}
body.is-public .rd-arthero .rd-article__cover {
    grid-column: 2; width: 100%; display: block; margin: 0;
    aspect-ratio: 16 / 9; object-fit: cover; max-height: 420px;
}
@media (max-width: 920px) {
    body.is-public .rd-arthero { display: block; }         /* jangan grid di mobile */
    body.is-public .rd-arthero .rd-article__cover { grid-column: auto; max-height: 300px; }
}
/* Mobile: paksa semua kontainer artikel muat layar, pecah kata panjang, cegah meluber */
@media (max-width: 640px) {
    body.is-public .rd-arthead,
    body.is-public .rd-arthead .rd-article__lead,
    body.is-public .rd-artgrid,
    body.is-public .rd-artcol,
    body.is-public .rd-related,
    body.is-public .prose { max-width: 100%; min-width: 0; }
    body.is-public .rd-arthead .rd-article__title {
        font-size: clamp(23px, 6.5vw, 32px); overflow-wrap: anywhere;
    }
    body.is-public .prose { text-align: justify; }         /* justify jg di mobile (hyphens:auto meredam celah) — preferensi redaksi */
}

/* 3-column reading grid: author rail | reading column | most-read rail */
body.is-public .rd-artgrid {
    display: grid; grid-template-columns: 210px minmax(0, 680px) 210px;
    gap: 44px; justify-content: center; align-items: start;
    margin-top: var(--space-6);
}
body.is-public .rd-artcol { min-width: 0; }
body.is-public .rd-artcol .prose { margin-top: 0; }

/* Side rails — sans, hairline separators, sticky */
body.is-public .rd-artrail { font-family: var(--font-ui); }
body.is-public .rd-artrail__sticky { position: sticky; top: 20px; }
body.is-public .rd-artrail--left { border-right: 1px solid var(--paper-hair); padding-right: 20px; }
body.is-public .rd-artrail--right { border-left: 1px solid var(--paper-hair); padding-left: 24px; }
body.is-public .rd-artrail__lbl {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-text-2); margin: 0 0 6px;
}
body.is-public .rd-artrail__lbl:not(:first-child) { margin-top: 22px; }
body.is-public .rd-artrail__who {
    display: block; font-size: 15px; font-weight: 700;
    color: var(--color-text); text-decoration: none;
}
body.is-public .rd-artrail__who:hover { color: var(--color-accent); }
body.is-public .rd-artrail__sub {
    font-size: 13px; color: var(--color-text-2); margin-top: 2px;
}
/* Share as a vertical list in the rail */
body.is-public .rd-share--col {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0; border: none; padding: 0;
}
body.is-public .rd-share--col a,
body.is-public .rd-share--col button {
    width: 100%; text-align: left; padding: 7px 0;
    border-bottom: 1px solid var(--paper-hair); font-size: 13px;
}

/* Related runs full-width below the grid */
body.is-public .rd-related { max-width: 1000px; margin: var(--space-6) auto 0; }

/* Collapse the grid on narrow screens: single column, natural read order
   (author/share → body → most-read). Head stays centered. */
@media (max-width: 920px) {
    body.is-public .rd-artgrid { grid-template-columns: 1fr; gap: var(--space-4); }
    body.is-public .rd-artrail--left,
    body.is-public .rd-artrail--right { border: none; padding: 0; }
    body.is-public .rd-artrail--left {
        border-bottom: 1px solid var(--paper-hair); padding-bottom: var(--space-3);
    }
    body.is-public .rd-artrail__sticky { position: static; }
    /* Author + share flow horizontally on mobile to save vertical space */
    body.is-public .rd-share--col { flex-direction: row; flex-wrap: wrap; gap: 16px; }
    body.is-public .rd-share--col a,
    body.is-public .rd-share--col button { width: auto; border-bottom: none; padding: 0; }
}

/* ── Index/list pages (kanal · topik · tag · penulis · entitas · cari) ──
   Open every list page like a newspaper section front: serif title on a heavy
   rule, gold eyebrow, then the card grid. */
body.is-public .rd-pagehead {
    max-width: none; margin: 0 0 var(--space-5);
    border-bottom: 2px solid var(--color-text); padding-bottom: var(--space-3);
}
body.is-public .rd-pagehead h1 {
    font-family: var(--font-reading); font-weight: 600;
    line-height: 1.08; letter-spacing: -0.02em;
}
/* Serif sub-heads (Morning Brief items, section h3) */
body.is-public .rd-article h3 { font-family: var(--font-reading); }

/* ── Hero mosaic — 1 big lead + secondary leads, all visible (no auto-slide) ── */
body.is-public .rd-mosaic {
    display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-4);
    align-items: start; border-top: 3px solid var(--color-text); padding-top: var(--space-3);
}
body.is-public .rd-mosaic__lead .rd-hero__thumb { aspect-ratio: 16 / 10; margin-bottom: var(--space-2); }
body.is-public .rd-mosaic__lead .rd-hero__title { font-size: clamp(26px, 3.4vw, 40px); }
body.is-public .rd-mosaic__aside {
    display: flex; flex-direction: column;
    border-left: 1px solid var(--paper-hair); padding-left: var(--space-4);
}
body.is-public .rd-mosaic__item { padding: var(--space-2) 0; border-top: 1px solid var(--paper-hair); }
body.is-public .rd-mosaic__item:first-child { border-top: none; padding-top: 0; }
body.is-public .rd-mosaic__item .rd-card__title { font-size: var(--text-body); margin: 4px 0 0; }
@media (max-width: 720px) {
    body.is-public .rd-mosaic { grid-template-columns: 1fr; gap: var(--space-3); }
    body.is-public .rd-mosaic__aside {
        border-left: none; padding-left: 0;
        border-top: 2px solid var(--color-text); padding-top: var(--space-2);
    }
}

/* ── Homepage (Slice 2): 4-up top stories · section desks · "Hari Ini" ── */
body.is-public .rd-frontgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { body.is-public .rd-frontgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.is-public .rd-frontgrid--4 { grid-template-columns: 1fr; } }

/* Section desk header — eyebrow + "Selengkapnya" on a rule */
body.is-public .rd-desk__head {
    display: flex; align-items: baseline; justify-content: space-between;
    border-bottom: 2px solid var(--color-text); padding-bottom: var(--space-2);
}
body.is-public .rd-desk__more {
    font-family: var(--font-ui); font-size: var(--text-meta); color: var(--color-text-2); text-decoration: none;
}
body.is-public .rd-desk__more:hover { color: var(--color-accent); }

/* "Hari Ini Anda Perlu Tahu" — TUAH signature (not blinking breaking news) */
body.is-public .rd-today {
    border-top: 3px solid var(--color-text); border-bottom: 1px solid var(--paper-hair);
    padding: var(--space-2) 0 var(--space-3);
}
body.is-public .rd-today__head {
    font-family: var(--font-reading); font-weight: 700; font-size: var(--text-h3);
    letter-spacing: -0.01em; margin-bottom: var(--space-2);
}
body.is-public .rd-today__list { list-style: none; margin: 0; padding: 0; }
body.is-public .rd-today__list li {
    display: flex; gap: 12px; align-items: baseline;
    padding: 10px 0; border-top: 1px solid var(--paper-hair);
}
body.is-public .rd-today__list li:first-child { border-top: none; }
body.is-public .rd-today__num {
    font-family: var(--font-reading); font-weight: 700; color: var(--color-accent);
    font-size: 18px; line-height: 1; min-width: 16px;
}
body.is-public .rd-today__list a {
    font-family: var(--font-reading); color: var(--color-text); text-decoration: none;
    font-size: 16px; line-height: 1.32;
}
body.is-public .rd-today__list a:hover { color: var(--color-accent); }

/* ── Bottom nav (mobile only) — Fikri: 🏠 📰 🔍 🎥 👤 ─────────── */
body.is-public .rd-bottomnav { display: none; }
@media (max-width: 640px) {
    body.is-public { padding-bottom: 60px; } /* ruang untuk bar tetap */
    body.is-public .rd-bottomnav {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        background: var(--color-bg); border-top: 1px solid var(--color-border);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    body.is-public .rd-bottomnav a,
    body.is-public .rd-bottomnav label {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        padding: 8px 0 9px; text-decoration: none; color: var(--color-text-2);
        font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.02em; cursor: pointer;
    }
    body.is-public .rd-bottomnav svg { width: 22px; height: 22px; }
    body.is-public .rd-bottomnav .is-active { color: var(--color-accent); }
    /* Cookie banner: di atas bottom-nav + ramping (1–2 baris, tombol tetap kanan) */
    body.is-public .cookie-consent { bottom: 60px !important; padding: 8px 12px !important; }
    body.is-public .cookie-consent .wrap { flex-wrap: nowrap !important; gap: 10px !important; font-size: var(--text-meta) !important; }
    body.is-public .cookie-consent .wrap > span { flex: 1; min-width: 0; }
    body.is-public .cookie-consent .btn { flex-shrink: 0; }
}

/* ── Ad slot — calm, static, clearly labelled (no animation) ─────── */
body.is-public .rd-ad { margin: var(--space-6) 0; text-align: center; }
body.is-public .rd-ad__label {
    font-family: var(--font-ui); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--color-text-2); margin-bottom: 6px;
}
body.is-public .rd-ad__link {
    display: inline-block; max-width: 100%;
    border: 1px solid var(--paper-hair); border-radius: 2px; overflow: hidden;
}
body.is-public .rd-ad__link img { display: block; max-width: 100%; height: auto; }

/* Footer */
body.is-public footer.site { border-top: 2px solid var(--color-text); }
/* Baris kaki: hak cipta ↔ tautan seimbang di desktop; di HP MENUMPUK & memusat
   rapi (dulu 6 tautan membungkus ragged rata-kiri dengan jarak lebar). */
body.is-public .rd-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; font-size: var(--text-caption);
}
body.is-public .rd-foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
@media (max-width: 640px) {
    body.is-public .rd-foot { flex-direction: column; gap: var(--space-2); text-align: center; }
    body.is-public .rd-foot__links { justify-content: center; gap: 10px 16px; }
}

/* ============================================================
   Dukung TUAH — halaman Sahabat Pendiri (kampanye membership)
   ============================================================ */
body.is-public .dk-hero {
    margin: var(--space-4) 0 var(--space-6);
    border-radius: 20px; padding: clamp(28px, 5vw, 56px);
    background: linear-gradient(155deg, #123a22 0%, #0a1f13 100%);
    color: #fff; position: relative; overflow: hidden;
}
body.is-public .dk-hero::after {
    content: ""; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px;
    border-radius: 50%; border: 2px solid rgba(240,193,75,0.12);
    box-shadow: 0 0 0 60px rgba(240,193,75,0.05);
}
body.is-public .dk-hero__body { position: relative; max-width: 680px; }
body.is-public .dk-eyebrow {
    font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: #f0c14b; margin-bottom: 14px;
}
body.is-public .dk-hero__title { font-size: clamp(28px, 5vw, 46px); line-height: 1.1; margin: 0 0 14px; color: #fff; }
body.is-public .dk-hero__lead { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0 0 22px; }
body.is-public .dk-hero__lead strong { color: #fff; }
body.is-public .dk-meter { margin: 0 0 24px; max-width: 460px; }
body.is-public .dk-meter__bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.16); overflow: hidden; }
body.is-public .dk-meter__bar span { display: block; height: 100%; background: #f0c14b; border-radius: 999px; }
body.is-public .dk-meter__label { margin-top: 8px; font-family: var(--font-ui); font-size: var(--text-caption); color: rgba(255,255,255,0.82); }
body.is-public .dk-meter__label strong { color: #fff; }
body.is-public .dk-cta { font-size: 16px; padding: 0 26px; height: 48px; display: inline-flex; align-items: center; }

body.is-public .dk-h2 { font-size: clamp(22px, 3.5vw, 30px); margin: 0 0 6px; }
body.is-public .dk-sub { margin: 0 0 var(--space-4); }
body.is-public .dk-why, body.is-public .dk-tiers, body.is-public .dk-form, body.is-public .dk-faq { margin: var(--space-6) 0; }

body.is-public .dk-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
body.is-public .dk-why__item { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
body.is-public .dk-why__ic { font-size: 28px; margin-bottom: 8px; }
body.is-public .dk-why__item h3 { font-size: var(--text-h3); margin: 0 0 6px; }
body.is-public .dk-why__item p { margin: 0; font-size: var(--text-caption); }

body.is-public .dk-tiers__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 760px; }
body.is-public .dk-tier { position: relative; border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-4); background: var(--color-bg); display: flex; flex-direction: column; }
body.is-public .dk-tier--featured { border: 2px solid var(--color-accent); box-shadow: 0 10px 30px rgba(0,0,0,0.07); }
body.is-public .dk-tier__badge { position: absolute; top: -12px; left: var(--space-4); background: var(--color-accent); color: var(--color-accent-contrast, #1a1a1a); font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 700; padding: 3px 12px; border-radius: 999px; letter-spacing: 0.02em; }
body.is-public .dk-tier__name { font-family: var(--font-ui); font-weight: 700; color: var(--color-text-2); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-meta); }
body.is-public .dk-tier__price { font-size: clamp(26px, 4vw, 34px); font-weight: 800; margin: 4px 0 var(--space-2); }
body.is-public .dk-tier__list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 10px; font-size: var(--text-caption); }
body.is-public .dk-tier__list li { line-height: 1.4; }
body.is-public .dk-tier__btn { margin-top: auto; text-align: center; }

body.is-public .dk-form__card { max-width: 560px; border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-4); background: var(--color-bg); }
body.is-public .dk-field { margin-bottom: var(--space-3); }
body.is-public .dk-field > label { display: block; font-family: var(--font-ui); font-size: var(--text-meta); color: var(--color-text-2); margin-bottom: 6px; }
body.is-public .dk-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
body.is-public .dk-field--row label { display: block; font-family: var(--font-ui); font-size: var(--text-meta); color: var(--color-text-2); margin-bottom: 6px; }
body.is-public .dk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
body.is-public .dk-pick__opt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; cursor: pointer; font-size: var(--text-caption); }
body.is-public .dk-pick__opt:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
body.is-public .dk-form__submit { width: 100%; height: 48px; font-size: 16px; }

body.is-public .dk-thanks { max-width: 560px; text-align: center; border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-5); background: var(--color-bg); }
body.is-public .dk-thanks__ic { width: 56px; height: 56px; margin: 0 auto var(--space-2); border-radius: 50%; background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); font-size: 30px; display: flex; align-items: center; justify-content: center; }

body.is-public .dk-faq__item { border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
body.is-public .dk-faq__item summary { cursor: pointer; font-weight: 600; list-style: none; }
body.is-public .dk-faq__item summary::-webkit-details-marker { display: none; }
body.is-public .dk-faq__item summary::before { content: "+ "; color: var(--color-accent); font-weight: 700; }
body.is-public .dk-faq__item[open] summary::before { content: "– "; }
body.is-public .dk-faq__item > div { padding: var(--space-2) 0 0; color: var(--color-text-2); font-size: var(--text-caption); line-height: 1.6; }

/* Promo banner beranda (Sahabat Pendiri) */
body.is-public .rd-foundingpromo {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap;
    padding: 10px 16px; text-decoration: none;
    background: linear-gradient(90deg, #123a22, #0f5c4d); color: #fff;
    font-family: var(--font-ui); font-size: var(--text-caption);
}
body.is-public .rd-foundingpromo__txt { font-weight: 600; }
body.is-public .rd-foundingpromo__cta { color: #f0c14b; font-weight: 700; white-space: nowrap; }
body.is-public .rd-foundingpromo:hover .rd-foundingpromo__cta { text-decoration: underline; }

/* Dinding Sahabat Pendiri */
body.is-public .dk-wall { margin: var(--space-6) 0; }
body.is-public .dk-wall__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
body.is-public .dk-wall__name { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); font-weight: 600; }
body.is-public .dk-wall__num { color: var(--color-accent); font-family: var(--font-ui); font-size: var(--text-meta); font-weight: 700; }

/* Hero dengan gambar (foto Box) */
body.is-public .dk-hero--img { display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: var(--space-4); align-items: center; }
body.is-public .dk-hero__media img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
/* Kaki kartu paket */
body.is-public .dk-tier__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); }
body.is-public .dk-tier__soldout { color: var(--color-danger); font-size: var(--text-meta); font-weight: 600; }
body.is-public .dk-tier__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; margin-bottom: var(--space-2); }

@media (max-width: 720px) {
    body.is-public .dk-hero--img { grid-template-columns: 1fr; }
    body.is-public .dk-why__grid { grid-template-columns: 1fr; }
    body.is-public .dk-tiers__grid { grid-template-columns: 1fr !important; }
    body.is-public .dk-field--row { grid-template-columns: 1fr; }
    body.is-public .dk-pick { grid-template-columns: 1fr !important; }
    body.is-public .dk-wall__grid { grid-template-columns: 1fr; }
}

/* ══ TUAH Weekly e-paper (flipbook + Pintu Digital + Pesan Cetak) ══════════ */
body.is-public .ep-masthead { text-align: center; border-bottom: 3px double var(--color-text); padding-bottom: 10px; margin-bottom: var(--space-4); }
body.is-public .ep-masthead__brand { font-family: var(--font-ui); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: var(--color-accent); }
body.is-public .ep-masthead__title { font-family: var(--font-reading); font-size: clamp(28px,5vw,46px); line-height: 1.05; margin: 4px 0; }
body.is-public .ep-masthead__meta { font-family: var(--font-ui); font-size: 12px; color: var(--color-text-2); letter-spacing: .04em; }
body.is-public .ep { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
body.is-public .ep-book { width: 100%; max-width: 700px; margin: 0 auto; touch-action: pan-y; }
body.is-public .ep-page { background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.16); overflow: hidden; position: relative; }
body.is-public .ep-canvas { width: 100%; height: 100%; display: block; }
body.is-public .ep-ploading { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 200px; color: var(--color-text-3); font-family: var(--font-ui); font-size: 40px; opacity: .22; }
body.is-public .ep-bar { display: flex; align-items: center; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
body.is-public .ep-pageno { font-family: var(--font-ui); font-size: var(--text-meta); color: var(--color-text-2); min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
body.is-public .ep-status { font-size: var(--text-caption); color: var(--color-text-2); text-align: center; max-width: 60ch; margin: 0 auto; }
/* Hotspot ala TUAH (Pintu Digital di atas halaman) */
body.is-public .ep-hotspot { position: absolute; display: block; border: 2px solid transparent; border-radius: 6px; transition: background .15s, border-color .15s; }
body.is-public .ep-hotspot:hover, body.is-public .ep-hotspot:focus { background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-color: var(--color-accent); outline: none; }
body.is-public .ep-hotspot__dot { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); animation: eppulse 2s infinite; }
@keyframes eppulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { body.is-public .ep-hotspot__dot { animation: none; } }
/* Pintu Digital — kartu QR/tautan */
body.is-public .pintu { border-top: 1px solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-4); }
body.is-public .pintu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--space-3); margin-top: var(--space-3); }
body.is-public .pintu__card { display: flex; gap: var(--space-2); align-items: center; border: 1px solid var(--color-border); border-radius: 10px; padding: var(--space-2); background: var(--color-surface); text-decoration: none; color: var(--color-text); }
body.is-public .pintu__card:hover { border-color: var(--color-accent); }
body.is-public .pintu__qr { width: 64px; height: 64px; flex: none; border-radius: 6px; background: #fff; }
body.is-public .pintu__type { font-family: var(--font-ui); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent); font-weight: 700; }
body.is-public .pintu__label { font-weight: 600; font-size: var(--text-caption); line-height: 1.3; }

/* ══ TUAH Weekly — KORAN (auto-desain ala TUAH, PURWARUPA) ═════════════════ */
body.is-public .koran-shell { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-2); }
body.is-public .koran-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--space-3) 0; }
body.is-public .koran-tag { background: var(--color-danger); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
body.is-public .koran { background: #faf6ea; border: 1px solid #e6ddc7; box-shadow: 0 6px 30px rgba(60,44,20,.12); padding: clamp(20px,4vw,44px); color: #1a1712; font-family: var(--font-reading); }
/* Masthead */
body.is-public .koran__masthead { text-align: center; }
body.is-public .koran__city { font-family: var(--font-ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #6b5f48; text-align: left; border-bottom: 1px solid #cbbf9f; padding-bottom: 8px; }
body.is-public .koran__wordmark { font-family: var(--font-reading); font-weight: 800; font-size: clamp(52px,12vw,120px); line-height: .95; letter-spacing: .06em; margin: 10px 0 2px; }
body.is-public .koran__tagline { font-style: italic; font-size: clamp(15px,2.4vw,22px); color: #4a4032; }
body.is-public .koran__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font-family: var(--font-ui); font-size: 12px; color: #4a4032; border-top: 3px double #1a1712; border-bottom: 3px double #1a1712; padding: 7px 0; margin-top: 14px; }
/* Grid utama */
body.is-public .koran__grid { display: grid; grid-template-columns: 2.1fr 1fr; gap: clamp(18px,3vw,34px); margin-top: var(--space-4); }
body.is-public .koran__kicker { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
body.is-public .koran__lead-title { font-family: var(--font-reading); font-weight: 800; font-size: clamp(30px,4.6vw,52px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 8px; }
body.is-public .koran__dek { font-style: italic; font-size: clamp(15px,1.9vw,19px); color: #3c3428; line-height: 1.45; margin: 0 0 14px; }
body.is-public .koran__body { font-size: 16px; line-height: 1.62; text-align: justify; hyphens: auto; }
body.is-public .koran__body p { margin: 0 0 .7em; }
@media (min-width: 720px) { body.is-public .koran__body { column-count: 2; column-gap: clamp(18px,2.4vw,30px); } }
body.is-public .koran__body--drop > p:first-of-type::first-letter { float: left; font-family: var(--font-reading); font-weight: 800; font-size: 3.4em; line-height: .74; padding: 6px 8px 0 0; }
body.is-public .koran__more { display: inline-block; margin-top: 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--color-accent); text-decoration: none; }
/* Berita sekunder */
body.is-public .koran__secgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.4vw,28px); border-top: 3px double #1a1712; margin-top: var(--space-4); padding-top: var(--space-3); }
body.is-public .koran__sec { border-left: 1px solid #d8cdaf; padding-left: 14px; }
body.is-public .koran__secgrid > .koran__sec:first-child { border-left: none; padding-left: 0; }
body.is-public .koran__sec-title { font-family: var(--font-reading); font-weight: 700; font-size: clamp(17px,2vw,21px); line-height: 1.12; margin: 2px 0 6px; }
body.is-public .koran__sec-title a { color: #1a1712; text-decoration: none; }
body.is-public .koran__sec-title a:hover { color: var(--color-accent); }
body.is-public .koran__sec-dek { font-size: 14px; line-height: 1.5; color: #3c3428; margin: 0; }
/* TUAH Legacy (advertorial) */
body.is-public .koran__legacy { border: 1px solid #cbbf9f; background: #f3ecd8; border-radius: 6px; padding: 14px 16px; margin-top: var(--space-3); }
body.is-public .koran__legacy-tag { font-family: var(--font-ui); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
/* Rail kanan (kotak) */
body.is-public .koran__rail { display: flex; flex-direction: column; gap: var(--space-3); }
body.is-public .koran__box { border: 1.5px solid #1a1712; padding: 12px 14px; }
body.is-public .koran__box-title { font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid #1a1712; padding-bottom: 6px; margin-bottom: 8px; }
body.is-public .koran__box-list { margin: 0; padding-left: 0; list-style: none; }
body.is-public .koran__box-list li { position: relative; padding-left: 14px; margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
body.is-public .koran__box-list li::before { content: "—"; position: absolute; left: 0; color: var(--color-accent); }
body.is-public .koran__toc-list { margin: 0; padding: 0; list-style: none; }
body.is-public .koran__toc-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #cbbf9f; font-size: 14px; }
body.is-public .koran__toc-pg { font-family: var(--font-ui); font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { body.is-public .koran__grid, body.is-public .koran__secgrid { grid-template-columns: 1fr; } }

/* Foto di koran (lead besar, sekunder thumbnail, legacy) */
body.is-public .koran__lead-photo { margin: 0 0 14px; }
body.is-public .koran__lead-photo img { width: 100%; height: auto; display: block; border-radius: 2px; }
body.is-public .koran__sec-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: 8px; border-radius: 2px; }
body.is-public .koran__legacy-row { display: flex; gap: 14px; align-items: flex-start; }
body.is-public .koran__legacy-photo { width: 130px; height: 90px; object-fit: cover; flex: none; border-radius: 4px; }
@media (max-width: 520px) { body.is-public .koran__legacy-row { flex-direction: column; } body.is-public .koran__legacy-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; } }

/* ── Cetak / Simpan PDF: tiap halaman koran = satu lembar A4. UKURAN TETAP (pt)
   agar tak berubah bentuk (clamp(vw) menghitung ulang thd lebar kertas). ── */
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    html, body.is-public { background: #faf6ea !important; height: auto !important; min-height: 0 !important; }
    body.is-public .koran-shell, body.is-public main, body.is-public .rd-shell { min-height: 0 !important; height: auto !important; }
    body.is-public .rd-header, body.is-public .rd-foot, body.is-public .rd-footer, body.is-public footer,
    body.is-public .koran-toolbar, body.is-public .koran-extras, body.is-public .rd-support, body.is-public nav,
    body.is-public .cw__top, body.is-public .rd-shell__nav, body.is-public [data-print],
    body.is-public .cookie-consent, .cookie-consent { display: none !important; }
    body.is-public .koran-shell { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
    body.is-public .koran, body.is-public .koran--scroll { box-shadow: none !important; border: none !important; margin: 0 !important; max-width: 100% !important; padding: 0 !important; background: transparent !important; }
    body.is-public .koran-page {
        box-shadow: none !important; border: none !important; border-radius: 0 !important;
        margin: 0 !important; padding: 0 !important; background: #faf6ea !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
        break-before: page; break-inside: avoid;
    }
    body.is-public .koran-page:first-child { break-before: auto; }
    body.is-public .koran-page:last-child { break-after: avoid-page !important; margin-bottom: 0 !important; }
    body.is-public .koran-shell { padding-bottom: 0 !important; margin-bottom: 0 !important; }
    body.is-public .koran-extras { display: none !important; height: 0 !important; }
    body.is-public .koran__wordmark { font-size: 52pt !important; }
    body.is-public .koran__tagline { font-size: 12.5pt !important; }
    body.is-public .koran__meta { font-size: 8.5pt !important; }
    body.is-public .koran__lead-title { font-size: 26pt !important; }
    body.is-public .koran__dek { font-size: 11.5pt !important; }
    body.is-public .koran__body, body.is-public .koran__body--2 { font-size: 9.6pt !important; column-count: 2 !important; }
    body.is-public .koran__sec-title { font-size: 13pt !important; }
    body.is-public .koran__sec-dek { font-size: 9pt !important; }
    body.is-public .koran__box { font-size: 9pt !important; }
    body.is-public .koran-art__title { font-size: 19pt !important; }
    body.is-public .koran-page__strip { font-size: 8pt !important; }
    body.is-public .koran__grid { grid-template-columns: 2fr 1fr !important; gap: 10mm !important; }
    body.is-public .koran__box, body.is-public .koran__sec, body.is-public .koran__legacy,
    body.is-public .koran__lead-photo, body.is-public .koran__lead-title,
    body.is-public .koran-art, body.is-public .koran-art__photo, body.is-public figure { break-inside: avoid; }
    body.is-public .koran__more { display: none !important; }
    body.is-public img { max-width: 100% !important; height: auto !important; }
    body.is-public .koran-art__photo img { max-height: 88mm !important; object-fit: cover; }
    body.is-public .koran__lead-photo img { max-height: 70mm !important; object-fit: cover; }
}

/* ══ Koran GULIR broadsheet: tiap halaman = satu lembar koran besar ══════════ */
body.is-public .koran--scroll { background: transparent; border: none; box-shadow: none; padding: 0; }
body.is-public .koran-page { background: #faf6ea; }
body.is-public .koran--scroll .koran-page {
    border: 1px solid #e6ddc7; border-radius: 2px; box-shadow: 0 6px 30px rgba(60,44,20,.12);
    padding: clamp(20px,4vw,44px); margin: 0 auto clamp(22px,4vw,40px); scroll-margin-top: 84px;
}
body.is-public .koran-page__strip { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b5f48; border-bottom: 1px solid #cbbf9f; padding-bottom: 6px; margin-bottom: var(--space-3); }
body.is-public .koran-art { margin-bottom: var(--space-4); }
body.is-public .koran-art + .koran-art { border-top: 1px solid #d8cdaf; padding-top: var(--space-3); }
body.is-public .koran-art__title { font-family: var(--font-reading); font-weight: 800; font-size: clamp(22px,3.4vw,34px); line-height: 1.06; margin: 2px 0 8px; }
body.is-public .koran-art__title a { color: #1a1712; text-decoration: none; }
body.is-public .koran-art__title a:hover { color: var(--color-accent); }
body.is-public .koran-art__photo { margin: 0 0 12px; }
body.is-public .koran-art__photo img { width: 100%; height: auto; display: block; border-radius: 2px; }
@media (min-width: 720px) { body.is-public .koran__body--2 { column-count: 2; column-gap: clamp(18px,2.4vw,30px); } }
/* TOC bisa diklik → lompat ke halaman (dalam koran) */
body.is-public .koran__toc-list li { display: block; padding: 0; }
body.is-public .koran__toc-link { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; padding: 5px 0; }
body.is-public .koran__toc-link:hover, body.is-public .koran__toc-link:hover .koran__toc-pg { color: var(--color-accent); }