/* =====================================================================
   BLOG 21 — tambahan gaya ala 21st.dev di atas blog.css
   - progress bar baca (gradien)
   - baris tag + badge "Topik" bergradien
   - kartu "Poin penting" (numbered bento)
   - komponen isi artikel: .bl-bento, .bl-note--info, h3, blockquote, tautan
   - "Telusuri berdasarkan topik": marquee 2 baris, berhenti saat di-hover
   - CTA dengan "border beam" berputar
   Memakai token main.css (--red, --blue2, --ink, --mut, --line, --soft, --bg)
   sehingga otomatis ikut mode gelap.
   ===================================================================== */

@property --bl-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- progress bar baca ---------- */
.bl-progress{position:fixed;left:0;top:0;z-index:60;width:100%;height:3px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--red),var(--red2) 40%,var(--blue2));box-shadow:0 0 14px rgba(91,108,255,.55);pointer-events:none}

/* ---------- baris tag di header artikel ---------- */
.bl-tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bl-kw{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;border:1px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(120deg,var(--red),var(--blue2)) border-box;font:500 12.5px var(--sans);color:var(--mut)}
.bl-kw i{width:7px;height:7px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 4px rgba(91,108,255,.18);animation:blpulse 2.4s ease-in-out infinite}
.bl-kw b{font-weight:600;color:var(--ink)}
@keyframes blpulse{0%,100%{box-shadow:0 0 0 3px rgba(91,108,255,.18)}50%{box-shadow:0 0 0 7px rgba(91,108,255,0)}}

/* ---------- poin penting ---------- */
.bl-take-h{margin:0 0 12px;font:600 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bl-take{counter-reset:blt;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 38px;padding:0;list-style:none}
.bl-take li{counter-increment:blt;position:relative;overflow:hidden;padding:46px 18px 18px;border-radius:18px;border:1px solid var(--line);background:var(--soft);font:500 14.5px/1.55 var(--sans);color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.bl-take li::before{content:"0" counter(blt);position:absolute;left:18px;top:14px;font:italic 600 26px/1 var(--serif);background:linear-gradient(120deg,var(--red),var(--blue2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bl-take li::after{content:"";position:absolute;inset:auto -30% -60% auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,108,255,.22),transparent);transition:transform .5s;pointer-events:none}
.bl-take li:hover{transform:translateY(-4px);border-color:var(--blue2);box-shadow:0 22px 40px -28px rgba(61,63,152,.7)}
.bl-take li:hover::after{transform:translate(-20px,-20px) scale(1.3)}

/* ---------- komponen di dalam isi artikel ---------- */
.bl-prose h3{margin:34px 0 10px;font:600 21px/1.3 var(--sans);letter-spacing:-.005em}
.bl-prose a{color:var(--blue2);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--blue2) 40%,transparent);text-underline-offset:3px;transition:text-decoration-color .25s}
.bl-prose a:hover{text-decoration-color:var(--blue2)}
.bl-prose blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid;border-image:linear-gradient(180deg,var(--red),var(--blue2)) 1;font:italic 500 22px/1.5 var(--serif);color:var(--ink)}
.bl-note--info{border-left-color:var(--blue2)}
.bl-note--info b{color:var(--blue2)}

.bl-bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:8px 0 30px}
.bl-bento>div{position:relative;overflow:hidden;padding:20px 20px 18px;border-radius:18px;border:1px solid var(--line);background:var(--soft);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.bl-bento>div::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--red),var(--blue2));transform:scaleX(.22);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bl-bento>div:hover{transform:translateY(-4px);border-color:var(--blue2);box-shadow:0 24px 44px -30px rgba(61,63,152,.7)}
.bl-bento>div:hover::before{transform:scaleX(1)}
.bl-bento b{display:block;margin:0 0 6px;font:600 16px var(--sans);color:var(--ink)}
.bl-bento p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}

/* ---------- TELUSURI BERDASARKAN TOPIK (marquee) ---------- */
.tp{position:relative;margin:clamp(48px,7vw,88px) 0 0}
.tp-head{max-width:640px;margin:0 0 26px}
.tp-eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;border:1px solid var(--line);font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.tp-head h2{margin:12px 0 8px;font:italic 500 clamp(32px,4.2vw,50px)/1.05 var(--serif);letter-spacing:-.01em}
.tp-head p{margin:0;color:var(--mut);font-size:15.5px}
.tp-rows{display:grid;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tp-row{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tp-row::-webkit-scrollbar{display:none}
.tp-track{display:flex;flex:none;gap:10px;padding-right:10px}
.tp-row.is-live{overflow:hidden}
.tp-row.is-live .tp-track{animation:tpm var(--tp-dur,70s) linear infinite}
.tp-row.is-live:nth-child(even) .tp-track{animation-direction:reverse}
.tp-rows:hover .tp-track,.tp-rows:focus-within .tp-track{animation-play-state:paused}
@keyframes tpm{to{transform:translateX(-100%)}}
.tp-chip{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font:500 14.5px var(--sans);color:var(--ink);white-space:nowrap;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s,color .3s}
.tp-chip::before{content:"#";font-weight:700;color:var(--red);transition:transform .3s}
.tp-chip:hover,.tp-chip:focus-visible{transform:translateY(-3px);border-color:var(--blue2);box-shadow:0 14px 28px -16px rgba(61,63,152,.8),0 0 0 4px rgba(91,108,255,.12);outline:0}
.tp-chip:hover::before{transform:rotate(12deg) scale(1.15)}
.tp-chip.on{color:#fff;border-color:transparent;background:linear-gradient(120deg,var(--blue),var(--blue2));box-shadow:0 12px 26px -14px rgba(61,63,152,.9)}
.tp-chip.on::before{color:#fff}

/* ---------- CTA: border beam ---------- */
.bl-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--bl-a),transparent 0 62%,rgba(255,255,255,.95) 82%,rgba(255,107,94,.9) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:blbeam 7s linear infinite;pointer-events:none}
@keyframes blbeam{to{--bl-a:360deg}}

/* ---------- RESPONSIF ---------- */
@media(max-width:760px){
  .bl-take{grid-template-columns:1fr}
  .bl-take li{padding:42px 16px 16px}
  .tp-rows{-webkit-mask-image:none;mask-image:none}
}
@media(prefers-reduced-motion:reduce){
  .tp-row.is-live .tp-track,.bl-cta::after,.bl-kw i{animation:none}
  .tp-row.is-live{overflow-x:auto}
}

/* ---------- khusus halaman /artikel (indeks) ---------- */
.bl-count{margin:0;font:500 14px var(--sans);color:var(--mut)}