/* ══════════════════════════════════════════════════════════════
   REPORT PAGE — data report dengan bar chart (CSS murni, no lib)
   Dipakai: report indikator sains Indonesia. Prefix: .rpt-
   ══════════════════════════════════════════════════════════════ */

:root {
  --rpt-ink: #0b1f3a;
  --rpt-ink-2: #16407a;
  --rpt-muted: #5b6b82;
  --rpt-line: #e6ebf2;
  --rpt-crit: #e04b4b;      /* Kritis */
  --rpt-behind: #e0982b;    /* Tertinggal */
  --rpt-grow: #2fa96f;      /* Berkembang */
}

.rpt-main { background: #fff; color: var(--rpt-ink); }

/* ── HERO ── */
.rpt-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 460px at 88% -10%, rgba(56,132,255,0.22), transparent 60%),
    linear-gradient(135deg, var(--rpt-ink) 0%, var(--rpt-ink-2) 100%);
  color: #fff; padding: 56px 0 60px;
}
.rpt-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(700px 380px at 85% 0%, #000, transparent 75%);
}
.rpt-hero-inner { position: relative; max-width: 900px; margin: 0 auto; padding: 0 20px; }
.rpt-breadcrumb { font-size:13px; color:rgba(255,255,255,0.6); list-style:none; display:flex; gap:8px; padding:0; margin:0 0 20px; flex-wrap:wrap; }
.rpt-breadcrumb a { color:rgba(255,255,255,0.8); text-decoration:none; }
.rpt-breadcrumb a:hover { color:#fff; }
.rpt-breadcrumb .sep { color:rgba(255,255,255,0.35); }
.rpt-cat { display:inline-block; padding:5px 14px; border-radius:999px; background:#3884ff; color:#fff; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:16px; }
.rpt-hero h1 { font-family:'DM Serif Display',serif; font-size:38px; line-height:1.16; margin-bottom:14px; }
.rpt-hero p { font-size:16.5px; line-height:1.65; color:rgba(255,255,255,0.82); max-width:720px; margin:0; }
.rpt-hero-meta { margin-top:18px; font-size:13.5px; color:rgba(255,255,255,0.7); }

/* ── SUMMARY STAT BAND ── */
.rpt-summary { background:#f6f9fc; border-bottom:1px solid var(--rpt-line); padding:36px 0; }
.rpt-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:900px; margin:0 auto; padding:0 20px; }
.rpt-stat { background:#fff; border:1px solid var(--rpt-line); border-radius:16px; padding:24px; text-align:center; }
.rpt-stat-num { font-family:'DM Serif Display',serif; font-size:40px; line-height:1; color:var(--rpt-ink); }
.rpt-stat-num small { font-size:18px; color:var(--rpt-muted); }
.rpt-stat-label { font-size:13.5px; color:var(--rpt-muted); margin-top:8px; line-height:1.4; }

/* ── BODY ── */
.rpt-body { max-width:900px; margin:0 auto; padding:52px 20px 20px; }
.rpt-intro { font-size:17px; line-height:1.75; color:#374151; margin-bottom:14px; }
.rpt-section-title { font-family:'DM Serif Display',serif; font-size:26px; color:var(--rpt-ink); margin:36px 0 6px; }
.rpt-section-sub { font-size:14.5px; color:var(--rpt-muted); margin-bottom:26px; }

/* legend */
.rpt-legend { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:24px; font-size:13px; color:var(--rpt-muted); }
.rpt-legend span { display:inline-flex; align-items:center; gap:6px; }
.rpt-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* ── INDICATOR ROWS ── */
.rpt-ind { padding:18px 0; border-bottom:1px solid var(--rpt-line); }
.rpt-ind-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.rpt-ind-name { font-size:16px; font-weight:600; color:var(--rpt-ink); }
.rpt-ind-name .rpt-no { color:var(--rpt-muted); font-weight:700; margin-right:8px; }
.rpt-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:3px 10px; border-radius:999px; color:#fff; white-space:nowrap; }
.rpt-badge--crit { background:var(--rpt-crit); }
.rpt-badge--behind { background:var(--rpt-behind); }
.rpt-badge--grow { background:var(--rpt-grow); }

.rpt-bar-wrap { display:flex; align-items:center; gap:12px; }
.rpt-bar { flex:1; height:20px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.rpt-bar-fill { height:100%; border-radius:999px; min-width:2px; transition:width .6s ease; }
.rpt-bar-fill--crit { background:linear-gradient(90deg,#f0716f,var(--rpt-crit)); }
.rpt-bar-fill--behind { background:linear-gradient(90deg,#f0b34e,var(--rpt-behind)); }
.rpt-bar-fill--grow { background:linear-gradient(90deg,#57c48d,var(--rpt-grow)); }
.rpt-bar-score { font-size:14px; font-weight:700; color:var(--rpt-ink); width:46px; text-align:right; }

.rpt-ind-vals { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--rpt-muted); }
.rpt-ind-vals b { color:var(--rpt-ink); }
.rpt-ind-insight { font-size:14px; line-height:1.6; color:#4b5563; margin-top:8px; }

/* ── SOURCE + CTA ── */
.rpt-source {
  max-width:900px; margin:30px auto 0; padding:18px 22px;
  border-left:4px solid #3884ff; background:#f6f9fc; border-radius:0 10px 10px 0;
  font-size:14px; color:var(--rpt-muted);
}
.rpt-source strong { color:var(--rpt-ink); }
.rpt-note { max-width:900px; margin:14px auto 0; padding:0 20px; font-size:13px; color:var(--rpt-muted); font-style:italic; }
.rpt-back { max-width:900px; margin:0 auto; padding:26px 20px 72px; }
.rpt-back a {
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px;
  border:1px solid var(--rpt-line); border-radius:999px; color:var(--rpt-ink);
  font-weight:600; text-decoration:none; transition:border-color .2s ease, background .2s ease;
}
.rpt-back a:hover { border-color:var(--rpt-ink-2); background:#f6f9fc; }

/* ── RESPONSIVE ── */
@media (max-width:700px){
  .rpt-summary-grid { grid-template-columns:1fr; }
  .rpt-hero h1 { font-size:29px; }
  .rpt-body { padding:40px 20px 16px; }
  .rpt-bar-wrap { flex-wrap:wrap; }
}