/* ===================================================
ROOT VARIABLES
=================================================== */
:root {
--green: #1e88e5;
--green-dark: #1976d2;
--green-light: #d1fae5;
--dark: #0f172a;
--gray: #64748b;
--light: #f8fafc;
--border: #e2e8f0;
--white: #ffffff;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--dark);
background: #f1f5f9;
font-size: 14px;
}

a {
text-decoration: none;
}

/* ── TOP BAR ── */
.topbar {
background: #1e293b;
color: #94a3b8;
font-size: 12px;
padding: 7px 0;
border-bottom: 1px solid #334155;
}

.topbar a {
color: #94a3b8;
margin: 0 10px;
transition: .2s;
}

.topbar a:hover {
color: white;
}

.topbar .sep {
color: #334155;
margin: 0 4px;
}

/* ── NAVBAR ── */
.main-nav {
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
position: sticky;
top: 0;
z-index: 999;
padding: 0;
}

.main-nav .container {
display: flex;
align-items: center;
height: 60px;
gap: 32px;
}

.nav-brand {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}

.nav-brand .logo-box {
width: 38px;
height: 38px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 800;
font-size: 13px;
letter-spacing: -.5px;
}

.nav-brand .brand-name {
font-size: 11px;
font-weight: 700;
color: var(--dark);
line-height: 1.3;
}

.nav-brand .brand-sub {
font-size: 10px;
color: var(--gray);
font-weight: 400;
}

.nav-links {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
}

.nav-links a {
color: #475569;
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border-radius: 6px;
transition: .2s;
white-space: nowrap;
}

.nav-links a:hover {
background: #f1f5f9;
color: var(--dark);
}

.nav-links .dropdown-btn {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
background: none;
border: none;
color: #475569;
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border-radius: 6px;
transition: .2s;
}

.nav-links .dropdown-btn:hover {
background: #f1f5f9;
color: var(--dark);
}

/* ── Dropdown Wrapper ── */
.nav-item {
position: relative;
}

/* ── Dropdown Menu ── */
/* NOTE: Sengaja TIDAK pakai .dropdown-menu agar tidak konflik dengan Bootstrap JS */
.nav-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
background: white;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
border: 1px solid var(--border);
padding: 6px;
min-width: 210px;
z-index: 1000;
}

/* Arahkan dropdown yang mendekati tepi kanan */
.nav-item:last-child .nav-dropdown,
.nav-item:nth-last-child(2) .nav-dropdown {
left: auto;
right: 0;
}

.nav-item.open > .nav-dropdown {
display: block;
animation: dropFade .15s ease;
}

@keyframes dropFade {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* ── Dropdown Items ── */
.nav-dropdown a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 9px 12px !important;
font-size: 13px !important;
color: #475569 !important;
border-radius: 6px;
font-weight: 500;
transition: .15s;
white-space: nowrap;
}

.nav-dropdown a:hover {
background: #f1f5f9 !important;
color: var(--green) !important;
}

.nav-dropdown a i {
font-size: 14px;
color: var(--green);
width: 18px;
flex-shrink: 0;
}

.nav-dropdown .dropdown-divider {
height: 1px;
background: var(--border);
margin: 5px 6px;
}

/* ── Chevron rotate on hover ── */
.nav-item:hover > .dropdown-btn .bi-chevron-down {
transform: rotate(180deg);
}

.dropdown-btn .bi-chevron-down {
transition: transform .2s;
font-size: 10px !important;
}

/* ══════════════════════════════════════
MOBILE NAV — Mobile Sub Accordion
══════════════════════════════════════ */
.mob-nav-group {
border-bottom: 1px solid #f1f5f9;
}

.mob-nav-group > button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 13px 20px;
color: var(--dark);
font-size: 14px;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
transition: .15s;
text-align: left;
}

.mob-nav-group > button:hover {
background: #f8fafc;
color: var(--green);
}

.mob-nav-group > button .mob-chevron {
font-size: 11px;
color: var(--gray);
transition: transform .2s;
}

.mob-nav-group.open > button .mob-chevron {
transform: rotate(180deg);
}

.mob-sub {
display: none;
padding: 0 0 6px;
background: #fafbfc;
}

.mob-nav-group.open > .mob-sub {
display: block;
}

.mob-sub a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 10px 20px 10px 28px !important;
font-size: 13px !important;
color: #64748b !important;
border-bottom: none !important;
font-weight: 400 !important;
transition: .15s;
}

.mob-sub a:hover {
background: #f1f5f9 !important;
color: var(--green) !important;
}

.mob-sub a i {
font-size: 13px;
color: var(--green);
width: 16px;
flex-shrink: 0;
}

/* Single link (no sub) tetap menggunakan style lama */
.mobile-nav-links > a {
border-bottom: 1px solid #f1f5f9;
}

