:root{
    --bs-primary:#dc2626;
    --bs-primary-rgb:220,38,38;
    --red-soft-text:#f87171; /* soft red for hover */
  }
  
  body{
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  }
  
  /* ================= NAVBAR ================= */
  .navbar-brand{
    display:flex; align-items:center; gap:.5rem;
    height:72px; font-weight:700; letter-spacing:.3px;
  }
  .navbar-brand img.logo-koni{ height:60px; width:auto; display:block; }
  @media (min-width:992px){
    .navbar-brand{ height:80px; }
    .navbar-brand img.logo-koni{ height:72px; }
  }
  
  /* ================ ARTICLE CORE ================ */
  main.container.article-wrap{
    max-width:960px; margin:0 auto; padding:0 1rem;
  }
  @media (min-width:1200px){
    main.container.article-wrap{ max-width:1140px; }
  }
  
  .article-title{
    font-weight:800; color:#0f172a; text-align:center; margin-bottom:1rem;
  }
  .meta{
    color:#64748b; font-size:.95rem; text-align:center; justify-content:center;
  }
  
  .content-body{ font-size:1.05rem; line-height:1.75; color:#0f172a; }
  .content-body img{ max-width:100%; height:auto; border-radius:12px; }
  
  .tag{
    display:inline-block; padding:.35rem .6rem; margin:.15rem .25rem .15rem 0;
    border:1px solid #e5e7eb; border-radius:999px; font-size:.85rem; color:#334155;
  }
  
  /* Hero image: isi penuh hingga ke tepi pembungkus */
  .article-hero{ border-radius:22px; overflow:hidden; box-shadow:0 14px 40px rgba(2,6,23,.08); }
  .article-hero .ratio{
    aspect-ratio:16/9; background:#fff; display:flex; align-items:center; justify-content:center;
  }
  .article-hero .ratio > img{
    width:100%; height:100%; object-fit:cover; border-radius:22px; background:#fff;
  }
  
  /* ================ BREADCRUMB & BUTTONS ================ */
  .breadcrumb{ --bs-breadcrumb-divider:'>'; font-size:.95rem; }
  .breadcrumb a{ color:#dc2626; text-decoration:none; font-weight:600; }
  .breadcrumb a:hover{ color:#b91c1c; text-decoration:underline; }
  .breadcrumb-item.active{ color:#64748b; font-weight:500; }
  
  .btn-share{
    display:inline-flex; align-items:center; gap:6px;
    padding:.45rem 1rem; border-radius:10px; font-weight:600;
    background:#dc2626; border-color:#dc2626; color:#fff;
  }
  .btn-share:hover{
    background:#b91c1c; border-color:#b91c1c; color:#fff;
    box-shadow:0 2px 8px rgba(220,38,38,.35);
  }
  
  /* ================ MINI NEWS (sidebar list) ================ */
  .news-mini{ display:flex; gap:12px; text-decoration:none; color:inherit; }
  .news-mini img{ width:96px; height:64px; object-fit:cover; border-radius:10px; }
  .news-mini .ttl{ font-weight:700; line-height:1.2; }
  
  /* ================ SECTION DIVIDER ================ */
  .section-divider{
    border:none; border-top:3px solid var(--bs-primary);
    width:80px; margin:2rem auto; border-radius:3px;
  }
  
  /* ================ CARD: REKOMENDASI ala beranda ================ */
  .news-card{
    position:relative; display:block; text-decoration:none; color:inherit;
    border-radius:16px; overflow:hidden; background:#fff;
    box-shadow:0 4px 18px rgba(0,0,0,.08);
    transition:transform .25s, box-shadow .25s;
  }
  .news-card:hover{ transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,.12); }
  
  /* Wrapper gambar – satu kelas untuk semua varian */
  .news-card .news-img-wrap{
    position:relative; border-radius:14px; overflow:hidden;
    box-shadow:0 8px 18px rgba(0,0,0,.06); background:#f8fafc;
  }
  
  /* Varian COMPACT (kartu kecil: gambar tidak dipotong) */
  .news-card--compact .news-img-wrap{ aspect-ratio:4/5; }
  .news-card--compact .news-img-wrap img{
    width:100%; height:100%; object-fit:contain; object-position:center center; display:block;
  }
  
  /* Varian COVER (jika kamu pakai aspect berbeda) */
  .news-card .thumb{ position:relative; aspect-ratio:3/4; overflow:hidden; }
  .news-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  
  /* Label “Berita” */
  .news-card .news-chip{
    position:absolute; top:10px; left:10px;
    padding:4px 10px; font-size:.85rem; border-radius:10px; font-weight:600;
    color:#fff; background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
  }
  
  /* Overlay judul + tanggal (teks putih di bawah gambar) */
  .news-card .news-overlay{
    position:absolute; left:0; right:0; bottom:0; padding:10px 12px; color:#fff;
    background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  }
  .news-card .news-overlay .date{ font-size:.85rem; opacity:.95; margin-bottom:2px; }
  .news-card .news-overlay .title{ font-weight:800; font-size:1rem; line-height:1.25; }
  
  /* Info blok (jika tanpa overlay) */
  .news-card .info{ padding:12px 14px; }
  .news-card .info .date{ font-size:.85rem; color:#64748b; margin-bottom:4px; }
  .news-card .info .title{ font-size:1rem; font-weight:700; color:#0f172a; line-height:1.3; }
  
  /* ================ RECO GRID TIGHT ================= */
  @media (min-width:992px){
    #rekomendasi .row.g-3{ row-gap:1.25rem; }
  }
  
  /* ================ FOOTER ================= */
  footer.footer-soft-primary{
    background:rgba(var(--bs-primary-rgb), .12); color:#0f172a;
  }
  footer.footer-soft-primary a{ color:var(--bs-primary); text-decoration:none; }
  footer.footer-soft-primary a:hover{ color:#b91c1c; }

  /* ========= UTILITIES: shared across public pages ========= */
  .soft-bg{ background:#ffffff; }
  .section-glass{
    background:rgba(255,255,255,.7);
    border:1px solid rgba(15,23,42,.08);
    border-radius:18px;
    padding:24px;
    box-shadow:0 10px 28px rgba(2,6,23,.06);
  }
  /* Varian glass lebih tebal (untuk kartu event) */
  .glass-strong{ background:rgba(255,255,255,.9); }
  @media (min-width:992px){ .section-glass{ padding:28px; } }
  .site-footer{ color:var(--bs-primary); }
  .site-footer a{ color:var(--bs-primary); text-decoration:none; }
  .site-footer a:hover{ color:#b91c1c; }

  /* Public navbar hover/active (soft red) */
  .navbar .nav-link{ color:#334155; border-radius:10px; transition: color .15s ease, background-color .15s ease; }
  .navbar .nav-link:hover, .navbar .nav-link:focus{ color:var(--red-soft-text); background:rgba(var(--bs-primary-rgb), .10); }
  .navbar .nav-link.active{ color:var(--bs-primary); background:rgba(var(--bs-primary-rgb), .12); }

  /* Hero helpers (optional shared) */
  .hero-glass{ position:relative; overflow:hidden; border-radius:22px; border:1px solid rgba(15,23,42,.12); background:rgba(255,255,255,.08); box-shadow:0 18px 42px rgba(2,6,23,.12); }
  .hero-glass img{ display:block; width:100%; height:min(62vh,520px); object-fit:cover; }
  .hero-glass::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.12) 18%, rgba(0,0,0,0) 45%, rgba(0,0,0,.08) 100%); pointer-events:none; }
  .hero-panel{ background:rgba(255,255,255,.7); border:1px solid rgba(15,23,42,.08); border-radius:18px; padding:18px 20px; box-shadow:0 10px 28px rgba(2,6,23,.08); }
  @media (min-width:992px){ .hero-panel{ padding:22px 26px; } }