:root {
  --sidebar-width: 260px;
  --bg-sidebar: #202123;
  --bg-btn: #343541;
  --bg-btn-hover: #626370;
  --text-color: #ececf1;
  --bg-body: #f8f2de;
  --fourth: #781c1c;
  --third: #951a1a;
}
/* --bg: #F8F2DE;
    --scnd: #ECDCBF;
    --third: #A31D1D;
    --fourth: #781c1c; */

body, .fontkontak{
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 350;
  font-style: normal;
  background-color: #ffffff;
  width: 100%;
}
h1 {
  font-size: 2.3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.5rem;
}
p {
  font-size: 1.2rem;
}
.header {
  padding-left: 3rem;
  margin-top: 1rem;
  width: 90%;
}
.sub-judul {
  font-size: 1.4rem;
}

.judul {
  color: #dc0606;
  text-decoration: none;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #1f2025;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1100;
}

.brand {
  margin-left: 16px;
  font-weight: bold;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 20px;
  padding: 0;
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--text-color);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 1.6rem;
  color: #ff1212;
}
.nav-title span {
  color: #fffbd5;
}

.nav-avatar {
  width:55px;
  height: auto;
  object-fit: cover;
  margin-left: auto;
  flex-shrink: 0;
  padding-right: 1.5rem;
}

.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  width: var(--sidebar-width);
  height: calc(100% - 60px);
  background: var(--bg-sidebar);
  color: var(--text-color);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  z-index: 1;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
}

.sidebar.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
}

.close-btn {
  background: none;
  color: var(--text-color);
  font-size: 40px;
  border: none;
  align-self: flex-end;
  margin: 8px;
  cursor: pointer;
}

main {
  transition: margin-left 0.3s ease;
  -webkit-transition: margin-left 0.3s ease;
  -moz-transition: margin-left 0.3s ease;
  -ms-transition: margin-left 0.3s ease;
  -o-transition: margin-left 0.3s ease;
}

main.shifted {
  margin-left: var(--sidebar-width);
}

.chat-list {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  flex-grow: 1;
  overflow-y: auto;
}

a {
  text-decoration: none;
}
.chat-item a {
  display: block;
  padding: 12px;
  color: var(--text-color, #ececf1);
  font-size: 1.2rem;
}

.chat-item {
  position: relative;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-color, #ececf1);
  font-size: 10px;
}

.main-sb::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.7rem;
  height: 2px;
  width: 100%;
  background-color: #cc2020;
  transform: scaleX(.7);
  transform-origin: left;
  transition: transform 0.3s ease;
  -webkit-transform: scaleX(.7);
  -moz-transform: scaleX(.7);
  -ms-transform: scaleX(.7);
  -o-transform: scaleX(.7);
}

.drop-sb {
  background-color: #462424;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
}

.chat-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.7rem;
  height: 2px;
  width: 100%;
  background-color: #cc2020;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
}

/* Hover state */
.chat-item:hover::after {
  transform: scaleX(0.5);
  -webkit-transform: scaleX(0.5);
  -moz-transform: scaleX(0.5);
  -ms-transform: scaleX(0.5);
  -o-transform: scaleX(0.5);
}

.has-dropdown .dropdown {
  display: none;
  position: relative;
  list-style: none;
  padding-left: 16px;
}
.has-dropdown.open .dropdown {
  display: block;
}

.dropdown li a {
  padding: 12px 12px;
  font-size: 1.1rem;
}

.dropdown li a {
  border-bottom: 1px solid darkred;
}

/* bacground image  */
.background-carousel {
  position: relative;
  width: 100%;
  height: 62rem;
  overflow: hidden;
  margin-top: -13rem;
}