/* ── HERO ── */
.hero {
background:
linear-gradient( 135deg,
rgba(21, 101, 192, 0.95) 0%,
rgba(30, 136, 229, 0.9) 40%,
rgba(129, 212, 250, 0.85) 100%),
url('/assets/2026/img/home.jpeg') center / cover;
padding: 52px 0 60px;
color: white;
position: relative;
overflow: hidden;
}

.hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, .08) 0%, transparent 60%);
pointer-events: none;
}

.hero-left {
position: relative;
z-index: 2;
}

.hero-left h1 {
font-size: 2rem;
font-weight: 800;
line-height: 1.25;
margin-bottom: 10px;
}

.hero-left p {
font-size: .95rem;
opacity: .92;
margin-bottom: 24px;
}

.hero-search-wrap {
background: white;
border-radius: 10px;
padding: 5px;
display: flex;
max-width: 540px;
box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}

.hero-search-wrap input {
flex: 1;
border: none;
padding: 10px 16px;
font-size: .9rem;
background: transparent;
outline: none;
color: var(--dark);
}

.hero-search-wrap button {
background: var(--green);
color: white;
border: none;
padding: 10px 24px;
border-radius: 7px;
font-weight: 600;
font-size: .875rem;
cursor: pointer;
}

.hero-tags {
margin-top: 14px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.hero-tags span {
font-size: 12px;
opacity: .85;
}

.hero-tag {
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .3);
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
color: white;
transition: .2s;
cursor: pointer;
}

.hero-tag:hover {
background: rgba(255, 255, 255, .3);
}

/* Weather Card */
.weather-card {
background: rgba(255, 255, 255, .15);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 14px;
padding: 20px 24px;
text-align: center;
min-width: 160px;
}

.weather-card .wd-date {
font-size: 11px;
opacity: .85;
margin-bottom: 2px;
}

.weather-card .wd-day {
font-size: 12px;
opacity: .9;
margin-bottom: 10px;
font-weight: 500;
}

.weather-card .wd-temp {
font-size: 3rem;
font-weight: 800;
line-height: 1;
}

.weather-card .wd-temp sup {
font-size: 1.2rem;
font-weight: 500;
}

.weather-card .wd-icon {
font-size: 2.5rem;
margin: 8px 0;
}

.weather-card .wd-desc {
font-size: 12px;
opacity: .85;
}

.weather-card .wd-loc {
font-size: 12px;
font-weight: 600;
margin-top: 6px;
}

.weather-row {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 10px;
}

.weather-row .wr-item {
background: rgba(255, 255, 255, .15);
border-radius: 8px;
padding: 6px 10px;
text-align: center;
}

.weather-row .wr-item span {
display: block;
font-size: 10px;
opacity: .8;
}

.weather-row .wr-item strong {
font-size: 12px;
}

.hero-btn {
display: inline-block;
margin-top: 16px;
background: rgba(255, 255, 255, .2);
border: 1px solid rgba(255, 255, 255, .4);
color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
transition: .2s;
}

.hero-btn:hover {
background: rgba(255, 255, 255, .3);
color: white;
}

/* Side social icons */
.hero-socials {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 2px;
z-index: 10;
}

.hero-socials a {
width: 32px;
height: 32px;
background: rgba(0, 0, 0, .3);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
transition: .2s;
}

.hero-socials a:hover {
background: var(--green);
}

/* ── BERITA TERKINI ── */
.section {
background: white;
padding: 40px 0;
}

.section-alt {
background: #f8fafc;
padding: 40px 0;
}

.sec-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}

.sec-title {
font-size: 1.35rem;
font-weight: 800;
color: var(--dark);
}

.sec-link {
font-size: 13px;
color: var(--green);
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
background: #ecfdf5;
padding: 7px 16px;
border-radius: 8px;
transition: .2s;
}

.sec-link:hover {
background: var(--green);
color: white;
}

/* News Tabs */
.news-tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
border-bottom: 2px solid var(--border);
padding-bottom: 0;
}

.news-tab {
padding: 10px 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
color: var(--gray);
border: none;
background: none;
position: relative;
transition: .2s;
}

.news-tab.active {
color: var(--green);
}

.news-tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--green);
}

/* Thumbnail news list */
.news-thumb-list {
display: flex;
flex-direction: column;
gap: 0;
}

.news-thumb-item {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
transition: .2s;
cursor: pointer;
}

.news-thumb-item:hover {
background: #f8fafc;
margin: 0 -12px;
padding: 12px;
border-radius: 8px;
}

.news-thumb-item:last-child {
border-bottom: none;
}

.news-thumb-img {
width: 72px;
height: 54px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: #e2e8f0;
}

.news-thumb-body .cat {
font-size: 10px;
font-weight: 700;
color: var(--green);
text-transform: uppercase;
letter-spacing: .5px;
}

.news-thumb-body h4 {
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
color: var(--dark);
margin: 3px 0 5px;
}

.news-thumb-body .meta {
font-size: 11px;
color: var(--gray);
}

