/* Experimental homepage V2. Every rule is scoped to .serang-v2. */
.serang-v2 {
    --v2-green:#0874A6; --v2-green-dark:#043D5A; --v2-green-light:#E7F3F9;
    --v2-gold:#C7952D; --v2-terracotta:#B4472D; --v2-blue:#075985;
    --v2-ink:#1F2937; --v2-muted:#667085; --v2-line:#E2E4DF;
    --v2-ivory:#F7F5EF; --v2-white:#FFFFFF; --v2-info:#EAF3FB;
    margin:0; min-height:100vh; background:var(--v2-white); color:var(--v2-ink);
    font:400 16px/1.5 Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased;
}
.serang-v2 *,.serang-v2 *::before,.serang-v2 *::after { box-sizing:border-box; }
.serang-v2 a { color:inherit; text-underline-offset:4px; }
.serang-v2 img { max-width:100%; }
.serang-v2 button,.serang-v2 input { font:inherit; }
.serang-v2 :focus-visible { outline:3px solid var(--v2-blue); outline-offset:3px; }
.serang-v2 h1,.serang-v2 h2,.serang-v2 h3,.serang-v2 p,.serang-v2 figure,.serang-v2 ul,.serang-v2 dl,.serang-v2 dd { margin:0; }
.serang-v2 .v2-container { width:calc(100% - 64px); max-width:1280px; margin-inline:auto; }
.serang-v2 .v2-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.serang-v2 .v2-skip { position:absolute; z-index:2000; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.serang-v2 .v2-skip:focus { top:8px; left:16px; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; padding:12px 16px; background:#fff; color:var(--v2-green-dark); }

.serang-v2 .v2-utility { background:linear-gradient(90deg,#043D5A 0%,#075985 55%,#0874A6 100%); color:#fff; font-size:11px; }
.serang-v2 .v2-utility .v2-container { min-height:48px; display:grid; grid-template-columns:auto minmax(340px,1fr) auto auto; align-items:center; gap:18px; }
.serang-v2 .v2-utility nav { display:flex; gap:16px; }
.serang-v2 .v2-utility a { min-height:32px; display:inline-flex; align-items:center; text-decoration:none; }
.serang-v2 .v2-utility a:hover { text-decoration:underline; }
.serang-v2 .v2-portal-label { gap:7px; white-space:nowrap; font-weight:600; }
.serang-v2 .v2-portal-label i { color:#9CDBF5; font-size:15px; }
.serang-v2 .v2-prayer-widget { min-width:0; display:flex; align-items:center; gap:10px; }
.serang-v2 .v2-widget-source { gap:5px; flex:0 0 auto; color:#DDF4FD; font-weight:700; }
.serang-v2 .v2-widget-source i { color:#F4C542; font-size:15px; }
.serang-v2 .v2-prayer-list { min-width:0; display:grid; grid-template-columns:repeat(5,minmax(54px,1fr)); gap:3px; }
.serang-v2 .v2-prayer-list > span { min-height:32px; display:flex; align-items:center; justify-content:center; gap:4px; border-radius:4px; color:#D9EEF7; padding:3px 5px; white-space:nowrap; }
.serang-v2 .v2-prayer-list small { font-size:8px; }
.serang-v2 .v2-prayer-list strong { color:#fff; font-size:9px; }
.serang-v2 .v2-prayer-list > span.is-next { background:rgba(244,197,66,.16); color:#FFF1B6; box-shadow:inset 0 0 0 1px rgba(244,197,66,.34); }
.serang-v2 .v2-prayer-list > span.is-next strong { color:#FFE27A; }
.serang-v2 .v2-weather-widget { min-width:156px; gap:8px; border-left:1px solid rgba(255,255,255,.24); padding-left:14px; white-space:nowrap; }
.serang-v2 .v2-weather-widget > i { color:#FFE27A; font-size:21px; }
.serang-v2 .v2-weather-widget span { display:grid; }
.serang-v2 .v2-weather-widget strong { font-size:13px; line-height:15px; }
.serang-v2 .v2-weather-widget small { max-width:110px; overflow:hidden; color:#D9EEF7; font-size:8px; line-height:11px; text-overflow:ellipsis; }
.serang-v2 .v2-weather-widget em { align-self:start; border-radius:8px; background:rgba(255,255,255,.16); color:#fff; padding:1px 5px; font-size:7px; line-height:12px; font-style:normal; font-weight:700; letter-spacing:.04em; }
.serang-v2 .v2-header { position:relative; z-index:1000; border-bottom:1px solid var(--v2-line); background:#fff; }
.serang-v2 .v2-header-row { min-height:80px; position:relative; display:grid; grid-template-columns:230px 1fr 40px auto; align-items:center; gap:24px; }
.serang-v2 .v2-brand { display:flex; align-items:center; gap:12px; color:var(--v2-green-dark); text-decoration:none; }
.serang-v2 .v2-brand img { width:42px; height:50px; object-fit:contain; }
.serang-v2 .v2-brand small,.serang-v2 .v2-brand strong { display:block; }
.serang-v2 .v2-brand small { color:var(--v2-muted); font-size:12px; }
.serang-v2 .v2-brand strong { font-size:20px; line-height:24px; letter-spacing:-.02em; }
.serang-v2 .v2-desktop-nav { min-width:0; align-self:stretch; display:flex; align-items:center; justify-content:flex-end; }
.serang-v2 .v2-desktop-menu,.serang-v2 .v2-nav-dropdown-list,.serang-v2 .v2-nav-nested ul,.serang-v2 .v2-mobile-menu-list,.serang-v2 .v2-mobile-menu-group ul { margin:0; padding:0; list-style:none; }
.serang-v2 .v2-desktop-menu { height:100%; display:flex; align-items:stretch; justify-content:flex-end; gap:3px; }
.serang-v2 .v2-nav-item { position:static; display:flex; align-items:stretch; }
.serang-v2 .v2-nav-link,.serang-v2 .v2-nav-trigger { min-height:48px; position:relative; display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--v2-green-dark); padding:0 10px; font:600 13px/18px Inter,Arial,sans-serif; text-decoration:none; white-space:nowrap; cursor:pointer; }
.serang-v2 .v2-nav-link::after,.serang-v2 .v2-nav-trigger::after { position:absolute; right:10px; bottom:8px; left:10px; height:2px; border-radius:99px; background:var(--v2-green); content:''; opacity:0; transform:scaleX(.35); transition:opacity 160ms ease,transform 160ms ease; }
.serang-v2 .v2-nav-link:hover,.serang-v2 .v2-nav-trigger:hover,.serang-v2 .v2-nav-item.is-open > .v2-nav-trigger { color:var(--v2-green); }
.serang-v2 .v2-nav-link:hover::after,.serang-v2 .v2-nav-trigger:hover::after,.serang-v2 .v2-nav-item.is-open > .v2-nav-trigger::after { opacity:1; transform:scaleX(1); }
.serang-v2 .v2-nav-trigger > i { font-size:12px; transition:transform 180ms ease; }
.serang-v2 .v2-nav-item.is-open > .v2-nav-trigger > i,.serang-v2 .v2-nav-item:hover > .v2-nav-trigger > i { transform:rotate(180deg); }
.serang-v2 .v2-nav-dropdown { width:100%; max-height:min(520px,calc(100vh - 150px)); position:absolute; z-index:50; top:100%; left:0; overflow:auto; border:0; border-radius:0 0 16px 16px; background:linear-gradient(120deg,#075985 0%,#0874A6 54%,#086B82 100%); color:#fff; padding:30px; box-shadow:0 24px 54px rgba(4,61,90,.28); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity 190ms ease,visibility 190ms ease,transform 190ms ease; }
.serang-v2 .v2-nav-dropdown::before { position:absolute; inset:0; background:radial-gradient(circle at 92% 18%,rgba(126,211,235,.22),transparent 25%),radial-gradient(circle at 10% 100%,rgba(255,255,255,.09),transparent 28%); content:''; pointer-events:none; }
.serang-v2 .v2-nav-dropdown.is-wide { width:100%; }
.serang-v2 .v2-nav-item:not(.is-dismissed):hover > .v2-nav-dropdown,.serang-v2 .v2-nav-item.is-open > .v2-nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.serang-v2 .v2-mega-close { width:34px; height:34px; position:absolute; z-index:2; top:14px; right:16px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(0,29,48,.16); color:#fff; font-size:19px; cursor:pointer; }
.serang-v2 .v2-mega-close:hover { background:rgba(0,29,48,.34); }
.serang-v2 .v2-mega-layout { position:relative; z-index:1; display:grid; grid-template-columns:270px minmax(0,1fr); gap:30px; }
.serang-v2 .v2-mega-intro { align-self:stretch; border-right:1px solid rgba(255,255,255,.2); padding:4px 28px 4px 2px; }
.serang-v2 .v2-mega-intro > i { width:54px; height:54px; display:grid; place-items:center; margin-bottom:16px; border:1px solid rgba(255,255,255,.25); border-radius:14px; background:rgba(255,255,255,.12); color:#BDEBFA; font-size:28px; }
.serang-v2 .v2-mega-intro > span,.serang-v2 .v2-mega-intro > strong,.serang-v2 .v2-mega-intro > p { display:block; }
.serang-v2 .v2-mega-intro > span { color:#BDEBFA; font-size:9px; line-height:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.serang-v2 .v2-mega-intro > strong { margin-top:3px; color:#fff; font-size:25px; line-height:32px; letter-spacing:-.025em; }
.serang-v2 .v2-mega-intro > p { max-width:240px; margin-top:9px; color:#D9EEF7; font-size:11px; line-height:18px; }
.serang-v2 .v2-mega-intro > a { min-height:34px; display:inline-flex; align-items:center; gap:7px; margin-top:16px; border:1px solid rgba(255,255,255,.34); border-radius:6px; color:#fff; padding:6px 10px; font-size:10px; font-weight:700; text-decoration:none; }
.serang-v2 .v2-mega-content { min-width:0; }
.serang-v2 .v2-mega-content-heading { min-height:34px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-right:34px; }
.serang-v2 .v2-mega-content-heading strong { color:#fff; font-size:13px; line-height:18px; }
.serang-v2 .v2-mega-content-heading span { border-radius:99px; background:rgba(255,255,255,.12); color:#D9EEF7; padding:3px 9px; font-size:9px; line-height:14px; }
.serang-v2 .v2-nav-dropdown-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.serang-v2 .v2-nav-dropdown-item { min-width:0; }
.serang-v2 .v2-nav-dropdown-item > a,.serang-v2 .v2-nav-nested > summary { min-height:72px; display:grid; grid-template-columns:42px minmax(0,1fr) 16px; align-items:center; gap:11px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; padding:10px 11px; font-size:11px; line-height:15px; font-weight:600; text-decoration:none; cursor:pointer; transition:background 160ms ease,border-color 160ms ease,transform 160ms ease; }
.serang-v2 .v2-nav-dropdown-item > a:hover,.serang-v2 .v2-nav-nested > summary:hover { border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.16); color:#fff; transform:translateY(-1px); }
.serang-v2 .v2-nav-dropdown-item > a > i:first-child,.serang-v2 .v2-nav-nested > summary > i:first-child { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:#fff; color:#0874A6; font-size:21px; }
.serang-v2 .v2-nav-dropdown-item > a > span,.serang-v2 .v2-nav-nested > summary > span { min-width:0; overflow:hidden; }
.serang-v2 .v2-nav-dropdown-item strong,.serang-v2 .v2-nav-dropdown-item small { display:block; }
.serang-v2 .v2-nav-dropdown-item strong { overflow:hidden; color:#fff; font-size:11px; line-height:15px; text-overflow:ellipsis; white-space:nowrap; }
.serang-v2 .v2-nav-dropdown-item small { overflow:hidden; margin-top:3px; color:#D8EDF5; font-size:10px; line-height:15px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.serang-v2 .v2-nav-dropdown-item > a > i:last-child,.serang-v2 .v2-nav-nested > summary > i:last-child { flex:0 0 auto; color:#BDEBFA; font-size:13px; }
.serang-v2 .v2-nav-nested > summary { list-style:none; }.serang-v2 .v2-nav-nested > summary::-webkit-details-marker { display:none; }
.serang-v2 .v2-nav-nested[open] > summary > i:last-child { transform:rotate(180deg); }
.serang-v2 .v2-nav-nested ul { grid-column:1/-1; display:grid; gap:5px; margin:5px 4px 0 14px; border-left:2px solid rgba(255,255,255,.22); padding-left:7px; }
.serang-v2 .v2-search-icon { width:40px; height:40px; display:grid; place-items:center; color:var(--v2-green-dark); font-size:22px; text-decoration:none; }
.serang-v2 .v2-digital { min-height:48px; display:inline-flex; align-items:center; gap:8px; border-radius:8px; background:var(--v2-green); color:#fff; padding:12px 16px; font-size:14px; font-weight:600; text-decoration:none; }
.serang-v2 .v2-digital:hover { background:var(--v2-green-dark); }
.serang-v2 .v2-mobile-nav { display:none; }
.serang-v2 .v2-mobile-nav > summary::-webkit-details-marker,.serang-v2 .v2-mobile-menu-group > summary::-webkit-details-marker { display:none; }

.serang-v2 .v2-hero { position:relative; min-height:520px; overflow:hidden; background:var(--v2-ivory); }
.serang-v2 .v2-heritage-pattern { position:absolute; inset:0; z-index:0; background-image:url('../assets/img/sections/banten-heritage-pattern.svg'); background-size:260px; opacity:.07; }
.serang-v2 .v2-hero-grid { position:relative; z-index:2; min-height:520px; display:grid; grid-template-columns:48% 52%; align-items:center; padding-block:32px 80px; }
.serang-v2 .v2-hero-copy { position:relative; z-index:4; max-width:600px; }
.serang-v2 .v2-eyebrow { color:var(--v2-green); font-size:12px; line-height:16px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.serang-v2 .v2-eyebrow span { color:var(--v2-muted); }
.serang-v2 .v2-hero h1 { margin-top:12px; color:var(--v2-green-dark); font-size:60px; line-height:60px; letter-spacing:-.04em; font-weight:800; }
.serang-v2 .v2-hero h1 span { color:var(--v2-green); }
.serang-v2 .v2-intro { max-width:430px; margin-top:16px; font-size:16px; line-height:24px; }
.serang-v2 .v2-search { max-width:610px; margin-top:22px; }
.serang-v2 .v2-search-panel { position:relative; border:1px solid rgba(8,116,166,.2); border-radius:17px; background:rgba(255,255,255,.9); padding:9px; box-shadow:0 18px 42px rgba(4,61,90,.14),0 3px 9px rgba(4,61,90,.06); backdrop-filter:blur(8px); }
.serang-v2 .v2-search-panel::before { position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:linear-gradient(110deg,rgba(126,211,235,.5),transparent 38%,rgba(53,169,131,.26)); content:''; filter:blur(7px); opacity:.5; }
.serang-v2 .v2-search-label { min-height:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1px 5px 7px; }
.serang-v2 .v2-search-label span { display:inline-flex; align-items:center; gap:6px; color:var(--v2-green-dark); font-size:10px; line-height:14px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.serang-v2 .v2-search-label span i { color:#C7952D; font-size:14px; }
.serang-v2 .v2-search-label small { color:var(--v2-muted); font-size:9px; line-height:13px; }
.serang-v2 .v2-search-field { min-height:60px; display:flex; align-items:center; gap:10px; border:1px solid #CEDFE5; border-radius:12px; background:#F8FBFC; padding:6px; transition:border-color 170ms ease,background 170ms ease,box-shadow 170ms ease; }
.serang-v2 .v2-search-field:focus-within { border-color:#4DA5C7; background:#fff; box-shadow:0 0 0 4px rgba(8,116,166,.1); }
.serang-v2 .v2-search-leading { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; background:#E4F2F7; color:var(--v2-green); font-size:21px; }
.serang-v2 .v2-search input { width:100%; min-width:0; height:46px; border:0; outline:0; background:transparent; color:var(--v2-ink); font-size:13px; }
.serang-v2 .v2-search input::placeholder { color:#80909A; opacity:1; }
.serang-v2 .v2-search input::-webkit-search-cancel-button { cursor:pointer; }
.serang-v2 .v2-search button { min-width:104px; height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto; border:0; border-radius:10px; background:linear-gradient(135deg,#0874A6,#075985); color:#fff; padding-inline:16px; box-shadow:0 7px 15px rgba(8,116,166,.22); font-size:12px; font-weight:700; cursor:pointer; transition:box-shadow 160ms ease,transform 160ms ease; }
.serang-v2 .v2-search button i { font-size:15px; transition:transform 160ms ease; }
.serang-v2 .v2-search button:hover { box-shadow:0 10px 20px rgba(8,116,166,.3); transform:translateY(-1px); }
.serang-v2 .v2-search button:hover i { transform:translateX(3px); }
.serang-v2 .v2-search button:active { box-shadow:0 4px 9px rgba(8,116,166,.2); transform:translateY(0); }
.serang-v2 #v2-search-scope { display:flex; align-items:center; gap:5px; margin-top:7px; color:var(--v2-muted); padding:0 5px 1px; font-size:9px; line-height:13px; }
.serang-v2 #v2-search-scope i { flex:0 0 auto; color:#5C9CB5; font-size:12px; }
.serang-v2 .v2-popular { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.serang-v2 .v2-popular > span { color:var(--v2-muted); font-size:12px; }
.serang-v2 .v2-popular a { min-height:32px; display:inline-flex; align-items:center; border:1px solid #C9D5CD; border-radius:16px; background:#fff; color:var(--v2-green-dark); padding:4px 12px; font-size:12px; font-weight:600; text-decoration:none; }
.serang-v2 .v2-popular a:hover { border-color:var(--v2-green); }
.serang-v2 .v2-hero-photo { position:absolute; z-index:1; top:0; right:0; bottom:0; width:58%; overflow:hidden; }
.serang-v2 .v2-hero-photo::before { position:absolute; inset:0; z-index:2; content:''; border-left:80px solid var(--v2-ivory); border-top:520px solid transparent; opacity:.78; pointer-events:none; }
.serang-v2 .v2-hero-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 54%; }
.serang-v2 .v2-hero-photo figcaption { position:absolute; z-index:3; right:24px; bottom:88px; display:grid; justify-items:end; border-radius:6px; background:rgba(255,255,255,.90); color:var(--v2-green-dark); padding:8px 12px; font-size:11px; }
.serang-v2 .v2-hero-photo figcaption span,.serang-v2 .v2-hero-photo figcaption small { display:block; }
.serang-v2 .v2-hero-photo figcaption small { margin-top:2px; color:var(--v2-muted); font-size:9px; }
.serang-v2 .v2-hero-photo figcaption a { color:inherit; }
.serang-v2 .v2-hero-note { position:absolute; z-index:3; top:40px; right:32px; color:var(--v2-blue); font-size:18px; line-height:24px; font-style:italic; text-align:right; transform:rotate(-3deg); }
.serang-v2 .v2-hero-silhouette { position:absolute; z-index:2; right:0; bottom:0; left:0; height:118px; overflow:hidden; opacity:.82; pointer-events:none; }
.serang-v2 .v2-hero-silhouette img { width:100%; min-width:900px; height:100%; object-fit:cover; object-position:center bottom; }

.serang-v2 .v2-stats { position:relative; z-index:10; background:#fff; }
.serang-v2 .v2-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); transform:translateY(-36px); border:1px solid var(--v2-line); border-radius:10px; background:#fff; box-shadow:0 12px 28px rgba(7,62,41,.10); }
.serang-v2 .v2-stats article { min-height:96px; display:flex; align-items:center; gap:16px; border-right:1px solid var(--v2-line); padding:16px 24px; }
.serang-v2 .v2-stats article:last-child { border-right:0; }
.serang-v2 .v2-stats i { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#E7F1FF; color:#1768B1; font-size:24px; }
.serang-v2 .v2-stats article:nth-child(2) i { background:var(--v2-green-light); color:var(--v2-green); }
.serang-v2 .v2-stats article:nth-child(3) i { background:#F5F0E4; color:#8A6B21; }
.serang-v2 .v2-stats .v2-emergency i { background:#FDEBEC; color:#C72C41; }
.serang-v2 .v2-stats strong,.serang-v2 .v2-stats span { display:block; }
.serang-v2 .v2-stats strong { color:var(--v2-green-dark); font-size:16px; line-height:20px; }
.serang-v2 .v2-stats span { margin-top:2px; color:var(--v2-muted); font-size:12px; line-height:16px; }
.serang-v2 .v2-stats .v2-stat-administration { white-space:nowrap; }
.serang-v2 .v2-stats .v2-stat-administration span { display:inline; margin:0; color:inherit; font:inherit; }
.serang-v2 .v2-stats .v2-stat-administration b { color:#82A092; font-weight:600; }
.serang-v2 .v2-stats small { font:inherit; }

.serang-v2 .v2-section { padding-block:40px; }
.serang-v2 .v2-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.serang-v2 .v2-section-heading h2 { margin-top:4px; color:var(--v2-green-dark); font-size:32px; line-height:40px; letter-spacing:-.025em; }
.serang-v2 .v2-section-heading p:not(.v2-eyebrow) { color:var(--v2-muted); font-size:14px; line-height:20px; }
.serang-v2 .v2-section-heading > a { min-height:42px; display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; border:1px solid #C6DDE6; border-radius:999px; background:linear-gradient(135deg,#fff,#EFF7FA); color:var(--v2-green); padding:5px 6px 5px 15px; box-shadow:0 5px 14px rgba(4,61,90,.07); font-size:11px; line-height:16px; font-weight:700; text-decoration:none; transition:color 170ms ease,background 170ms ease,border-color 170ms ease,box-shadow 170ms ease,transform 170ms ease; }
.serang-v2 .v2-section-heading > a > i { width:29px; height:29px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--v2-green); color:#fff; font-size:14px; transition:color 170ms ease,background 170ms ease,transform 170ms ease; }
.serang-v2 .v2-section-heading > a:hover { border-color:var(--v2-green); background:var(--v2-green); color:#fff; box-shadow:0 9px 20px rgba(8,116,166,.2); transform:translateY(-2px); }
.serang-v2 .v2-section-heading > a:hover > i { background:#fff; color:var(--v2-green); transform:translateX(2px); }
.serang-v2 .v2-section-heading > a:active { box-shadow:0 3px 8px rgba(8,116,166,.16); transform:translateY(0); }
.serang-v2 .v2-services { padding-top:16px; background:#fff; }
.serang-v2 .v2-service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0; list-style:none; }
.serang-v2 .v2-service-card { min-height:96px; display:grid; grid-template-columns:44px 1fr 20px; align-items:center; gap:12px; border:1px solid var(--v2-line); border-radius:8px; background:#fff; color:var(--v2-green-dark); padding:12px 16px; text-decoration:none; box-shadow:0 4px 12px rgba(7,62,41,.05); transition:transform 140ms ease,border-color 140ms ease; }
.serang-v2 .v2-service-card:hover { border-color:#9CB9A9; transform:translateY(-2px); }
.serang-v2 .v2-service-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--v2-green-light); color:var(--v2-green); font-size:23px; }
.serang-v2 .v2-service-card strong,.serang-v2 .v2-service-card small { display:block; }
.serang-v2 .v2-service-card strong { font-size:14px; line-height:20px; }
.serang-v2 .v2-service-card small { margin-top:4px; color:var(--v2-muted); font-size:11px; line-height:16px; }
.serang-v2 .v2-service-arrow { color:var(--v2-blue); }

.serang-v2 .v2-digital-section { padding:8px 0 40px; background:#fff; }
.serang-v2 .v2-digital-banner { min-height:232px; display:grid; grid-template-columns:42% 36% 22%; align-items:center; position:relative; overflow:hidden; border-radius:10px; background:var(--v2-green-dark); color:#fff; padding:24px 40px; }
.serang-v2 .v2-digital-banner::before { position:absolute; inset:0; content:''; background-image:url('../assets/img/sections/banten-heritage-pattern.svg'); background-size:240px; opacity:.04; }
.serang-v2 .v2-digital-copy,.serang-v2 .v2-digital-preview,.serang-v2 .v2-digital-benefits { position:relative; z-index:1; }
.serang-v2 .v2-digital-copy h2 { color:#fff; font-size:32px; line-height:40px; }.serang-v2 .v2-digital-copy h3 { margin-top:0; color:#fff; font-size:20px; line-height:28px; }.serang-v2 .v2-digital-copy p { max-width:440px; margin-top:12px; color:#D8E9DF; font-size:14px; line-height:20px; }
.serang-v2 .v2-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }.serang-v2 .v2-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:6px; padding:10px 16px; font-size:13px; font-weight:600; text-decoration:none; }.serang-v2 .v2-button-light { background:#fff; color:var(--v2-green-dark); }.serang-v2 .v2-button-outline { border:1px solid #A9C8B8; color:#fff; }
.serang-v2 .v2-digital-preview { width:115%; align-self:end; margin-left:-10%; object-fit:contain; }
.serang-v2 .v2-digital-devices { position:relative; z-index:1; min-height:190px; align-self:end; display:flex; align-items:flex-end; justify-content:center; padding:0 24px 3px 0; }
.serang-v2 .v2-laptop { width:94%; position:relative; border:7px solid #E4E9EC; border-bottom-width:13px; border-radius:9px 9px 4px 4px; background:#fff; box-shadow:0 15px 28px rgba(0,24,43,.28); transform:perspective(900px) rotateY(-3deg); }
.serang-v2 .v2-laptop::after { position:absolute; right:-9%; bottom:-19px; left:-9%; height:7px; content:''; border-radius:0 0 50% 50%; background:#C8D1D6; }
.serang-v2 .v2-laptop > span { height:13px; display:flex; align-items:center; gap:3px; background:#F0F3F5; padding:0 5px; }
.serang-v2 .v2-laptop > span i { width:3px; height:3px; border-radius:50%; background:#A9B5BC; }
.serang-v2 .v2-laptop img { width:100%; aspect-ratio:16/9; display:block; object-fit:cover; object-position:top; }
.serang-v2 .v2-phone { width:64px; height:132px; position:absolute; right:4px; bottom:0; overflow:hidden; border:5px solid #E9ECEE; border-radius:12px; background:#fff; box-shadow:0 12px 24px rgba(0,24,43,.3); transform:rotate(2deg); }
.serang-v2 .v2-phone::before { position:absolute; z-index:2; top:3px; left:50%; width:18px; height:3px; content:''; border-radius:3px; background:#BBC5CB; transform:translateX(-50%); }
.serang-v2 .v2-phone img { width:250%; max-width:none; height:100%; display:block; object-fit:cover; object-position:left top; }
.serang-v2 .v2-digital-benefits { display:grid; gap:12px; padding:0 0 0 20px; list-style:none; }.serang-v2 .v2-digital-benefits li { display:flex; align-items:center; gap:10px; color:#fff; font-size:13px; }.serang-v2 .v2-digital-benefits i { width:34px; height:34px; display:grid; place-items:center; border:1px solid #5F8C76; border-radius:50%; font-size:18px; }

.serang-v2 .v2-city-information { background:var(--v2-ivory); }
.serang-v2 .v2-information-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr); gap:32px; align-items:stretch; }
.serang-v2 .v2-information-grid > *,.serang-v2 .v2-editorial-grid > * { min-width:0; }
.serang-v2 .v2-data-block,.serang-v2 .v2-apbd-widget { display:flex; min-width:0; flex-direction:column; }
.serang-v2 .v2-heading-compact { min-height:80px; margin-bottom:16px; }.serang-v2 .v2-heading-compact h2 { font-size:28px; line-height:36px; }
.serang-v2 .v2-data-card,.serang-v2 .v2-important-list { overflow:hidden; border:1px solid var(--v2-line); border-radius:8px; background:#fff; box-shadow:0 4px 12px rgba(7,62,41,.05); }
.serang-v2 .v2-data-card { display:flex; flex:1 1 auto; flex-direction:column; }
.serang-v2 .v2-map-controls { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--v2-line); padding:8px; }
.serang-v2 .v2-map-controls button { min-height:36px; flex:0 0 auto; border:1px solid #CAD4CD; border-radius:4px; background:#fff; color:var(--v2-green-dark); padding:6px 10px; font-size:11px; cursor:pointer; }
.serang-v2 .v2-map-controls button.is-active { border-color:var(--v2-green); background:var(--v2-green); color:#fff; }
.serang-v2 .v2-map-grid { display:grid; grid-template-columns:minmax(0,1fr) 220px; flex:1 1 auto; }
.serang-v2 .v2-map-shell { min-height:320px; position:relative; overflow:hidden; background:#DDE9E3; }
.serang-v2 #v2-map { position:absolute; inset:0; z-index:1; }
.serang-v2 #v2-map-label { position:absolute; z-index:500; left:12px; bottom:12px; border-radius:4px; background:var(--v2-green-dark); color:#fff; padding:6px 10px; font-size:11px; }
.serang-v2 .v2-map-legend { position:absolute; z-index:500; top:12px; right:12px; display:flex; gap:10px; border:1px solid rgba(7,62,41,.12); border-radius:5px; background:rgba(255,255,255,.94); color:var(--v2-green-dark); padding:7px 9px; box-shadow:0 4px 12px rgba(7,62,41,.08); font-size:9px; font-weight:600; pointer-events:none; }
.serang-v2 .v2-map-legend span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.serang-v2 .v2-map-legend i { width:12px; height:12px; display:block; border:2px solid #075985; border-radius:2px; background:rgba(84,173,214,.38); }
.serang-v2 .v2-map-legend i.is-selected { border-color:#8A3B21; background:#F4C542; }
.serang-v2 .v2-district-boundary { cursor:pointer; transition:fill-opacity .18s ease,stroke-width .18s ease,fill .18s ease; }
.serang-v2 .v2-district-boundary:focus { outline:none; stroke:#B4472D; stroke-width:4px; }
.serang-v2 .v2-district-panel { display:flex; min-width:0; flex-direction:column; background:#fff; }
.serang-v2 .v2-district-panel header { border-bottom:1px solid var(--v2-line); padding:14px 16px 12px; }
.serang-v2 .v2-district-panel header > span { color:var(--v2-green); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.serang-v2 .v2-district-panel h3 { margin-top:3px; color:var(--v2-green-dark); font-size:17px; line-height:22px; }
.serang-v2 .v2-district-panel header p { margin-top:4px; color:var(--v2-muted); font-size:10px; line-height:14px; }
.serang-v2 .v2-data-list { display:grid; grid-template-columns:1fr 1fr; }.serang-v2 .v2-data-list > div { min-height:72px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--v2-line); border-bottom:1px solid var(--v2-line); padding:9px 11px; }.serang-v2 .v2-data-list > div:nth-child(even) { border-right:0; }.serang-v2 .v2-data-list > div:nth-last-child(-n+2) { border-bottom:0; }.serang-v2 .v2-data-list dt { color:var(--v2-muted); font-size:9px; line-height:12px; }.serang-v2 .v2-data-list dd { margin-top:3px; color:var(--v2-green-dark); font-size:13px; line-height:17px; font-weight:700; }.serang-v2 .v2-data-list small { display:block; color:var(--v2-muted); font-size:9px; font-weight:400; }
.serang-v2 .v2-data-source { min-height:36px; display:flex; flex-wrap:wrap; align-items:center; gap:3px 5px; margin-top:auto; border-top:1px solid var(--v2-line); color:var(--v2-muted); padding:7px 11px; font-size:9px; line-height:13px; font-weight:600; }
.serang-v2 .v2-data-source a { color:var(--v2-green); text-decoration:none; }
.serang-v2 .v2-data-source a:hover { text-decoration:underline; }
.serang-v2 .v2-district-tooltip { border:0; border-radius:12px; background:#fff; color:var(--v2-green-dark); padding:3px 7px; box-shadow:0 3px 10px rgba(7,62,41,.15); font:600 10px/14px Inter,Arial,sans-serif; }
.serang-v2 .v2-district-tooltip::before { border-top-color:#fff; }
.serang-v2 .v2-important-list article { min-height:88px; display:grid; grid-template-columns:40px 1fr 20px; align-items:center; gap:12px; border-bottom:1px solid var(--v2-line); padding:12px 16px; }.serang-v2 .v2-important-list article:last-child { border-bottom:0; }.serang-v2 .v2-important-list article > i:first-child { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:#FFF1E8; color:var(--v2-terracotta); font-size:20px; }.serang-v2 .v2-important-list strong,.serang-v2 .v2-important-list span { display:block; }.serang-v2 .v2-important-list strong { color:var(--v2-green-dark); font-size:13px; }.serang-v2 .v2-important-list span { margin-top:3px; color:var(--v2-muted); font-size:11px; line-height:16px; }
.serang-v2 .v2-apbd-widget { min-width:0; }
.serang-v2 .v2-apbd-card { display:flex; overflow:hidden; flex:1 1 auto; flex-direction:column; border:1px solid var(--v2-line); border-radius:8px; background:#fff; padding:11px; box-shadow:0 4px 12px rgba(7,62,41,.05); }
.serang-v2 .v2-apbd-tabs { display:flex; flex:0 0 auto; gap:5px; margin-bottom:10px; border:1px solid #D8E5E0; border-radius:7px; background:#F3F8F6; padding:4px; }
.serang-v2 .v2-apbd-tabs button { min-height:34px; flex:1 1 0; border:0; border-radius:5px; background:transparent; color:var(--v2-muted); padding:6px 7px; font-size:11px; line-height:15px; font-weight:700; cursor:pointer; }
.serang-v2 .v2-apbd-tabs button.is-active { background:var(--v2-green); color:#fff; box-shadow:0 3px 8px rgba(8,116,166,.2); }
.serang-v2 .v2-apbd-tabs button:focus-visible { outline:2px solid var(--v2-blue); outline-offset:1px; }
.serang-v2 .v2-apbd-views { display:grid; flex:1 1 auto; }
.serang-v2 .v2-apbd-view { min-height:0; border:1px solid #D8E5E0; border-radius:8px; background:linear-gradient(180deg,#FBFDFC,#F5FAF8); padding:13px; }
.serang-v2 .v2-apbd-view.is-active { height:100%; }
.serang-v2 .v2-apbd-chart { height:100%; display:grid; grid-template-rows:auto 1fr; align-items:center; gap:13px; min-height:230px; }
.serang-v2 .v2-apbd-donut { width:124px; height:124px; position:relative; display:grid; place-items:center; justify-self:center; flex:0 0 auto; border-radius:50%; background:conic-gradient(#DCE9E4 0 100%); box-shadow:0 10px 24px rgba(7,62,41,.09),inset 0 0 0 1px rgba(7,62,41,.06); transform:rotate(-90deg); transition:background 360ms ease; }
.serang-v2 .v2-apbd-donut::before { width:80px; height:80px; position:absolute; border-radius:50%; background:#fff; box-shadow:0 2px 12px rgba(7,62,41,.08); content:''; }
.serang-v2 .v2-apbd-donut > div { z-index:1; width:76px; text-align:center; transform:rotate(90deg); }
.serang-v2 .v2-apbd-donut small,.serang-v2 .v2-apbd-donut strong { display:block; }
.serang-v2 .v2-apbd-donut small { color:var(--v2-muted); font-size:9px; line-height:11px; }
.serang-v2 .v2-apbd-donut strong { margin-top:3px; color:var(--v2-green-dark); font-size:11px; line-height:13px; letter-spacing:-.02em; }
.serang-v2 .v2-apbd-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); align-items:stretch; gap:7px; min-width:0; }
.serang-v2 .v2-apbd-legend > div { min-width:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; border:1px solid #E2ECE8; border-radius:7px; background:#fff; padding:7px 5px; text-align:center; }
.serang-v2 .v2-apbd-legend > div:last-child { padding-bottom:7px; }
.serang-v2 .v2-apbd-legend i { width:20px; height:4px; flex:0 0 auto; border-radius:999px; background:#0874A6; }
.serang-v2 .v2-apbd-legend i.is-green { background:#35A983; }.serang-v2 .v2-apbd-legend i.is-slate { background:#C8D6D1; }
.serang-v2 .v2-apbd-legend i.is-gold { background:#C7952D; }.serang-v2 .v2-apbd-legend i.is-orange { background:#E3A84B; }.serang-v2 .v2-apbd-legend i.is-cream { background:#F1C97B; }
.serang-v2 .v2-apbd-legend i.is-purple { background:#8A55B5; }.serang-v2 .v2-apbd-legend i.is-pink { background:#C77ED3; }
.serang-v2 .v2-apbd-legend span { min-height:28px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--v2-muted); font-size:9px; line-height:12px; }
.serang-v2 .v2-apbd-legend strong { color:var(--v2-green-dark); font-size:11px; line-height:14px; }
.serang-v2 .v2-apbd-widget-footer { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; gap:8px; margin-top:9px; border-top:1px solid #E7EFEB; color:var(--v2-muted); padding-top:8px; font-size:9px; line-height:13px; }
.serang-v2 .v2-apbd-widget-footer a { color:var(--v2-green); font-weight:600; text-decoration:none; white-space:nowrap; }
.serang-v2 .v2-apbd-widget-footer a:hover { text-decoration:underline; }

.serang-v2 .v2-editorial { position:relative; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#F7FBFD 100%); }
.serang-v2 .v2-editorial::before { width:360px; height:360px; position:absolute; top:-210px; right:-120px; border-radius:50%; background:radial-gradient(circle,rgba(126,211,235,.18),transparent 70%); content:''; pointer-events:none; }
.serang-v2 .v2-editorial-grid { display:block; position:relative; z-index:1; }
.serang-v2 .v2-news-layout { display:grid; grid-template-columns:minmax(0,2.15fr) minmax(310px,.85fr); gap:18px; align-items:start; }
.serang-v2 .v2-news-feed { min-width:0; display:grid; grid-template-columns:minmax(0,1.48fr) minmax(250px,.72fr); gap:14px; }
.serang-v2 .v2-news-card { min-width:0; overflow:hidden; border:1px solid #D8E5E8; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(4,61,90,.07); transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.serang-v2 .v2-news-card:hover { border-color:#A9CCD8; box-shadow:0 15px 34px rgba(4,61,90,.13); transform:translateY(-3px); }
.serang-v2 .v2-news-secondary-grid { min-width:0; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px; }
.serang-v2 .v2-news-secondary-grid .v2-news-card { display:grid; grid-template-columns:102px minmax(0,1fr); min-height:145px; }
.serang-v2 .v2-news-media { position:relative; display:block; height:100%; min-height:145px; overflow:hidden; background:#DCE9EE; }
.serang-v2 .v2-news-card.is-featured { min-height:560px; position:relative; border:0; background:#073D5A; box-shadow:0 16px 38px rgba(4,61,90,.18); }
.serang-v2 .v2-news-card.is-featured .v2-news-media { position:absolute; inset:0; height:100%; }
.serang-v2 .v2-news-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform 420ms cubic-bezier(.16,1,.3,1); }
.serang-v2 .v2-news-media.is-image-missing { display:grid; place-items:center; background:linear-gradient(145deg,#0C5674,#12828B); }
.serang-v2 .v2-news-media.is-image-missing::before { position:absolute; z-index:1; color:rgba(255,255,255,.82); content:'KABAR KOTA SERANG'; font-size:10px; line-height:16px; font-weight:800; letter-spacing:.12em; text-align:center; }
.serang-v2 .v2-news-card:hover img { transform:scale(1.045); }
.serang-v2 .v2-news-card.is-featured .v2-news-media::after { position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,28,44,.05) 25%,rgba(3,35,52,.93) 100%); content:''; pointer-events:none; }
.serang-v2 .v2-news-featured-label { min-height:30px; position:absolute; z-index:1; top:16px; left:16px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.46); border-radius:999px; background:rgba(4,61,90,.84); color:#fff; padding:5px 11px; backdrop-filter:blur(6px); font-size:9px; line-height:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.serang-v2 .v2-news-featured-label i { color:#FFE27A; font-size:13px; }
.serang-v2 .v2-news-body { min-width:0; position:relative; padding:13px 13px 38px; }
.serang-v2 .v2-news-card.is-featured .v2-news-body { position:absolute; z-index:2; right:0; bottom:0; left:0; padding:100px 28px 28px; }
.serang-v2 .v2-news-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; color:var(--v2-muted); font-size:9px; line-height:13px; }
.serang-v2 .v2-news-meta time { display:inline-flex; align-items:center; gap:5px; }
.serang-v2 .v2-news-meta time i { color:var(--v2-green); font-size:12px; }
.serang-v2 .v2-news-meta span { border-radius:999px; background:#E8F5F1; color:var(--v2-green); padding:3px 7px; font-weight:700; }
.serang-v2 .v2-news-card h3 { margin-top:8px; font-size:14px; line-height:20px; }
.serang-v2 .v2-news-secondary-grid .v2-news-card h3 a { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.serang-v2 .v2-news-secondary-grid .v2-news-excerpt { display:none; }
.serang-v2 .v2-news-card.is-featured h3 { max-width:690px; margin-top:10px; font-size:28px; line-height:36px; letter-spacing:-.025em; }
.serang-v2 .v2-news-card h3 a { color:var(--v2-green-dark); text-decoration:none; }
.serang-v2 .v2-news-card h3 a:hover { color:var(--v2-green); }
.serang-v2 .v2-news-card.is-featured h3 a,.serang-v2 .v2-news-card.is-featured h3 a:hover { color:#fff; }
.serang-v2 .v2-news-excerpt { display:-webkit-box; overflow:hidden; margin-top:6px; color:var(--v2-muted); font-size:10px; line-height:16px; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.serang-v2 .v2-news-card.is-featured .v2-news-excerpt { max-width:690px; margin-top:10px; color:#D6E7ED; font-size:12px; line-height:19px; -webkit-line-clamp:3; }
.serang-v2 .v2-news-card.is-featured .v2-news-meta { color:#D6E7ED; }
.serang-v2 .v2-news-card.is-featured .v2-news-meta span { background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(5px); }
.serang-v2 .v2-news-card.is-featured .v2-news-meta time i { color:#FFE27A; }
.serang-v2 .v2-news-read { min-height:38px; display:inline-flex; align-items:center; gap:8px; margin-top:16px; border-radius:7px; background:var(--v2-green); color:#fff; padding:7px 13px; font-size:10px; line-height:15px; font-weight:700; text-decoration:none; }
.serang-v2 .v2-news-read i { transition:transform 160ms ease; }.serang-v2 .v2-news-read:hover i { transform:translateX(3px); }
.serang-v2 .v2-news-more { width:30px; height:30px; position:absolute; right:12px; bottom:10px; display:grid; place-items:center; border-radius:50%; background:#E7F3F9; color:var(--v2-green); font-size:15px; text-decoration:none; transition:background 160ms ease,color 160ms ease,transform 160ms ease; }
.serang-v2 .v2-news-more:hover { background:var(--v2-green); color:#fff; transform:translateX(2px); }
.serang-v2 .v2-empty { padding:24px; border:1px solid var(--v2-line); border-radius:12px; color:var(--v2-muted); }
.serang-v2 .v2-announcements { overflow:hidden; align-self:start; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:linear-gradient(155deg,#063D5C 0%,#075678 56%,#0A6D78 100%); box-shadow:0 16px 38px rgba(4,61,90,.16); }
.serang-v2 .v2-announcements::before { display:block; height:4px; background:linear-gradient(90deg,#F5B83B 0 28%,var(--v2-green) 28% 100%); content:''; }
.serang-v2 .v2-announcements-heading { min-height:82px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.13); padding:16px 18px; }
.serang-v2 .v2-announcements-icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; background:#FFF2CF; color:#B57000; font-size:21px; }
.serang-v2 .v2-announcements-heading p { color:#B57000; font-size:9px; line-height:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.serang-v2 .v2-announcements-heading h3 { margin-top:2px; color:#fff; font-size:20px; line-height:26px; }
.serang-v2 .v2-announcement-list { padding:6px 12px; }
.serang-v2 .v2-announcement-item { min-height:94px; display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:start; gap:10px; border-bottom:1px solid rgba(255,255,255,.13); color:inherit; padding:13px 4px; text-decoration:none; transition:background 160ms ease,transform 160ms ease; }
.serang-v2 .v2-announcement-item:last-child { border-bottom:0; }
.serang-v2 .v2-announcement-item:hover { border-radius:9px; background:rgba(255,255,255,.1); transform:translateX(3px); }
.serang-v2 .v2-announcement-number { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:#FFF2CF; color:#A96800; font-size:10px; font-weight:800; }
.serang-v2 .v2-announcement-copy { min-width:0; }
.serang-v2 .v2-announcement-copy strong { display:-webkit-box; overflow:hidden; color:#fff; font-size:11px; line-height:16px; font-weight:700; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.serang-v2 .v2-announcement-copy time { display:flex; align-items:center; gap:5px; margin-top:7px; color:#BED9E1; font-size:9px; line-height:13px; }
.serang-v2 .v2-announcement-copy time i { color:#C08317; font-size:11px; }
.serang-v2 .v2-announcement-item > i { align-self:center; color:#A9CDD8; font-size:15px; transition:transform 160ms ease; }
.serang-v2 .v2-announcement-item:hover > i { color:#FFE27A; transform:translateX(2px); }
.serang-v2 .v2-announcements-all { min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; border-top:1px solid rgba(255,255,255,.13); background:rgba(0,0,0,.1); color:#fff; font-size:10px; font-weight:750; text-decoration:none; }
.serang-v2 .v2-announcements-all:hover { background:#fff; color:var(--v2-green); }
.serang-v2 .v2-announcement-empty { min-height:180px; display:grid; place-items:center; align-content:center; gap:8px; color:var(--v2-muted); padding:24px; text-align:center; }
.serang-v2 .v2-announcement-empty i { color:#C08317; font-size:28px; }
.serang-v2 .v2-agenda-empty { min-height:210px; display:flex; gap:16px; align-items:flex-start; border:1px solid var(--v2-line); border-radius:8px; background:var(--v2-ivory); padding:24px; }.serang-v2 .v2-agenda-empty > i { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--v2-green-light); color:var(--v2-green); font-size:24px; }.serang-v2 .v2-agenda-empty h3 { color:var(--v2-green-dark); font-size:16px; line-height:24px; }.serang-v2 .v2-agenda-empty p { margin-top:8px; color:var(--v2-muted); font-size:13px; line-height:20px; }.serang-v2 .v2-agenda-empty a { min-height:40px; display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:var(--v2-green); font-size:13px; font-weight:600; }

.serang-v2 .v2-skyline { min-height:220px; display:flex; align-items:flex-start; position:relative; overflow:hidden; background:#EAF5F4; text-align:center; }.serang-v2 .v2-skyline .v2-container { position:relative; z-index:2; padding-top:32px; }.serang-v2 .v2-skyline p { color:var(--v2-green); font-size:14px; }.serang-v2 .v2-skyline h2 { color:var(--v2-green-dark); font-size:20px; line-height:28px; }.serang-v2 .v2-skyline > img { position:absolute; z-index:1; right:0; bottom:0; left:0; width:100%; min-width:900px; height:170px; object-fit:cover; object-position:center bottom; }
.serang-v2 .v2-footer { background:var(--v2-green-dark); color:#DCEAE2; }.serang-v2 .v2-footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr .9fr; gap:48px; padding-block:40px; }.serang-v2 .v2-footer-brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }.serang-v2 .v2-footer-brand img { width:42px; height:48px; object-fit:contain; }.serang-v2 .v2-footer-brand strong { font-size:14px; line-height:20px; }.serang-v2 .v2-footer address { margin-top:16px; color:#DCEAE2; font-size:12px; line-height:20px; font-style:normal; }.serang-v2 .v2-footer h2 { margin-bottom:12px; color:#fff; font-size:13px; line-height:20px; }.serang-v2 .v2-footer nav > a { display:block; width:max-content; max-width:100%; min-height:28px; color:#DCEAE2; font-size:12px; text-decoration:none; }.serang-v2 .v2-footer nav > a:hover { color:#fff; text-decoration:underline; }.serang-v2 .v2-social-links { display:flex; gap:8px; }.serang-v2 .v2-social-links a { width:40px; height:40px; display:grid; place-items:center; border:1px solid #537865; border-radius:50%; color:#fff; font-size:19px; text-decoration:none; }.serang-v2 .v2-footer-base { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #315B46; color:#BFD3C7; font-size:11px; }.serang-v2 .v2-footer-base nav { display:flex; flex-wrap:wrap; gap:20px; }.serang-v2 .v2-footer-base nav > a { min-height:auto; }.serang-v2 .v2-footer-base nav > span { color:#91AA9B; }

/* Visual refinement for the approved V2 composition. */
.serang-v2 .v2-hero { min-height:500px; background:#F1F8FA; }
.serang-v2 .v2-heritage-pattern { z-index:2; left:-100px; right:auto; width:min(980px,74vw); background-image:url('../assets/img/sections/serang-batik-patok-hero.svg'); background-repeat:no-repeat; background-position:0 50%; background-size:100% 100%; opacity:.21; filter:saturate(.88); -webkit-mask-image:linear-gradient(to right,#000 0,#000 78%,transparent 100%); mask-image:linear-gradient(to right,#000 0,#000 78%,transparent 100%); pointer-events:none; }
.serang-v2 .v2-hero-grid { z-index:3; min-height:500px; padding-block:28px 72px; }
.serang-v2 .v2-hero-photo::before { border-left-width:110px; border-left-color:#F1F8FA; border-top-width:500px; opacity:.72; }
.serang-v2 .v2-hero-photo img { filter:saturate(.88) contrast(.96); }
.serang-v2 .v2-hero-photo { right:calc((100vw - 100%)/-2); width:62%; clip-path:ellipse(82% 90% at 84% 50%); }
.serang-v2 .v2-hero-photo::before { display:none; }
.serang-v2 .v2-hero-photo::after { display:none; }
.serang-v2 .v2-hero-photo figcaption { right:82px; }
.serang-v2 .v2-hero-note { right:88px; }
.serang-v2 .v2-hero-silhouette { opacity:.68; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 48%); mask-image:linear-gradient(to bottom,transparent 0,#000 48%); }
.serang-v2 .v2-hero h1 span { color:#2F7D4A; }
.serang-v2 .v2-section { padding-block:32px; }
.serang-v2 .v2-services { padding-top:10px; background:#FFFEFB; }
.serang-v2 .v2-service-grid li:nth-child(4n+1) .v2-service-icon { background:#E9F1FF; color:#1768B1; }
.serang-v2 .v2-service-grid li:nth-child(4n+2) .v2-service-icon { background:#E8F5EE; color:#15805A; }
.serang-v2 .v2-service-grid li:nth-child(4n+3) .v2-service-icon { background:#FFF2DD; color:#B56A12; }
.serang-v2 .v2-service-grid li:nth-child(4n+4) .v2-service-icon { background:#EFE9FB; color:#6E42B8; }
.serang-v2 .v2-service-grid li:nth-child(5) .v2-service-icon { background:#FDEBEC; color:#C72C41; }
.serang-v2 .v2-digital-section { padding:4px 0 32px; background:#FFFEFB; }
.serang-v2 .v2-digital-banner { min-height:220px; background-color:#064D72; background-image:url('../assets/img/sections/serang-city-hall.jpg'); background-position:center; background-size:cover; background-blend-mode:soft-light; padding-block:22px; }
.serang-v2 .v2-digital-banner::before { background:rgba(3,55,84,.84); opacity:1; }
.serang-v2 .v2-digital-preview { width:105%; max-height:190px; margin-left:-4%; border:5px solid rgba(255,255,255,.82); border-bottom-width:12px; border-radius:9px 9px 4px 4px; box-shadow:0 14px 26px rgba(0,0,0,.22); object-fit:cover; object-position:top; transform:rotate(1deg); }
.serang-v2 .v2-digital-benefits i { border-color:#6C9BB5; background:rgba(255,255,255,.06); }
.serang-v2 .v2-city-information { background:#F4F8FB; }
.serang-v2 .v2-map-shell { min-height:290px; }
.serang-v2 .v2-citizen-programs { margin-bottom:-1px; padding-top:4px; padding-bottom:46px; background:linear-gradient(to bottom,#fff 0,#fff 36%,#F6FBFE 72%,#EAF6FC 100%); }
.serang-v2 .v2-citizen-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr); gap:20px; }
.serang-v2 .v2-citizen-heading { align-items:flex-start; margin-bottom:14px; }
.serang-v2 .v2-citizen-heading h2,.serang-v2 .v2-aspiration-panel h2 { color:var(--v2-green-dark); font-size:24px; line-height:32px; letter-spacing:-.02em; }
.serang-v2 .v2-citizen-heading p,.serang-v2 .v2-aspiration-panel p { color:var(--v2-muted); font-size:12px; line-height:18px; }
.serang-v2 .v2-program-count { min-height:34px; display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; border:1px solid #CFE0E7; border-radius:999px; background:#fff; color:#527281; padding:6px 11px; box-shadow:0 5px 14px rgba(4,61,90,.06); font-size:10px; line-height:14px; }
.serang-v2 .v2-program-count strong { color:#0874A6; font-size:13px; }
.serang-v2 .v2-innovation-grid { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 11px; scroll-behavior:smooth; scroll-snap-type:x proximity; scrollbar-color:#A7C6D2 #E8F1F4; scrollbar-width:thin; }
.serang-v2 .v2-innovation-grid::-webkit-scrollbar { height:6px; }
.serang-v2 .v2-innovation-grid::-webkit-scrollbar-track { border-radius:999px; background:#E8F1F4; }
.serang-v2 .v2-innovation-grid::-webkit-scrollbar-thumb { border-radius:999px; background:#A7C6D2; }
.serang-v2 .v2-innovation-grid article { width:250px; min-height:142px; display:flex; align-items:flex-start; flex:0 0 250px; gap:11px; border:1px solid var(--v2-line); border-radius:10px; background:#fff; padding:14px; color:var(--v2-green-dark); box-shadow:0 5px 15px rgba(4,61,90,.045); scroll-snap-align:start; transition:border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease; }
.serang-v2 .v2-innovation-grid article:hover { border-color:#9CB9A9; box-shadow:0 10px 22px rgba(4,61,90,.09); transform:translateY(-2px); }
.serang-v2 .v2-innovation-grid i { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:#FFF2DD; color:#B56A12; font-size:20px; }
.serang-v2 .v2-innovation-grid article:nth-child(4n+2) i { background:#E8F5EE; color:#15805A; }
.serang-v2 .v2-innovation-grid article:nth-child(4n+3) i { background:#E9F1FF; color:#1768B1; }
.serang-v2 .v2-innovation-grid article:nth-child(4n) i { background:#F1EAFB; color:#7A4BB2; }
.serang-v2 .v2-innovation-grid strong,.serang-v2 .v2-innovation-grid small { display:block; }
.serang-v2 .v2-innovation-grid strong { font-size:12px; line-height:17px; }
.serang-v2 .v2-innovation-grid small { margin-top:5px; color:var(--v2-muted); font-size:10px; line-height:15px; }
.serang-v2 .v2-innovation-hint { display:flex; align-items:center; gap:6px; margin-top:2px; color:#64818E; font-size:9px; line-height:13px; }
.serang-v2 .v2-innovation-hint i { color:#0874A6; font-size:14px; }
.serang-v2 .v2-aspiration-panel { min-height:142px; display:grid; grid-template-columns:1fr 110px; align-items:center; overflow:hidden; border:1px solid #D6E5DD; border-radius:10px; background:#EEF7F3; padding:18px 22px; }
.serang-v2 .v2-aspiration-panel > i { color:#A8CDBB; font-size:94px; transform:rotate(-8deg) translateY(10px); }
.serang-v2 .v2-aspiration-actions { display:grid; gap:7px; max-width:210px; margin-top:12px; }
.serang-v2 .v2-aspiration-actions a { min-height:34px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--v2-green); border-radius:5px; color:var(--v2-green); padding:6px 10px; font-size:11px; font-weight:600; text-decoration:none; }
.serang-v2 .v2-aspiration-actions a:first-child { background:var(--v2-green); color:#fff; }
.serang-v2 .v2-complaint-panel { min-height:0; display:block; background:linear-gradient(135deg,#EDF7F3 0,#F4F9FC 100%); }
.serang-v2 .v2-complaint-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.serang-v2 .v2-complaint-heading .v2-eyebrow { margin-bottom:2px; color:#0874A6; font-size:9px; line-height:13px; }
.serang-v2 .v2-complaint-heading > i { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#DDEFF5; color:#0874A6; font-size:22px; }
.serang-v2 .v2-complaint-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.serang-v2 .v2-complaint-links a { min-width:0; min-height:76px; display:grid; grid-template-columns:34px minmax(0,1fr) 16px; align-items:center; gap:8px; border:1px solid #C8DDD5; border-radius:8px; background:rgba(255,255,255,.82); color:var(--v2-green-dark); padding:10px; text-decoration:none; transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease; }
.serang-v2 .v2-complaint-links a:hover { border-color:#7DAE9A; box-shadow:0 7px 18px rgba(7,62,41,.09); transform:translateY(-2px); }
.serang-v2 .v2-complaint-links a > i:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:#E6F3F8; color:#0874A6; font-size:18px; }
.serang-v2 .v2-complaint-links a.is-wbs > i:first-child { background:#E6F3EC; color:#15805A; }
.serang-v2 .v2-complaint-links a > i:last-child { color:#0874A6; font-size:15px; }
.serang-v2 .v2-complaint-links strong,.serang-v2 .v2-complaint-links small { display:block; }
.serang-v2 .v2-complaint-links strong { font-size:11px; line-height:15px; }
.serang-v2 .v2-complaint-links small { margin-top:2px; color:var(--v2-muted); font-size:8px; line-height:12px; }
.serang-v2 .v2-skyline { min-height:320px; margin-bottom:-2px; background:linear-gradient(180deg,#EAF6FC 0%,#DDF1F9 54%,#77AFC3 82%,#043D5A 100%); }
.serang-v2 .v2-skyline::before { position:absolute; z-index:2; right:0; bottom:0; left:0; height:54%; content:''; background:linear-gradient(180deg,rgba(4,61,90,0),rgba(4,61,90,.08) 24%,rgba(4,61,90,.34) 58%,rgba(4,61,90,.78) 84%,#043D5A 100%); pointer-events:none; }
.serang-v2 .v2-skyline::after { position:absolute; z-index:3; right:0; bottom:0; left:0; height:90px; content:''; background:linear-gradient(180deg,rgba(4,61,90,0),rgba(4,61,90,.52) 48%,#043D5A 100%); filter:blur(.01px); pointer-events:none; }
.serang-v2 .v2-skyline .v2-container { z-index:3; padding-top:25px; }
.serang-v2 .v2-skyline p { font-style:italic; }
.serang-v2 .v2-skyline > img { height:100%; object-position:center 58%; transform-origin:center bottom; -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.16) 12%,rgba(0,0,0,.76) 27%,#000 42%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.16) 12%,rgba(0,0,0,.76) 27%,#000 42%,#000 100%); animation:v2-skyline-breathe 12s ease-in-out infinite alternate; }
.serang-v2 .v2-footer { position:relative; z-index:2; margin-top:-1px; overflow:hidden; background:#043D5A; }
.serang-v2 .v2-footer::before { position:absolute; right:0; bottom:100%; left:0; height:96px; content:''; background:linear-gradient(to bottom,rgba(4,61,90,0),rgba(4,61,90,.3) 38%,rgba(4,61,90,.76) 72%,#043D5A); pointer-events:none; }
.serang-v2 .v2-footer::after { position:absolute; z-index:0; inset:0; content:''; background-image:url('../assets/img/sections/serang-gapura-batik-footer.svg'); background-repeat:repeat; background-position:center top; background-size:270px auto; opacity:.12; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.32) 60px,#000 150px); mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.32) 60px,#000 150px); pointer-events:none; }
.serang-v2 .v2-footer > * { position:relative; z-index:1; }
.serang-v2 .v2-footer-grid { grid-template-columns:minmax(210px,1.1fr) minmax(105px,.58fr) minmax(90px,.5fr) minmax(320px,1.65fr) minmax(210px,1fr); align-items:start; gap:28px; padding-block:32px 26px; }
.serang-v2 .v2-footer address,.serang-v2 .v2-footer nav > a { color:#CFE1EA; }
.serang-v2 .v2-footer-brand-row { display:flex; align-items:center; gap:8px; }
.serang-v2 .v2-footer-motto { display:block; width:122px; height:78px; margin:0; border-radius:7px; object-fit:contain; box-shadow:0 6px 14px rgba(0,24,39,.22); }
.serang-v2 .v2-social-links a { border-color:#47758C; }
.serang-v2 .v2-footer-on-air h2,.serang-v2 .v2-footer-visitors h2 { display:flex; align-items:center; gap:7px; }
.serang-v2 .v2-footer-on-air h2 i,.serang-v2 .v2-footer-visitors h2 i { color:#7ED3EB; font-size:17px; }
.serang-v2 .v2-on-air-embed { height:108px; overflow:hidden; border:1px solid rgba(207,225,234,.18); border-radius:10px; background:rgba(0,24,39,.32); }
.serang-v2 .v2-on-air-embed iframe { width:100%; min-height:150px; height:150px; display:block; border:0; }
.serang-v2 .v2-footer-visitors { margin-top:18px; }
.serang-v2 .v2-visitor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.serang-v2 .v2-visitor-grid article { min-height:70px; display:grid; place-content:center; border:1px solid rgba(207,225,234,.18); border-radius:9px; background:rgba(0,24,39,.28); padding:8px; text-align:center; }
.serang-v2 .v2-visitor-grid strong { color:#fff; font-size:20px; line-height:24px; }
.serang-v2 .v2-visitor-grid span { margin-top:4px; color:#B9D1DC; font-size:10px; line-height:14px; }
.serang-v2 .v2-footer-base { border-top-color:#315F77; color:#B9D1DC; }

@keyframes v2-skyline-breathe { from { transform:scale(1.01) translate3d(-3px,0,0); } to { transform:scale(1.025) translate3d(3px,0,0); } }
@keyframes v2-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes v2-photo-reveal { from { opacity:.85; transform:scale(1.02); } to { opacity:1; transform:scale(1); } }
.serang-v2.v2-enter .v2-hero-copy { animation:v2-fade-up 420ms cubic-bezier(.16,1,.3,1) both; }
.serang-v2.v2-enter .v2-hero-photo img { animation:v2-photo-reveal 650ms cubic-bezier(.16,1,.3,1) both; }

@media (max-width:1199px) {
    .serang-v2 .v2-container { width:calc(100% - 48px); }.serang-v2 .v2-header-row { grid-template-columns:220px 1fr auto; }.serang-v2 .v2-desktop-nav,.serang-v2 .v2-search-icon { display:none; }.serang-v2 .v2-mobile-nav { display:block; grid-column:1/-1; border-top:1px solid var(--v2-line); }.serang-v2 .v2-mobile-nav summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; }.serang-v2 .v2-mobile-nav nav { display:grid; padding-bottom:12px; }.serang-v2 .v2-mobile-nav nav a { min-height:44px; display:flex; align-items:center; color:var(--v2-green-dark); text-decoration:none; }.serang-v2 .v2-hero h1 { font-size:56px; line-height:56px; }.serang-v2 .v2-service-grid { grid-template-columns:repeat(2,1fr); }.serang-v2 .v2-information-grid,.serang-v2 .v2-editorial-grid { grid-template-columns:1fr; }.serang-v2 .v2-digital-banner { grid-template-columns:48% 52%; }.serang-v2 .v2-digital-benefits { display:none; }.serang-v2 .v2-heading-compact { min-height:0; }.serang-v2 .v2-footer-grid { grid-template-columns:1.3fr 1fr 1fr; }.serang-v2 .v2-footer-grid > :last-child { grid-column:2/4; }
}
@media (max-width:767px) {
    .serang-v2 .v2-container { width:calc(100% - 32px); }.serang-v2 .v2-utility nav { gap:12px; }.serang-v2 .v2-utility nav a:last-child { display:none; }.serang-v2 .v2-header-row { min-height:68px; grid-template-columns:1fr auto; gap:12px; }.serang-v2 .v2-brand img { width:36px; height:44px; }.serang-v2 .v2-brand strong { font-size:17px; }.serang-v2 .v2-digital { min-height:40px; padding:8px 10px; font-size:12px; }.serang-v2 .v2-hero { min-height:0; }.serang-v2 .v2-hero-grid { min-height:0; display:block; padding:32px 16px 0; }.serang-v2 .v2-heritage-pattern { background-size:200px; opacity:.045; }.serang-v2 .v2-hero h1 { font-size:48px; line-height:48px; }.serang-v2 .v2-intro { margin-top:12px; font-size:15px; line-height:24px; }.serang-v2 .v2-search { margin-top:20px; }.serang-v2 .v2-search-field { min-height:56px; padding-left:12px; }.serang-v2 .v2-search input { font-size:12px; }.serang-v2 .v2-search button { min-width:78px; height:44px; }.serang-v2 #v2-search-scope { font-size:11px; }.serang-v2 .v2-popular { margin-bottom:24px; }.serang-v2 .v2-hero-photo { position:relative; width:calc(100% + 32px); height:330px; margin-left:-16px; }.serang-v2 .v2-hero-photo::before { display:none; }.serang-v2 .v2-hero-photo figcaption { right:12px; bottom:48px; }.serang-v2 .v2-hero-note { display:none; }.serang-v2 .v2-hero-silhouette { height:76px; }.serang-v2 .v2-stats-grid { grid-template-columns:1fr 1fr; transform:translateY(-24px); }.serang-v2 .v2-stats article { min-height:104px; border-bottom:1px solid var(--v2-line); padding:12px; }.serang-v2 .v2-stats article:nth-child(2) { border-right:0; }.serang-v2 .v2-stats article:nth-child(n+3) { border-bottom:0; }.serang-v2 .v2-stats i { width:40px; height:40px; font-size:20px; }.serang-v2 .v2-stats strong { font-size:13px; line-height:18px; }.serang-v2 .v2-section { padding-block:48px; }.serang-v2 .v2-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }.serang-v2 .v2-section-heading h2 { font-size:28px; line-height:36px; }.serang-v2 .v2-service-card { min-height:104px; }.serang-v2 .v2-digital-banner { grid-template-columns:1fr; padding:24px 24px 0; }.serang-v2 .v2-digital-copy h2 { font-size:28px; line-height:36px; }.serang-v2 .v2-digital-copy h3 { font-size:17px; line-height:24px; }.serang-v2 .v2-digital-preview { width:100%; margin:20px auto 0; }.serang-v2 .v2-map-grid { grid-template-columns:1fr; }.serang-v2 .v2-map-shell { min-height:340px; }.serang-v2 .v2-data-list { display:grid; grid-template-columns:1fr 1fr; }.serang-v2 .v2-data-list > div { min-height:80px; border-right:1px solid var(--v2-line); }.serang-v2 .v2-news-grid { grid-template-columns:1fr; }.serang-v2 .v2-news-card { display:grid; grid-template-columns:42% 58%; }.serang-v2 .v2-news-card > a { height:100%; min-height:170px; }.serang-v2 .v2-news-card > div { min-height:170px; }.serang-v2 .v2-footer-grid { grid-template-columns:1fr 1fr; gap:32px; }.serang-v2 .v2-footer-grid > :last-child { grid-column:auto; }.serang-v2 .v2-footer-base { align-items:flex-start; flex-direction:column; padding-block:20px; }.serang-v2 .v2-skyline { min-height:190px; }
}
@media (max-width:479px) {
    .serang-v2 .v2-utility { font-size:10px; }.serang-v2 .v2-utility nav a:not(:first-child) { display:none; }.serang-v2 .v2-brand small { font-size:10px; }.serang-v2 .v2-brand strong { font-size:15px; line-height:18px; }.serang-v2 .v2-digital { display:none; }.serang-v2 .v2-hero-grid { padding-top:24px; }.serang-v2 .v2-hero h1 { font-size:42px; line-height:44px; }.serang-v2 .v2-search-field > i { display:none; }.serang-v2 .v2-search input { padding-left:2px; }.serang-v2 .v2-popular > span { width:100%; }.serang-v2 .v2-stats-grid { grid-template-columns:1fr; }.serang-v2 .v2-stats article { min-height:76px; border-right:0; border-bottom:1px solid var(--v2-line)!important; }.serang-v2 .v2-stats article:last-child { border-bottom:0!important; }.serang-v2 .v2-service-grid { grid-template-columns:1fr; }.serang-v2 .v2-news-card { grid-template-columns:1fr; }.serang-v2 .v2-news-card > a { height:200px; }.serang-v2 .v2-footer-grid { grid-template-columns:1fr; }.serang-v2 .v2-skyline h2 { font-size:17px; line-height:24px; }
    .serang-v2 .v2-stats-grid { grid-template-columns:1fr 1fr; }.serang-v2 .v2-stats article { min-height:92px; }.serang-v2 .v2-stats article:nth-child(odd) { border-right:1px solid var(--v2-line); }.serang-v2 .v2-stats article:nth-child(n+3) { border-bottom:0!important; }.serang-v2 .v2-service-grid { grid-template-columns:1fr 1fr; }.serang-v2 .v2-service-card { min-height:124px; position:relative; display:flex; align-items:flex-start; flex-direction:column; gap:8px; padding:12px; }.serang-v2 .v2-service-card .v2-service-arrow { position:absolute; right:10px; bottom:10px; }.serang-v2 .v2-service-card small { padding-right:8px; }.serang-v2 .v2-footer-grid { grid-template-columns:1fr 1fr; gap:24px 16px; }.serang-v2 .v2-footer-identity { grid-column:1/-1; }
}
@media (max-width:1199px) {
    .serang-v2 .v2-citizen-grid { grid-template-columns:1fr; }
}
@media (max-width:767px) {
    .serang-v2 .v2-heritage-pattern { left:0; width:100%; background-position:left top; background-size:auto 100%; opacity:.13; -webkit-mask-image:linear-gradient(to right,#000 0,#000 52%,transparent 88%); mask-image:linear-gradient(to right,#000 0,#000 52%,transparent 88%); }
    .serang-v2 .v2-hero-photo { right:auto; clip-path:none; }
    .serang-v2 .v2-hero-photo::after { width:46px; opacity:.4; }
    .serang-v2 .v2-hero-photo figcaption { right:54px; }
    .serang-v2 .v2-digital-devices { width:100%; min-height:185px; margin-top:20px; padding-right:48px; }
    .serang-v2 .v2-laptop { width:100%; }
    .serang-v2 .v2-phone { right:6px; }
    .serang-v2 .v2-skyline { min-height:240px; }
    .serang-v2 .v2-citizen-programs { padding-block:32px; }
    .serang-v2 .v2-innovation-grid { grid-template-columns:1fr; }
    .serang-v2 .v2-aspiration-panel { grid-template-columns:1fr 84px; }
    .serang-v2 .v2-aspiration-panel > i { font-size:76px; }
}
@media (max-width:479px) {
    .serang-v2 .v2-digital-devices { min-height:160px; padding-right:38px; }
    .serang-v2 .v2-phone { width:52px; height:110px; }
    .serang-v2 .v2-skyline { min-height:215px; }
    .serang-v2 .v2-aspiration-panel { grid-template-columns:1fr; }
    .serang-v2 .v2-aspiration-panel > i { display:none; }
    .serang-v2 .v2-complaint-links { grid-template-columns:1fr; }
}
@media (max-width:1199px) {
    .serang-v2 .v2-utility .v2-container { grid-template-columns:auto minmax(0,1fr) auto; }
    .serang-v2 .v2-utility nav { display:none; }
}
@media (max-width:899px) {
    .serang-v2 .v2-utility .v2-container { grid-template-columns:minmax(0,1fr) auto; }
    .serang-v2 .v2-utility .v2-portal-label { display:none; }
}
@media (max-width:767px) {
    .serang-v2 .v2-utility .v2-container { min-height:52px; gap:8px; }
    .serang-v2 .v2-prayer-widget { gap:8px; }
    .serang-v2 .v2-widget-source { min-width:26px; }
    .serang-v2 .v2-prayer-list { display:none; }
    .serang-v2 .v2-weather-widget { min-width:124px; padding-left:10px; }
    .serang-v2 .v2-weather-widget small { max-width:76px; }
    .serang-v2 .v2-footer-identity,.serang-v2 .v2-footer-on-air,.serang-v2 .v2-footer-community { grid-column:1/-1; }
    .serang-v2 .v2-footer::after { background-position:center top; background-size:220px auto; opacity:.1; }
}
@media (max-width:479px) {
    .serang-v2 .v2-weather-widget { min-width:104px; gap:6px; }
    .serang-v2 .v2-weather-widget > i { font-size:18px; }
    .serang-v2 .v2-weather-widget small,.serang-v2 .v2-weather-widget em { display:none; }
}
@media (max-width:1199px) {
    .serang-v2 .v2-mobile-nav { position:relative; padding-bottom:1px; }
    .serang-v2 .v2-mobile-nav > summary { min-height:48px; color:var(--v2-green-dark); font-size:12px; font-weight:700; }
    .serang-v2 .v2-mobile-nav > summary > span { display:flex; align-items:center; gap:8px; }
    .serang-v2 .v2-mobile-nav > summary > span > i { color:var(--v2-green); font-size:18px; }
    .serang-v2 .v2-mobile-nav > summary > i { color:var(--v2-muted); transition:transform 180ms ease; }
    .serang-v2 .v2-mobile-nav[open] > summary > i { transform:rotate(180deg); }
    .serang-v2 .v2-mobile-nav > nav { display:block; padding:0 0 14px; }
    .serang-v2 .v2-mobile-menu-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
    .serang-v2 .v2-mobile-menu-item { min-width:0; }
    .serang-v2 .v2-mobile-menu-item > a,.serang-v2 .v2-mobile-menu-group > summary { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #DFEAE5; border-radius:8px; background:#F8FBFA; color:var(--v2-green-dark); padding:9px 11px; font-size:11px; line-height:15px; font-weight:650; text-decoration:none; cursor:pointer; }
    .serang-v2 .v2-mobile-menu-item > a > span,.serang-v2 .v2-mobile-menu-group > summary > span { min-width:0; display:flex; align-items:center; gap:8px; }
    .serang-v2 .v2-mobile-menu-item > a > span > i,.serang-v2 .v2-mobile-menu-group > summary > span > i { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:7px; background:#E5F2F7; color:#0874A6; font-size:15px; }
    .serang-v2 .v2-mobile-menu-item > a > i,.serang-v2 .v2-mobile-menu-group > summary > i { flex:0 0 auto; color:#5C9CB5; font-size:13px; }
    .serang-v2 .v2-mobile-menu-item > a:hover,.serang-v2 .v2-mobile-menu-group > summary:hover { border-color:#AFCDC1; background:#EEF7F4; color:var(--v2-green); }
    .serang-v2 .v2-mobile-menu-group > summary { list-style:none; }
    .serang-v2 .v2-mobile-menu-group[open] > summary { border-color:#9FC6B7; border-radius:8px 8px 0 0; background:#EAF5F2; color:var(--v2-green); }
    .serang-v2 .v2-mobile-menu-group[open] > summary > i { transform:rotate(180deg); }
    .serang-v2 .v2-mobile-menu-group > ul { display:grid; gap:3px; border:1px solid #D9E8E2; border-top:0; border-radius:0 0 8px 8px; background:#fff; padding:5px; }
    .serang-v2 .v2-mobile-menu-group > ul .v2-mobile-menu-item > a,.serang-v2 .v2-mobile-menu-group > ul .v2-mobile-menu-group > summary { min-height:40px; border:0; background:#fff; padding:7px 9px; font-size:10px; }
    .serang-v2 .v2-mobile-menu-group > ul .v2-mobile-menu-item > a:hover,.serang-v2 .v2-mobile-menu-group > ul .v2-mobile-menu-group > summary:hover { background:#F0F7F4; }
}
@media (max-width:579px) {
    .serang-v2 .v2-mobile-menu-list { grid-template-columns:1fr; }
}
@media (max-width:999px) {
    .serang-v2 .v2-news-layout { grid-template-columns:1fr; }
    .serang-v2 .v2-announcement-list { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
    .serang-v2 .v2-announcement-item:nth-child(4) { border-bottom:0; }
}
@media (max-width:767px) {
    .serang-v2 .v2-news-feed { display:block; }
    .serang-v2 .v2-news-feed .v2-news-card { display:block; }
    .serang-v2 .v2-news-card.is-featured { min-height:440px; }
    .serang-v2 .v2-news-card.is-featured .v2-news-media { height:100%; min-height:0; }
    .serang-v2 .v2-news-secondary-grid { grid-template-columns:1fr 1fr; grid-template-rows:none; margin-top:14px; }
    .serang-v2 .v2-news-secondary-grid .v2-news-media { height:160px; min-height:0; }
    .serang-v2 .v2-announcement-list { grid-template-columns:1fr; }
    .serang-v2 .v2-announcement-item:nth-child(4) { border-bottom:1px solid #D9E6E9; }
    .serang-v2 .v2-search-panel { border-radius:14px; padding:7px; }
    .serang-v2 .v2-search-label { padding:1px 4px 6px; }
    .serang-v2 .v2-search-field { min-height:54px; gap:7px; padding:5px; }
    .serang-v2 .v2-search-leading { width:40px; height:40px; border-radius:8px; font-size:19px; }
    .serang-v2 .v2-search input { height:42px; font-size:12px; }
    .serang-v2 .v2-search button { min-width:82px; height:42px; border-radius:8px; padding-inline:12px; }
}
@media (max-width:479px) {
    .serang-v2 .v2-news-secondary-grid { grid-template-columns:1fr; }
    .serang-v2 .v2-news-secondary-grid .v2-news-media { height:190px; }
    .serang-v2 .v2-news-card.is-featured h3 { font-size:21px; line-height:28px; }
    .serang-v2 .v2-news-card.is-featured .v2-news-body { padding:18px; }
    .serang-v2 .v2-search-label small { display:none; }
    .serang-v2 .v2-search-leading { display:none; }
    .serang-v2 .v2-search-field { padding-left:10px; }
    .serang-v2 .v2-search button { min-width:70px; padding-inline:10px; }
    .serang-v2 #v2-search-scope { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
    .serang-v2 *,.serang-v2 *::before,.serang-v2 *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media (forced-colors:active) {
    .serang-v2 .v2-heritage-pattern,.serang-v2 .v2-hero-silhouette,.serang-v2 .v2-skyline > img,.serang-v2 .v2-footer::after { display:none; }.serang-v2 .v2-search button,.serang-v2 .v2-digital { border:1px solid ButtonText; }
}