/* Tambahan matahari08 (di luar css/style.css hasil kompilasi template) */
article.card.agenda-row .badge-status{position:static;box-shadow:none}
article.card.agenda-row .flex.flex-wrap{display:flex}
article.card.agenda-row .badge-kat{font-size:12px;letter-spacing:.06em}
.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.play-badge svg{box-sizing:content-box;width:20px;height:20px;padding:14px;border-radius:9999px;background:rgba(0,0,0,.62);color:#fff}
h1,h2,h3{overflow-wrap:anywhere}
/* Menu dropdown desktop: area hover setinggi header + jembatan tanpa celah, tertutup dengan jeda singkat */
@media (min-width:1024px){
  header nav[aria-label="Navigasi utama"]{align-self:stretch}
  header nav[aria-label="Navigasi utama"]>[data-dropdown]{align-self:stretch;display:flex;align-items:center}
  [data-dropdown] .dropdown-panel{top:100%;transition:opacity .15s,transform .15s,visibility 0s linear .3s}
  [data-dropdown] .dropdown-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .group:hover>.dropdown-panel,.group:focus-within>.dropdown-panel,.dropdown-panel.open{transition-delay:0s}
}
/* Hero slider */
.hero-slides{display:grid}
.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.hero-slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.hero-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 0 28px}
.hero-nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9999px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.hero-nav:hover{border-color:var(--brand);color:var(--brand-text)}
.hero-dots{display:flex;align-items:center}
.hero-dot-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;padding:0}
.hero-dot-btn::before{content:"";width:10px;height:10px;border-radius:9999px;background:var(--line);transition:width .25s,background .25s}
.hero-dot-btn[aria-selected=true]::before{width:28px;background:var(--brand)}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:none}}
/* Mobile & tablet: ringkasan/keterangan pada kartu disembunyikan (terpotong dan memanjangkan halaman) */
@media (max-width:1023px){
  main article p[class*="line-clamp"],main article.card p.text-\[12\.5px\]{display:none}
}
@media (max-width:1023px){.meta-diperbarui{display:none}}
/* Detail berita mobile/tablet: artikel terkait jadi daftar ringkas; kartu ajakan merah di sidebar disembunyikan (sudah ada ajakan di bawah) */
@media (max-width:1023px){
  section[aria-labelledby="terkait-title"]>div{grid-template-columns:1fr!important;gap:.75rem}
  section[aria-labelledby="terkait-title"] article.card{flex-direction:row;align-items:stretch}
  section[aria-labelledby="terkait-title"] article.card>a.img-wrap{width:104px;flex:none;aspect-ratio:auto}
  section[aria-labelledby="terkait-title"] article.card>a.img-wrap img{height:100%;width:100%;object-fit:cover}
  section[aria-labelledby="terkait-title"] article.card>div{padding:.75rem 1rem}
  section[aria-labelledby="terkait-title"] article.card h3{margin-top:.5rem;font-size:15px}
  section[aria-labelledby="terkait-title"] article.card>div>div:last-child{padding-top:.5rem}
  aside div.card[class*="C8102E"]{display:none}
  aside .card{padding:1.25rem}
  aside .card ul>li h3,aside .card ul>li h3 a{overflow-wrap:anywhere}
}
/* Mobile & tablet: filter satu baris geser, galeri/jaringan/pengurus 2 kolom */
@media (max-width:1023px){
  [role=group][aria-label^="Filter"],[role=tablist][aria-label="Tab kegiatan"]{flex-wrap:nowrap;overflow-x:auto;margin-inline:-1rem;padding-inline:1rem;scroll-padding-inline:1rem;scrollbar-width:none}
  [role=group][aria-label^="Filter"]::-webkit-scrollbar,[role=tablist][aria-label="Tab kegiatan"]::-webkit-scrollbar{display:none}
  [role=group][aria-label^="Filter"]>.chip,[role=tablist][aria-label="Tab kegiatan"]>.tab{flex:none;white-space:nowrap}
  [role=tablist][aria-label="Tab kegiatan"]{margin-inline:0;padding-inline:.25rem}
  label:has(#prog-kat-select){display:none}
  #gal-grid,#jaringan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.75rem!important}
  #gal-grid figcaption{padding:.6rem .7rem}
  #gal-grid figcaption p{font-size:12.5px}
  #jaringan-grid article.card{padding:1rem}
  div:has(>article.card.text-center){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.75rem!important}
  article.card.text-center{padding:1rem}
  article.card.text-center>div[aria-hidden=true]{width:64px;height:64px;font-size:1.25rem}
  article.card.text-center>p:last-child{display:none}
}
/* Kotak catatan yang mengikuti daftar/grid diberi jarak */
main div[role=note]:not(:first-child){margin-top:1.75rem}
/* Footer mobile & tablet: brand penuh, dua kolom menu berdampingan, kontak penuh */
@media (max-width:1023px){
  footer>div:first-child{padding-top:2.5rem;padding-bottom:2rem}
  footer .grid.gap-10{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.25rem}
  footer .grid.gap-10>div:first-child,footer .grid.gap-10>div:last-child{grid-column:1/-1}
  footer nav h3,footer .grid.gap-10>div:last-child h3{font-size:.8125rem;margin-bottom:0}
  footer nav ul{margin-top:.25rem}
  footer nav ul>li+li{margin-top:0}
  footer nav ul>li{margin-block:0!important}
  footer nav li a{display:flex;align-items:center;min-height:44px;line-height:1.3}
  footer .grid.gap-10>div:last-child ul{margin-top:.25rem}
  footer .grid.gap-10>div:last-child li{align-items:center;min-height:44px;margin-block:0!important}
  footer .grid.gap-10>div:last-child li>svg{margin-top:0}
  footer .mt-12{margin-top:1.5rem}
  footer .border-t.pt-6{align-items:flex-start;text-align:left}
}
/* Area sentuh >= 44px di layar sentuh/kecil (standar UX proyek) */
@media (max-width:1023px),(pointer:coarse){
  .theme-toggle,.menu-btn,header a[aria-label="Cari di situs"],.btn-share,.page-btn,.chip,.tab,.btn-sm,.btn-lg{min-width:44px;min-height:44px}
  header a.shrink-0{min-height:44px;display:inline-flex;align-items:center}
  header a[aria-label="Cari di situs"]{display:inline-flex;align-items:center;justify-content:center}
  .input,select.input{min-height:44px}
  .link-arrow{min-height:44px;display:inline-flex;align-items:center}
  main h2>a,main h3>a,aside h3>a{display:inline-block;padding-block:.65rem}
  main h3>a.line-clamp-2,main h3>a.line-clamp-3,aside h3>a.line-clamp-2,aside h3>a.line-clamp-3{display:-webkit-box;padding-block:0}
  a.badge-kat{padding-block:.5rem}
  footer a{display:inline-flex;align-items:center;min-height:44px}
  footer a[aria-label]{min-width:44px;justify-content:center}
  details>summary{min-height:44px}
  nav[aria-label=Breadcrumb] a{display:inline-flex;align-items:center;min-height:44px}
  /* breadcrumb satu baris: Beranda + dua level terakhir; judul dipotong dengan elipsis */
  nav[aria-label=Breadcrumb] ol{flex-wrap:nowrap;gap:.25rem;overflow:hidden}
  nav[aria-label=Breadcrumb] li{flex-shrink:0;white-space:nowrap}
  nav[aria-label=Breadcrumb] li:not(:first-child):not(:nth-last-child(-n+2)){display:none}
  nav[aria-label=Breadcrumb] li:last-child{flex-shrink:1;min-width:0}
  nav[aria-label=Breadcrumb] li:last-child>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  figure>figcaption{flex-direction:column;align-items:flex-start;gap:.25rem}
  figure>figcaption>span.text-\[\#9AA3AE\]{display:none}
  main a.inline-flex,aside a.inline-flex,main button.inline-flex,main a.font-semibold,aside a.font-semibold{min-height:44px;align-items:center}
  main a.btn-primary.shrink-0{min-height:44px}
  main a.btn-primary,main a.btn-outline,main a.btn-outline-light{display:inline-flex;align-items:center;justify-content:center}
}
/* ======================= Polesan beranda ======================= */
/* Hero: latar hangat + pola titik, sinar matahari di belakang foto, bingkai berlapis */
.hero{background:linear-gradient(180deg,#fff 0%,#fdf6f4 48%,#f5f6f8 100%)}
.hero::before{background:radial-gradient(48% 60% at 92% 18%,rgba(200,16,46,.13),transparent 70%),radial-gradient(42% 50% at 0% 100%,rgba(217,166,46,.18),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(23,25,29,.09) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 45%);mask-image:linear-gradient(115deg,#000 0%,transparent 45%)}
.hero>div{position:relative;z-index:1}
.hero-points{gap:10px 22px!important;margin-top:26px}
.hero-points li{padding:0;border:0;border-radius:0;background:none;font-size:14px;font-weight:600;color:var(--text-2)}
.hero-points svg{width:18px;height:18px;color:#1f9d55}
/* Sidebar daftar berita: menempel saat digulir; artikel populer dengan foto kecil + peringkat */
aside.lg\:sticky{align-self:start}
@media (min-width:1024px) and (max-width:1439px){header nav .nav-link{padding-inline:5px}#site-header .head-row{gap:6px}#site-header .head-row>div:last-child{gap:2px}#site-header .head-row>div:last-child .btn-primary{padding-inline:12px}}
@media (min-width:1024px) and (max-width:1439px){header nav .nav-link{padding-inline:7px}header .logo-wm{font-size:25px}header .logo-tag{letter-spacing:-.01em}header .logo-txt{margin-left:-2px}}
.logo-ic{flex:none;width:46px;height:46px;object-fit:contain;padding:2px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px rgba(23,25,29,.09),0 5px 12px -6px rgba(23,25,29,.3)}
@media (min-width:1024px){.logo-ic{width:52px;height:52px;border-radius:14px;padding:5px}}
#site-header.is-scrolled .logo-ic{transform:scale(.94)}
#site-header .logo-ic{width:80px;height:80px;margin-bottom:-24px;padding:4px;border-radius:0 0 16px 16px;box-shadow:0 10px 22px -8px rgba(23,25,29,.4),0 0 0 1px rgba(23,25,29,.08);transform-origin:top center;transition:transform .25s}
@media (min-width:1024px){#site-header .logo-ic{width:98px;height:98px;margin-bottom:-30px;border-radius:0 0 18px 18px}}
#site-header.is-scrolled .logo-ic{transform:scale(.86)}
/* Tulisan logo mengikuti logo asli klien: slab vintage oranye + tagline sans tebal */
.logo-wm{font-family:"Alfa Slab One",Georgia,serif!important;font-weight:400!important;font-size:25px;letter-spacing:.01em;text-transform:uppercase;color:#17191D!important;text-shadow:1.5px 1.5px 0 #E8602C}
.logo-08{color:#17191D!important}
footer .logo-wm,footer .logo-08,footer .logo-tag{color:#fff!important}
.logo-tag{font-family:Montserrat,sans-serif!important;font-weight:700!important;text-transform:uppercase;color:#17191D!important;font-size:10px!important;letter-spacing:0}
footer .logo-wm{font-size:29px;text-shadow:none}footer .logo-tag{font-size:11.5px!important}
html[data-theme=dark] #site-header .logo-wm,html[data-theme=dark] #site-header .logo-08,html[data-theme=dark] #site-header .logo-tag{color:#fff!important}
html[data-theme=dark] #site-header .logo-wm{text-shadow:none}
@media (min-width:1024px) and (max-width:1439px){header .logo-wm{font-size:23px}}
@media (max-width:479px){#site-header .theme-toggle{display:none!important}#site-header .logo-wm{font-size:20px!important}#site-header .logo-ic{width:68px;height:68px}#site-header .head-row{gap:6px}#site-header .logo-tag{display:block!important;font-size:8.1px!important;margin-top:3px}}
@media (max-width:380px){#site-header .logo-wm{font-size:18px!important}#site-header .logo-tag{font-size:7.3px!important}#site-header .logo-ic{width:60px;height:60px}}
footer .logo-ic{width:72px;height:72px;padding:4px;border-radius:18px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}footer .logo-wm{font-size:32px}footer .logo-tag{font-size:13.5px}
#site-header .head-row>a{display:flex;align-items:center;align-self:stretch}#site-header .head-row>a>span{display:flex}
.fkontak{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px}
.fkontak li{display:flex;align-items:flex-start;gap:13px}
.fk-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.fk-ic svg{margin:0!important;width:18px;height:18px}
.fkontak li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.fk-lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9AA3AE}
.fk-val{font-size:14.5px;line-height:1.5;color:#E5E7EB;overflow-wrap:anywhere}
a.fk-val:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
html[data-theme=dark] #site-header{background:rgba(23,25,29,.88)!important;box-shadow:0 1px 0 rgba(255,255,255,.1)!important}
html[data-theme=dark] #site-header.is-scrolled{background:rgba(23,25,29,.95)!important}
html[data-theme=dark] #site-header .logo-wm{color:#fff!important}
html[data-theme=dark] #site-header .logo-tag{color:#9AA3AE!important}
html[data-theme=dark] #site-header #panel-mobile{background:#1b1e23}
html[data-theme=dark] #site-header .theme-toggle,html[data-theme=dark] #site-header .menu-btn,html[data-theme=dark] #site-header a[aria-label="Cari di situs"]{color:#E5E7EB}
html[data-theme=dark] #site-header nav svg{color:#9AA3AE}
html[data-theme=dark] main a[href^="mailto:"]{color:#d1d5db}
/* Seni kartu: foto kegiatan sebagai latar */
.nilai-card{display:block!important;padding:0!important;overflow:hidden;text-align:center;isolation:isolate}
.nilai-photo{display:block;width:100%;position:relative;height:168px;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nilai-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(200,16,46,.3),rgba(23,25,29,.08) 60%,rgba(23,25,29,.0))}
.nilai-card:hover .nilai-photo{transform:scale(1.06)}
.nilai-body{position:relative;z-index:2;padding:0 28px 28px;background:#fff}
.nilai-ic{position:relative;margin-top:-30px!important;background:#fff!important;box-shadow:0 8px 20px -8px rgba(200,16,46,.45),0 0 0 5px #fff!important}
.gov-card{overflow:hidden}
.gov-ph{margin:-24px -24px 18px;height:132px;background-size:cover;background-position:center;position:relative;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gov-card{isolation:isolate}
.gov-card .gov-ph{border-bottom:3px solid #C8102E}
.gov-card:hover .gov-ph{transform:scale(1.04)}
.gov-card{position:relative}
.seri-card{position:relative;overflow:hidden;color:#fff;background-size:cover;background-position:center;border:0}
.seri-card::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(23,25,29,.55),rgba(150,10,32,.88))}
.seri-card>*{position:relative}
.seri-card p,.seri-card .font-display{color:#fff!important}
.seri-card p+p{color:rgba(255,255,255,.82)!important}
.seri-card .link-arrow{color:#FFD76A!important}
.cta-photo{position:absolute;top:0;right:0;bottom:0;width:52%;background-size:cover;background-position:center;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 40%,#000 85%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 40%,#000 85%)}
@media (max-width:1023px){.cta-photo{width:100%;opacity:.18;-webkit-mask-image:none;mask-image:none}}
/* Kartu program: ringkas — foto, status, judul, dua baris deskripsi; seluruh kartu bisa diklik */
.card-prog{position:relative}
.card-prog>div.p-5{padding:18px 20px 22px}
.card-prog-title{margin-top:0}
.card-prog-title a::after{content:"";position:absolute;inset:0;z-index:1}
.card-prog p{margin-top:8px!important}
.card-prog:hover .card-prog-title a{color:#C8102E}
/* Kartu konten ringkas: seluruh kartu bisa diklik, pil di foto, satu baris keterangan */
.card-clean{position:relative}
.card-clean h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card-clean:hover h3 a{color:#C8102E}
.card-pill{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.96)!important;color:#C8102E!important;border:0!important;box-shadow:0 4px 12px -6px rgba(23,25,29,.4);max-width:calc(100% - 24px)}
.card-meta{margin:8px 0 0;font-size:13px;line-height:1.5;color:#69717D;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.agenda-go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F5F6F8;color:#C8102E;transition:background .2s,color .2s,transform .2s}
.agenda-row:hover .agenda-go{background:#C8102E;color:#fff;transform:translateX(3px)}
#site-header nav .nav-link{font-size:15px!important}
@media (min-width:1024px) and (max-width:1439px){#site-header nav .nav-link{font-size:14.5px!important}}
/* Ikon tanggal (kalender) dan lokasi (pin) di semua kartu */
.card time::before,.card-meta>span:last-child::before{content:"";display:inline-block;flex:none;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:currentColor;opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat}
.card-meta>span:last-child::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.card .inline-flex>svg:has(+time){display:none}
.card-meta>span[aria-hidden]{display:inline-block;width:14px;font-size:0}
.logo-txt{align-items:stretch}.logo-wm{font-size:27px;line-height:.95;justify-content:space-between}.logo-tag{display:block;width:0;min-width:100%;margin-top:2px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;text-align-last:justify;text-justify:inter-character;letter-spacing:.04em}
.logo-08{display:inline-block;margin-left:1px}
/* Header: bar penuh selebar layar (kaca), mengecil saat digulir */
#site-header{background:rgba(255,255,255,.88)!important;-webkit-backdrop-filter:saturate(1.6) blur(16px)!important;backdrop-filter:saturate(1.6) blur(16px)!important;border:0!important;box-shadow:0 1px 0 rgba(23,25,29,.08)!important;transition:box-shadow .25s,background .25s}
#site-header.is-scrolled{background:rgba(255,255,255,.95)!important;box-shadow:0 1px 0 rgba(23,25,29,.08),0 10px 30px -16px rgba(23,25,29,.3)!important}
#site-header .head-row{height:66px;transition:height .25s}
#site-header.is-scrolled .head-row{height:58px}
#site-header .logo-box{transition:transform .25s;transform-origin:left center}
#site-header.is-scrolled .logo-box{transform:scale(.92)}
@media (min-width:1024px){#site-header .head-row{height:74px}#site-header.is-scrolled .head-row{height:62px}}

@media (prefers-reduced-motion:reduce){#site-header,#site-header .head-row,#site-header .logo-box{transition:none}}
html.dark #site-header{background:rgba(23,25,29,.88)!important;box-shadow:0 1px 0 rgba(255,255,255,.08)!important}
.populer-list{margin:16px 0 0;padding:0;list-style:none}
.populer-item{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.populer-item:first-child{border-top:0;padding-top:4px}
.populer-item:last-child{padding-bottom:0}
.populer-thumb{position:relative;flex:none;width:80px;height:64px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
img.populer-thumb{object-fit:cover}
.populer-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.populer-item:hover .populer-thumb img{transform:scale(1.07)}
.populer-rank{position:absolute;left:6px;top:6px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:12px;font-weight:800;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.populer-item h3{margin:0;font-size:14px;font-weight:700;line-height:1.4}
aside .populer-item h3>a{padding-block:0}
.populer-num{flex:none;width:40px;font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#d5d9df;font-variant-numeric:tabular-nums;transition:color .2s}
.populer-no{align-items:flex-start;gap:12px}
.populer-no:hover .populer-num{color:var(--brand)}
.populer-item time{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.hero-pill{background:#fff;box-shadow:0 6px 18px -10px rgba(200,16,46,.45);border-color:rgba(200,16,46,.18);color:var(--text)}
.hero-title{letter-spacing:-.03em;line-height:1.06}
@media (max-width:1023px){.hero-br{display:none}.hero-nb{white-space:normal}}
.hero-accent{position:relative;display:inline-block;background:none;padding-inline:0}
.hero-accent::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.2em;border-radius:999px;background:linear-gradient(90deg,#d9a62e,rgba(217,166,46,.35));z-index:-1}
.hero-media{isolation:isolate}
.hero-media::before{content:"";position:absolute;left:50%;top:50%;width:175%;aspect-ratio:1;translate:-50% -50%;z-index:-2;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(200,16,46,.16) 0 4deg,transparent 4deg 12deg);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 85%);mask-image:radial-gradient(closest-side,#000 30%,transparent 85%);animation:sinar 140s linear infinite}
.hero-media::after{content:"";position:absolute;inset:18px -12px -12px 18px;z-index:-1;border-radius:24px;background:linear-gradient(135deg,#c8102e 0%,#e0433a 55%,#d9a62e 100%)}
.hero-frame{position:relative;border:5px solid #fff;box-shadow:0 30px 60px -30px rgba(23,25,29,.55)}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(23,25,29,.35));pointer-events:none}
.hero-chip{z-index:2;border-color:transparent;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-chip-icon{background:var(--brand);color:#fff}
.hero-slide.is-active .hero-frame img{animation:kenburns 9s ease-out both}
.hero-anim .hero-slide.is-active .hero-copy>*{animation:heroNaik .7s cubic-bezier(.2,.7,.2,1) both}
.hero-anim .hero-slide.is-active .hero-copy>:nth-child(2){animation-delay:.07s}
.hero-anim .hero-slide.is-active .hero-copy>:nth-child(3){animation-delay:.14s}
.hero-anim .hero-slide.is-active .hero-copy>:nth-child(4){animation-delay:.21s}
.hero-anim .hero-slide.is-active .hero-copy>:nth-child(5){animation-delay:.28s}
@keyframes sinar{to{rotate:360deg}}
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes heroNaik{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Kaki hero: angka ringkas (dari DB) + kontrol slider */
.hero-media::before{pointer-events:none}
.hero-foot{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:0 0 32px}
.hero-foot .hero-controls{padding:0;margin-left:auto}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1 1 100%;margin:0;padding:0;list-style:none}
.hero-stats li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.85);box-shadow:0 10px 24px -20px rgba(23,25,29,.5)}
.hero-stat-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(200,16,46,.08);color:var(--brand)}
.hero-stat-icon svg{width:20px;height:20px}
.hero-stats strong{display:block;font-family:var(--font-display);font-size:24px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.hero-stats small{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.hero-nav{background:#fff;box-shadow:0 6px 16px -12px rgba(23,25,29,.5)}
.hero-nav:hover{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:1023px){
  .hero-grid{gap:28px;padding:20px 0 28px}
  .hero-media{order:-1;margin-right:10px}
  .hero-media::after{inset:12px -10px -10px 12px;border-radius:20px}
  .hero-frame{aspect-ratio:16/10}
  .hero-title{margin-top:16px}
  .hero-foot .hero-controls{margin-inline:auto}
}
@media (min-width:640px) and (max-width:1023px){
  .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-stats li{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:639px){
  .hero-points{display:none!important}
  .hero-frame{aspect-ratio:4/3}
  .hero-chip{left:10px;bottom:10px;padding:8px 12px 8px 8px;gap:10px}
  .hero-chip-icon{width:32px;height:32px;border-radius:9px}
  .hero-lead{font-size:16px;line-height:1.65}
  .hero-stats li{padding:10px 12px;gap:10px}
  .hero-stat-icon{width:36px;height:36px}
  .hero-stats strong{font-size:22px}
}
@media (min-width:1024px){
  .hero-grid{padding:72px 0 64px}
  .hero-title{font-size:clamp(2.3rem,1.4rem + 1.7vw,3.1rem)}.hero-br{display:block}.hero-nb{white-space:nowrap}
  .hero-stats{display:flex;flex:1 1 auto;gap:12px}
  .hero-stats li{padding:12px 18px 12px 12px}
  .hero-foot{padding:8px 0 48px}
  .hero-foot .hero-controls{margin-left:auto}
}
/* Judul section: garis aksen kecil di bawah judul */
main section h2.font-display{position:relative}
/* Kartu: terangkat halus saat hover, gambar membesar sedikit */
@media (hover:hover){
  main .card{transition:box-shadow .25s,border-color .25s,transform .25s}
  main article.card:hover,main .card.group:hover{transform:translateY(-4px)}
  main article.card .img-wrap img,main article.card a.overflow-hidden img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  main article.card:hover .img-wrap img,main article.card:hover a.overflow-hidden img{transform:scale(1.05)}
}
/* Nilai: aksen garis atas + ikon kotak bergradien */
section[aria-labelledby="nilai-title"] .card{position:relative;overflow:hidden}
section[aria-labelledby="nilai-title"] .card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#c8102e,#d9a62e);transform:scaleX(.25);transform-origin:center;transition:transform .35s}
section[aria-labelledby="nilai-title"] .card:hover::before{transform:scaleX(1)}
section[aria-labelledby="nilai-title"] .card .nilai-ic{width:60px;height:60px;border-radius:18px}
section[aria-labelledby="nilai-title"] .card:hover .nilai-ic{color:#fff;background:linear-gradient(135deg,#c8102e,#e0433a)!important}
/* Berita utama (desktop): gambar mengisi tinggi kartu, tanpa ruang kosong */
@media (min-width:1024px){
  .berita-grid>div>article.card>a.img-wrap{position:relative;flex:1 1 auto;aspect-ratio:auto;min-height:300px}
  .berita-grid>div>article.card>a.img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .berita-grid>div>article.card>div{flex-grow:0}
}
/* Agenda: blok tanggal bergradien, bulan >= 12px */
article.agenda-row>div:first-child{background:linear-gradient(150deg,#c8102e,#9e0c24);box-shadow:0 10px 22px -14px rgba(200,16,46,.8)}
article.agenda-row>div:first-child>span:last-child{font-size:12px}
/* Ajakan bergabung: cahaya merah-emas dan sinar matahari */
main>section:last-of-type.bg-\[\#17191D\]{background:radial-gradient(60% 120% at 100% 0%,rgba(200,16,46,.45),transparent 60%),radial-gradient(40% 80% at 0% 100%,rgba(217,166,46,.16),transparent 70%),#17191d}
main>section:last-of-type.bg-\[\#17191D\]::after{content:"";position:absolute;right:-180px;top:50%;width:560px;aspect-ratio:1;translate:0 -50%;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.07) 0 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 75%);mask-image:radial-gradient(closest-side,#000 20%,transparent 75%);pointer-events:none}
main>section:last-of-type.bg-\[\#17191D\]>div:nth-child(3){display:none}
@media (prefers-reduced-motion:reduce){
  .hero-media::before,.hero-slide.is-active .hero-frame img,.hero-anim .hero-slide.is-active .hero-copy>*{animation:none}
  main article.card:hover,main .card.group:hover{transform:none}
}
html[data-theme="dark"] .hero{background:var(--bg-alt)}
html[data-theme="dark"] .hero-frame{border-color:#22262d}
html[data-theme="dark"] .hero-stats li,html[data-theme="dark"] .hero-nav,html[data-theme="dark"] .hero-pill{background:var(--surface)}
html[data-theme="dark"] .hero-chip{background:rgba(23,26,32,.92)}
:root{--font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--font-body:"Figtree",ui-sans-serif,system-ui,sans-serif}