/* Featured news */
.newsSwiper {
width: 100%;
height: 100%;
}

.swiper-slide {
display: flex;
flex-direction: column;
}

.pager-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}

.pager-dot.active {
background: var(--green);
width: 30px;
border-radius: 6px;
}
.promo-img {
width: 100%;
height: 480px;
object-fit: cover;
object-position: center;
display: block;
}

@media (max-width: 768px) {
.promo-img {
height: 280px;
}
}

@media (max-width: 480px) {
.promo-img {
height: 220px;
}
}
.news-featured {
border-radius: 12px;
overflow: hidden;
position: relative;
cursor: pointer;
height: 100%;
}

.news-featured img {
width: 100%;
height: 100%;
object-fit: cover;
}

.news-featured .overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 100%);
padding: 24px 20px 20px;
color: white;
}

.news-featured .overlay .cat {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: #6ee7b7;
margin-bottom: 6px;
}

.news-featured .overlay h2 {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
}

.news-featured .overlay .meta {
font-size: 11px;
opacity: .8;
display: flex;
gap: 12px;
}

.news-pager {
display: flex;
justify-content: center;
gap: 10px;
}

.news-pager span {
width: 24px;
height: 6px;
border-radius: 3px;
background: var(--border);
cursor: pointer;
transition: .2s;
}

.news-pager span.active {
background: var(--green);
width: 32px;
}

/* Right news list */
.news-right-list {
display: flex;
flex-direction: column;
gap: 0;
}

.news-right-item {
padding: 14px 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: .2s;
}

.news-right-item:hover {
padding-left: 6px;
}

.news-right-item:last-child {
border-bottom: none;
}

.news-right-item .cat {
font-size: 10px;
font-weight: 700;
color: var(--green);
text-transform: uppercase;
letter-spacing: .5px;
}

.news-right-item h4 {
font-size: 13px;
font-weight: 600;
line-height: 1.4;
margin: 4px 0 6px;
color: var(--dark);
}

.news-right-item .meta {
font-size: 11px;
color: var(--gray);
display: flex;
align-items: center;
gap: 5px;
}

/* Right news wrapper */
.news-right-wrap {
background: white;
border-radius: 12px;
padding: 16px 20px;
}

/* Baca selengkapnya link */
.baca-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--green);
font-weight: 600;
margin-top: 8px;
padding: 4px 0;
}

.baca-link:hover {
text-decoration: underline;
color: var(--green);
}

/* ── SLIDER BANNER ── */
.slider-section {
background: #f1f5f9;
padding: 28px 0;
}

.promo-card {
background: white;
border-radius: 14px;
overflow: hidden;
display: flex;
align-items: stretch;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.promo-card .promo-img {
width: 100%;
object-fit: cover;
}

.promo-card .promo-body {
padding: 28px 32px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

.promo-card .promo-tag {
font-size: 11px;
font-weight: 700;
color: var(--green);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}

.promo-card .promo-body h2 {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.3;
color: var(--dark);
margin-bottom: 12px;
}

.promo-card .promo-body p {
font-size: .9rem;
color: var(--gray);
margin-bottom: 20px;
line-height: 1.6;
}

.promo-card .promo-btn {
display: inline-block;
background: #dc2626;
color: white;
padding: 10px 24px;
border-radius: 8px;
font-weight: 600;
font-size: .875rem;
transition: .2s;
}

.promo-card .promo-btn:hover {
background: #b91c1c;
color: white;
}

.promo-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 16px;
}

.promo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
}

.promo-dot.active {
background: var(--green);
}

/* ── LAYANAN TERPOPULER ── */
.service-card {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
transition: .3s;
height: 100%;
}

.service-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
transform: translateY(-3px);
}

.service-card .svc-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}

.service-card .svc-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}

.service-card .svc-for {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--gray);
font-weight: 600;
}

.service-card .svc-name {
font-size: 1rem;
font-weight: 700;
color: var(--dark);
}

.service-link-list {
list-style: none;
}

.service-link-list li {
padding: 8px 0;
border-bottom: 1px solid var(--border);
}

.service-link-list li:last-child {
border-bottom: none;
}

.service-link-list a {
font-size: 12.5px;
color: var(--dark);
display: flex;
justify-content: space-between;
align-items: center;
transition: .2s;
}

.service-link-list a:hover {
color: var(--green);
}

/* ── AGENDA ── */
.agenda-big {
border-radius: 14px;
overflow: hidden;
position: relative;
cursor: pointer;
}

.agenda-big img {
width: 100%;
height: 340px;
object-fit: cover;
display: block;
}

.agenda-big .ag-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .88), transparent);
padding: 24px;
color: white;
}

.agenda-big .ag-tags {
display: flex;
gap: 6px;
margin-bottom: 8px;
flex-wrap: wrap;
}