.slides-container {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.slide {
  min-width: 100%;
  object-fit: cover;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  display: none;
  transform: translateY(-50%);
  background: rgba(33, 33, 33, 0.5);
  color: #fff;
  border: none;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
}

.carousel-btn.prev {
  left: 1rem;
}

.carousel-btn.next {
  right: 1rem;
}

.carousel-overlay {
  position: absolute;
  margin-top: 5rem;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  text-shadow: 0 0 10px rgb(154, 0, 0);
}

.carousel-overlay h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.carousel-overlay img{
  width: 13rem;
  height: auto;
  filter: drop-shadow(0 1px 5px rgb(255, 255, 255));
  -webkit-filter: drop-shadow(0 1px 5px rgb(255, 255, 255));
}
.carousel-overlay h2 {
  font-size: 2rem;
  margin-bottom: -2rem;
}

.carousel-overlay p {
  font-size: 1.2rem;
}
/* bacground image end */

/* text berjalan  */
.marquee-wrapper {
  display: flex;
}
.marquee-side {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  padding: 0 1rem;
  background-color: #c90101;
  color: white;
}
.marquee-side i {
  font-size: 1.2rem;
  margin-right: .5rem;
}
.marquee-w {
  position: relative;
  display: block;
  width: 100%;
  height: 3rem;
  margin: auto;
  overflow: hidden;
}
.marquee {
  position: absolute;
  display: block;
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  background-color: rgb(255, 255, 255);
  height: 100%;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  text-align: center;
  white-space: nowrap;
  min-height: 100%;
  height: 100%;
  line-height:3rem;
  font-size: 1.5rem;
  animation: marquee 10s linear infinite ;
  -webkit-animation: marquee 15s linear infinite ;
}
@keyframes marquee{
  0%{
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
} 100% {
  transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
}
}
/* text berjalan  */

/* home information section */
.home-info {
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  padding-top: 4rem;
}
.button-wrapper {
  display: flex;
  justify-content: space-evenly;
  margin-top: 2rem;
}
.button-info {
  background-color: white;
  width: 16rem;
  height: 6rem;
  border: 1px solid rgb(225, 221, 221);
  box-shadow: 0 5px 10px 0.6px rgb(209, 209, 209);
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}
.button-info p {
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: -0.4rem;
  color: #6d271a;
}
.button-info i {
  font-size: 4rem;
  color: #d41f1f;
}

.home-argument p {
  margin-top: -1rem;
}
.home-argument {
  margin-top: -3.8rem;
}
/* home information section end */

/* sambutan  */
.sambutan {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #ffffff;
  margin: -8rem 0 0;
  /* flex-wrap: wrap; */
}
.sambutan .sambutan-foto img {
  width: 23rem;
  height: 23rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.sambutan .sambutan-isi {
  width: 50rem;
}
.sambutan .sambutan-isi .isi {
  height: 14rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b4b4b4 #ffffff;
  margin-top: 1rem;
}
.sambutan-isi h1 {
  color: #cc2020;
  margin-bottom: 3.2rem;
  line-height: 4rem;
}
.si:nth-child(n + 1) {
  margin-top: -1.5rem;
}

/* sambutan end */
.map-wrapper p {
  margin-bottom: 3rem;
  box-sizing: border-box;
}
.header-map {
  width: 75%;
}
.map-wrapper {
  margin-top: -11.5rem;
  padding-top: 7rem;
}

.map iframe {
  width: 93%;
  height: 40rem;
}
.map {
  display: flex;
  justify-content: center;
}
/* map end  */

/* sotk  */
.sotk-wrapper {
  margin-top: 3rem;
  background-color: white;
}
.cards-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  scrollbar-color: #e1e1e1 #f7f7f7;
  margin-left: 1.8rem;
  width: 97%;
}

.cards-container .card {
  flex: 0 0 auto;
  width: 22rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column; 
  background: #f7f7f7;
  text-align: center;
}

.card-img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  object-position: 0 -20px;
  border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  -ms-border-radius: 20px 20px 0 0;
  -o-border-radius: 20px 20px 0 0;
  box-shadow: 0 0px 5px 1px #bcbcbc;
}

.sotk-wrapper .card-content {
  flex-grow: 1;
  padding: 16px;
  background-color: var(--third);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 0 20px 20px;
  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
  -ms-border-radius: 0 0 20px 20px;
  -o-border-radius: 0 0 20px 20px;
  box-shadow: 0 4px 5px 2px #bcbcbc;
}

.name {
  font-size: 1.3rem;
  color: white;
  margin: 0 0 8px;
}
.role {
  font-size: 0.95rem;
  color: white;
  margin: 0;
}

.btn-struktur {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  align-items: center;
}
.btn-struktur i {
  color: #eb3939;
  font-size: 2rem;
  margin-right: 0.5rem;
}

.lebih-lanjut button {
  cursor: pointer;
  color: #eb3939;
  font-size: 1.2rem;
  text-align: center;
  background-color: transparent;
  padding: 0.8rem 0.5rem;
  border: none;
}
.lebih-lanjut {
  display: flex;
  justify-content: flex-end;
  margin-right: 2rem;
}
/* sotk end */

/* administrasi  */
.administrasi-penduduk {
  width: 100%;
  background-color: #f5f5f5;
  margin-top: -2rem;
}
.adm-wrapper {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  text-align: center;
  margin-top: 5rem;
}
.adm-card {
  width: 17rem;
  height: auto;
  background-color: #ffffff;
  margin: 0 1rem 5rem;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border: 1px solid rgb(225, 221, 221);
  box-shadow: 0 5px 10px 0.6px rgb(209, 209, 209);
}
.adm-card i {
  font-size: 4.2rem;
  position: relative;
  top: -2rem;
  color: #d41f1f;
}
.adm-card h4,
.adm-card p {
  margin-top: -1.9rem;
}
.adm-card h4 {
  font-size: 2.3rem;
}
.administrasi-penduduk .btn-struktur {
  margin-left: auto;
  margin-top: -2rem;
  padding-right: 1rem;
}
/* administrasi end */

/* APB Negeri  */
.apb-wrapper {
  margin: 1rem 0 8rem;
}

