/* Langganan Riset: di atas sc.css + beginner-circle/bc.css. */
.lr-hero-fig { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; transform: rotate(-1.5deg); }
.lr-hero-fig img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #0A3D1F; }
.lr-hero-fig img:last-child { margin-top: 36px; }
@media (max-width: 960px) { .lr-hero-fig { transform: none; max-width: 520px; } }

.lr-isi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .lr-isi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lr-isi { grid-template-columns: minmax(0, 1fr); } }
.lr-isi li { flex-direction: column; gap: 10px; }

.lr-gal { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.lr-gal figure { margin: 0; flex: 0 0 min(260px, 70%); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.lr-gal img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); background: #0A3D1F; }
.lr-gal figcaption { font-size: 13.5px; color: var(--muted); }

.lr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .lr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lr-cards { grid-template-columns: minmax(0, 1fr); } }
.lr-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: var(--body); }
.lr-card:hover { border-color: var(--accent); }
.lr-card b { color: var(--ink); font-size: 17px; }
.lr-t { font-weight: 700; font-size: 13px; color: var(--accent); letter-spacing: .06em; }
.lr-read { margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--accent); }

.lr-list { list-style: none; margin: 0; padding: 0; }
.lr-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px 120px; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line); }
.lr-row:first-child { border-top: 0; }
.lr-tgl { font-size: 13.5px; color: var(--muted); }
.lr-koin { display: flex; align-items: baseline; gap: 10px; min-width: 0; text-decoration: none; color: var(--body); }
.lr-koin b { color: var(--ink); }
.lr-koin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-koin:hover b { color: var(--accent); }
.lr-row .pill { justify-self: start; }
.lr-row > :last-child { justify-self: end; }
.lr-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.lr-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 720px) {
  .lr-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "koin aksi" "tgl pill"; gap: 6px 12px; padding: 12px 16px; }
  .lr-koin { grid-area: koin; } .lr-tgl { grid-area: tgl; } .lr-row .pill { grid-area: pill; justify-self: end; } .lr-row > :last-child { grid-area: aksi; }
}

.lr-price-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .lr-price-wrap { grid-template-columns: minmax(0, 1fr); } }
.lr-price .bc-price b { font-size: 36px; }
.lr-steps { grid-template-columns: minmax(0, 1fr); }
.lr-jenis { color: var(--accent); background: var(--accent-soft); }
.lr-jenis::before { display: none; }

/* logo koin */
.lr-koin { align-items: center; }
.lr-koin .logo { width: 30px; height: 30px; font-size: 10px; }
.lr-star { --c: var(--cta); color: var(--cta-ink); font-size: 14px !important; }
.lr-card-top { display: flex; align-items: center; gap: 10px; }
.logo-md { width: 44px; height: 44px; font-size: 13px; }

/* ---------- laporan tematik ---------- */
.tm-hero { max-width: 760px; }
.tm-isi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tm-card .card-in { gap: 10px; }
.tm-card h3 { font-size: 20px; }
.tm-tema { align-self: flex-start; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, currentColor 38%, transparent); }
.tm-segera { font-size: 14px; font-weight: 600; color: var(--muted); }
.lr-tm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px; }
.lr-tm > div { max-width: 64ch; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 560px) { .tm-grid { grid-template-columns: 1fr; } }
.tm-isi { margin-top: 18px; } #laporan h2 { margin-bottom: 18px; }