:root{
  --blue:#0758b8;
  --blue-dark:#063b7d;
  --blue-deep:#042f68;
  --blue-soft:#eaf4ff;
  --yellow:#ffd800;
  --text:#17324f;
  --muted:#66788a;
  --white:#fff;
  --border:#dfe9f3;
  --shadow:0 10px 30px rgba(4,52,104,.10);
  --radius:14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#f6f9fc;
  line-height:1.6;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font:inherit; }

/* ========================================================= LOADING ========================================================= */
#page-loader{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(rgba(3,50,105,.93), rgba(4,63,126,.97)), url("img/hero.jpg") center/cover;
  transition: opacity .6s ease, visibility .6s ease;
}
#page-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-box{ text-align:center; color:#fff; width:min(360px,90vw); }
.loader-logo{ width:90px; height:90px; object-fit:contain; margin:0 auto 15px; filter: drop-shadow(0 7px 12px rgba(0,0,0,.2)); }
.loader-title{ font-size:27px; font-weight:800; }
.loader-subtitle{ font-size:14px; opacity:.85; margin-top:2px; }
.loader-spinner{
  width:42px; height:42px; margin:24px auto 0;
  border:4px solid rgba(255,255,255,.25); border-top-color:#fff; border-right-color:#19a7ff;
  border-radius:50%; animation:spin .85s linear infinite;
}
.loader-text{ font-size:13px; margin-top:12px; opacity:.9; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ========================================================= TOP BAR ========================================================= */
.topbar{ background:var(--blue-dark); color:#fff; font-size:13px; }
.topbar-inner{ max-width:1200px; margin:auto; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 20px; }
.top-links{ display:flex; gap:20px; }
.top-links a:hover{ opacity:.75; }

/* ========================================================= NAVBAR ========================================================= */
.navbar{ background:#fff; position:sticky; top:0; z-index:1000; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.nav-inner{ max-width:1200px; margin:auto; padding:13px 20px; display:flex; align-items:center; gap:25px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:300px; }
.brand img{ width:58px; height:58px; object-fit:contain; }
.brand-title{ font-size:22px; font-weight:800; color:var(--blue-deep); }
.brand-subtitle{ font-size:12px; color:#53677c; }
.nav-menu{ margin-left:auto; display:flex; align-items:center; gap:4px; list-style:none; }
.nav-menu > li{ position:relative; }
.nav-menu a{ display:block; padding:14px 12px; color:#153d6c; font-weight:700; font-size:14px; border-bottom:3px solid transparent; }
.nav-menu a:hover, .nav-menu .active>a{ color:var(--blue); border-bottom-color:var(--blue); }
.search-btn{ border:0; background:none; color:var(--blue-deep); font-size:21px; cursor:pointer; padding:8px; }
.hamburger{ display:none; border:0; background:none; font-size:28px; color:var(--blue); cursor:pointer; }
.mobile-menu-brand{ display:none; }

/* ========================================================= WHATSAPP ========================================================= */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:30px; z-index:3000; box-shadow: 0 8px 20px rgba(0,0,0,.22); transition:.2s ease;
}
.whatsapp-float:hover{ transform:translateY(-3px); background:#1ebe5d; }

/* ========================================================= DROPDOWN MENU ========================================================= */
.nav-menu .has-submenu > a{ display:flex; align-items:center; gap:6px; }
.submenu{
  position:absolute; left:0; top:calc(100% + 2px); min-width:220px; background:#fff;
  border:1px solid var(--border); border-radius:10px; box-shadow: 0 15px 35px rgba(4,52,104,.15);
  list-style:none; padding:7px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s ease; z-index:200;
}
.has-submenu:hover > .submenu, .has-submenu:focus-within > .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu li a{ border:0!important; padding:10px 15px!important; font-size:13px!important; color:#294a6c!important; font-weight:600!important; }
.submenu li a:hover{ background:#edf6ff!important; color:var(--blue)!important; }

/* ========================================================= FOTO KEPALA DESA ========================================================= */
.kades-photo{
  position:relative; z-index:2; width:380px; height:450px; overflow:visible;
  display:flex; align-items:flex-end; justify-content:center; background:transparent; border-radius:22px 22px 0 0;
}
.kades-photo img{
  display:block!important; width:380px!important; height:auto!important; max-width:100%!important; max-height:450px!important;
  object-fit:contain!important; object-position:center bottom!important; border-radius:22px 22px 0 0!important;
  transform:none!important; left:auto!important; filter: drop-shadow(0 15px 16px rgba(0,0,0,.18));
}

/* ========================================================= HERO ========================================================= */
.hero{ min-height:510px; position:relative; overflow:hidden; background:#0c63c6; }
.hero-bg{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(3,62,126,.95) 0%, rgba(5,88,177,.72) 42%, rgba(4,74,148,.20) 100%), url("img/hero.jpg") center/cover no-repeat;
}
.hero-inner{ max-width:1200px; min-height:510px; margin:auto; padding:65px 20px 85px; position:relative; display:flex; align-items:center; }
.hero-copy{ width:53%; color:#fff; position:relative; z-index:2; }
.hero-welcome{ font-size:19px; margin-bottom:8px; }
.hero h1{ font-size:50px; line-height:1.12; margin-bottom:12px; letter-spacing:-1px; }
.hero-location{ font-size:20px; line-height:1.5; margin-bottom:20px; }
.hero-desc{ max-width:560px; font-size:15px; opacity:.94; margin-bottom:28px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:9px; border-radius:30px; padding:12px 23px; font-weight:800; font-size:14px; transition:.25s; }
.btn-primary{ background:#0877eb; color:#fff; }
.btn-primary:hover{ background:#0062c8; transform:translateY(-2px); }
.btn-outline{ border:1px solid #fff; color:#fff; }
.btn-outline:hover{ background:#fff; color:var(--blue-dark); }

/* ========================================================= KADES HERO ========================================================= */
.kades{ position:absolute; right:20px; bottom:18px; width:420px; height:500px; z-index:7; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.kades::before{ content:""; position:absolute; bottom:8px; width:395px; height:395px; border-radius:50%; background:rgba(255,255,255,.10); }
.kades img{ display:block; }
.kades-card{
  position:absolute; z-index:9; bottom:0; left:50%; right:auto; transform:translateX(-50%);
  width:275px; min-width:0; text-align:center; color:#fff;
  background: linear-gradient(135deg, #0758b8, #003b80); border-radius:14px; padding:9px 18px 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.35);
}
.kades-card strong{ display:block; font-size:21px; }
.kades-card span{ display:block; font-size:13px; }
.kades-card small{ display:block; margin-top:3px; font-weight:800; color:#fff; }
.hero-wave{ position:absolute; bottom:-1px; left:-2%; width:104%; height:75px; background:#f6f9fc; border-radius: 50% 50% 0 0/ 55% 55% 0 0; z-index:5; }
.slider-dots{ position:absolute; bottom:27px; left:50%; transform:translateX(-50%); display:flex; gap:11px; z-index:8; }
.slider-dots span{ width:8px; height:8px; background:#0d6bd2; border-radius:50%; }
.slider-dots span:first-child{ width:11px; height:11px; background:#0758b8; }

/* ========================================================= CONTENT ========================================================= */
.main-wrap{ max-width:1200px; margin:-3px auto 0; padding:0 20px 45px; position:relative; z-index:10; }
.content-grid{ display:grid; grid-template-columns: minmax(0,2.2fr) minmax(280px,1fr); gap:18px; }
.section{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:18px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:15px; }
.section-title{ font-size:20px; color:var(--blue-deep); font-weight:800; padding-left:12px; border-left:4px solid var(--blue); }
.see-all{ font-size:12px; color:var(--blue); font-weight:800; background:#edf6ff; padding:8px 13px; border-radius:20px; }

/* ========================================================= NEWS ========================================================= */
.news-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.news-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; transition:.25s; }
.news-card:hover{ transform:translateY(-4px); box-shadow: 0 10px 25px rgba(0,74,155,.10); }
.news-image{ position:relative; overflow:hidden; background:#eef5fb; }
.news-image img{ width:100%; height:auto; display:block; object-fit:contain; }
.date-badge{ position:absolute; left:10px; top:10px; background:#0864c8; color:#fff; padding:5px 9px; border-radius:7px; font-size:11px; font-weight:800; text-align:center; }
.news-body{ padding:13px; }
.news-body h3{ font-size:15px; line-height:1.35; color:#113b6d; margin-bottom:7px; }
.news-body p{ font-size:12px; color:#637487; min-height:58px; }
.read-more{ display:inline-block; margin-top:8px; color:var(--blue); font-size:12px; font-weight:800; }

/* ========================================================= PROFILE ========================================================= */
.profile{ display:grid; grid-template-columns:42% 1fr; gap:20px; align-items:center; }
.profile-img{ height:210px; border-radius:11px; overflow:hidden; }
.profile-img img{ width:100%; height:100%; object-fit:cover; }
.profile p{ font-size:14px; color:#52677b; margin-bottom:16px; }

/* ========================================================= POTENSI ========================================================= */
.potential-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.potential{ text-align:center; border:1px solid var(--border); border-radius:12px; padding:17px 10px; transition:.25s; }
.potential:hover{ border-color:#8fc4fa; transform:translateY(-3px); }
.potential-icon{ font-size:31px; color:#0871dc; margin-bottom:7px; }
.potential h4{ color:#123f70; font-size:14px; }
.potential p{ font-size:11px; color:#65788b; margin-top:4px; }

/* ========================================================= STATISTIK CARDS ========================================================= */
.stat-cards-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; }
.stat-card{ background: linear-gradient(135deg, #0758b8, #0874e0); color: #fff; padding: 20px; border-radius: 12px; text-align: center; box-shadow: var(--shadow); transition: .25s; }
.stat-card:hover{ transform: translateY(-5px); box-shadow: 0 15px 35px rgba(7,88,184,.20); }
.stat-card-icon{ font-size: 32px; margin-bottom: 10px; opacity: 0.9; }
.stat-card-number{ font-size: 28px; font-weight: 800; margin-bottom: 5px; }
.stat-card-label{ font-size: 12px; opacity: 0.9; }
.stat-card-alt{ background: linear-gradient(135deg, #063b7d, #0758b8); }
.stat-card-alt2{ background: linear-gradient(135deg, #042f68, #063b7d); }
.stat-card-alt3{ background: linear-gradient(135deg, #0874e0, #0758b8); }

/* ========================================================= SIDEBAR ========================================================= */
.side-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; box-shadow:var(--shadow); }
.side-head{ background: linear-gradient(90deg, #0758b8, #0874e0); color:#fff; padding:13px 15px; font-size:17px; font-weight:800; }
.side-body{ padding:13px 15px; }
.service-list, .announcement-list, .stat-list{ list-style:none; }
.service-list li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13px; color:#294a6c; border-bottom:1px dashed #e4ebf2; }
.service-list li:last-child{ border-bottom:0; }
.service-icon{ width:25px; text-align:center; color:var(--blue); font-size:17px; }
.side-btn{ margin-top:9px; background:var(--blue); color:#fff; padding:9px 14px; border-radius:8px; display:inline-block; font-size:12px; font-weight:800; }
.announcement-list li{ padding:9px 0; border-bottom:1px solid #edf1f5; }
.announcement-list li:last-child{ border-bottom:0; }
.announcement-date{ font-size:10px; color:#74879a; }
.announcement-title{ font-size:12px; font-weight:700; color:#294766; }
.stat-list li{ display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed #e1e8ef; font-size:12px; }
.stat-list li:last-child{ border-bottom:0; }
.stat-list strong{ color:#1a3550; }

/* ========================================================= CHART CONTAINER ========================================================= */
.chart-tabs{ display: flex; gap: 5px; margin-bottom: 15px; flex-wrap: wrap; }
.chart-tab{ flex: 1; min-width: 70px; padding: 8px 10px; background: #edf6ff; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--blue-deep); text-align: center; transition: .2s; }
.chart-tab:hover{ background: #d4e8ff; }
.chart-tab.active{ background: var(--blue); color: #fff; border-color: var(--blue); }
.chart-content{ display: none; }
.chart-content.active{ display: block; }
.chart-container{ position: relative; height: 250px; width: 100%; }

/* ========================================================= LOGIN TOGGLE BUTTON ========================================================= */
.login-toggle-btn {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 14px !important;
  background: var(--blue-soft);
  border-radius: 30px;
  color: var(--blue) !important;
  font-weight: 800 !important;
  border-bottom: none !important;
  transition: all 0.2s ease;
}
.login-toggle-btn:hover {
  background: var(--blue);
  color: #fff !important;
  transform: translateY(-1px);
}
.login-toggle-btn i {
  font-size: 20px;
}
.login-text {
  font-size: 13px;
}

/* ========================================================= KALENDER SIDEBAR ========================================================= */
.calendar-wrap{ padding:13px 15px 16px; }
.calendar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.calendar-head strong{ font-size:14px; color:#163e6c; }
.calendar-nav{ display:flex; gap:4px; }
.calendar-nav button{ border:0; background:#edf6ff; color:var(--blue); width:26px; height:26px; border-radius:7px; cursor:pointer; }
.calendar-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; text-align:center; }
.calendar-grid .dow{ font-size:9px; font-weight:800; color:#7890a8; padding:3px 0; }
.calendar-day{ height:29px; display:flex; align-items:center; justify-content:center; border-radius:7px; font-size:11px; color:#38526d; cursor:default; }
.calendar-day.empty{ visibility:hidden; }
.calendar-day.sunday, .calendar-day.holiday{ color:#d73535; font-weight:800; }
.calendar-day.today{ background:var(--blue); color:#fff!important; font-weight:800; box-shadow: 0 4px 10px rgba(7,88,184,.25); }
.calendar-legend{ display:flex; gap:12px; margin-top:10px; font-size:9px; color:#74879a; }
.calendar-legend span{ display:flex; align-items:center; gap:4px; }
.legend-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.legend-today{ background:var(--blue); }
.legend-holiday{ background:#d73535; }

/* ========================================================= MAP ========================================================= */
.map-box{ display:block; position:relative; height:190px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.22); background:#dbe7f2; }
.map-box iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9); }
.map-overlay{ position:absolute; left:10px; bottom:10px; background:rgba(4,47,104,.92); color:#fff; padding:7px 10px; border-radius:8px; font-size:11px; font-weight:800; }
.map-overlay i{ margin-right:4px; }

/* ========================================================= FOOTER ========================================================= */
footer{ background: linear-gradient(135deg, #063b7d, #0758b8); color:#fff; position:relative; }
.footer-main{ max-width:1200px; margin:auto; padding:42px 20px 32px; display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:30px; }
.footer-brand{ display:flex; gap:11px; align-items:center; margin-bottom:12px; }
.footer-brand img{ width:55px; height:55px; object-fit:contain; }
footer h3{ font-size:17px; margin-bottom:14px; color:#fff; }
footer p{ font-size:12px; color:rgba(255,255,255,.85); }
footer ul{ list-style:none!important; margin:0!important; padding:0!important; }
footer li{ list-style:none!important; font-size:12px; color:rgba(255,255,255,.85); margin:8px 0; padding:0; display:flex; align-items:flex-start; gap:9px; }
footer li::marker{ content:none!important; }
footer li i{ width:18px; min-width:18px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:14px; background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:0!important; margin-top:2px; }
footer a{ color:inherit; text-decoration:none; }
footer a:hover{ color:#fff; }
.socials{ display:flex; gap:15px; margin-top:17px; font-weight:800; }
.socials i{ display:inline-flex; align-items:center; justify-content:center; font-size:17px; color:#fff; background:none; border:0; box-shadow:none; width:auto; height:auto; }
.socials i:hover{ color:#ffd800; transform:translateY(-2px); }
.footer-map h3 i{ margin-right:6px; background:none!important; border:0!important; box-shadow:none!important; border-radius:0!important; }

/* PERBAIKAN HR FOOTER AGAR TIDAK TERPUTUS */
.footer-divider{
  border:0;
  border-top: 1px solid rgba(255,255,255,.16);
  margin: 0; /* Hapus margin auto agar full width */
  width: 100%; /* Pastikan lebar penuh */
}

.footer-bottom{
  max-width:1200px; margin:auto; padding:14px 20px;
  display:flex; justify-content:space-between; gap:15px;
  font-size:11px; color:rgba(255,255,255,.75);
}

/* ========================================================= BACK TO TOP ========================================================= */
.back-top{
  position:fixed; right:25px; bottom:22px; width:44px; height:44px; border:0;
  border-radius:50%; background:#0871dc; color:#fff; font-size:20px; cursor:pointer;
  z-index:90; box-shadow: 0 8px 18px rgba(0,60,130,.25); display:none;
}

/* ========================================================= RESPONSIVE MOBILE ========================================================= */
@media(max-width:850px){
  .top-links{ display:none; }
  .nav-inner{ padding:9px 16px; }
  .brand img{ width:48px; height:48px; }
  .brand-title{ font-size:18px; }
  .hamburger{ display:block; margin-left:auto; border:0; background:none; font-size:28px; color:var(--blue); cursor:pointer; }
  .search-btn{ display:none; }
  .nav-menu{
    position:fixed; right:0; left:auto; top:0; width:min(350px,90vw); height:100vh; background:#fff;
    display:flex; flex-direction:column; align-items:stretch; padding:22px 18px 25px;
    box-shadow: -15px 0 35px rgba(0,0,0,.18); overflow-y:auto;
    transform:translateX(105%); visibility:hidden; opacity:0;
    transition: transform .32s ease, opacity .25s ease, visibility .32s; z-index:10000;
  }
  .nav-menu.open{ transform:translateX(0); visibility:visible; opacity:1; }
  .mobile-menu-brand{ display:flex!important; align-items:center; justify-content:space-between; gap:10px; padding:0 0 16px; margin-bottom:8px; border-bottom:1px solid #e6eef6; }
  .mobile-brand-row{ display:flex; align-items:center; gap:10px; min-width:0; }
  .mobile-brand-row img{ width:48px; height:48px; object-fit:contain; flex:none; }
  .mobile-brand-row strong{ display:block; color:#073d7d; font-size:16px; line-height:1.2; }
  .mobile-brand-row small{ display:block; color:#718196; font-size:9px; line-height:1.35; margin-top:3px; }
  .mobile-menu-close{ border:0; background:#edf6ff; color:#0758b8; width:38px; height:38px; border-radius:50%; cursor:pointer; flex:none; }
  .nav-menu a{ border-bottom:1px solid #edf1f5; padding:13px 10px; }
  .nav-menu .active>a{ border-bottom-color:#edf1f5; }
  .submenu{ position:static; display:none; opacity:1; visibility:visible; transform:none; min-width:0; border:0; box-shadow:none; border-radius:0; padding:0 0 5px 12px; }
  .has-submenu.open-submenu > .submenu{ display:block; }
  .submenu li a{ padding:9px 10px!important; background:#f7fbff!important; border-bottom:1px solid #e8f0f7!important; }
  .submenu-toggle .bi-chevron-down{ margin-left:auto; transition:.2s; }
  .has-submenu.open-submenu > .submenu-toggle .bi-chevron-down{ transform:rotate(180deg); }
  .hero{ min-height:700px; overflow:hidden; }
  .hero-inner{ min-height:700px; display:flex; flex-direction:column; align-items:stretch; padding: 35px 16px 110px; position:relative; }
  .hero-copy{ width:100%; position:relative; z-index:6; flex:none; }
  .hero-welcome{ font-size:16px; margin-bottom:5px; }
  .hero h1{ font-size:32px; line-height:1.12; margin-bottom:12px; }
  .hero-location{ font-size:15px; line-height:1.55; margin-bottom:16px; }
  .hero-desc{ font-size:12px; line-height:1.6; max-width:100%; margin-bottom:20px; }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:9px; position:relative; z-index:20; }
  .hero-actions .btn{ padding:10px 16px; font-size:12px; }
  .kades{ position:relative; right:auto; bottom:auto; transform:none; width:100%; height:360px; margin-top:30px; display:flex; align-items:flex-end; justify-content:center; z-index:7; pointer-events:none; flex:none; }
  .kades::before{ content:""; position:absolute; bottom:20px; width:290px; height:290px; border-radius:50%; background:rgba(255,255,255,.10); z-index:0; }
  .kades-photo{ position:relative; z-index:2; width:270px; height:340px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; background:transparent; border-radius:20px 20px 0 0; }
  .kades-photo img{ display:block!important; width:270px!important; height:340px!important; max-width:none!important; max-height:none!important; object-fit:contain!important; object-position:center bottom!important; border-radius:20px 20px 0 0!important; transform:none!important; filter: drop-shadow(0 12px 15px rgba(0,0,0,.18)); }
  .kades-card{ position:absolute; z-index:10; bottom:0; left:50%; right:auto; transform:translateX(-50%); width:215px; min-width:215px; text-align:center; color:#fff; background: linear-gradient(135deg, #0758b8, #003b80); border-radius:13px; padding:8px 12px 9px; box-shadow: 0 10px 22px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.35); }
  .kades-card strong{ display:block; font-size:18px; line-height:1.25; }
  .kades-card span{ display:block; font-size:10px; line-height:1.4; }
  .kades-card small{ display:block; margin-top:3px; font-size:10px; font-weight:800; color:#fff; }
  .slider-dots{ position:absolute; left:50%; bottom:43px; transform:translateX(-50%); display:flex; gap:9px; z-index:20; }
  .slider-dots span{ width:7px; height:7px; background:#0d6bd2; border-radius:50%; }
  .slider-dots span:first-child{ width:10px; height:10px; background:#0758b8; }
  .hero-wave{ bottom:-1px; height:48px; width:110%; left:-5%; z-index:5; border-radius: 50% 50% 0 0/ 55% 55% 0 0; }
  .content-grid{ grid-template-columns:1fr; }
  .side-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:15px; }
  .side-card{ margin-bottom:0; }
  .stat-cards-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:600px){
  .topbar-inner{ font-size:10px; padding:0 12px; }
  .brand-subtitle{ font-size:9px; }
  .hero{ min-height:750px; }
  .hero-inner{ min-height:750px; padding: 38px 16px 115px; }
  .hero h1{ font-size:32px; }
  .hero-welcome{ font-size:16px; }
  .hero-location{ font-size:15px; }
  .hero-desc{ font-size:12px; }
  .hero-actions{ gap:8px; }
  .hero-actions .btn{ padding:10px 15px; font-size:12px; }
  .kades{ height:360px; margin-top:32px; width:100%; }
  .kades::before{ width:270px; height:270px; bottom:25px; }
  .kades-photo{ width:250px; height:330px; }
  .kades-photo img{ width:250px!important; height:330px!important; max-width:none!important; max-height:none!important; object-fit:contain!important; object-position:center bottom!important; }
  .kades-card{ width:205px; min-width:205px; bottom:0; padding:7px 10px 8px; }
  .kades-card strong{ font-size:17px; }
  .kades-card span, .kades-card small{ font-size:10px; }
  .slider-dots{ bottom:48px; }
  .news-grid{ grid-template-columns:1fr; }
  .news-image{ height:auto; aspect-ratio:16 / 9; }
  .news-image img{ width:100%; height:100%; object-fit:cover; }
  .profile{ grid-template-columns:1fr; }
  .profile-img{ height:190px; }
  .potential-grid{ grid-template-columns: repeat(2,1fr); }
  .side-grid{ grid-template-columns:1fr; }
  .chart-container{ height: 200px; }
  .footer-main{ grid-template-columns: 1fr 1fr; gap:22px; }
  .map-box{ height:210px; }
  .footer-bottom{ flex-direction:column; }
  footer li{ font-size:11px; gap:7px; line-height:1.5; }
  footer li i{ width:17px; min-width:17px; font-size:13px; }
}

@media(max-width:400px){
  .hero{ min-height:760px; }
  .hero-inner{ min-height:760px; }
  .hero h1{ font-size:29px; }
  .hero-location{ font-size:14px; }
  .hero-desc{ font-size:11px; }
  .hero-actions .btn{ padding:9px 13px; }
  .kades{ height:350px; margin-top:28px; }
  .kades-photo{ width:235px; height:320px; }
  .kades-photo img{ width:235px!important; height:320px!important; }
  .kades-card{ width:195px; min-width:195px; }
  .potential-grid{ grid-template-columns:1fr; }
  .footer-main{ grid-template-columns:1fr; }
  footer li{ font-size:11px; }
  .stat-cards-grid{ grid-template-columns: 1fr; }
}