.agenda-big .ag-tag {
font-size: 10px;
font-weight: 700;
border-radius: 4px;
padding: 3px 10px;
}

.agenda-big .ag-tag.cat1 { background: #059669; }
.agenda-big .ag-tag.cat2 { background: #2563eb; }
.agenda-big .ag-tag.cat3 { background: #7c3aed; }
.agenda-big .ag-tag.cat4 { background: #dc2626; }

.agenda-big h2 {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: 8px;
}

.agenda-big .ag-meta {
font-size: 11px;
opacity: .8;
margin-bottom: 14px;
display: flex;
gap: 10px;
}

.agenda-big .ag-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.agenda-big .ag-btn {
font-size: 12px;
font-weight: 600;
padding: 7px 18px;
border-radius: 7px;
transition: .2s;
cursor: pointer;
border: none;
}

.agenda-big .ag-btn.primary {
background: var(--green);
color: white;
}

.agenda-big .ag-btn.outline {
background: rgba(255, 255, 255, .2);
color: white;
border: 1px solid rgba(255, 255, 255, .4);
}

.agenda-mini {
background: white;
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 10px;
cursor: pointer;
transition: .2s;
}

.agenda-mini:hover {
border-color: var(--green);
}

.agenda-mini h4 {
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
line-height: 1.4;
color: var(--dark);
}

.agenda-mini .meta {
font-size: 11px;
color: var(--gray);
}

.agenda-sub-item {
padding: 10px 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
}

.agenda-sub-item:last-child {
border-bottom: none;
}

.agenda-sub-item h4 {
font-size: 12.5px;
font-weight: 600;
color: var(--dark);
margin-bottom: 3px;
}

.agenda-sub-item .meta {
font-size: 11px;
color: var(--gray);
}

/* Calendar widget */
.cal-widget {
background: #f8fafc;
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
}

.cal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

.cal-header span {
font-size: 13px;
font-weight: 700;
}

.cal-header button {
background: none;
border: none;
color: var(--gray);
cursor: pointer;
font-size: 16px;
}

.cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}

.cal-days .day-label {
font-size: 10px;
font-weight: 600;
color: var(--gray);
padding: 4px 0;
}

.cal-days .day-num {
font-size: 12px;
padding: 5px 2px;
border-radius: 6px;
cursor: pointer;
transition: .2s;
}

.cal-days .day-num:hover {
background: var(--green-light);
color: var(--green);
}

.cal-days .day-num.today {
background: var(--green);
color: white;
font-weight: 700;
}

.cal-days .day-num.other-month {
color: #cbd5e1;
}

/* ── TRANSPARANSI KEUANGAN ── */
.transp-card {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
height: 100%;
transition: .2s;
}

.transp-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.transp-card .pdf-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: #fee2e2;
color: #dc2626;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
margin-bottom: 12px;
}

.transp-card h4 {
font-size: 13px;
font-weight: 600;
line-height: 1.5;
color: var(--dark);
margin-bottom: 8px;
}

.transp-card p {
font-size: 12px;
color: var(--gray);
margin-bottom: 16px;
line-height: 1.5;
}

.transp-card .actions {
display: flex;
gap: 6px;
}

.transp-card .btn-lihat {
border: 1px solid var(--border);
background: white;
color: var(--dark);
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 7px;
cursor: pointer;
transition: .2s;
display: flex;
align-items: center;
gap: 4px;
}

.transp-card .btn-lihat:hover {
border-color: var(--green);
color: var(--green);
}

.transp-card .btn-unduh {
background: var(--green);
color: white;
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 7px;
border: none;
cursor: pointer;
transition: .2s;
display: flex;
align-items: center;
gap: 4px;
}

.transp-card .btn-unduh:hover {
background: var(--green-dark);
}

/* ── FOOTER ── */
.footer {
background: var(--green);
color: white;
padding: 48px 0 0;
}

.footer-brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}

.footer-brand .f-logo {
width: 38px;
height: 38px;
background: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}

.footer-brand .f-logo span {
font-size: 12px;
font-weight: 800;
color: var(--green);
}

.footer-brand .f-name {
font-size: 11px;
font-weight: 700;
color: white;
line-height: 1.3;
}

.footer-contact p {
font-size: 12.5px;
opacity: .9;
margin-bottom: 6px;
display: flex;
align-items: start;
gap: 8px;
}

.footer-contact p i {
margin-top: 2px;
flex-shrink: 0;
}

.footer h5 {
font-size: 13px;
font-weight: 700;
margin-bottom: 16px;
color: white;
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 8px;
}

.footer-links a {
font-size: 12px;
color: rgba(255, 255, 255, .85);
transition: .2s;
}

.footer-links a:hover {
color: white;
}

.footer-bottom {
background: rgba(0, 0, 0, .15);
text-align: center;
padding: 16px 0;
margin-top: 40px;
}

.footer-bottom p {
font-size: 12px;
color: rgba(255, 255, 255, .8);
margin: 0;
}

.footer-bottom a {
color: white;
font-weight: 600;
}

.footer-socials {
display: flex;
gap: 8px;
margin-top: 16px;
}

.footer-socials a {
width: 34px;
height: 34px;
background: rgba(255, 255, 255, .2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 15px;
transition: .2s;
}

.footer-socials a:hover {
background: rgba(255, 255, 255, .35);
}

/* ── FLOATING SIDE BUTTONS ── */
.side-btns {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 2px;
z-index: 900;
}

.side-btn {
width: 44px;
height: 44px;
background: var(--green);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
cursor: pointer;
transition: .2s;
border: none;
}

.side-btn:first-child { border-radius: 8px 0 0 0; }
.side-btn:last-child { border-radius: 0 0 0 8px; }

.side-btn:hover {
background: var(--green-dark);
width: 52px;
}

.side-btn.blue { background: #2563eb; }
.side-btn.blue:hover { background: #1d4ed8; }
.side-btn.orange { background: #f59e0b; }
.side-btn.orange:hover { background: #d97706; }
.side-btn.red { background: #dc2626; }
.side-btn.red:hover { background: #b91c1c; }

/* ── MODAL ── */
.modal-dialog {
max-width: 420px;
}

.modal-dialog.modal-lg {
max-width: 680px;
}

.modal-content {
border-radius: 16px;
border: none;
box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
max-height: 80vh;
display: flex;
flex-direction: column;
}

.modal-dialog.modal-lg .modal-content {
max-height: 85vh;
}

.modal.fade .modal-dialog {
transition: transform .25s ease, opacity .25s ease;
transform: scale(.95) translateY(-20px);
}

.modal.show .modal-dialog {
transform: scale(1) translateY(0);
}

.modal-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}

.modal-header .modal-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--dark);
display: flex;
align-items: center;
gap: 8px;
}

.modal-header .btn-close {
width: 32px;
height: 32px;
background: #f1f5f9;
border-radius: 8px;
opacity: 1;
transition: .2s;
padding: 0;
}

.modal-header .btn-close:hover {
background: #e2e8f0;
opacity: 1;
}

.modal-body {
overflow-y: auto;
flex: 1;
padding: 0 24px;
}

.modal-body::-webkit-scrollbar {
width: 5px;
}

.modal-body::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}

.modal-backdrop {
background-color: rgba(0, 0, 0, .55);
}

/* Announcement items */
.ann-item {
padding: 18px 0;
border-bottom: 1px solid var(--border);
}

.ann-item:last-child {
border-bottom: none;
}

.ann-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: 5px;
margin-bottom: 8px;
}

.ann-badge.penting { background: #fee2e2; color: #dc2626; }
.ann-badge.info { background: #fef3c7; color: #d97706; }
.ann-badge.acara { background: #ede9fe; color: #7c3aed; }
.ann-badge.umum { background: #dbeafe; color: #2563eb; }

.ann-item h4 {
font-size: 14px;
font-weight: 600;
color: var(--dark);
margin-bottom: 7px;
line-height: 1.45;
}

.ann-item p {
font-size: 12.5px;
color: var(--gray);
margin-bottom: 10px;
line-height: 1.55;
}

.ann-meta {
display: flex;
gap: 14px;
font-size: 11px;
color: var(--gray);
margin-bottom: 8px;
}

.ann-link {
font-size: 12.5px;
color: var(--green);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}

.ann-link:hover {
text-decoration: underline;
}

/* Link items */
.link-item {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}

.link-item:last-child {
border-bottom: none;
}

.link-item a {
display: flex;
align-items: center;
gap: 12px;
color: var(--dark);
transition: .2s;
}

.link-item a:hover {
color: var(--green);
padding-left: 4px;
}

.link-item .li-icon {
width: 38px;
height: 38px;
border-radius: 9px;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--green);
flex-shrink: 0;
}

.link-item .li-body {
flex: 1;
}

.link-item .li-body strong {
display: block;
font-size: 13px;
font-weight: 600;
}

.link-item .li-body span {
font-size: 11px;
color: var(--gray);
}

.link-item a i.arrow {
color: var(--gray);
font-size: 14px;
}

/* FAB corner */
.fab-corner {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 900;
}

.fab {
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white;
box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
transition: .2s;
}

.fab:hover { transform: scale(1.1); }
.fab.fab-green { background: var(--green); }
.fab.fab-blue { background: #2563eb; }

/* Utilities */
.badge-new {
display: inline-block;
background: #ef4444;
color: white;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
vertical-align: middle;
margin-left: 4px;
}

/* ── Mobile menu button ── */
.mobile-menu-btn {
display: none;
background: none;
border: none;
cursor: pointer;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: .2s;
color: var(--dark);
font-size: 22px;
margin-left: auto;
}

.mobile-menu-btn:hover {
background: var(--light);
}

/* ── Mobile Nav Drawer ── */
.mobile-nav {
display: none;
position: fixed;
inset: 0;
z-index: 9998;
}

.mobile-nav.open {
display: block;
}

.mobile-nav-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .5);
}

.mobile-nav-drawer {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 280px;
background: white;
overflow-y: auto;
padding: 20px 0;
box-shadow: 4px 0 20px rgba(0, 0, 0, .15);
animation: slideInLeft .25s ease;
}

@keyframes slideInLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}

.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}

.mobile-nav-header span {
font-weight: 700;
font-size: 14px;
color: var(--dark);
}

.mobile-nav-close {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--gray);
}

.mobile-nav-links a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 20px;
color: var(--dark);
font-size: 14px;
font-weight: 500;
border-bottom: 1px solid #f1f5f9;
transition: .2s;
}

.mobile-nav-links a:hover {
background: #f8fafc;
color: var(--green);
}

.mobile-nav-links a i {
color: var(--gray);
font-size: 12px;
}

/* ── FAB Mobile Bottom Bar ── */
.fab-mobile {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
background: white;
border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}

.fab-mobile-inner {
display: flex;
justify-content: space-around;
align-items: center;
}

.fab-mobile-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
background: none;
border: none;
cursor: pointer;
padding: 6px 4px;
color: var(--gray);
transition: .2s;
border-radius: 8px;
flex: 1;
min-width: 0;
}

