/* Beranda: berita terbaru (kartu geser, menimpa tepi bawah hero) + titik persegi. */
.hero-news{position:relative;z-index:4;margin-top:-112px;--per:3;--gap:24px}
.hn-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.hn-kick{margin:0;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#d6deec}
.hn-all{color:#fff;font-size:.82rem;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.hn-all:hover{border-color:#fff}
.hn-view{overflow:hidden;border-radius:4px;box-shadow:0 12px 30px rgba(8,17,31,.18)}
.hn-track{display:flex;gap:var(--gap);transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.hcard{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0;background:var(--surface);color:var(--ink);border-radius:4px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:box-shadow .3s}
.hcard .ti{overflow:hidden;flex:none}
.hcard .ti img,.hcard .ti .tb{width:100%;height:160px;object-fit:cover;display:grid;border-radius:0;transition:transform .6s}
.hcard:hover .ti img{transform:scale(1.06)}
.hcard .nb{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 22px 18px}
.hcard:hover{box-shadow:inset 0 -3px 0 var(--brass)}
.hcard small{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:#c8921a}
.hcard small i{font-style:normal}
.hcard small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard h3{font-size:.95rem;font-weight:600;line-height:1.5;letter-spacing:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard .more{margin-top:auto;padding-top:6px;color:var(--brass);font-size:.82rem;font-weight:500}
.hn-dots{display:flex;gap:10px;margin-top:20px;min-height:12px}
.hn-dots button{width:12px;height:12px;padding:0;border:0;border-radius:1px;background:rgba(120,135,165,.4);cursor:pointer;transition:background .3s}
.hn-dots button.on{background:var(--brass)}
.hn-dots button:focus-visible,.hcard:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
@media (max-width:980px){.hero-news{--per:2}}
@media (max-width:640px){.hero-news{--per:1;--gap:16px;margin-top:-132px}.hn-top{flex-direction:column;gap:4px}.hcard .ti img,.hcard .ti .tb{height:170px}.hcard .nb{padding:16px 20px}}