body {
    font-family: 'Inter', sans-serif;
    background-color: #fbfdff;
    color: #2c3e50;
}

/*untuk header*/
.main-nav {
    background-color: #fbfdff;
    color: #003566;
}

.main-nav .navbar-nav a.nav-link {
    color: #2c3e50;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Inter', sans-serif';
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: #003566;
}

.navbar-collapsed {
    color: #003566;
}

.main-nav .navbar-nav .nav-link.active, .main-nav .navbar-nav .nav-link:hover {
    color: #003566;
}
.navbar.scrolled{
    background-color: #ebfdfd;
    transition: background-color 0.5s ease;
    box-shadow: 0px -10px 30px #003566;
}

.navbar.scrolled a.nav-link{
    color: #003566;
}

.navbar img.main-logo{
    max-width: 130px;
}

.navbar img.main-logo-dark {
    display: none;
}

.navbar.scrolled img.main-logo-dark{
    display: inline-block;
}

.navbar.scrolled img.main-logo-light{
    display: none;
}

.navbar .megamenu{ 
    padding: 1rem;
    align-items: center; 
    background-color: #fbfdff;
    border: solid 1px #ebfdfd;
}

@media all and (min-width: 992px) {
	
	.navbar .has-megamenu{
        position:static!important;
    }
	.navbar .megamenu{
        left:0; 
        right:0; 
        width:100%; 
        margin-top:0;  
    }
	
}	

@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
		overflow-y: auto;
	    max-height: 90vh;
	    margin-top:10px;
	}
}

.bg-white-smoot {
    background-color: #fbfdff;
    padding-top: 6px;
    padding-bottom: 24px;
}

.text-subtopic {
    font-size: 15px;
    font-weight: 600;
    font-family: Lato, sans-serif;
    text-decoration: none;
    color: #424242;
    letter-spacing: 0.5px;
    margin-right: 62px;
}

.text-subtopic:hover{
    font-size: 15px;
    font-weight: 600;
    font-family: Lato, sans-serif;
    text-decoration: none;
    color: #003566;
    letter-spacing: 0.5px;
    margin-right: 62px;
}

.title-subtopics {
    font-size: 20px;
    font-weight: 600;
    font-family: Lora, sans-serif;
    text-decoration: none;
    color: #424242;
    letter-spacing: 0.5px;
}

.menu-item {
    margin-bottom: 32px;
}

.menu-item>a {
    display: block;
    border: 1px solid #dee2e6;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: none;
}

.menu-item>a:hover {
    display: block;
    border: 1px solid #dee2e6;
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 
    10px 10px 10px rgba(0, 0, 0, 0.055);
}

.detail-subtopics {
    font-family: Lato,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #212121;
    margin: 0;
}

.menu-item .img-thumbnail {
    width: 67px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.img-thumbnail {
    max-width: 100%;
}

.topic-menu {
    border-bottom: 1px solid #f5f5f5;
}

.slider-text {
    margin-left: 40px;
}

.slider-text h2{
    font-family: Lora,serif;
    font-style: normal;
    font-weight: 700;
    font-size: 49px;
    color: #212121;
}

.slider-text p{
    font-family: Roboto,sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 34px;
    color: #666;
}

.slider-image {
    margin-right: 40px;
}


.slider-icon {
    margin-left: 0px;
    margin-right: 0px;
}

.carousel-control-prev {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -60px;
    background-color: #999;
    border-radius: 16px;
    padding: 10px;
    width: 50px;
    height: 50px;
}

.carousel-control-next {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: -60px;
    background-color: #999;
    border-radius: 16px;
    padding: 10px;
    width: 50px;
    height: 50px;
}

.visually-hidden {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}

/* untuk global body*/
.main-body {
    background-color: #fbfdff;
    color: #003566;
}

.main-body h2{
    font-size: 32px;
    margin-bottom: 24px;
}

.main-body h2 span {
    color: #003566;
}

.btn-primary {
    color: #fff;
}

.btn {
    padding: 10px 16px;
    line-height: 1.5;
    border-radius: 8px;
}

/* Dashboard Pilihan */
.dashboard-pilihan {
    background: #fbfdff;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem auto;
}

.dashboard-pilihan h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.explore-btn {
    background: transparent;
    border: 1px solid #0066cc;
    color: #0066cc;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.explore-btn a{
    text-decoration: none;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-2px);
}

.card-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.card-img img {
    width: 168px;
    height: 168px;
    margin-left: 50px;
    margin-right: auto;
    vertical-align: middle;
}

.card-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}


/* Highlight Section */
.highlight {
    margin: 40px 0;
}

.highlight h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #2c3e50;
    padding-left: 10px;
}

/* Swiper Container - Harus Relative */
.highlight-swiper {
    position: relative;
    overflow: hidden; /* ✅ Kembali ke hidden agar slide tidak terlihat */
    padding-left: 10px; /* Ruang untuk tombol prev */
    padding-right: 10px; /* Ruang untuk tombol next */
}

/* Card Panel */
.card-panel {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease;
    height: auto;
}

