/* Buletin (flipbook). Ukuran halaman logis 560 x 792 px; isi diskalakan mengikuti ukuran halaman di layar (lihat js/buletin.js). */
.bk-root { --bk-green: #062f21; --bk-green-2: #09563c; --bk-green-3: #0c6a4a; --bk-gold: #c9a043; --bk-gold-l: #ecd9a0; --bk-ivory: #fffdf8; --bk-navy: #083768;
  --bk-w: 468px; --bk-h: 612px; }
.bk-stage { width: 100%; max-width: min(1040px, calc((100vh - 190px) * 1.414)); min-width: min(100%, 340px); margin: 0 auto; }
.bk-desk { position: relative; overflow: hidden; border-radius: 0; padding: clamp(28px, 4vw, 56px) clamp(8px, 2vw, 28px) clamp(24px, 3vw, 40px); width: 100vw; margin: -2.5rem calc(50% - 50vw) 0; background: radial-gradient(ellipse at 50% 45%, #0e7352 0%, #09563c 42%, #062f21 100%); box-shadow: inset 0 0 0 1px rgba(236, 217, 160, .28), inset 0 0 80px rgba(0, 0, 0, .35); }
.bk-desk::before { content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent 0 17px, #ecd9a0 17px 18px), repeating-linear-gradient(-45deg, transparent 0 17px, #ecd9a0 17px 18px); }
.bk-desk .bk-stage { position: relative; transition: transform .6s ease; }
@media (prefers-reduced-motion: reduce) { .bk-desk .bk-stage { transition: none; } }
.bk-book { margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(6, 47, 33, .28)); }
.bk-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 18px auto 0; }
.bk-controls[hidden], .bk-hint[hidden] { display: none; }
.bk-count { min-width: 150px; text-align: center; font-size: .875rem; color: #374151; font-variant-numeric: tabular-nums; }
.bk-btn { appearance: none; border: 1px solid #09563c; background: #09563c; color: #fff; font: inherit; font-weight: 600; font-size: .875rem; padding: .6rem 1.1rem; border-radius: 8px; cursor: pointer; }
.bk-btn:hover { background: #063e2b; }
.bk-btn:disabled { opacity: .45; cursor: default; }
.bk-btn-ghost { background: transparent; color: #09563c; }
.bk-btn-ghost:hover { background: #e9f3ee; }
.bk-btn:focus-visible { outline: 3px solid #c9a043; outline-offset: 2px; }
.bk-hint { text-align: center; font-size: .8125rem; color: #6b7280; margin: 10px 0 0; }
.bk-sources { display: none; }
.bk-ruler { position: absolute; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }
.bk-root:fullscreen { background: #062f21; display: flex; flex-direction: column; justify-content: center; padding: 12px; overflow: auto; }
.bk-root:fullscreen .bk-stage { max-width: min(1400px, calc((100vh - 90px) * 1.414)); }
.bk-root:fullscreen .bk-count, .bk-root:fullscreen .bk-hint { color: #ecd9a0; }

/* ── Halaman ── */
.bk-page { background: #062f21; overflow: hidden; }
.bk-sheet { position: absolute; left: 0; top: 0; width: 560px; height: 792px; transform-origin: 0 0; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(165deg, #062f21 0%, #09563c 62%, #0b6a4a 100%); color: #fff; font-family: var(--font-sans, system-ui, sans-serif); }
.bk-top { position: relative; height: 78px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 32px; border-bottom: 1px solid rgba(236, 217, 160, .35); }
.bk-top::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 210px; opacity: .55; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, transparent 0 9px, rgba(201, 160, 67, .55) 9px 10px), repeating-linear-gradient(-45deg, transparent 0 9px, rgba(201, 160, 67, .55) 9px 10px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }
.bk-logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.bk-brand { line-height: 1.2; min-width: 0; }
.bk-brand b { display: block; font-family: var(--font-heading, Georgia, serif); font-size: 19px; letter-spacing: .22em; color: var(--bk-gold-l); }
.bk-brand span { display: block; margin-top: 3px; font-size: 10.5px; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.bk-panel { flex: none; height: 640px; margin: 14px 32px 0; padding: 14px; background: var(--bk-ivory); color: #1f2937; border-radius: 6px; box-shadow: 0 0 0 1px rgba(236, 217, 160, .5); position: relative; }
.bk-foot { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; font-size: 11px; color: rgba(255, 255, 255, .7); }
.bk-foot .bk-run { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-foot .bk-no { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 50%; background: var(--bk-gold); color: #062a50; font-weight: 700; font-size: 12px; }
.bk-center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 30px; }

/* ── Isi (dipotong per halaman dengan kolom CSS) ── */
.bk-view { width: var(--bk-w, 468px); height: var(--bk-h, 612px); overflow: hidden; }
.bk-flow { width: 468px; height: 612px; column-width: 468px; column-gap: 0; column-fill: auto; font-family: var(--font-sans, system-ui, sans-serif); font-size: 14px; line-height: 1.62; color: #1f2937; }
.bk-flow p { margin: 0 0 9px; text-align: justify; hyphens: auto; orphans: 2; widows: 2; }
.bk-flow .bk-cat { display: inline-block; background: var(--bk-gold); color: #062a50; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.bk-flow .bk-title { margin: 0 0 8px; background: #063e2b; color: #fff; font-family: var(--font-heading, Georgia, serif); font-size: 21px; line-height: 1.3; font-weight: 700; padding: 11px 14px; border-radius: 4px; break-after: avoid; }
.bk-flow .bk-meta { margin: 0 0 10px; font-size: 11.5px; color: #6b7280; text-align: left; }
.bk-flow .bk-meta b { color: #083768; }
.bk-flow .bk-lead { font-weight: 600; color: #111827; }
.bk-flow .bk-h { margin: 12px 0 6px; font-family: var(--font-heading, Georgia, serif); font-size: 16px; line-height: 1.35; color: #083768; break-after: avoid; }
.bk-flow .bk-fig { margin: 10px 0; break-inside: avoid; }
.bk-flow .bk-fig img { display: block; width: 100%; height: auto; max-height: 250px; object-fit: contain; border-radius: 4px; background: #efe9d8; }
.bk-flow .bk-fig figcaption { margin-top: 4px; font-size: 11px; font-style: italic; color: #6b7280; text-align: center; }
.bk-flow .bk-rich ul, .bk-flow .bk-rich ol { margin: 0 0 9px 20px; }
.bk-flow .bk-rich ul { list-style: disc; } .bk-flow .bk-rich ol { list-style: decimal; }
.bk-flow .bk-rich blockquote { margin: 0 0 9px; padding-left: 12px; border-left: 3px solid var(--bk-gold); font-style: italic; }
.bk-flow .bk-rich a { color: #09563c; text-decoration: underline; }
.bk-flow .bk-end { margin-top: 12px; padding-top: 8px; border-top: 1px dashed #d6cfb8; font-size: 11px; color: #09563c; text-align: left; word-break: break-all; }

/* ── Daftar isi ── */
.bk-toc-h { margin: 0 0 8px; font-family: var(--font-heading, Georgia, serif); font-size: 24px; color: #063e2b; padding-bottom: 8px; border-bottom: 2px solid var(--bk-gold); }
.bk-toc { list-style: none; margin: 0; padding: 0; }
.bk-toc li { border-bottom: 1px solid #e8e1cc; }
.bk-toc a { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; color: #1f2937; text-decoration: none; cursor: pointer; }
.bk-toc .t { flex: 1; font-family: var(--font-heading, Georgia, serif); font-size: 14px; line-height: 1.35; }
.bk-toc .c { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #8a6a22; white-space: nowrap; }
.bk-toc .n { min-width: 24px; text-align: right; font-weight: 700; color: #09563c; font-variant-numeric: tabular-nums; }
.bk-toc a:hover .t { color: #09563c; text-decoration: underline; }

/* ── Sampul ── */
.bk-cover { background: linear-gradient(180deg, rgba(6, 47, 33, .72), rgba(6, 47, 33, .9) 55%, rgba(6, 30, 21, .96)), var(--bk-hero) center 30% / cover, #062f21; align-items: center; text-align: center; }
.bk-cover::before { content: ""; position: absolute; inset: 22px; border: 2px solid var(--bk-gold); border-radius: 4px; pointer-events: none; }
.bk-cover::after { content: ""; position: absolute; inset: 30px; border: 1px solid rgba(236, 217, 160, .55); pointer-events: none; }
.bk-lattice { flex: none; width: 100%; height: 64px; margin-top: 44px; opacity: .6;
  background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgba(201, 160, 67, .8) 11px 12px), repeating-linear-gradient(-45deg, transparent 0 11px, rgba(201, 160, 67, .8) 11px 12px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.bk-lattice-b { margin: auto 0 44px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.bk-cover-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 56px; }
.bk-cover-logo { width: 104px; height: 104px; object-fit: contain; padding: 10px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 2px solid var(--bk-gold); }
.bk-cover-kicker { margin: 18px 0 4px; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--bk-gold-l); }
.bk-cover-title { margin: 0; font-family: var(--font-heading, Georgia, serif); font-size: 64px; line-height: 1.05; letter-spacing: .14em; font-weight: 700; padding-left: .14em;
  background: linear-gradient(180deg, #f7e7b0 0%, #c9a043 60%, #a87a1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bk-orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0; width: 260px; }
.bk-orn::before, .bk-orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--bk-gold)); }
.bk-orn::after { background: linear-gradient(to left, transparent, var(--bk-gold)); }
.bk-orn i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--bk-gold); }
.bk-orn-dark { margin: 0 auto 14px; }
.bk-cover-name { margin: 0; font-family: var(--font-heading, Georgia, serif); font-size: 19px; line-height: 1.4; color: #fff; max-width: 400px; }
.bk-cover-sub { margin: 8px 0 22px; font-size: 14px; color: rgba(255, 255, 255, .8); letter-spacing: .04em; }
.bk-edition { display: inline-block; padding: 7px 18px; border: 1px solid var(--bk-gold); border-radius: 999px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-gold-l); background: rgba(6, 47, 33, .6); }
.bk-cover-motto { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; font-size: 12px; font-style: italic; color: rgba(255, 255, 255, .75); }
.bk-back .bk-cover-inner { justify-content: center; }
.bk-back-title { margin: 20px 0 0; font-family: var(--font-heading, Georgia, serif); font-size: 26px; line-height: 1.3; color: var(--bk-gold-l); }
.bk-back-text { margin: 0 0 16px; max-width: 360px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.bk-back-url { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.bk-back-addr { margin: 0 0 20px; max-width: 340px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.bk-filler-title { margin: 0; font-family: var(--font-heading, Georgia, serif); font-size: 22px; color: #063e2b; }
.bk-filler-text { margin: 8px 0 0; font-size: 13px; font-style: italic; color: #6b7280; }

/* ── Mode kompak (layar sempit): halaman logis 380 x 538 agar huruf tetap terbaca saat diskalakan ke lebar ponsel ── */
.bk-sheet.bk-compact { width: 380px; height: 538px; }
.bk-compact .bk-top { height: 54px; padding: 0 18px; gap: 9px; }
.bk-compact .bk-top::after { width: 120px; }
.bk-compact .bk-logo { width: 32px; height: 32px; }
.bk-compact .bk-brand b { font-size: 14px; }
.bk-compact .bk-brand span { font-size: 8.5px; }
.bk-compact .bk-panel { height: 434px; margin: 10px 18px 0; padding: 10px; }
.bk-compact .bk-foot { padding: 0 18px; font-size: 9px; }
.bk-compact .bk-foot .bk-no { min-width: 24px; height: 24px; font-size: 10px; }
.bk-compact .bk-foot .bk-run { max-width: 230px; }
.bk-compact .bk-view, .bk-compact .bk-flow { width: 324px; height: 414px; }
.bk-compact .bk-flow { column-width: 324px; font-size: 12.5px; line-height: 1.58; }
.bk-compact .bk-flow p { margin-bottom: 7px; }
.bk-compact .bk-flow .bk-cat { font-size: 9px; padding: 2px 8px; margin-bottom: 6px; }
.bk-compact .bk-flow .bk-title { font-size: 17px; padding: 9px 11px; margin-bottom: 6px; }
.bk-compact .bk-flow .bk-meta { font-size: 10px; margin-bottom: 8px; }
.bk-compact .bk-flow .bk-h { font-size: 14px; margin: 9px 0 5px; }
.bk-compact .bk-flow .bk-fig { margin: 8px 0; }
.bk-compact .bk-flow .bk-fig img { max-height: 170px; }
.bk-compact .bk-flow .bk-fig figcaption { font-size: 10px; }
.bk-compact .bk-flow .bk-end { font-size: 9.5px; margin-top: 9px; padding-top: 6px; }
.bk-compact .bk-toc-h { font-size: 19px; margin-bottom: 6px; padding-bottom: 6px; }
.bk-compact .bk-toc a { padding: 7px 1px; gap: 8px; }
.bk-compact .bk-toc .t { font-size: 12.5px; }
.bk-compact .bk-toc .c { font-size: 8.5px; }
.bk-compact .bk-filler-title { font-size: 18px; } .bk-compact .bk-filler-text { font-size: 11px; }

@media (max-width: 640px) { .bk-stage { max-width: 100%; } .bk-hint { padding: 0 8px; } .bk-count { order: -1; flex-basis: 100%; } .bk-btn { padding: .55rem .85rem; font-size: .8125rem; } .bk-controls { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .bk-book { filter: none; } }

.bk-toc-note { margin-top: 26px; padding: 16px 16px 14px; border-left: 3px solid var(--bk-gold); background: #f6f0de; border-radius: 0 6px 6px 0; }
.bk-toc-note b { display: block; margin-bottom: 6px; font-family: var(--font-heading, Georgia, serif); font-size: 15px; color: #063e2b; }
.bk-toc-note p { margin: 0; font-size: 12.5px; line-height: 1.7; color: #4b5563; }
.bk-toc-orn { margin-top: 26px; }
.bk-compact .bk-toc-note { margin-top: 16px; padding: 12px 12px 10px; } .bk-compact .bk-toc-note b { font-size: 13px; } .bk-compact .bk-toc-note p { font-size: 11px; line-height: 1.6; }
@media (min-width: 1024px) { .bk-desk { margin-top: -3.5rem; } }
@media (max-width: 640px) { .bk-desk { padding: 18px 4px 22px; } }
.bk-desk .bk-controls { position: relative; }
.bk-desk .bk-count, .bk-desk .bk-hint { position: relative; color: var(--bk-gold-l); }
.bk-desk .bk-btn { background: var(--bk-gold); border-color: var(--bk-gold); color: #062a50; }
.bk-desk .bk-btn:hover { background: var(--bk-gold-l); }
.bk-desk .bk-btn:disabled { opacity: .45; }
.bk-desk .bk-btn-ghost { background: transparent; color: var(--bk-gold-l); border-color: rgba(236, 217, 160, .6); }
.bk-desk .bk-btn-ghost:hover { background: rgba(236, 217, 160, .14); }
.bk-root.bk-desk:fullscreen { width: auto; margin: 0; }
body { overflow-x: clip; }

.bk-shelf { position: relative; margin: 34px auto 0; max-width: 1040px; text-align: center; }
.bk-shelf h2 { margin: 0 0 14px; font-family: var(--font-heading, Georgia, serif); font-size: 1.05rem; font-weight: 700; color: var(--bk-gold-l); letter-spacing: .04em; }
.bk-shelf ul { list-style: none; margin: 0; padding: 4px 4px 10px; display: flex; gap: 14px; justify-content: center; overflow-x: auto; scroll-snap-type: x proximity; }
.bk-shelf li { flex: none; scroll-snap-align: center; }
.bk-ed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 118px; height: 156px; padding: 12px 8px; border-radius: 6px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, rgba(6, 47, 33, .8), rgba(6, 30, 21, .96)), var(--bk-hero, none) center / cover, #062f21; box-shadow: 0 0 0 1px rgba(236, 217, 160, .4), 0 8px 16px rgba(0, 0, 0, .35); transition: transform .2s, box-shadow .2s; }
.bk-ed:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--bk-gold), 0 12px 20px rgba(0, 0, 0, .4); }
.bk-ed.is-current { box-shadow: 0 0 0 2px var(--bk-gold), 0 8px 16px rgba(0, 0, 0, .35); }
.bk-ed-k { font-size: 9px; letter-spacing: .28em; color: var(--bk-gold-l); }
.bk-ed-m { margin-top: 8px; font-family: var(--font-heading, Georgia, serif); font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--bk-gold-l); }
.bk-ed-y { font-size: 12px; letter-spacing: .12em; color: #fff; }
.bk-ed-n { margin-top: 10px; padding: 3px 9px; border: 1px solid var(--bk-gold); border-radius: 999px; font-size: 10px; color: var(--bk-gold-l); }
.bk-ed.is-current .bk-ed-n { background: var(--bk-gold); color: #062a50; }
@media (max-width: 640px) { .bk-shelf ul { justify-content: flex-start; justify-content: safe center; gap: 10px; } .bk-ed { width: 98px; height: 134px; padding: 10px 4px; } .bk-ed-m { font-size: 15.5px; } }

/* Desktop lebar: daftar edisi berjajar ke bawah di kiri atas meja; buku berada di ruang sisanya. */
@media (min-width: 1100px) {
  .bk-desk.has-shelf { padding-left: 180px; }
  .bk-desk.has-shelf .bk-shelf { position: absolute; top: clamp(28px, 4vw, 56px); left: 24px; width: 132px; margin: 0; text-align: left; }
  .bk-desk.has-shelf .bk-shelf h2 { font-size: .95rem; margin-bottom: 12px; }
  .bk-desk.has-shelf .bk-shelf ul { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; overflow-x: visible; overflow-y: auto; max-height: 640px; padding: 4px 6px 10px 4px; scrollbar-width: thin; }
  .bk-desk.has-shelf .bk-ed { width: 120px; height: 150px; }
}
.bk-root.bk-desk.has-shelf:fullscreen { padding-left: 12px; }
.bk-root.bk-desk.has-shelf:fullscreen .bk-shelf { display: none; }

/* Judul sampul bahasa Inggris ("NEWSLETTER") lebih panjang dari "BULETIN": kecilkan agar tidak terpotong. */
html[lang="en"] .bk-cover-title { font-size: 44px; letter-spacing: .1em; padding-left: .1em; }

/* Tabel, kode, subskrip/superskrip dari editor teks kaya di halaman buku. */
.bk-flow .bk-rich table { width: 100%; margin: 0 0 9px; border-collapse: collapse; font-size: .92em; }
.bk-flow .bk-rich th, .bk-flow .bk-rich td { border: 1px solid rgba(0, 0, 0, .25); padding: 3px 6px; text-align: left; vertical-align: top; }
.bk-flow .bk-rich pre { margin: 0 0 9px; padding: 6px 8px; overflow: hidden; white-space: pre-wrap; background: rgba(0, 0, 0, .06); font: .88em/1.5 ui-monospace, Menlo, Consolas, monospace; }
.bk-flow .bk-rich s { text-decoration: line-through; }
.bk-flow .bk-rich sub, .bk-flow .bk-rich sup { font-size: .75em; line-height: 0; }