.apb-section {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.apb-section p {
  font-size: 1.3rem;
  margin-bottom: 2rem;
}

.apb-img img {
  width: 37rem;
  height: 37rem;
}

.deskripsi,
.dua {
  width: 40rem;
  background-color: #ffffff;
  margin-bottom: 2rem;
  justify-content: space-between;
  padding: 0.5rem 2rem;
  height: 7rem;
  box-shadow: 0 2px 4px 1px #c3c3c3;
  border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  -ms-border-radius: 0.4rem;
  -o-border-radius: 0.4rem;
}
.deskripsi::before {
  content: "Pendapatan Negeri";
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  bottom: 1rem;
}
.deskripsi::after {
  font-weight: bold;
  content: "Rp.000.000.00";
  position: relative;
  top: 3rem;
  left: 7rem;
  font-size: 2.9rem;
  color: #4c4c4c;
}
.dua::before {
  content: "Pengeluaran Negeri";
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  bottom: 1rem;
}
.dua::after {
  font-weight: bold;
  content: "Rp.000.000.00";
  position: relative;
  top: 3rem;
  left: 7rem;
  font-size: 2.9rem;
}

/* apb versi mobile  */
.card-apb {
  width: 40rem;
  background: #f8fafb;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  padding: 1rem 2rem;
  font-family: sans-serif;
  color: #333;
  text-align: center;
  margin: 0 auto;
  display: none;
}

.section-apb {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* Baris "Pembiayaan" dengan struktur kolom vertikal */
.section-apb.pembiayaan {
  flex-direction: column;
  align-items: center;
}

.section-apb.pembiayaan .sub-section {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 10px;
}

.label {
  font-size: 14px;
  color: #666;
}

.label.title {
  color: rgb(185, 162, 34);
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px;
}

.item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item .value {
  font-size: 18px;
  font-weight: bold;
}

.pendapatan .value,
.penerimaan .value {
  color: green;
}

.belanja .value,
.pengeluaran .value {
  color: red;
}

/* Baris footer dengan garis pemisah dan layout horizontal */
.footer-apb {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}
/* APB Negeri end */

/* berita negeri  */
.berita-wrapper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.berita-wrapper .btn-struktur {
  margin-left: auto;
  padding-right: 5rem;
}

.card-berita {
  width: 370px;
  height: 420px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 16px;
}

.card-berita img {
  width: 100%;
  height: auto;
  display: block;
}

.card-berita {
  padding: 16px;
}

.card-berita-title {
  font-size: 1.25rem;
  margin: 5px 0 8px;
  color: #e31a1a;
}

.card-berita-meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 12px;
}
.card-berita-meta i:nth-child(2) {
  margin-left: 15px;
}

.card-berita-text {
  font-size: 1rem;
  color: #555;
  margin: 0 0 12px;
}

.card-berita-link {
  text-decoration: underline;
  color: #c61515;
  font-size: 0.9rem;
}

.card-berita-link:hover {
  text-decoration: underline;
}

/* berita negeri end  */

/* galeri negeri */
.galeri-negeri {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto 5rem ;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.video  {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
/* galeri negeri end  */
/* home section end  */


/* Profil negeri section  */
.body2 {
  background-color: #f1f1f1;
}

.carousel-2 {
  display: none;
}

.element-wrapper {
  display: flex;
  margin: 7rem 1rem;
  justify-content: space-evenly;
  gap:3rem;
}

.sejarah-wrapper {
    flex: 2.7;
  background-color: white;
  border-radius: .8rem;
  padding: 1rem;
  -webkit-border-radius: .8rem;
  -moz-border-radius: .8rem;
  -ms-border-radius: .8rem;
  -o-border-radius: .8rem;
}

article.sejarah {
  font-size: 1.1rem;
}
article .download {
  display: flex;
  justify-content: center;
  margin:  2rem 0 ;
}
article button:hover {
  background-color: #be0d0d;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
}
article#visimisi ol li{
  font-size: 1.15rem;
}
#visimisi .judul-visimisi{
  color: red;
  margin-bottom: -.7rem;
  text-align: center;
  position: relative;
}
#visimisi .judul-visimisi::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: red;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
article button {
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  transition: .5s;
  padding: .7rem;
  background-color: var(--fourth);
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}

.sejarah-wrapper .sejarah-img {
  width: 100%;
}
.sejarah-wrapper .sejarah-img {
  width: 100%;
}

.sejarah-wrapper img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.side-section{
  border-radius: .8rem;
  flex: 2;
  background-color: #fff;
  -webkit-border-radius: .8rem;
  -moz-border-radius: .8rem;
  -ms-border-radius: .8rem;
  -o-border-radius: .8rem;
}

.side-section .side-icon{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 1rem;
  text-decoration: none;
}

.side {
  padding: .1rem;
}

.side-icon .side img {
  width: 3rem;
  position: relative;
  top: -18px;
  margin-bottom: -2rem;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

a .side:hover img{
  width: 3.5rem;
  top: -21px;
}

.side {
  text-align: center;
  background-color: white;
  box-shadow: 0 3px 5px .1px #e1e1e1;
  width: 7rem;
  color: black;
  padding: -1rem 0;
  line-height: -5rem;
  margin: 0 1rem 2rem;
}

.side-berita {
  margin-bottom: 5rem;
}
.sbi-img img {
  width: 6rem;
}

.side-berita-isi a{
  margin:0 auto;
  text-decoration: none;
  color: black;

}

.side-berita-isi a:hover .sbi{
  background-color: #f5f5f5;
}

.sbi:last-child {
  border-bottom: none;
}

.side-judul{
  display:flex;
  align-items: center;
  color: #e70000;
}

.side-judul i {
  margin: .3rem 1rem 0 2rem;
  font-size: 1.6rem;
}

.sbi-isi {
  display: flex;
  margin: auto;
  gap: 1rem;
  width: 25rem;
  align-items: center;
}

.sbi-date {
  width: 90%;
  border-bottom: 1px solid rgb(175, 175, 175);
  text-align: right;
  padding-right: 1rem;
  margin: auto;
  margin-bottom: 1rem;
}

.sbi-text p {
  font-size: 1rem;
}

.header-profil .judul-profil {
  border-bottom: 1px solid #e30000;
  margin: .5rem 0 0;
  padding-bottom: .5rem;
  color: #e60000;
}
.date-profil {
  display: flex;
  gap: 4rem;
}
.date-profil .dp {
  display: flex;
  align-items: center ;
  gap: .5rem;
  font-size: .9rem  ;
}
.dp p {
  font-size: 1rem  ;
  
}

/* Profil negeri section end */


/* struktur pemerintahan negeri tuhaha */
/* SOTK  */
.Struktur-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 5rem;
}
.struktur-header{
  margin: 5rem 0 1rem 2rem  ;
  color: #dc0606;
}
.kartu-struktur {
  width: 17rem;
  background-color: #781c1c;
  color: white;
  text-align: center;
  border-radius: .5rem;
  -webkit-border-radius: .5rem;
  -moz-border-radius: .5rem;
  -ms-border-radius: .5rem;
  -o-border-radius: .5rem;
}

.kartu-struktur .kartu-img {
  width: 100%;
  object-fit: cover;
}
.kartu-struktur img {
  border-radius:.5rem .5rem 0 0 ;
  width:100%;
  height: 20rem;
  object-fit: cover;
  -webkit-border-radius:.5rem .5rem 0 0 ;
  -moz-border-radius:.5rem .5rem 0 0 ;
  -ms-border-radius:.5rem .5rem 0 0 ;
  -o-border-radius:.5rem .5rem 0 0 ;
}
.kartu-struktur h2 {
  font-size: 1.4rem;
  margin-top: -.01rem;
}
.kartu-struktur p {
  margin-top: -.7rem;
  font-size: .9rem;
  padding-bottom: 1rem;
}
/* SOTK end */
/* struktur pemerintahan negeri tuhaha end  */

/* Data Negeri Section */
.body-data {
  background-color: #f5f5f5;
}
.data-wrapper {
  display: flex;
  width: 80%;
  margin: 9rem auto 10rem;
  gap: 0 2rem;
}
/* populasi perwilayah  */
  .population-table {
    border-collapse: collapse;
    width: 30rem;
    border: 2px solid #d4d4d4;
    margin-top: 1.5rem;
    font-size: 1.1rem
  }

  .data-spek {
    background-color: white;
    padding: 2rem;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;  
    box-shadow: 0 5px 9px .5px rgb(228, 228, 228);
}
  .population-table th, 
  .population-table td {
    border: 1px solid #cdcdcd;
    padding: 8px 8px 8px 10px;
    text-align: left;
  }
  
  .population-table tr:last-child {
    font-weight: bold;
  } 

  .chart {
    width: 35rem;
    padding: 2rem;
    background-color: white;
        border-radius: .3rem;
    -webkit-border-radius: .3rem;
    -moz-border-radius: .3rem;
    -ms-border-radius: .3rem;
    -o-border-radius: .3rem;
    box-shadow: 0 5px 9px .5px rgb(228, 228, 228);
  }
  #myChart {
    display: block;
  }
  /* populasi perwilayah end */
