/* ===================== SIKRS - Halaman Publik ===================== */
body.pub { background: #fffbfd; color: var(--ink, #3d3550); }

.pub-navbar { background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid #f1e8f0; }
.pub-navbar .nav-link { font-weight: 700; color: var(--ink, #3d3550); padding: .5rem .8rem; }
.pub-navbar .nav-link.active, .pub-navbar .nav-link:hover { color: #c3548c; }

/* ---------- Hero ---------- */
.pub-hero { background: linear-gradient(150deg,#fde7ee 0%, #f4ecfb 55%, #e6f4f9 100%); overflow: hidden; position: relative; }
.pub-hero .hero-shape { position:absolute; border-radius:50%; opacity:.35; filter: blur(2px); }
.pub-hero h1 { font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.02em; }
.pub-hero .lead { color: #6a6280; font-size: 1.08rem; }
.pub-badge-pill { background:#fff; border:1px solid #f1e0ea; border-radius:999px; padding:.35rem .9rem; font-weight:700; font-size:.8rem; color:#c3548c; display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- Cards ---------- */
.pub-card { background:#fff; border:1px solid #f1eaf6; border-radius:20px; padding:1.5rem; height:100%; transition:.2s; }
.pub-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(150,110,160,.14); }
.pub-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:22px; color:#fff; margin-bottom:.9rem; }

/* ---------- Section titles ---------- */
.pub-eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; font-weight:800; color:#c3548c; }
.pub-section-title { font-weight: 900; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }

/* ---------- Edukasi accordion ---------- */
.pub-accordion .accordion-item { border:1px solid #f1eaf6; border-radius:16px !important; overflow:hidden; margin-bottom: .75rem; }
.pub-accordion .accordion-button { font-weight:800; background:#fff; }
.pub-accordion .accordion-button:not(.collapsed) { color:#c3548c; background:#fdf3f7; box-shadow:none; }
.pub-accordion .accordion-button:focus { box-shadow:none; }

/* ---------- Siklus visual (circular) ---------- */
.siklus-wrap { display:flex; align-items:center; justify-content:center; }
.siklus-wrap svg { max-width: 100%; height:auto; }
.fase-legend { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:center; margin-top:1rem; }
.fase-legend .dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:.4rem; }

/* ---------- Contoh siklus timeline (statis, contoh 28 hari) ---------- */
.contoh-timeline { display:flex; border-radius:14px; overflow:hidden; font-weight:700; font-size:.8rem; color:#fff; text-align:center; }
.contoh-timeline > div { padding:.9rem .3rem; }

/* ---------- Kalkulator: form ---------- */
.calc-card { background:#fff; border:1px solid #f1eaf6; border-radius:22px; box-shadow: 0 14px 34px rgba(150,110,160,.10); }
.step-badge { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#f8b4c8,#c3b1e1); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; }

/* ---------- Hasil: ringkasan ---------- */
.ringkasan-item { background:#fdf6f9; border-radius:14px; padding:.9rem 1rem; height:100%; }
.ringkasan-item .lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#9b93ad; font-weight:700; }
.ringkasan-item .val { font-weight:800; font-size:1.02rem; }

/* ---------- Timeline / bar graph interaktif ---------- */
.tl-outer { overflow-x:auto; padding: 20px 2px .5rem; -webkit-overflow-scrolling:touch; }
.tl-bar { display:flex; min-width: 640px; border-radius: 14px; overflow:hidden; height: 58px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); margin-bottom: 26px; }
.tl-seg { position:relative; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.72rem; cursor:pointer; transition:.15s; text-align:center; padding:0 4px; }
.tl-seg:hover, .tl-seg.active { filter:brightness(1.1); transform: scaleY(1.08); box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index:1; }
.tl-day { position:absolute; bottom:-22px; left:4px; font-size:.62rem; color:#9b93ad; white-space:nowrap; font-weight:700; }
.tl-today { position:absolute; top:-16px; transform: translateX(-50%); color:#3d3550; font-size:1rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.tl-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:2.1rem; }
.tl-legend span.dot { width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:.35rem; }

.fase-detail-card { border:1px solid #f1eaf6; border-radius:16px; padding:1.1rem 1.2rem; background:#fff; display:none; }
.fase-detail-card.show { display:block; animation: fadein .18s ease; }
@keyframes fadein { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform:none; } }

.rekom-list li, .kesimpulan-box { }
.rekom-list li { padding:.4rem 0; }

/* ---------- Print / PDF ---------- */
@media print {
  .no-print, .pub-navbar, .pub-footer, .btn { display:none !important; }
  body.pub { background:#fff !important; }
  .calc-card, .pub-card { box-shadow:none !important; border:1px solid #ddd !important; }
  .tl-outer { overflow:visible !important; }
  .tl-bar { min-width: 0 !important; }
  a[href]:after { content:"" !important; }
}

@media (max-width: 576px) {
  .pub-hero h1 { font-size: 1.9rem; }
  .contoh-timeline { flex-direction: column; }
}