/* Kartu Biru */
.card-panel.kependudukan {
    background-color: #1a73e8;
    color: white;
    border: none;
    height: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 40px 20px 20px 40px;
}

.card-panel.kependudukan .card-header-swiper .title,
.card-panel.kependudukan .card-header-swiper .icon,
.card-panel.kependudukan .label,
.card-panel.kependudukan .value,
.card-panel.kependudukan .unit,
.card-panel.kependudukan .sub {
    color: white;
}

.card-panel.kependudukan .column {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.card-panel.kependudukan .column:last-child {
    border-right: none;
}

/* Kartu Putih */
.card-panel.kesehatan {
    background: white;
    color: #2c3e50;
    height: 250px;
    border: 1px solid #e0e0e0;
    padding: 40px 20px 20px 40px;
}

.card-panel.kesehatan .card-header-swiper .title,
.card-panel.kesehatan .card-header-swiper .icon {
    color: #1a73e8;
}

/* Header Card */
.card-header-swiper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.card-header-swiper .icon {
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.card-header-swiper .title {
    font-size: 22px;
    font-weight: 600;
}

/* Content Grid */
.card-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 16px;
}

.card-panel.kesehatan .card-content {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.column {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    padding-right: 12px;
}

.column:last-child {
    border-right: none;
}

.label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 4px;
    color: inherit;
}

.value {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: inherit;
}

.unit {
    font-size: 14px;
    font-weight: normal;
    color: inherit;
}

.sub {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
}

    /* Swiper Navigation */
.swiper-button-prev,
.swiper-button-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a73e8;
    transition: all 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 100;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.swiper-button-prev {
    left: -10px; /* ✅ Jarak dari kiri */
}

.swiper-button-next {
    right: -10px; /* ✅ Jarak dari kanan */
}

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

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: rgb(255, 255, 255);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Pagination */
.swiper-pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ccc;
    opacity: 1;
    margin: 0 5px;
    border-radius: 50%;
}

.swiper-pagination-bullet-active {
    background: #1a73e8;
}

/*topik*/
.sidebar {
    width: 240px;
    background: #eef2f7;
    border-right: 1px solid #d1d5da;
    padding: 1rem 0;
}