.fab-mobile-btn:hover,
.fab-mobile-btn.active {
color: var(--green);
}

.fab-mobile-btn i { font-size: 20px; }
.fab-mobile-btn span { font-size: 10px; font-weight: 600; white-space: nowrap; }

/*Banner
/* ── Wrapper section ── */
.banner-section {
padding: 28px 0 36px;
background: #f1f5f9; /* samakan dengan .slider-section lama */
}

/* ── Swiper container ──
overflow: visible agar arrow tidak terpotong
padding-bottom memberi ruang untuk dots pagination */
.banner-swiper {
position: relative;
border-radius: 20px;
overflow: visible;
padding-bottom: 52px;
}

/* PENTING: override global .swiper-slide yang ada di CSS lama.
Rule lama: .swiper-slide { display:flex; flex-direction:column }
Itu bikin card banner jadi kolom semua. Fix di bawah ini. */
.banner-swiper .swiper-slide {
display: block; /* reset dari flex column global */
flex-direction: unset;
}

/* ── Kartu per slide ── */
.banner-slide-card {
border-radius: 20px;
overflow: hidden;
min-height: 320px;
display: flex; /* flex ROW: teks kiri | gambar kanan */
flex-direction: row;
align-items: stretch;
position: relative;
box-shadow: 0 8px 40px rgba(0, 0, 0, .10);
}