/* Data Negeri Section */

/* galeri section  */
/* foto  */
.galeri-image-grup{
  text-align: center;
}
.galeri-image-grup #d-img{
  font-size: 1.5rem;
  margin-top: -.1rem;
  display: none;
}

.galeri-image-grup .img-overlay {
  position: absolute;
  top: 57%;
  left: 50%;  
  border-radius: 1rem;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  width: 25rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0; 
  color: white;
  background-color: rgba(70, 36, 36, .8);
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;

}

.galeri-image-grup .img-overlay:hover {
  opacity: 1;
}

.galeri-image-grup .s {
  gap: 1rem;
}

.galeri-wrapper .galeri-image img{
  width: 25rem;
  height: 20rem;
  object-fit: cover;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}
.fast-wrapper {
  width: 80rem;
  margin: 0 auto 5rem;
  background-color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}
.fast-foot{
  display: flex;
  justify-content: center;
  justify-content: space-between;
}
.fast-foot a {
  color: rgb(83, 83, 83);
}
.ff-card {
  border: 4px solid #f1f1f1;
  width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10%;
  -webkit-border-radius: 10%;
  -moz-border-radius: 10%;
  -ms-border-radius: 10%;
  -o-border-radius: 10%;
}
.ff-card img {
  width: 4rem;
  height: auto;
}