.menu-item {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #2c3e50;
    border-bottom: 1px solid #d1d5da;
    transition: all 0.3s ease;
}

    .menu-item.active {
      background: white;
      border-bottom: 2px solid #0066cc;
      color: #0066cc;
    }

    .menu-item i {
      color: #0066cc;
    }

    .main-content {
      flex: 1;
      padding: 2rem;
    }

    .search-bar {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 2rem;
      max-width: 400px;
    }

    .search-bar input {
      flex: 1;
      padding: 0.5rem;
      border: 1px solid #d1d5da;
      border-radius: 4px;
      font-size: 0.9rem;
    }

    .search-bar button {
      background: #0066cc;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
    }

    .section-title {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 0.5rem;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .card {
      background: white;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease;
      border: 1px solid #e5e7eb;
    }

    .card:hover {
      transform: translateY(-2px);
    }

    .card-icon {
      width: 50px;
      height: 50px;
      background: #0066cc;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }

    .card-title {
      font-size: 0.9rem;
      font-weight: 500;
      color: #2c3e50;
      margin-bottom: 0.5rem;
    }

    .card-meta {
      display: flex;
      gap: 0.5rem;
      font-size: 0.7rem;
      color: #666;
      margin-bottom: 0.5rem;
    }

    .card-meta span {
      background: #0066cc;
      color: white;
      padding: 0.2rem 0.5rem;
      border-radius: 3px;
    }

    .card-view {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.7rem;
      color: #666;
    }


/*Topik*/
/* Sidebar */
    aside {
      width: 240px;
      background-color: #fff;
      border-right: 1px solid #ddd;
      padding: 20px;
    }

    aside h3 {
      margin-bottom: 15px;
      font-size: 16px;
      font-weight: bold;
    }

    aside ul {
      list-style: none;
    }

    aside ul li {
      margin-bottom: 12px;
    }

    aside ul li a {
      color: #333;
      text-decoration: none;
      font-size: 14px;
      display: block;
      padding: 8px 10px;
      border-radius: 6px;
      transition: 0.2s;
    }

    aside ul li a:hover,
    aside ul li a.active {
      background-color: #0056b3;
      color: #fff;
    }

    /* Konten utama */
    main {
      flex: 1;
      padding: 25px 30px;
      overflow-y: auto;
    }

    section {
      margin-bottom: 40px;
    }

    section h2 {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #0056b3;
    }

    /* Grid card */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }

    .card {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      transition: transform 0.2s;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card .icon {
      font-size: 30px;
      margin-bottom: 10px;
      color: #0056b3;
    }

    .card h3 {
      font-size: 15px;
      margin-bottom: 8px;
      font-weight: bold;
    }

    .card p {
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
    }

    .card .views {
      font-size: 12px;
      color: #999;
    }

/* Footer */
footer {
    background-color: #1a73e8;
    padding: 80px 0 20px;

}

.logo img.main-logo{
    max-width: 130px;
    margin-bottom: 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    color: white;
}
.contact-info .address p {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.contact-info .phone p {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.contact-info .email p {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.footer-section h3 {
    font-size: 16px;
    color: white;
    font-weight: 600;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.footer-section ul li a:hover {
    color: #00bfff;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icons a {
    width: 30px;
    height: 30px;
    background-color: #1e1e1e;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
}

.social-icons a:hover {
    background-color: #00bfff;
}

.footer-bottom {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

/* Responsive */
@media (max-width: 900px) {
    .dashboard-pilihan {
        padding: 20px;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .highlight-slider {
        flex-direction: column;
    }

    .highlight-item {
        min-width: auto;
     }

    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .dashboard-pilihan {
        padding: 20px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
    flex-direction: column;
    }
}


.main-metadata {
    background-color: #fbfdff;
    color: #333;
}

.bgheader-metadata {
    padding: 40px 0px 35px;
    color: #fbfdff;
    background :#1a73e8;
    font-family: Roboto;
    letter-spacing: 1px;
}

.header-metadata {
    max-width: 1320px;
    width: 100%;
    padding-right: 20px;
    padding-left: 13px;
    margin-right: auto;
    margin-left: auto;
}

.nav-metadata {
    margin-bottom: 10px !important;
}

.bread-metadata {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 0px;
    margin-bottom: 1rem;
    font-size: 14px;
    list-style: none;
}

.link-metadata {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
}

.link-metadata a {
    text-decoration: none;
    margin-right: 5px;
    color: #fbfdff;
}

.link-metadata.active {
    color: #888585;
    margin-left: 5px;
    font-family: Roboto;
}

.title-metadata {
    display: flex !important;
}

.title-metadata h2{
    color: #fff;
}

.subtitle-metadata {
    --jds-gutter-x: 40px;
    --jds-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--jds-gutter-y) * -1);
    margin-right: calc(var(--jds-gutter-x) / -2);
    margin-left: calc(var(--jds-gutter-x) / -2);
    padding-left: 20px;
}

.block-value {
    flex: 0 0 auto;
    width: 66.6667%;
}

.value-subtitle {
    font-size: 14px;
    margin-bottom: 5px;
}

.detail-metadata {
    background-color: #fff;
    color: #333;
}

.css-panel {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.css-metadata {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.dashboard-topik .container{
    display: flex;
    flex: 1;
}

    /* SIDEBAR */
    aside {
      width: 240px;
      background-color: #fff;
      border-right: 1px solid #ddd;
      padding: 25px 20px;
      position: sticky;
      top: 65px;
      height: calc(100vh - 65px);
    }

    aside h3 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #0056b3;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    aside ul {
      list-style: none;
    }

    aside ul li {
      margin-bottom: 12px;
    }

    aside ul li a {
      display: block;
      padding: 10px 12px;
      font-size: 14px;
      text-decoration: none;
      color: #444;
      border-radius: 8px;
      transition: all 0.2s;
    }

    aside ul li a:hover,
    aside ul li a.active {
      background-color: #1a73e8;
      color: #fff;
    }

    /* MAIN */
    main {
      flex: 1;
      padding: 30px;
      overflow-y: auto;
    }

    .section-topik {
      margin-bottom: 45px;
    }

    .section-topik h2 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 18px;
      color: #0056b3;
      border-left: 4px solid #0056b3;
      padding-left: 10px;
    }

    /* GRID */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 22px;
    }

    /* CARD */
    .card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    }

    .card a  {
      text-decoration: none;
      color: #1a73e8;
      font-size: 13px;
      align-self: flex-end;
    }

    .card .icon {
      font-size: 32px;
      margin-bottom: 12px;
      color: #0056b3;
    }

    .card h3 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #222;
    }

    .card p {
      font-size: 13px;
      color: #666;
      margin-bottom: 12px;
    }

    .card .views {
      font-size: 12px;
      color: #999;
      
    }


    /* Stats Grid */
    .page-title {margin-bottom:20px;font-size:16px;font-weight:600;}

    .stats {
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:20px;
    }
    .card-detail-topik {
      background:#fff;
      border:1px solid #eee;
      border-radius:8px;
      padding-top:20px;
      text-align:center;
      box-shadow:0 2px 4px rgba(0,0,0,0.05);
    }
    .card-detail-topik h2 {
      font-size:26px;
      color:#1976d2;
      margin-bottom:8px;
    }
    .card-detail-topik p {font-size:13px;color:#666;}

   
    /* Dashboard Cards */
    .more-dash {
      padding-top: 40px;
    }
    .more-dash h3 {margin-bottom:20px;font-size:16px;font-weight:600;}
    .dash-grid {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:20px;
    }
    .dash-card {
      border:1px solid #eee;
      border-radius:8px;
      padding:15px;
      background:#fff;
      box-shadow:0 2px 4px rgba(0,0,0,0.05);
      font-size:13px;
    }
    .dash-card strong {display:block;margin-bottom:6px;color:#1976d2;}

    .load-more {
      margin:30px auto 0;
      display:block;
      padding:12px 20px;
      border:none;
      border-radius:6px;
      background:#1976d2;
      color:#fff;
      cursor:pointer;
      font-size:14px;
    }