/* ── Sisi kiri: Teks ── */
.banner-content {
flex: 1 1 55%;
padding: 44px 48px 44px 52px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
position: relative;
z-index: 2;
}

.banner-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
letter-spacing: .4px;
width: fit-content;
}

.banner-title {
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 800;
line-height: 1.25;
color: #fff;
margin: 0;
}

.banner-subtitle {
font-size: clamp(13px, 1.4vw, 15px);
font-weight: 500;
color: rgba(255, 255, 255, .88);
margin: 0;
line-height: 1.55;
}

.banner-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
width: fit-content;
margin-top: 6px;
transition: transform .2s, box-shadow .2s;
cursor: pointer;
border: none;
}

.banner-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* ── Sisi kanan: Gambar ── */
.banner-image-wrap {
flex: 1 1 45%;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}

.banner-image-wrap img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: top center;
transition: transform .6s ease;
}

/* Zoom halus saat slide aktif */
.banner-swiper .swiper-slide-active .banner-image-wrap img {
transform: scale(1.03);
}

/* ── Dekorasi lingkaran di belakang ── */
.banner-slide-card::before {
content: '';
position: absolute;
right: 40%;
top: -40px;
width: 240px;
height: 240px;
border-radius: 50%;
background: rgba(255, 255, 255, .06);
pointer-events: none;
z-index: 1;
}

.banner-slide-card::after {
content: '';
position: absolute;
right: 35%;
bottom: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255, 255, 255, .05);
pointer-events: none;
z-index: 1;
}

