/* =========================================================
   DASHBOARD PUBLIK — Tracer Study SMA Kalsel
   ========================================================= */
:root {
  --pb-navy: #0b1533;
  --pb-navy-2: #0f1f4d;
  --pb-blue: #2563eb;
  --pb-teal: #0ea5a4;
  --pb-amber: #f59e0b;
  --pb-grad: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #0ea5a4 100%);
  --pb-radius: 1.25rem;
  --pb-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.18);
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body.pb { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #f5f7fb; color: #0f172a; letter-spacing: -.005em; }
.pb .fw-800 { font-weight: 800; }
.pb .text-grad { background: linear-gradient(90deg, #93c5fd, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Navbar ---------- */
.pb-nav { position: fixed; inset: 0 0 auto 0; z-index: 1030; transition: all .25s ease; padding: .9rem 0; }
.pb-nav .brand { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.pb-nav .brand img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: .75rem; padding: 3px; }
.pb-nav .brand small { display: block; font-size: .7rem; opacity: .75; font-weight: 500; }
.pb-nav .nav-link { color: rgba(255,255,255,.8); font-weight: 600; font-size: .9rem; padding: .45rem .85rem !important; border-radius: .6rem; }
.pb-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.pb-nav.scrolled { background: rgba(11,21,51,.88); backdrop-filter: saturate(180%) blur(12px); padding: .55rem 0; box-shadow: 0 10px 30px -15px rgba(0,0,0,.5); }
.pb-nav .navbar-toggler { border: 0; color: #fff; font-size: 1.5rem; }
.btn-login { background: #fff; color: #1e3a8a; font-weight: 700; border-radius: .8rem; padding: .5rem 1.15rem; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.btn-login:hover { background: #eff6ff; color: #1e3a8a; transform: translateY(-1px); }
@media (max-width: 991.98px) {
  .pb-nav .navbar-collapse { background: rgba(11,21,51,.97); border-radius: 1rem; padding: .75rem; margin-top: .6rem; }
}

/* ---------- Hero ---------- */
.pb-hero { position: relative; background: radial-gradient(1200px 600px at 85% -10%, #1d4ed8 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #0d9488 0%, transparent 55%), var(--pb-navy); color: #fff; padding: 8.5rem 0 9rem; overflow: hidden; }
.pb-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 0, transparent 70%); }
.pb-hero > .container { position: relative; z-index: 1; }
.pb-hero h1 { font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.035em; line-height: 1.08; }
.pb-hero .lead { color: rgba(255,255,255,.75); font-size: 1.05rem; max-width: 600px; }
.pb-pill { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 50rem; padding: .4rem .95rem; font-size: .8rem; font-weight: 600; backdrop-filter: blur(6px); }
.pb-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.08); } }

.pb-filter { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; padding: .45rem; display: flex; flex-wrap: wrap; gap: .45rem; backdrop-filter: blur(8px); max-width: 560px; }
.pb-filter .form-select { background-color: rgba(255,255,255,.95); border: 0; border-radius: .7rem; font-weight: 600; font-size: .88rem; min-width: 160px; flex: 1; }

.glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 1.5rem; backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.ring { --p: 0; width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#5eead4 calc(var(--p) * 1%), rgba(255,255,255,.12) 0); position: relative; margin: 0 auto; }
.ring::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: var(--pb-navy-2); }
.ring > div { position: relative; text-align: center; }
.ring .big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.mini-stat { background: rgba(255,255,255,.07); border-radius: 1rem; padding: .8rem; }
.mini-stat .v { font-weight: 800; font-size: 1.25rem; }
.mini-stat .l { font-size: .74rem; opacity: .7; }

/* ---------- KPI ---------- */
.pb-kpi-wrap { margin-top: -5.5rem; position: relative; z-index: 2; }
.pb-kpi { background: #fff; border-radius: var(--pb-radius); padding: 1.3rem; box-shadow: var(--pb-shadow); height: 100%; border: 1px solid rgba(15,23,42,.05); transition: transform .2s ease; position: relative; overflow: hidden; }
.pb-kpi:hover { transform: translateY(-4px); }
.pb-kpi .ic { width: 50px; height: 50px; border-radius: 1rem; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: .9rem; }
.pb-kpi .v { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pb-kpi .l { font-weight: 700; font-size: .88rem; margin-top: .35rem; }
.pb-kpi .s { font-size: .78rem; color: #64748b; }
.pb-kpi .bar { position: absolute; left: 0; bottom: 0; height: 4px; }

/* ---------- Section ---------- */
.pb-section { padding: 4.5rem 0; }
.pb-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pb-blue); background: rgba(37,99,235,.08); border-radius: 50rem; padding: .35rem .85rem; }
.pb-title { font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.6rem, 3vw, 2.3rem); margin: .8rem 0 .5rem; }
.pb-sub { color: #64748b; max-width: 640px; }
.pb-card { background: #fff; border-radius: var(--pb-radius); box-shadow: var(--pb-shadow); border: 1px solid rgba(15,23,42,.05); height: 100%; }
.pb-card .hd { padding: 1.15rem 1.35rem .3rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pb-card .hd h3 { font-size: 1rem; font-weight: 800; margin: 0; }
.pb-card .hd .chip { font-size: .72rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 50rem; padding: .25rem .65rem; }
.pb-card .bd { padding: 1rem 1.35rem 1.35rem; }
.chart { position: relative; height: 290px; }
.chart.sm { height: 230px; }

.legend-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px dashed #e2e8f0; font-size: .87rem; }
.legend-row:last-child { border-bottom: 0; }
.legend-row .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .55rem; }

.rank-item { display: grid; grid-template-columns: 34px 1fr auto; gap: .75rem; align-items: center; padding: .6rem 0; }
.rank-item .no { width: 34px; height: 34px; border-radius: .7rem; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: #f1f5f9; color: #475569; }
.rank-item:nth-child(1) .no { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.rank-item:nth-child(2) .no { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.rank-item:nth-child(3) .no { background: linear-gradient(135deg, #fed7aa, #ea580c); color: #fff; }
.rank-item .nm { font-weight: 700; font-size: .9rem; }
.rank-item .meta { font-size: .74rem; color: #64748b; }
.rank-item .track { height: 6px; border-radius: 50rem; background: #f1f5f9; margin-top: .35rem; overflow: hidden; }
.rank-item .track > span { display: block; height: 100%; border-radius: 50rem; background: var(--pb-grad); }
.rank-item .n { font-weight: 800; font-size: 1.05rem; text-align: right; }
.rank-item .n small { display: block; font-size: .7rem; color: #64748b; font-weight: 600; }

.split-card { border-radius: 1rem; padding: 1rem 1.1rem; color: #fff; height: 100%; position: relative; overflow: hidden; }
.split-card .v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }
.split-card .l { font-size: .8rem; opacity: .85; font-weight: 600; }
.split-card i { position: absolute; right: -8px; bottom: -14px; font-size: 4.5rem; opacity: .15; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag-cloud span { background: #eff6ff; color: #1d4ed8; border-radius: 50rem; padding: .4rem .85rem; font-weight: 600; font-size: .82rem; }
.tag-cloud span b { background: #fff; border-radius: 50rem; padding: 0 .45rem; margin-left: .35rem; font-size: .72rem; }
.tag-cloud.green span { background: #f0fdf4; color: #15803d; }

/* Wilayah */
.kab-card { background: #fff; border-radius: 1.1rem; padding: 1.1rem; box-shadow: var(--pb-shadow); border: 1px solid rgba(15,23,42,.05); height: 100%; transition: transform .2s; }
.kab-card:hover { transform: translateY(-3px); }
.kab-card .nm { font-weight: 800; font-size: .95rem; }
.kab-card .big { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.kab-card .prog { height: 7px; border-radius: 50rem; background: #f1f5f9; overflow: hidden; display: flex; }
.kab-card .prog span { display: block; height: 100%; }

/* Tabel sekolah */
.pb-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; padding: .85rem .75rem; }
.pb-table td { padding: .8rem .75rem; vertical-align: middle; border-color: #f1f5f9; }
.pb-table tbody tr:hover { background: #f8fafc; }
.pct-pill { display: inline-block; min-width: 62px; text-align: center; font-weight: 800; font-size: .8rem; border-radius: 50rem; padding: .3rem .6rem; }

/* Alur */
.step { background: #fff; border-radius: 1.1rem; padding: 1.4rem; box-shadow: var(--pb-shadow); height: 100%; position: relative; }
.step .num { width: 44px; height: 44px; border-radius: .9rem; background: var(--pb-grad); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: .9rem; }
.step h4 { font-size: 1rem; font-weight: 800; }
.step p { font-size: .86rem; color: #64748b; margin: 0; }

/* CTA & footer */
.pb-cta { background: var(--pb-grad); border-radius: 1.75rem; color: #fff; padding: 2.75rem; position: relative; overflow: hidden; }
.pb-cta::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.1); }
.pb-footer { background: var(--pb-navy); color: rgba(255,255,255,.7); padding: 3.5rem 0 1.5rem; font-size: .88rem; }
.pb-footer h6 { color: #fff; font-weight: 800; }
.pb-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.pb-footer a:hover { color: #fff; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.empty-pub { text-align: center; padding: 3rem 1rem; color: #64748b; }
.empty-pub i { font-size: 2.6rem; opacity: .35; }

@media (max-width: 767.98px) {
  .pb-hero { padding: 7rem 0 7.5rem; }
  .pb-section { padding: 3rem 0; }
  .pb-kpi .v { font-size: 1.55rem; }
  .ring { width: 170px; height: 170px; }
  .ring .big { font-size: 2.1rem; }
  .pb-cta { padding: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
.min-w-0 { min-width: 0; }