.ff-card h4 {
  margin: .5rem 0;
}
.galeri-wrapper {
  width: 80rem;
  background-color: rgb(255, 255, 255);
  margin: .5rem auto 1rem;
  padding: 2rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

.galeri-image .galeri-image-grup{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
  margin: 1rem 0 3rem;
}
.judul-h1 {
  position: relative;
  display: inline-block;        /* Agar ukuran mengikuti lebar teks */
  padding-bottom: 0.25em;        /* Jarak antara teks dan garis bottom */
  color: #ff0d0d;
  font-size: 2.5rem;
}
.judulH1-wrapper {
  display: flex;
  justify-content: center;
}
.judul-h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16%;                   /* Menggeser border agar tetap di tengah */
  width: 70%;                    /* Lebar border diubah jadi 75% */
  border-bottom: 3px solid #d20808; /* Warna dan ketebalan garis */
}


/* foto end */
/* galeri section end */

/* berita section  */
.judul-halaman-berita {
        font-size: 2rem;
        margin-bottom: 20px;
    }

.page-title {
    text-align: center;
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}



/* Grid Layout */
.news-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    justify-content: space-evenly;
}

/* Card Styles */
.news-card {
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid rgb(169, 0, 0);
    backdrop-filter: blur(10px);
    width: 25rem;
    height: auto;
    margin: 3rem 0;
}
.news-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Card Image */
.card-image {
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
  }
  
  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .card-image img {
    transform: scale(1.08);
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

.image-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    opacity: 0.8;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Card Content */
.card-content {
    padding: 28px;
    background-color: white;
    color: #9a0000;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}
  .news-card:hover .card-content{
  background-color: #9a0000;
  
}
.card-title {
  font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 5px;
    line-height: 1.4;
    overflow: hidden;
    transition: color 0.3s ease;
}

.news-card:hover .card-title, .news-card:hover .card-content {
    color: #ffffff;
}

.card-description {
    font-size: 1rem;
    margin-bottom:5px;
    line-height: 1.7;
    overflow: hidden;
}

/* Card Footer */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 2px solid #e2e8f0;
}

.card-author {
    display: flex;
    align-items: center;
    flex: 1;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f4a7a7, #c40000);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    margin-right: 14px;
    box-shadow: 0 4px 12px rgba(231, 6, 6, 0.3);
    transition: transform 0.3s ease;
  }
  
  .news-card:hover .author-avatar {
    box-shadow: 0 4px 12px rgba(231, 209, 6, 0.3);
    transform: scale(1.1);
    color: red;
    background: linear-gradient(135deg, #fff177, #c59a22);
  }
  
.author-info {
  flex: 1;
}

.author-name {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.author-stats {
    font-size: 0.8rem;
    color: #a0aec0;
}

/* Date Badge */
.card-date {
    background: linear-gradient(135deg, #ff7777, #c52222);
    color: white;
    padding: 12px 18px;
    border-radius: 25px;
    font-weight: 700;
    text-align: center;
    min-width: 85px;
    box-shadow: 0 6px 16px rgba(255, 0, 0, 0.4);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.news-card:hover .card-date {
  transform: scale(1.05);
  background: linear-gradient(135deg, #fff177, #c59a22);
  box-shadow: 0 8px 20px rgba(255, 234, 0, 0.5);
}

.card-date .day {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}

.card-date .month-year {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 2px;
}

/* Animasi untuk loading effect */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.news-card {
    animation: fadeInUp 0.6s ease-out;
}

.news-card:nth-child(1) { animation-delay: 0.1s; }
.news-card:nth-child(2) { animation-delay: 0.2s; }
.news-card:nth-child(3) { animation-delay: 0.3s; }
.news-card:nth-child(4) { animation-delay: 0.4s; }
.news-card:nth-child(5) { animation-delay: 0.5s; }
.news-card:nth-child(6) { animation-delay: 0.6s; }

/* Hover effects untuk interaktivitas */
.card-title:hover {
    cursor: pointer;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.news-card:hover::before {
    opacity: 1;
}
/* berita section end */


/* informasi publik section  */
.table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px  rgba(255, 0, 0, 0.1);
            overflow: hidden;
            margin: 2rem 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        thead tr {
            background-color: var(--third);
            color: white;
        }

        th {
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            font-size: 14px;
            border-right: 1px solid #ffffff;
        }

        th:last-child {
            border-right: none;
        }

        th.sortable {
            cursor: pointer;
            position: relative;
        }

        th.sortable:after {
            content: '⇅';
            position: absolute;
            right: 8px;
            opacity: 0.6;
        }

        tbody tr {
            border-bottom: 1px solid #e2e8f0;
            transition: .2s;
            -webkit-transition: .2s;
            -moz-transition: .2s;
            -ms-transition: .2s;
            -o-transition: .2s;
}

        tbody tr:nth-child(even) {
            background-color: #da21000b;
        }

        tbody tr:hover {
            background-color: #da21004c;
        }

        td {
            padding: 12px 16px;
            font-size: 14px;
            color: #334155;
            border-right: 1px solid #e2e8f0;
        }

        td:last-child {
            border-right: none;
        }

        /* Modal Overlay */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Modal Container */
        .modal-container {
          width: 90%;
          height: 90%;
          max-width: 50rem;
          height: 40rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            position: relative;
            margin-top: 4rem;
            position: relative;
          }
          
          /* Modal Header */
        .modal-header {
          padding: 5px 15px;
          border-bottom: 1px solid #e0e0e0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #f8f9fa;
          border-radius: 8px 8px 0 0;
          }
          
          .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
          }
          
          .close-btn {
            width: 32px;
            height: 32px;
            border: 1px solid #ccc;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #666;
            transition: all 0.2s;
          }
          
          .close-btn:hover {
            background-color: #f0f0f0;
            color: #000;
          }
          
          /* PDF Content Area */
          .pdf-hide-1, .pdf-hide-2, .pdf-hide-3, .pdf-hide-4, .pdf-hide-5 {
            display: none;
          }
          .pdf-content {
            flex: 1;
            background-color: #525659;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
            overflow: auto;
          }
        .pdf-content embed{
          width: 100%;
          height: 100%;
        }
        
        /* Document Page */
        .document-page {
          background: white;
          width: 595px;
          min-height: 842px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          padding: 60px 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            font-family: 'Times New Roman', serif;
            line-height: 1.6;
          }
          
          /* Download Button */
          .download-btn {
            background-color: rgb(186, 185, 185);
            color: white;
            border: none;
            font-weight: bold;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin: 1rem auto 0;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
}

.download-btn:hover {
  background-color: var(--fourth);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }


        /* Scrollbar Styling */
        .pdf-content::-webkit-scrollbar {
          width: 12px;
        }

        .pdf-content::-webkit-scrollbar-track {
            background: #333;
        }

        .pdf-content::-webkit-scrollbar-thumb {
            background: #666;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
}

        .pdf-content::-webkit-scrollbar-thumb:hover {
            background: #888;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .modal-container {
                width: 95%;
                height: 95%;
            }

            .document-page {
                width: 100%;
                max-width: 500px;
                padding: 40px 30px;
            }

            .pdf-toolbar {
                flex-wrap: wrap;
                gap: 10px;
            }
        }

        .action-btn {
            background-color: var(--third);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: background-color 0.2s;
        }
        .action-btn:hover {
            background-color: var(--fourth);
        }
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background-color: #f8fafc;
            border-top: 1px solid #e2e8f0;
            font-size: 14px;
            color: #64748b;
        }

        .pagination-info {
            font-weight: 500;
        }

        .pagination-controls {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .pagination-btn {
            padding: 6px 12px;
            border: 1px solid #d1d5db;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .pagination-btn:hover {
            background-color: #f3f4f6;
        }

        .pagination-btn.active {
            background-color: #0891b2;
            color: white;
            border-color: #0891b2;
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .no-column {
            width: 60px;
            text-align: center;
        }

        .jenis-column {
            width: 120px;
        }

        .tahun-column {
            width: 80px;
            text-align: center;
        }
        .aksi-column {
            width: 100px;
            text-align: center;
        }


    /* apb desa  */
    .APBDes-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .APBDes-title {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .APBDes-subtitle {
            font-size: 18px;
            opacity: 0.9;
        }
        
        .APBDes-table-container {
            overflow-x: auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            border: 1px solid #d1d8e0;
        }
        
        .APBDes-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }
        
        .APBDes-th, .APBDes-td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
            font-size: 17px;
          }
          
        .APBDes-th:last-child, .APBDes-td:last-child {
            border-right: none;
        }
        
        .APBDes-th {
          background-color: var(--fourth);
          color: white;
            font-weight: 600;
            position: sticky;
            top: 0;
            border-right: 1px solid #9a9a9a;
        }
        
        .APBDes-tr:nth-child(even) {
          background-color: #f8f9fa;
        }
        
        .APBDes-tr:hover {
            background-color: #f1f5f9;
        }
        
        .APBDes-section-header {
          background-color: var(--third) !important;
          color: white;
          font-weight: bold;
        }
        
        .APBDes-section-header .APBDes-td {
          font-size: 17px;
          border-right: 1px solid #5dade2;
          color: white;
            /* font-size: .9rem; */
            text-align: center;
        }
        
        .APBDes-subsection {
            background-color: #ecf0f1;
            font-weight: 500;
          }
          
          .APBDes-subsection .APBDes-td {
            border-right: 1px solid #d6dbdf;
          }
          
          .APBDes-subsection-indent {
            padding-left: 30px !important;
          }
          
          .APBDes-number {
          font-size: 17px;
            text-align: left;
        }
        
        .APBDes-percentage {
            text-align: center;
            font-weight: bold;
        }
        
        /* .APBDes-positive {
            color: #27ae60;
        }
        
        .APBDes-negative {
            color: #e74c3c;
        } */
        
        .APBDes-summary {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }
        
        .APBDes-summary-box {
            flex: 1;
            min-width: 250px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 1px solid #d1d8e0;
        }
        
        .APBDes-summary-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--fourth);
            border-bottom: 2px solid var(--third);
            padding-bottom: 5px;
        }
        
        .APBDes-summary-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .APBDes-footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #7f8c8d;
            font-size: 14px;
            border-top: 1px solid #d1d8e0;
        }
        
        @media (max-width: 768px) {
            .APBDes-th, .APBDes-td {
                padding: 8px 10px;
                font-size: 14px;
            }
            
            .APBDes-title {
                font-size: 24px;
            }
            
            .APBDes-subtitle {
                font-size: 16px;
            }
            
            .APBDes-table-container {
                border: 1px solid #d1d8e0;
            }
            
            .APBDes-summary-box {
                min-width: 90%;
            }
        }
    /* apb desa end */
/* informasi publik section end */


/* footer section */
footer {
  width: 100%;
  height: auto;
  background-color: var(--bg-btn);
  color: white;
  padding: 2rem 0 1rem;
  margin-top: auto;
}
#hak {
  text-align: center;
  margin: 3rem 0 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

footer p {
  margin-top: -.5rem;
}
.footer-wrapper {
  display: flex;
  justify-content: space-evenly;
}

footer .logo img {
  width: 9.5rem;
}
footer .logo {
  display: flex;
  align-items: center;
}
footer .footer-sect p {
  font-size: 1rem;
}
footer .judul-footer {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.foot-icon {
  display: flex;
}
.foot-icon i {
  font-size: 1.2rem;
}
.foot-icon p {
  margin-top: -0.1rem;
  margin-left: 0.5rem;
}
footer .footer-1 {
  width: 25rem;
}
.footer-3 a,
.footer-4 a {
  color: white;
  text-decoration: underline;
}
/* footer section end */

/* visibility content  */
.galeri-negeri,
.administrasi-penduduk,
.cards-container {
  content-visibility: auto;
  /* placeholder tinggi kira-kira agar placeholder tidak 0 */
  contain-intrinsic-size: auto 500px;
}

/* Untuk container berita / grid card yang banyak dibawah fold */
.news-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px; /* placeholder tinggi ~800px, sesuaikan jika perlu */
}

/* Untuk tiap kartu berita (card) */
.news-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px; /* tinggi rata-rata card berita */
}

/* Untuk wrapper galeri / galeri-wrapper jika banyak gambar di dalamnya */
.galeri-wrapper {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px; /* placeholder tinggi galeri */
}

/* Navigasi cepat / fast-wrapper jika berada di bawah konten utama */
.fast-wrapper {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
/* Opsional: hanya card di news grid setelah beberapa card pertama */
.news-grid .news-card:nth-child(n+4) { /* misalnya card ke-4 dan seterusnya */
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* ==== Optimasi content-visibility untuk Data Penduduk === */

/* Container utama data wrapper, terutama bagian tabel & diagram */
.data-wrapper {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px; /* placeholder tinggi kira-kira */
}

/* Spesifik bagian tabel populasi */
.population-table {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Bagian chart / diagram menggunakan canvas */
.data-diagram {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px; /* placeholder tinggi agar scroll / layout stabil */
}
/* Pastikan bagian atas seperti carousel & header tetap langsung tampil tanpa delay */

/* Optional: Hanya diagram/tabel setelah konten-atas */
.data-wrapper table:nth-child(n+2),
.data-wrapper .data-diagram:nth-child(n+2) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ===== Saran optimasi content-visibility untuk halaman galeri ===== */

.galeri-wrapper {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px; /* placeholder tinggi ≈ tinggi galeri */
}

.galeri-image img {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px; /* kira-kira tinggi tiap gambar galeri */
}

.fast-wrapper {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.footer2 {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Opsional: hanya gambar-galeri setelah beberapa gambar pertama */
.galeri-image img:nth-child(n+5) {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Optimasi content-visibility untuk halaman SOTK */

/* struktur section penuh */
.Struktur-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px; /* perkiraan tinggi placeholder */
}

/* setiap kartu tambahan setelah beberapa kartu pertama */
.Struktur-section .kartu-struktur:nth-child(n+5) {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px; /* tinggi rata-rata sebuah kartu */
}

/* side-berita di samping */
.side-berita-isi {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px; /* tergantung jumlah elemen side berita */
}

/* visibility content end */

/* Untuk layar laptop*/
@media (max-width: 1366px) {
  html {
    font-size: 78%;
  }
  h1 {
    font-size: 2.3rem;
  }
  .sidebar .chat-item a {
    font-size: 20px;
    padding-bottom: 2rem;
  }
  .button-wrapper {
    flex-wrap: wrap;
  }
  .sambutan {
    flex-wrap: wrap;

  }
  .sambutan-isi {
    margin-top: 5rem;
  }
  .si:nth-child(n-3) {
    text-align: center;
  }
  .si:nth-child(3) {
    text-decoration: underline;
  }
  .sambutan {
    padding: 0.6rem;
  }
  .side-section, .sejarah-wrapper{
    width: 57rem;
    margin: 0 auto; 
}

@media screen and (max-width: 1000px){
  .data-wrapper {
  display: flex;
  flex-direction: column;
  width: 93%;
  margin: 9rem auto 5rem;
  gap: 3rem 0;
}
    .population-table {
    width:100%;
  }
  .chart {
    width: 93%; 
    margin-bottom: 5rem;
  }
  .galeri-wrapper{
    width: 90%;
  }
  .galeri-wrapper .galeri-image img{
    width: 29rem;
  }
  .fast-wrapper{
    width: 90%;
  }
  .fast-foot {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
  }
}  
  
/* Untuk layar tablet / mobile */
@media screen and (max-width: 768px) {
  html {
    font-size: 75.5%;
  }
  body {
    font-weight: 400;
  }
  .dropdown {
    position: static;
  }
  .header {
    text-align: center;
    padding: 0 2rem;
  }
  /* Sidebar tetap hidden default */
  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    width: var(--sidebar-width);
    height: calc(100% - 60px);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    background: var(--bg-sidebar);
  }

  .nav-title {
    font-size: 2rem;
  }

  /* Saat terbuka -> overlay */
  .sidebar.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }

  /* Main konten tidak bergeser */
  .main-content {
    margin-left: 0 !important;
  }

  /* Hamburger tetap toggle ikon */
  .hamburger.active + .overlay {
    display: block;
  }

  /* Overlay background jika diinginkan */
  .overlay {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: rgba(0, 0, 0, 0.3);
    z-index: 900;
  }

  .cards-container {
    width: 94%;
    margin-left: 1rem;
  }

  /* home information  */
  .home-argument .sub-judul {
    margin: 0 auto 2rem;
  }
  .sambutan .sambutan-isi .isi {
    height: 17rem;
    width: 97%;
    margin: auto;
  }
  /* home information end */

  .sambutan-foto {
    margin-top: 2rem;
  }

  /* apb negeri */
  .card-apb {
    display: block;
    width: 90%;
    padding: 1rem;
  }
  .apb-rinci .header p {
    font-size: 1.4rem;
  }
  .deskripsi {
    display: none;
  }
  .apb-img {
    display: none;
  }
  /* apb negeri end  */

  /* berita negeri  */
  .card-berita-text {
    display: none;
  }
  .card-berita {
    width: 90%;
    height: auto;
    padding: 1rem 1rem 2rem 1rem;
  }
  .card-berita-link {
    font-size: 1.5rem;
  }
  .card-berita-title {
    font-size: 1.5rem;
  }
  .card-berita-meta {
    font-size: 1.3rem;
    margin: 15px 0 0;
  }
  /* berita negeri end */

  /* galeri negeri  */
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
  }

  .galeri-image-grup #d-img {
    display: block;
  }

  .galeri-image-grup .img-overlay {
    display: none;
  }

  .ff-card img {
  width: 2rem;
  height: auto;
}
  .ff-card{
    width: 6rem;
  }
  /* galeri negeri end */

  /* berita  */
  .berita-wrapper .btn-struktur {
  margin-left: auto;
  padding-right: 2rem;
}

  .news-card{
    width: 35rem;
  }
  /* berita end */

  /* sidebar  */
  .element-wrapper {
    flex-direction: column;
  }
  .side-section{
    width: 97%;
  }
   .sejarah-wrapper  {
    width: 95%;
    margin-bottom: -2.4rem;
   }
  /* sidebar  */

   /* struktur pemerintahan  */
   .struktur-header{
  margin: 5rem 0 2rem;
  text-align: center;
}
.Struktur-section {
  margin-bottom: 3rem;
    gap: 1.5rem 1rem; 
}
   /* struktur pemerintahan  */
  /* footer  */
  .footer-wrapper {
    padding: 0 2rem 0;
    flex-direction: column;
  }
  .logo img {
    margin: 0 auto 1rem;
  }
  footer .footer-1 {
    width: auto;
  }
  .footer-1,
  .footer-2,
  .footer-3,
  .footer-4 {
    border-bottom: 1px solid #eee;
  }
  footer .footer-sect p {
    font-size: 1.4rem;
  }
  footer .judul-footer {
    font-size: 1.9rem;
  }
  /* footer end */

}

@media screen and (max-width: 495px) {
  html {
    font-size: 63.5%;
  }
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
  .chart {
    width: 89%; 
  }
}
}