.video-item a {
            text-decoration: none;
            color: inherit;
        }
        .video-item img {
            max-width: 100%;
            border-radius: 0.5rem;
        }
        .video-item:hover {
            background-color: #f8f9fa;
        }
        .home-grid .container{ max-width:1220px; }
        .overlay-card{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 1.25rem;
          overflow: hidden;
          border: 1px solid #e4e4e4;
          background: #0D47A1;
          min-height: 220px;
          transition: transform .15s ease, box-shadow .15s ease;
        }
        @media (min-width:1200px){ .overlay-card{ min-height: 260px; } }

        .overlay-card__img{
          position: relative;
          width: auto;
          height: auto;
          max-width: 45%;
          max-height: 80%;
          object-fit: contain;
          object-position: center;
          display: block;
          z-index: 0;
          left: 6rem;
        }

        .overlay-card__shade{
          position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%);
          pointer-events: none;
          z-index: 1;
        }
        .overlay-card__body{
          position: absolute; left: 0; right: 0; bottom: 0;
          padding: 14px 16px; color: #fff;
          z-index: 2;
        }
        .overlay-card:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
        .chip{ 
          display:inline-block;
          padding:.35rem .6rem; 
          border-radius:.25rem; 
          font-weight:700; 
          font-size:.9rem; 
          color:#111; 
          background:#f3a300; 
        }
        .chip--gold { 
          background:#f3a300; 
        }
        .panel-photo img{ 
          display:block; 
        }
        .g-4{ --bs-gutter-x:1.5rem; --bs-gutter-y:1.5rem; }
        .motto {
          padding-top: 0rem;
        }
        .section-satudata{
          margin-top: -15rem;
        }
        .home-grid {
          min-height: 80vh;
          padding-top: 2rem;
          padding-bottom: 2rem;
          display: flex;
          align-items: center;
          background-color: #fff;
        }
        /* SECTION UTAMA */
        .section-layanan {
          padding: 4rem 0;
          background: #fff;
          text-align: center;
        }

        .section-layanan h2 {
          font-weight: 700;
          font-size: 2rem;
          margin-bottom: 2.5rem;
          color: #111;
        }

        /* GRID */
        .layanan-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 2rem;
          justify-items: center;
          align-items: start;
          max-width: 1100px;
          margin: 0 auto;
        }

        /* ITEM */
        .layanan-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .layanan-item:hover {
          transform: translateY(-4px);
        }

        /* ICON */
        .layanan-item img {
          width: 90px;
          height: 90px;
          object-fit: cover;
          background-color: #f8f9fa;
          box-shadow: 0 4px 8px rgba(0,0,0,0.08);
          margin-bottom: 0.75rem;
        }

        /* TEKS */
        .layanan-item span {
          font-size: 0.95rem;
          font-weight: 500;
          color: #111;
        }

        @media (max-width: 576px) {
          .layanan-item img {
            width: 64px;
            height: 64px;
          }
          .layanan-item span {
            font-size: 0.85rem;
          }
        }
        .carousel-caption {
          background: rgba(0,0,0,0.5);
          border-radius: 12px;
          padding: 20px;
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
          filter: invert(1);
        }
        .nav-tabs .nav-link {
          border: none;
          color: #6c757d;
        }
        .nav-tabs .nav-link.active {
          background-color: #0d6efd;
          color: #fff;
          border-radius: 8px 8px 0 0;
        }
        .list-group-item {
          border: none;
          border-bottom: 1px solid #e9ecef;
          padding: 0.9rem 1.2rem;
          background-color: #f8f9fa;
        }
        .list-group-item a {
          text-decoration: none;
          color: #000;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .list-group-item a:hover {
          color: #0d6efd;
        }
        .list-group-item .number {
          font-weight: bold;
          color: #0d6efd;
          font-size: 1rem;
          width: 22px;
          text-align: right;
        }
        .card {
          border-radius: 16px;
        }
        /* ===================== LATAR BELAKANG BERBEDA ===================== */
        .bg-kiri {
          background-color: #2b2a96; /* Biru khas PPID */
        }

        .bg-kanan {
          background-color: #ffffff; /* Putih */
        }

        /* ===================== TOMBOL DAN EFEK ===================== */
        .section-wilayah-galeri a.btn {
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .section-wilayah-galeri a.btn:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }

        /* Tombol Biru */
        .btn-blue {
          background-color: #2b2a96 !important;
          color: #ffffff !important;
        }
        .btn-blue:hover {
          background-color: #1f1f70 !important;
        }

        /* Gambar */
        .section-wilayah-galeri img {
          object-fit: contain;
          border-radius: 8px;
        }
        .btn-blue {
          background-color: #2b2a96 !important;
          color: #ffffff !important;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .btn-blue:hover {
          background-color: #1f1f70 !important;
          box-shadow: 0 8px 15px rgba(0,0,0,0.3);
        }

        /* Wrapper untuk efek zoom */
        .img-zoom-wrapper {
          overflow: hidden;
          border-radius: 8px;
          max-height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        /* Efek zoom gambar */
        .img-zoom {
          transition: transform 0.5s ease;
          max-height: 220px;
        }

        .btn-blue:hover .img-zoom {
          transform: scale(1.2);
        }
        @media (max-width: 768px) {
          .section-wilayah-galeri h3 {
            font-size: 1.2rem;
          }
        }
        .dataset-card {
        border-radius: 16px;
        background: #fff;
        text-align: center;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }
    .dataset-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    .dataset-img {
        width: 100%;
        height: 160px;
        object-fit: contain;
        margin-bottom: 12px;
    }
    .badge-category {
        display: inline-block;
        margin: 2px 4px;
        padding: 3px 10px;
        font-size: 0.75rem;
        border-radius: 20px;
        font-weight: 600;
        color: #fff;
    }
    .badge-open {
        background: #0d6efd;
    }
    .badge-dataset {
        background: #fd7e14;
    }
    .dataset-title {
        font-size: 0.95rem;
        font-weight: 600;
        margin-top: 10px;
        min-height: 48px;
        display: block;
        color: #000;
        text-decoration: none;
    }
    .dataset-title:hover {
        color: #0d6efd;
        text-decoration: underline;
    }