/* Tipografi & reset ringan */
:root{
  --ut-primary:#0a6efd;         /* biru segar */
  --ut-primary-soft:#e9f2ff;    /* lembut */
  --ink:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(15, 23, 42, .08);
  --radius:1rem;
}
*{box-sizing:border-box}
body{font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color:var(--ink);}

/* Hero */
.bg-image{position:relative; background-size:cover; background-position:center;}
.bg-image[data-image-src]{background-image:attr(data-image-src url);}
.bg-soft-primary{background:linear-gradient(180deg, rgba(10,110,253,.7), rgba(10,110,253,.7));}
.hero-sheen:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 500px at 50% -10%, rgba(255,255,255,.25), transparent 60%);
  pointer-events:none;
}

/* Heading */
.display-1{font-weight:700; letter-spacing:-.02em;}
.lh-tight{line-height:1.1}

/* Badge halus */
.badge-soft-light{background:rgba(255,255,255,.25); color:#fff; font-weight:600; letter-spacing:.06em}

/* Card & shadow */
.card{background:var(--card)}
.rounded-4{border-radius:var(--radius)}
.shadow-soft{box-shadow:var(--shadow)}
.border-0{border:0}

/* Gambar post dengan hover scale */
.overlay-1{overflow:hidden}
.hover-scale img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.hover-scale:hover img{transform:scale(1.05)}

/* Konten artikel */
.content-typography p{color:var(--ink); line-height:1.8; margin:0 0 1rem}
.content-typography h2,.content-typography h3{margin:1.5rem 0 .75rem; font-weight:600}
.content-typography ul, .content-typography ol{padding-left:1.2rem}

/* Sidebar */
.sidebar-area .widget{background:var(--card)}
.sticky-top-lg{position:sticky; top:90px}
.widget_title{font-weight:700; position:relative; padding-bottom:.4rem}
.widget_title:after{
  content:""; display:block; width:56px; height:3px; background:var(--ut-primary); margin-top:.6rem; border-radius:3px
}
.list-link{color:inherit; text-decoration:none}
.list-link:hover .fw-600{color:var(--ut-primary)}
.fw-600{font-weight:600}
.chev{display:inline-block; width:1rem; line-height:1rem; color:var(--ut-primary); margin-top:.2rem}

/* Spacer util */
.mt-n17{margin-top:-4.5rem}

/* Responsif kecil */
@media (max-width: 991.98px){
  .sticky-top-lg{position:static}
}