/* ── Tema warna per slide ── */
.slide-theme-green .banner-slide-card { background: linear-gradient(135deg, #2aba6a 0%, #1d9950 100%); }
.slide-theme-green .banner-badge { background: rgba(255, 255, 255, .2); color: #fff; }
.slide-theme-green .banner-btn { background: #fff; color: #1d9950; }

.slide-theme-blue .banner-slide-card { background: linear-gradient(135deg, #1a4fa0 0%, #0d347a 100%); }
.slide-theme-blue .banner-badge { background: rgba(255, 215, 0, .25); color: #ffe066; }
.slide-theme-blue .banner-btn { background: #f0c040; color: #0d347a; }

.slide-theme-red .banner-slide-card { background: linear-gradient(135deg, #e63946 0%, #b5000b 100%); }
.slide-theme-red .banner-badge { background: rgba(255, 255, 255, .2); color: #fff; }
.slide-theme-red .banner-btn { background: #fff; color: #b5000b; }

.slide-theme-purple .banner-slide-card { background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%); }
.slide-theme-purple .banner-badge { background: rgba(255, 255, 255, .15); color: #e9d5ff; }
.slide-theme-purple .banner-btn { background: #fff; color: #4c1d95; }

/* ── Pagination dots ──
position:relative agar dots berada di bawah card (bukan overlapping)
margin-top memberikan jarak dari card ke dots */
.banner-pagination {
display: flex !important; /* override swiper default */
justify-content: center;
gap: 8px;
position: relative !important; /* lepas dari absolute swiper */
bottom: unset !important;
margin-top: 20px;
}

.banner-pagination .swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background: #c7cdd6;
opacity: 1;
transition: all .3s;
}

.banner-pagination .swiper-pagination-bullet-active {
width: 28px;
border-radius: 5px;
background: var(--green);
}

/* ── Arrow navigasi ──
top dihitung dari card saja (bukan termasuk dots area)
karena swiper punya padding-bottom, perlu dikompensasi */
.banner-swiper .swiper-button-next,
.banner-swiper .swiper-button-prev {
width: 42px;
height: 42px;
background: #fff;
border-radius: 50%;
box-shadow: 0 3px 14px rgba(0, 0, 0, .14);
color: #333;
/* Hitung: 50% dari tinggi card saja, bukan 50% total (card+dots) */
top: calc(50% - 26px); /* 52px/2 = 26px kompensasi padding-bottom */
transform: translateY(-50%);
margin-top: 0;
}

.banner-swiper .swiper-button-next::after,
.banner-swiper .swiper-button-prev::after {
font-size: 14px;
font-weight: 900;
}

.banner-swiper .swiper-button-next { right: -18px; }
.banner-swiper .swiper-button-prev { left: -18px; }

/* ── Animasi slide-in teks ── */
.banner-swiper .swiper-slide-active .banner-badge,
.banner-swiper .swiper-slide-active .banner-title,
.banner-swiper .swiper-slide-active .banner-subtitle,
.banner-swiper .swiper-slide-active .banner-btn {
animation: bannerSlideUp .5s ease both;
}

/* Tambah prefix .banner-swiper agar tidak nabrak animasi swiper lain */
.banner-swiper .swiper-slide-active .banner-badge { animation-delay: .05s; }
.banner-swiper .swiper-slide-active .banner-title { animation-delay: .12s; }
.banner-swiper .swiper-slide-active .banner-subtitle { animation-delay: .20s; }
.banner-swiper .swiper-slide-active .banner-btn { animation-delay: .28s; }

@keyframes bannerSlideUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
RESPONSIVE BANNER
═══════════════════════════════════════ */

/* Tablet */
@media (max-width: 991px) {
.banner-content {
padding: 32px 32px 32px 36px;
}

.banner-swiper .swiper-button-next { right: 8px; }
.banner-swiper .swiper-button-prev { left: 8px; }
}

/* Mobile */
@media (max-width: 767px) {
.banner-swiper {
padding-bottom: 44px;
}

/* Susun vertikal: gambar di atas, teks di bawah */
.banner-slide-card {
flex-direction: column;
min-height: unset;
}

.banner-image-wrap {
height: 200px;
flex: unset;
order: -1; /* gambar tampil di atas */
}

.banner-content {
flex: unset;
padding: 24px 20px 28px;
gap: 10px;
}

.banner-title { font-size: 20px; }
.banner-subtitle { font-size: 13px; }

.banner-swiper .swiper-button-next,
.banner-swiper .swiper-button-prev {
top: 100px; /* tengah area gambar 200px */
transform: translateY(-50%);
}

.banner-swiper .swiper-button-next { right: 8px; }
.banner-swiper .swiper-button-prev { left: 8px; }
}

/* ═══════════════════════════════════════
TABLET (768px – 991px)
═══════════════════════════════════════ */
@media (max-width: 991px) {
.topbar .d-flex {
flex-direction: column;
gap: 4px;
text-align: center;
}

.topbar a {
margin: 0 6px;
}

.main-nav .container {
height: auto;
padding: 10px 16px;
flex-wrap: wrap;
gap: 12px;
}

.main-nav .nav-links {
display: none !important;
}

.mobile-menu-btn {
display: flex !important;
}

.hero {
padding: 40px 0 44px;
}

.hero-left h1 {
font-size: 1.65rem;
}

.hero-left p {
font-size: .9rem;
}

.hero-search-wrap {
max-width: 100%;
}

.hero-socials {
display: none;
}

.weather-card {
margin-top: 24px;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}

.section,
.section-alt {
padding: 32px 0;
}

.sec-head {
flex-wrap: wrap;
gap: 10px;
}

.sec-title {
font-size: 1.2rem;
}

.news-featured img {
height: 260px;
}

.promo-card {
flex-direction: column;
}

.promo-card .promo-img {
width: 100%;
height: 200px;
object-fit: cover;
}

.promo-card .promo-body {
padding: 20px 24px;
}

.promo-card .promo-body h2 {
font-size: 1.25rem;
}

.agenda-big img {
height: 260px;
}

.agenda-big h2 {
font-size: 1rem;
}

.side-btns {
display: none;
}

/* FIX: Removed duplicate .fab-mobile rule, show via display:block */
.fab-mobile {
display: block;
}

body {
padding-bottom: 70px;
}

/* FIX: .modal-box rules added to match class names used in mobile modal markup */
.modal-box.large {
max-width: 95vw;
}

.modal-box.small {
max-width: 440px;
}
}

/* ═══════════════════════════════════════
MOBILE (< 768px) ═══════════════════════════════════════ */ @media (max-width: 767px) { .topbar { display: none; }
    .main-nav .container { height: 56px; padding: 0 16px; } .nav-brand .brand-name { font-size: 10px; } .nav-brand
    .brand-sub { display: none; } .nav-brand .logo-box { width: 34px; height: 34px; font-size: 12px; } .hero { padding:
    32px 0 36px; } .hero-left h1 { font-size: 1.35rem; line-height: 1.3; } .hero-left p { font-size: .85rem;
    margin-bottom: 18px; } .hero-search-wrap input { padding: 9px 12px; font-size: .85rem; } .hero-search-wrap button {
    padding: 9px 16px; font-size: .8rem; } .hero-tag { padding: 3px 10px; font-size: 11px; } .weather-card { padding:
    16px 20px; } .weather-card .wd-temp { font-size: 2.5rem; } .weather-card .wd-icon { font-size: 2rem; } .section,
    .section-alt { padding: 24px 0; } .sec-title { font-size: 1.1rem; } .sec-link { font-size: 12px; padding: 6px 12px;
    } .news-featured img { height: 220px; } .news-featured .overlay h2 { font-size: .95rem; } .news-tab { padding: 8px
    14px; font-size: 12px; } .news-thumb-img { width: 60px; height: 46px; } .news-thumb-body h4 { font-size: 12px; }
    .promo-card .promo-img { height: 160px; } .promo-card .promo-body { padding: 16px 20px; } .promo-card .promo-body h2
    { font-size: 1.1rem; } .promo-card .promo-body p { display: none; } .service-card { padding: 18px; } .agenda-big img
    { height: 200px; } .agenda-big .ag-overlay { padding: 16px; } .agenda-big h2 { font-size: .95rem; } .agenda-big
    .ag-btn { padding: 6px 12px; font-size: 11px; } .cal-widget { padding: 12px; } .cal-days .day-num { font-size: 11px;
    padding: 4px 1px; } .transp-card { padding: 16px; } .transp-card h4 { font-size: 12.5px; } .transp-card p { display:
    none; } .footer { padding: 28px 0 0; } .footer-bottom { padding-bottom: calc(16px + 70px); } /* FIX: Mobile modal —
    class names align with .modal-overlay / .modal-box pattern */ .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-box { border-radius: 20px 20px 0 0; max-height: 90vh; } .modal-box.large, .modal-box.small { max-width: 100%;
    } .modal-hd { padding: 16px 20px; } .modal-bd { padding: 0 20px; } .ann-meta { flex-wrap: wrap; gap: 8px; } }
/* ═══════════════════════════════════════
   FOOTER MOBILE FIX
═══════════════════════════════════════ */
@media (max-width: 767px) {

  .footer {
    padding: 28px 0 0;
  }

  /* Brand row — sejajarkan logo & nama */
  .footer-brand {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    margin-bottom: 16px;
  }

  /* Sosmed icons */
  .footer-socials {
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  /* Grid 2 kolom untuk link navigasi */
  .footer-links-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    margin-bottom: 16px;
  }

  .footer h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .6;
    margin-bottom: 10px;
  }

  .footer-links li {
    margin-bottom: 6px;
  }

  .footer-links a {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.88);
  }

  /* Kontak — box tersendiri agar tidak berjejal */
  .footer-contact {
    background: rgba(0,0,0,.12);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 20px;
  }

  .footer-contact p {
    font-size: 11.5px;
    margin-bottom: 6px;
    line-height: 1.45;
  }

  .footer-contact p:last-child {
    margin-bottom: 0;
  }

  /* Bottom bar */
  .footer-bottom {
    padding: 12px 16px;
    /* tambah ruang untuk FAB mobile bottom bar */
    padding-bottom: calc(12px + 70px);
  }

  .footer-bottom p {
    font-size: 11px;
    line-height: 1.55;
  }
}