@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Roboto:wght@400;500;700&display=swap');
/* Fix Lighthouse: font-display swap */

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-display: swap;
}
/* =========================================================
   00) VARIABLES
   ========================================================= */
:root{
  /* Brand colors */
  --primary:#0b2e59;
  --primary-2:#0d6efd;
  --bbpmp-blue:#0d6efd;
  --bbpmp-blue-dark:#0b5ed7;

  /* Base palette */
  --dark:#0f172a;
  --text:#111827;
  --muted:#000000;
  --bg:#f6f7fb;

  /* Radius + Shadow */
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 14px 40px rgba(2, 6, 23, .10);
  --shadow-sm:0 10px 24px rgba(2, 6, 23, .08);

  /* Legacy header heights (dipakai beberapa komponen lama) */
  --topbar-h: 56px;
  --navbar-h: 64px;

  /* Header wrapper height (diisi JS di app.js) */
  --bbpmp-header-h: 120px;

  /* Instansi nav theme */
  --inst-nav: #0b2e59;
  --inst-dd:  #0b2e59;
  --inst-dd-2:#0d3a72;

  --inst-text: rgba(255,255,255,.92);
  --inst-line: rgba(255,255,255,.16);
  --inst-shadow: 0 14px 30px rgba(0,0,0,.22);
  --inst-radius: 6px;
  --inst-underline: rgba(255,255,255,.85);

  /* Fonts */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Z-Index map (single source of truth) */
  --z-header: 1032;
  --z-navbar: 1031;
  --z-topbar: 1030;
  --z-floating: 1010;

  --z-backdrop: 1050;
  --z-modal: 1060;
}

/* Responsive header var (legacy navbar-h) */
@media (max-width: 991.98px){
  :root{ --navbar-h: 72px; }
}

/* =========================================================
   01) RESET / BASE
   ========================================================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body) !important;
  color: var(--text);
  background:#fff;
  padding-top: calc(var(--bbpmp-header-h));
}

.primary{ color: var(--bbpmp-blue) !important; }
.bg-darker{ background:#111; }
.section-pad{ padding:80px 0; }

h1, h2, h3, h4, h5, h6,
.title-container h2,
.section-title-left__text,
.hero-title,
.berita-title,
.buletin-title,
.artikel-title,
.detail-title,
.side-title,
.home-svc-title,
.svc-title{
  font-family: var(--font-heading) !important;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Caption & body text */
p,
.section-card p,
.home-svc-desc,
.berita-excerpt,
.buletin-excerpt,
.artikel-excerpt,
.detail-content,
.detail-content p,
.content-sejarah,
.content-struktur,
.tupoksi-text,
.fasilitas-desc,
.meta-row,
.berita-meta,
.buletin-meta,
.artikel-meta,
.side-date{
  font-family: var(--font-body) !important;
  font-weight: 400;
}

.navbar-bbpmp,
.navbar-bbpmp .nav-link,
.navbar-bbpmp .dropdown-item{
  font-family: var(--font-heading) !important;
  font-weight: 600;
}

/* =========================================================
   02) HEADER (TOP LOGO BAR + NAVBAR) — NYATU (NO DOUBLE FIXED)
   ========================================================= */
.bbpmp-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);

  background: linear-gradient(180deg,
    #0b6fae 0%,
    #075a8f 30%,
    #04344f 65%,
    #021c2b 82%,
    #000 100%);
}
.bbpmp-header::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.18);
  pointer-events:none;
}


/* Top logo bar */
.top-logo-bar{
  background: transparent !important;
  box-shadow: none !important;
  z-index: var(--z-topbar) !important;
}
.top-logo-bar,
.navbar-bbpmp{
  position: relative;
  z-index: 1;
}


/* brand left */
.brand-left{
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  padding: 0 !important;
}

/* logo utama*/
.brand-logo{
  height: 50px;
  width: auto;
  object-fit: contain;
  display: block;

  background: transparent !important;
  padding: 0 !important;

  border-radius: 12px;
  box-shadow: none !important;

  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(1.05);
}

/* brand right */
.brand-right{ gap: 14px; }
.brand-mini{
  height: 50px !important;
  width: auto;
  object-fit: contain;
  background: transparent !important;
  
}

/* Banner kiri (besar) */
.brand-banner{
  height: 60px !important;
  width: auto !important;
  max-width: 520px !important;
  object-fit: contain !important;
  display: block;
}

/* Topbar container height mengikuti logo */
.top-logo-bar .container-fluid{
  min-height: 96px;
}

/* Mobile header tuning */
@media (max-width: 991.98px){
  .brand-banner{
    height: 54px !important;
    max-width: 340px !important;
  }
  .top-logo-bar .container-fluid{ min-height: 72px; }
  .brand-mini{ height: 22px !important; }
  .brand-logo{ height: 40px; }
}

/* =========================================================
   03) NAVBAR (DI DALAM WRAPPER, BUKAN FIXED LAGI)
   ========================================================= */
.navbar-bbpmp{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  display: flex;
  align-items: center;

  background: rgba(20, 55, 92, 0.96) !important;

  border-top: 1px solid rgba(7, 90, 143, 1) !important;
  border-bottom: 1px solid rgba(20, 55, 92, 0.96) !important;



  overflow: visible !important;
  z-index: var(--z-navbar);
}

/* font family */
.navbar-bbpmp,
.navbar-bbpmp .navbar-nav .nav-link,
.navbar-bbpmp .dropdown-menu,
.navbar-bbpmp .dropdown-item{
  font-family: var(--font-heading) !important;
  letter-spacing: .12px;
}

/* NAV LINKS underline */
.navbar-bbpmp .navbar-nav .nav-link{
  position: relative;
  color: var(--inst-text) !important;
  font-weight: 400 !important;

  padding: .78rem 1.05rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  transition: color .18s ease;
}

.navbar-bbpmp .navbar-nav .nav-link::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  background: var(--inst-underline);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  pointer-events: none;
}

.navbar-bbpmp .navbar-nav .nav-link:hover,
.navbar-bbpmp .navbar-nav .nav-link:focus-visible{
  color: #ffffff !important;
  background: transparent !important;
}
.navbar-bbpmp .navbar-nav .nav-link:hover::before,
.navbar-bbpmp .navbar-nav .nav-link:focus-visible::before{
  transform: scaleX(1);
}

.navbar-bbpmp .navbar-nav .nav-link.active{
  color: #ffffff !important;
  background: transparent !important;
}
.navbar-bbpmp .navbar-nav .nav-link.active::before{
  transform: scaleX(1);
}

/* hilangkan highlight bootstrap saat dropdown show */
.navbar-bbpmp .navbar-nav .show > .nav-link,
.navbar-bbpmp .nav-item.dropdown > .nav-link.dropdown-toggle.show,
.navbar-bbpmp a[aria-expanded="true"]{
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.navbar-bbpmp .navbar-nav .show > .nav-link::before,
.navbar-bbpmp .nav-item.dropdown > .nav-link.dropdown-toggle.show::before{
  transform: scaleX(1);
}

/* Dropdown chevron (top level) */
.navbar-bbpmp .nav-item.dropdown > .nav-link.dropdown-toggle{
  padding-right: 2rem !important;
  font-weight: 400 !important;
}
.navbar-bbpmp .nav-item.dropdown > .nav-link.dropdown-toggle::after{
  border: 0 !important;
  margin-left: 0 !important;
  vertical-align: 0 !important;

  content: "" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 12px !important;
  height: 12px !important;
  opacity: .92 !important;
  pointer-events: none !important;

  background: no-repeat center/12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.92' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") !important;

  transition: transform .18s ease, opacity .18s ease !important;
}
.navbar-bbpmp .nav-item.dropdown > .nav-link.dropdown-toggle.show::after{
  transform: translateY(-50%) rotate(180deg) !important;
  opacity: 1 !important;
}

/* Toggler */
.navbar-bbpmp .navbar-toggler{
  border-color: rgba(255,255,255,.35) !important;
  border-radius: 12px;
}
.navbar-bbpmp .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18);
}
.navbar-bbpmp .navbar-toggler-icon{
  filter: invert(1) grayscale(1);
}

/* Dropdown menu */
.navbar-bbpmp .dropdown-menu{
  background: var(--inst-dd) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  border-radius: var(--inst-radius) !important;
  padding: 0 !important;
  box-shadow: var(--inst-shadow) !important;

  min-width: 280px;
  z-index: 2000 !important;
  overflow: visible !important;
}

.navbar-bbpmp .dropdown-item{
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 500 !important;

  border-radius: 0 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--inst-line);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.navbar-bbpmp .dropdown-item:last-child{ border-bottom: 0 !important; }

.navbar-bbpmp .dropdown-item:hover,
.navbar-bbpmp .dropdown-item:focus{
  background: var(--inst-dd-2) !important;
  color: #ffffff !important;
}

.navbar-bbpmp .dropdown-item.active{
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}

.navbar-bbpmp .dropdown-divider{
  margin: 0 !important;
  opacity: 1 !important;
  border-top: 1px solid rgba(255,255,255,.22) !important;
}

/* Batasi dropdown biar tidak keluar layar */
.navbar-bbpmp .dropdown-menu{
  max-width: calc(100vw - 24px);
}

/* Item dropdown: izinkan text panjang turun ke baris bawah */
.navbar-bbpmp .dropdown-item{
  white-space: normal !important;
  text-align: left;
  align-items: flex-start;       /* supaya kalau 2 baris, rapi */
}

/* Ikon panah (top level & submenu) jangan ikut melar */
.navbar-bbpmp .dropdown-item::after,
.dropdown-submenu > a.dropdown-item.dropdown-toggle::after{
  flex: 0 0 auto;
}


/* Submenu dropend (via JS .show) */
/* Submenu dropend (via JS .show) */
.dropdown-submenu{ position: relative; }

/* Default: buka ke kanan */
.dropdown-submenu > .dropdown-menu{
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  right: auto !important;

  margin-left: 0px !important;   /* kasih jarak */
  display: none;
  z-index: 2100 !important;

  max-width: calc(100vw - 24px);
}
.dropdown-submenu > .dropdown-menu.show{ display: block !important; }

/* Kalau kepentok kanan: buka ke kiri (class ini sudah kamu punya) */
.dropdown-submenu.submenu-left > .dropdown-menu{
  left: auto !important;
  right: 100% !important;
  margin-left: 0 !important;
  margin-right: 0px !important;
}

.dropdown-submenu > a.dropdown-item.dropdown-toggle::after{
  content: "›" !important;
  border: 0 !important;
  font-size: 18px;
  line-height: 1;
  opacity: .95;
  margin-left: auto;
}

.dropdown-submenu.submenu-left > .dropdown-menu{
  left: auto !important;
  right: 100% !important;
}

/* Mobile navbar behavior */
@media (max-width: 991.98px){
  .navbar-bbpmp .navbar-nav .nav-link::before{ display:none !important; }

  .navbar-bbpmp .navbar-collapse{
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;

    background: rgba(11,46,89,.96) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
  }

  .navbar-bbpmp .dropdown-menu{
    position: static !important;
    float: none !important;
    margin: 8px 0 10px 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .dropdown-submenu > .dropdown-menu{
    position: static !important;
    min-width: auto !important;
    margin: 8px 0 0 12px !important;
    border-left: 2px solid rgba(255,255,255,.22) !important;
  }
}

/* =========================================================
   04) MODAL FIX (SINGLE SOURCE)
   ========================================================= */
.modal-backdrop{ z-index: var(--z-backdrop) !important; }
.modal{ z-index: var(--z-modal) !important; }
body.modal-open .bbpmp-header{ z-index: 1010 !important; }

/* =========================================================
   05) HERO / CAROUSEL
   ========================================================= */
.carousel-img{
  width: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.05);
  height: 100%;
}

@media (max-width: 768px){
  .carousel-img{
    height: 50vh;
    object-position: center 30%;
  }
}
.vh-50{ height: 50vh; }

.hero-section{
  background: linear-gradient(180deg, #5681ae 0%, #ffffff 70%);
  padding: 22px 0 10px;
}
.hero-carousel{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(2, 12, 27, 0.10);
}
.hero-slide{
  min-height: 420px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.08) 100%);
}
.hero-content{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: #fff;
}
.hero-title{
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.15;
  margin: 0;
  max-width: 95%;
  text-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.carousel-indicators{ margin-bottom: 10px; }

.hero-sidecard{
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, var(--primary) 0%, #0a3a79 100%);
  box-shadow: 0 12px 30px rgba(2, 12, 27, 0.10);
  min-height: 420px;
}
/* ==========================================
   BERITA CAROUSEL — FADE MODE (INSTANSI)
========================================== */
.carousel-item{
  position: relative;
  transition: transform 1s ease, opacity 1s ease;
}

#beritaCarousel .carousel-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  z-index: 1;
}

.carousel-caption {
  opacity: 0;
  transform: translateY(20px);
  animation: captionFade 1s ease forwards;
  animation-delay: 0.5s;
  z-index: 2;
  bottom: 20%;
  left: 10%;
  right: auto;
  text-align: left;
  max-width: 600px;
}

@keyframes captionFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.carousel-item img {
  transition: transform 5s ease;
}

.carousel-item.active img {
  transform: scale(1.05);
}

/* ANIMASI SAAT PERTAMA MUNCUL */
.slider-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: sliderFadeIn 1s ease forwards;
}

@keyframes sliderFadeIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Matikan transform geser */
#beritaCarousel.carousel-fade .carousel-item{
  transform: none !important;
}

/* Default hidden */
#beritaCarousel.carousel-fade .carousel-item{
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}

/* Slide aktif */
#beritaCarousel.carousel-fade .carousel-item.active,
#beritaCarousel.carousel-fade .carousel-item.carousel-item-start,
#beritaCarousel.carousel-fade .carousel-item.carousel-item-end{
  opacity: 1;
}

/* Hindari dorong-dorongan posisi */
#beritaCarousel.carousel-fade .carousel-item-next,
#beritaCarousel.carousel-fade .carousel-item-prev{
  position: absolute;
  top: 0;
  width: 100%;
}

#beritaCarousel .carousel-item{ position: relative; }

#beritaCarousel .carousel-item::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.18) 45%,
    rgba(0,0,0,0.55) 80%,
    rgba(0,0,0,0.68) 100%
  );
}

#beritaCarousel .carousel-caption{
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  z-index: 2 !important;
  text-align: left;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  padding: 22px 6% 44px !important;
  max-width: 980px;
}

/* FIX FONT: Heading gunakan Montserrat via var */
#beritaCarousel .slider-title,
#beritaCarousel .slider-title-link{
  font-family: var(--font-heading) !important;
}

#beritaCarousel .slider-title{
  margin: 0;
  font-size: clamp(18px, 2.1vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .1px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#beritaCarousel .slider-title-link{
  color: #fff !important;
  text-decoration: none;
  display: inline-block;
}
#beritaCarousel .slider-title-link:hover,
#beritaCarousel .slider-title-link:focus{
  text-decoration: underline;
  opacity: .95;
}

#beritaCarousel .carousel-indicators{
  z-index: 3 !important;
  bottom: 12px;
  margin-bottom: 0 !important;
}
#beritaCarousel .carousel-indicators [data-bs-target]{
  width: 26px;
  height: 4px;
  border-radius: 999px;
  opacity: .6;
}
#beritaCarousel .carousel-indicators .active{ opacity: 1; }

#beritaCarousel .carousel-control-prev,
#beritaCarousel .carousel-control-next{
  z-index: 3 !important;
}

@media (max-width: 768px){
  #beritaCarousel .carousel-caption{
    padding: 18px 6% 40px !important;
    max-width: none;
  }
}
/* ===== HERO SLIDER FULL ===== */
#beritaCarousel {
  width: 100%;
}

.carousel-frame {
  position: relative;
  width: 100%;
  height: clamp(300px, 75vh, 900px);
  overflow: hidden;
}

#beritaCarousel .carousel-frame {
  height: clamp(420px, 85vh, 1100px) !important;
}

#beritaCarousel .carousel-img {
  height: 100% !important;
}




/* OVERLAY GELAP */
.carousel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}


/* JUDUL */
.slider-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

/* LINK */
.slider-title-link {
  color: #fff;
  text-decoration: none;
}

.slider-title-link:hover {
  text-decoration: underline;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ZOOM HALUS */
.carousel-item img {
  transition: transform 6s ease;
}

.carousel-item.active img {
  transform: scale(1.05);
}

/* =========================================================
   07) GLOBAL UI (CARD, TITLE, BREADCRUMB, BUTTONS)
   ========================================================= */
.title-container{
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 10px;
}
.title-container h2{
  font-weight: 900;
  letter-spacing: .5px;
}
.title-container h2::after{
  content:"";
  position:absolute;
  display:block;
  width: 64px;
  height: 4px;
  background: var(--primary);
  bottom: 0;
  left: calc(50% - 32px);
  border-radius: 999px;
}

.section-card{
  background: #fff;
  padding: 30px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.section-card h4{
  font-weight: 900;
  margin-bottom: 16px;
  position: relative;
}
.section-card h4::after{
  content:'';
  width: 62px;
  height: 4px;
  background: var(--primary);
  position: absolute;
  left: 0;
  bottom: -8px;
  border-radius: 999px;
}
.section-card p{
  color: var(--muted);
  line-height: 1.8;
}

.section-card ul{
  margin-top: 16px;
  padding-left: 0;
}
.section-card ul li{
  list-style: none;
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
  line-height: 1.65;
  color: var(--muted);
}
.section-card ul li::before{
  content: "\f058";
  /* IMPORTANT: ini ikon Font Awesome, bukan font teks */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--bbpmp-blue);
}

/* Breadcrumb */
.breadcumbs{
  margin-top: 18px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 12px 26px rgba(11,46,89,.18);
}
.breadcumbs ol{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
.breadcumbs ol li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.breadcumbs ol li a{
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}
.breadcumbs ol li a:hover{ text-decoration: underline; }
.breadcumbs ol li:not(:last-child)::after{
  content: "›";
  opacity: .85;
  font-weight: 900;
  margin-left: 2px;
}

/* Buttons */
.btn-ghost{
  background:#fff !important;
  color:#0d6efd !important;
  border:1px solid rgba(13,110,253,.35) !important;
  font-weight:800;
  border-radius:12px;
}
.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active{
  background:#fff !important;
  color:#0d6efd !important;
  border-color: rgba(13,110,253,.55) !important;
  box-shadow:none !important;
  transform:none !important;
}
.btn-ghost:focus-visible{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.20) !important;
}
.btn-primary-green{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary-green:hover{
  background: var(--bbpmp-blue-dark) !important;
  border-color: var(--bbpmp-blue-dark) !important;
}

/* Back to top */
.btn-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s ease;
  z-index: 999;
}
.btn-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================================================
   08) PAGES: HERO BACKGROUNDS + PROFIL TEXT
   ========================================================= */
.page-hero{
  position: relative;
  height: 240px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(11,46,89,.78), rgba(13,110,253,.35));
}
.page-hero .container{ position: relative; z-index: 2; }

@media (max-width: 768px){
  .page-hero{ height: 200px; }
}

.sejarah-hero-bg{ background: url('../img/a1.jpg') center/cover no-repeat; }
.struktur-hero-bg{ background: url('../img/a2.jpg') center/cover no-repeat; }
.tupoksi-hero-bg{ background: url('../img/a3.jpg') center/cover no-repeat; }
.berita-hero-bg{ background: url('../img/a4.jpg') center/cover no-repeat; }

.content-sejarah{
  text-align: justify;
  line-height: 1.9;
}
.section-profil{
  max-width: 920px;
  margin: auto;
}

.berita-article {
    max-width: 750px;
    margin: auto;
    line-height: 1.8;
    font-size: 16px;
}

/* PARAGRAF */
.berita-article p {
    margin-bottom: 16px;
}

/* HEADING */
.berita-article h1,
.berita-article h2,
.berita-article h3 {
    margin-top: 24px;
    margin-bottom: 12px;
}

/* LIST */
.berita-article ul,
.berita-article ol {
    padding-left: 20px;
    margin-bottom: 16px;
}

/* GAMBAR DALAM ARTIKEL */
.berita-article img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* TABLE */
.berita-article table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.berita-article table th,
.berita-article table td {
    border: 1px solid #ddd;
    padding: 8px;
}

/* =========================================================
   FINAL LOCK — JUSTIFY SEMUA HALAMAN DETAIL
   Berita | Artikel | Buletin / Jurnal
   ========================================================= */

/* Wrapper utama konten detail */
.detail-content,
.berita-article,
.buletin-detail-content {
  text-align: justify;
  text-justify: inter-word;
}

/* Semua paragraf */
.detail-content p,
.berita-article p,
.buletin-detail-content p {
  text-align: justify;
  text-justify: inter-word;
}

/* List tetap rapi */
.detail-content li,
.berita-article li,
.buletin-detail-content li {
  text-align: justify;
}

/* Heading JANGAN justify */
.detail-content h1,
.detail-content h2,
.detail-content h3,
.detail-content h4,
.berita-article h1,
.berita-article h2,
.berita-article h3,
.berita-article h4,
.buletin-detail-content h1,
.buletin-detail-content h2,
.buletin-detail-content h3,
.buletin-detail-content h4 {
  text-align: left;
}

/* Blockquote biar profesional */
.detail-content blockquote,
.berita-article blockquote,
.buletin-detail-content blockquote {
  text-align: justify;
  border-left: 4px solid #0d6efd;
  padding-left: 16px;
  color: #374151;
}


/* =========================================================
   09) INDEX SECTION GRADIENTS + CARDS
   ========================================================= */
.idx-section{
  position: relative;
  padding: 72px 0;
  overflow: hidden;
  background: #fff;
}
.idx-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity: 1;
}
.idx-section > .container,
.idx-section > .container-fluid{
  position: relative;
  z-index: 1;
}

/* card glass feel */
.idx-section .card{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* layout layanan grid stabil */
.idx-layanan .row.g-4 > [class*="col-"]{
  display: flex;
}

/* Card layanan */
.home-svc-card{
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;

  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  transition: .22s ease;
}
.home-svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
  border-color: rgba(13,110,253,.35);
}

.home-svc-thumb{
  height: 180px;
  background: #eef2f7;
  overflow: hidden;
}
.home-svc-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 6%;
  display:block;
}

.home-svc-body{
  padding: 14px 14px 16px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.home-svc-title{
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;

  /* FINAL clamp: 2 baris */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.home-svc-desc{
  color: #6b7280;
  margin: 10px 0 0;
  line-height: 1.7;
  flex: 1 1 auto;

  /* FINAL clamp: 2 baris */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Mobile spacing */
@media (max-width: 576px){
  .idx-section{ padding: 56px 0; }
  .home-svc-thumb{ height: 170px; }
}

/* Berita/Artikel cards konsisten */
.idx-berita .card,
.idx-artikel .card{
  border-radius: 18px !important;
  overflow: hidden !important;
}

.idx-berita .card-body h5,
.idx-artikel .card-body h5{
  font-weight: 900;
}

/* Berita/Artikel clamp 2 baris */
.idx-berita .card-body h5,
.idx-berita .card-body p,
.idx-artikel .card-body h5,
.idx-artikel .card-body p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.article-title-clamp,
.article-excerpt-clamp{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* Card interaktif global */
.idx-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.idx-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
  border-color: rgba(13,110,253,.35);
}
.idx-card img{ transition: transform .25s ease; }
.idx-card:hover img{ transform: scale(1.03); }
.idx-card:active{ transform: translateY(-2px); }

/* 1) LAYANAN (PUTIH -> BIRU) */
.idx-layanan{
  background: #fff; /* base */
}
.idx-layanan::before{
  /* atas putih, bawah biru */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ffffff 35%,
    rgba(13,110,253,.10) 65%,
    rgba(13,110,253,.20) 100%
  );
}


/* 3) MEDIA SOSIAL (PUTIH) */
.idx-socmed{
  background: #fff;
}
.idx-socmed::before{
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}


/* =========================================================
   10) STRUKTUR
   ========================================================= */
.struktur-divider{ background: var(--primary); }
.struktur-subtitle{ font-size: 14px; }
.struktur-card{ overflow: hidden; }

.struktur-img-wrap{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: var(--shadow-sm);
}
.struktur-img{
  width: 100%;
  display: block;
  cursor: zoom-in;
  transition: .25s ease;
}
.struktur-img-wrap:hover .struktur-img{ transform: scale(1.01); }

.struktur-img-hint{
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 768px){
  .struktur-img-hint{
    font-size: 12px;
    padding: 7px 10px;
  }
}
.content-struktur{
  color: var(--muted);
  line-height: 1.9;
  text-align: justify;
}
.struktur-modal .modal-content{
  border-radius: 16px;
  overflow: hidden;
}

/* =========================================================
   11) TUPOKSI
   ========================================================= */
.tupoksi-divider{ background: var(--primary); }
.tupoksi-subtitle{ font-size: 14px; }

.tupoksi-toc .tupoksi-chip{
  border-radius: 999px;
  border-color: rgba(13,110,253,.35);
  color: var(--bbpmp-blue);
  font-weight: 900;
}
.tupoksi-toc .tupoksi-chip:hover{
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.55);
}
.tupoksi-h3{ font-size: 22px; }

.tupoksi-text{
  color: var(--muted);
  line-height: 1.95;
  text-align: justify;
  font-size: 16px;
}
.tupoksi-notes{
  padding-left: 18px;
  line-height: 1.8;
}

/* =========================================================
   12) FASILITAS + LAYANAN CARD
   ========================================================= */
.fasilitas-card2{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  transition:.25s ease;
  height:100%;
}
.fasilitas-card2:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(2,6,23,.10);
  border-color: rgba(13,110,253,.35);
}
.fasilitas-thumb{
  position:relative;
  background:#f8fafc;
  aspect-ratio:16/10;
  overflow:hidden;
}
.fasilitas-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.25s ease;
  display:block;
}
.fasilitas-card2:hover .fasilitas-thumb img{ transform:scale(1.03); }

.fasilitas-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-weight:900;
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
}
.fasilitas-body{ padding: 16px 16px 18px; }
.fasilitas-desc{
  color: var(--muted);
  line-height: 1.8;
  text-align: justify;
}
.fasilitas-desc br{
  display: block;
  margin-bottom: 8px;
  content: "";
}
.fasilitas-card-static{ cursor: default; }
.fasilitas-card-static:hover{
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: rgba(15,23,42,.08);
}

/* =========================================================
   LAYANAN PAGE (scoped) - aman tidak bentrok halaman lain
   ========================================================= */
.layanan-page .layanan-container{
  padding-top: 30px;
  padding-bottom: 60px; 
}

/* Admin - Layanan create/edit preview (kunci agar tidak out frame) */
.layanan-poster-preview-wrap{
  min-height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layanan-poster-preview-img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Biar modal full tetap aman */
#modalPosterPreviewNew img,
.modal .modal-body img{
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* ===== Layanan Detail: hilangkan inline style ===== */
.layanan-detail-content {
  line-height: 1.9;
}

.svc-side-item {
  border: 1px solid rgba(15, 23, 42, .08);
  margin-bottom: 10px;
  color: #0f172a;
}

.svc-side-item:hover {
  text-decoration: none;
  opacity: .95;
}

/* card */
.layanan-page .svc-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: .25s ease;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  height: 100%;
  text-decoration:none;
  color: inherit;
  display:block;
}

.layanan-page .svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
}

/* cover / thumbnail */
.layanan-page .svc-thumb{
  height: 180px;
  background: #eef2f7;
  overflow: hidden;
}

.layanan-page .svc-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 6%;
  display:block;
}

/* body */
.layanan-page .svc-body{
  padding: 14px 16px 16px;
}

.layanan-page .svc-title{
  font-weight: 900;
  margin: 0;
  color:#0f172a;
}

.layanan-page .svc-desc{
  color:#6b7280;
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.7;
}

.layanan-card {
  height: 100%;
  padding: 32px 20px;
  border-radius: 14px;
  background: #fff;
  transition: all .25s ease;
}

/* BIKIN KOLOM FLEX */
.idx-layanan .row > div {
  display: flex;
}

/* CARD FULL FLEX */
.layanan-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

/* JUDUL BIAR RATA */
.layanan-title {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LINK SELALU DI BAWAH */
.layanan-link {
  margin-top: auto;
}

.layanan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.layanan-icon {
  width:58px;
  height:58px;
  margin:0 auto 14px;
  border-radius: 50%;
  background: #e8f1ff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 50px;
}

.program-icon i {
  color: #0d6efd !important;
  font-size: 30px;
  line-height: 1;
}


.layanan-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 12px;
  min-height: 48px;
}

.layanan-link {
  color: #0d6efd;
  font-weight: 500;
  text-decoration: none;
}

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


/* =========================================================
   LAYANAN DETAIL (FINAL - tampil full seperti inline)
   ========================================================= */
body.layanan-detail-page .detail-wrap{
  padding-top: 90px;
  padding-bottom: 80px; /* biar ga mepet footer */
  margin-bottom: 20px;  /* optional spacing */
}

/* Card detail */
body.layanan-detail-page .cardx{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  overflow:hidden;
}

/* Gambar: tampil FULL (tidak crop) seperti inline */
body.layanan-detail-page .full-img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;     /* penting: jangan batasi tinggi */
  object-fit:unset !important;     /* penting: jangan cover/contain */
  display:block !important;
  background:#eef2f7;
}

/* ===============================
   PROGRAM PRIORITAS – PREMIUM
================================ */

@media (min-width: 992px){
  .program-prioritas-premium .row{
    --bs-gutter-x:1rem;
    --bs-gutter-y:1rem;
  }
}

@media (max-width: 576px){
  .program-card{
    padding:20px 16px;
  }

  .program-title{
    font-size:14.5px;
  }
}


.program-prioritas-premium {
  position: relative;
  width: 100%;
  padding: 60px 0;
  overflow: hidden;
  color: #ffffff;
  background-image:
    radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* FOTO BACKGROUND */
.program-prioritas-premium::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: url('/assets/img/bbpmpdepan.jpg') center / cover no-repeat;
  opacity: 0.25;
  z-index: 0;
}

/* OVERLAY BIRU NAVY */
.program-prioritas-premium::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(11,46,89,0.85);
  z-index: 1;
}

/* NOISE HALUS (PREMIUM FEEL) */
.program-prioritas-premium {
  background-image:
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ISI DI ATAS BACKGROUND */
.program-prioritas-premium > .container {
  position: relative;
  z-index: 2;
}

/* ===============================
   HEAD
================================ */

.program-head-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ffffff;
}

.program-head-title {
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 10px;
}

.program-head-desc {
  max-width: 540px;
  margin: 0 auto;
  color: #dbe7f3;
}

/* ===============================
   CARD – FLOATING PREMIUM
================================ */

.program-card {
  background: rgba(255,255,255,0.97);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  height: 100%;
  box-shadow:
    0 10px 26px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition: all .25s ease;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* ICON */
.program-icon {
  width: 58px;
  height: 58px;
  margin:0 auto 12px !important;
  border-radius: 50%;
  background: rgba(13,110,253,.12);
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color: #0d6efd;
  font-size: 30px;
}

.program-icon img,
.program-icon__fa{
  display:block;
  line-height:1;
  margin:0 !important;
  width:26px;
  height:26px;
  font-size:20px;
}

/* TITLE */
.program-title {
  font-weight: 700;
  color: #0b2e59;
  margin-bottom: 6px;
  line-height: 1.35;
  font-size:16px;

  display:-webkit-box;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* LINK */
.program-link {
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  font-size:13px;
}

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


/* ===============================
   MAKLUMAT PELAYANAN
================================ */

.idx-maklumat{
  position: relative;
  background: #fff;
  overflow: hidden;
}

.idx-maklumat::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      1200px 300px at 50% -50px,
      rgba(255,255,255,.35),
      transparent 70%
    );
  pointer-events:none;
}




.idx-maklumat > .container{
  position: relative;
  z-index: 1;
}

.maklumat-text{
  max-width: 520px;
}

.maklumat-title{
  font-weight: 900;
  color: #0b2545;
  margin-bottom: 14px;
}

.maklumat-desc{
  color: #374151;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* GAMBAR */
.maklumat-img-wrap{
  position: relative;
  display: inline-block;
  cursor: zoom-in;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2,6,23,.18);
  transition: transform .25s ease;
}

.maklumat-img-wrap:hover{
  transform: translateY(-4px);
}

.maklumat-img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ICON ZOOM */
.maklumat-zoom{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: .25s ease;
}

.maklumat-img-wrap:hover .maklumat-zoom{
  opacity: 1;
}

/* MOBILE */
@media (max-width: 768px){
  .maklumat-text{
    max-width: none;
    text-align: center;
  }
}


/* =========================================================
   13) BERITA / KEGIATAN CARDS
   ========================================================= */
.berita-divider{ background: var(--primary); }
.berita-subtitle{ font-size: 14px; }

.berita-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: .25s ease;
  display: flex;
  flex-direction: column;
}
.berita-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(13,110,253,.35);
}

.berita-cover{
  display: block;
  background: #f8fafc;
  overflow: hidden;
  border-radius: 12px;
}

.berita-cover img{
  width: 100%;
  height: auto; /* penting: biar tidak gepeng */
  display: block;
  transition: .25s ease;
}

.berita-card:hover .berita-cover img{
  transform: scale(1.03);
}

.berita-cover-fallback{
  width: 100%;
  padding: 60px 0; /* ganti height */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 34px;
}

.berita-body{
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.berita-meta{
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.berita-title{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 10px;
}
.berita-title a{ color: #0f172a; }
.berita-title a:hover{ color: var(--bbpmp-blue); }

.berita-excerpt{
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.berita-actions{
  margin-top: auto;
  padding-top: 14px;
}

.berita-article{
  font-size: 16px;
  line-height: 1.95;
  color: var(--muted);
  text-align: justify;
}

.meta-row{
  color: #6b7280;
  font-size: 14px;
}

/* =========================================================
   14) BULETIN / JURNAL  (FIX: tidak ketimpa + rapi)
   ========================================================= */

/* --- Section Title (seperti berita terkini) --- */
.section-title-left{
  position: relative;
  z-index: 2;                 /* pastikan di atas card */
  padding: 10px 0 8px;
  margin: 10px 0 18px;        /* INI YANG NGASIH RUANG (biar tidak nabrak) */
}

.section-title-left__text{
  margin: 0;
  font-weight: 700;
  letter-spacing: .5px;
  color: #0f172a;
  text-transform: capitalize;
  font-size: clamp(22px, 2.1vw, 34px);
}

.section-title-left__bars{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.section-title-left__bars .bar{
  display: inline-block;
  height: 4px;
  border-radius: 999px;
}

.section-title-left__bars .bar-blue{
  width: 34px;
  background: #0d6efd;
}

.section-title-left__bars .bar-gray{
  width: 46px;
  background: rgb(251, 209, 6);
}

/* --- Buletin Card --- */
.buletin-card{
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.buletin-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
  border-color: rgba(13,110,253,.25);
}

.buletin-cover-wrap{
  height: 180px;
  background: #eef2f7;
  overflow: hidden;
}
.buletin-cover{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 6%;
  display:block;
}

.buletin-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buletin-title{
  font-weight: 900;
  color:#0f172a;
  line-height:1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.buletin-meta{
  font-size: 12px;
  color:#6b7280;
  margin: 0;
}
.buletin-excerpt{
  color:#374151;
  line-height:1.7;
  font-size: 14px;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.buletin-actions{
  margin-top: auto;          /* tombol selalu nempel bawah */
  padding-top: 12px;
}

/* --- Buletin Detail --- */
.buletin-detail-card{
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow:hidden;
}
.buletin-detail-cover img{
  width:100%;
  display:block;
  background:#eef2f7;
}
.buletin-detail-title{
  font-weight: 900;
  color:#0f172a;
  line-height: 1.15;
  margin:0;
}
.buletin-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  color:#6b7280;
  font-size: 13px;
  margin-top: 8px;
}
.buletin-detail-content{
  color:#111827;
  line-height: 1.95;
  font-size: 16px;
}
.buletin-detail-content p{
  margin-bottom: 14px;
  color:#374151;
}

/* FIX: jangan biarkan section title bars jadi absolute dari style lain */
.section-title-left__bars,
.section-title-left__bars .bar{ position: static !important; }

/* =========================================================
   FLOATING STACK – FINAL (STATIS, NEMPEL KANAN)
   ========================================================= */

.floating-stack{
  position: fixed;
  right: 12px;
  bottom: 120px;

  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: var(--z-floating);

  pointer-events: none;
}


.floating-stack > *{
  pointer-events: auto;
  margin-bottom:12px;
}



/* =========================================================
   FAB PILL (RUMAH PENDIDIKAN + WHATSAPP)
   ========================================================= */

.fab-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px 10px 10px;
  border-radius: 999px 0 0 999px;

  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  text-decoration: none;

  margin-right: -14px;

  transition: none;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}


.fab-pill__icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.fab-pill__icon img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.fab-pill__label{
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}

/* warna */
.fab-pill--rp .fab-pill__icon{ background:#0d6efd; }
.fab-pill--rp .fab-pill__label{ color:#0d6efd; }

.fab-pill--wa .fab-pill__icon{ background:#22c55e; }
.fab-pill--wa .fab-pill__label{ color:#16a34a; }

.fab-pill,
.floating-buletin-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  background:#ffffff;

  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  text-decoration: none;
  white-space: nowrap;


  transform: translateX(70%);    
  transition: transform .35s ease, box-shadow .25s ease;
}

.fab-pill__label,
.floating-buletin-pill span{
  opacity:0;
  transition:opacity .25s ease;
}

/* HOVER / FOCUS */
.fab-pill:hover,
.fab-pill:focus-within,
.floating-buletin-pill:hover{
  transform:translateX(0);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.fab-pill:hover .fab-pill__label,
.floating-buletin-pill:hover span{
  opacity:1;
}

/* ICON */
.fab-pill__icon img{
  width:28px;
  height:28px;
}


/* support tap di mobile */
.fab-pill.is-open,
.floating-buletin-pill.is-open{
  transform:translateX(0);
}

.fab-pill.is-open .fab-pill__label,
.floating-buletin-pill.is-open span{
  opacity:1;
}

.fab-pill__icon{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#ffffff;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

/* gambar di dalam ikon */
.fab-pill__icon img{
  width:22px;
  height:22px;
  object-fit:contain;
}


/* MOBILE */
@media (max-width: 576px){
  .fab-pill__label{ display:none; }
  .fab-pill{ padding:10px; }
  .floating-buletin-pill span{ display:none; }
}


/* =========================================================
   16) MISC (pengumuman, alert close, info grid, section head)
   ========================================================= */

.pengumuman-item{
  transition: .18s ease;
  box-shadow: 0 10px 24px rgba(2,12,27,0.06);
}
.pengumuman-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2,12,27,0.10);
  border-color: rgba(13,110,253,.35) !important;
}

/* Alert close (AdminLTE/Bootstrap4) */
.alert .alert-close{
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 22px;
  opacity: .8;
}
.alert .alert-close span{
  display: inline-block;
  line-height: 1;
}
.alert .alert-close:hover{ opacity: 1; }

#flash-alert{
  position: relative;
  padding-right: 48px;
}
#flash-alert .alert-close{
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 22px;
  opacity: .85;
  text-shadow: none;
}
#flash-alert .alert-close span{
  display: inline-block;
  line-height: 1;
}
#flash-alert .alert-close:hover{ opacity: 1; }

/* =========================================================
   INFORMASI TERKINI (BERITA & ARTIKEL)
========================================================= */

.idx-informasi-terkini{
  background:#fff;
}

/* ================= TAB FILTER ================= */

.info-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.info-tab{
  border:0;
  background:#ffffff;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  color:#111827;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .2s ease;
}

.info-tab:hover{
  background:#f1f5f9;
}

.info-tab.active{
  background:#2f80c1;
  color:#ffffff;
  box-shadow:0 10px 24px rgba(47,128,193,.35);
}

/* ================= GRID & CARD ================= */

.info-card{
  display:block;
  text-decoration:none;
  color:inherit;
}

.info-thumb{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#e5e7eb;
}

.info-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}

.info-card:hover .info-thumb img{
  transform:scale(1.06);
}

/* ================= BODY ================= */

.info-body{
  padding-top:12px;
}

.info-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#6b7280;
  margin-bottom:6px;
}

/* ================= BADGE ================= */

.info-badge{
  font-weight:700;
  font-size:12px;
  text-transform:capitalize;
}

.info-badge.berita{
  color:rgb(251, 210, 6);
}

.info-badge.artikel{
  color:rgb(251, 210, 6);
}

/* ================= TITLE ================= */

.info-title{
  font-weight:700;
  font-size:15px;
  line-height:1.4;
  color:#111827;
}

/* ================= TOMBOL SELENGKAPNYA ================= */

.info-more{
  padding:10px 26px;
  font-weight:600;
  border-radius:999px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 576px){
  .info-tabs{
    gap:10px;
  }

  .info-tab{
    font-size:13px;
    padding:8px 14px;
  }

  .info-title{
    font-size:14px;
  }
}

/* Section head */
.section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 14px;
}
.section-head__icon{
  font-size:18px;
  color:#0d6efd;
  flex:0 0 auto;
}
.section-head__title{
  font-family: var(--font-heading) !important;
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:.2px;
  color:#0b2545;
  flex:0 0 auto;
}
.section-head__line{
  height:2px;
  background:rgba(0,0,0,.18);
  flex:1 1 auto;
  border-radius:2px;
}

/* Pengumuman terbaru - list */
.idx-pengumuman .peng-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.idx-pengumuman .peng-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.idx-pengumuman .peng-item:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  border-color:rgba(13,110,253,.25);
}
.idx-pengumuman .peng-item__title{
  font-weight:800;
  color:#0b2545;
  line-height:1.25;
}
.idx-pengumuman .peng-item__date{
  margin-top:4px;
  font-size:.88rem;
  color:rgba(0,0,0,.55);
}
.idx-pengumuman .peng-item__icon{
  color:rgba(13,110,253,.75);
  font-size:1.05rem;
}

/* =========================================================
   HALAMAN ARTIKEL (KHUSUS) — FULL
   Catatan:
   - Jangan pakai padding-top berbasis --bbpmp-header-h di sini,
     karena BODY sudah punya offset header fixed.
   ========================================================= */
.artikel-page{
  padding-top: 0 !important;        /* prevent double offset */
  margin-top: 14px !important;      /* jarak ideal dari navbar */
  background: #fff;
}
@media (max-width: 991.98px){
  .artikel-page{ margin-top: 10px !important; }
}

/* =========================================================
   GRID CARD ARTIKEL
   ========================================================= */
.artikel-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  height: 100%;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  display: flex;
  flex-direction: column;
}

.artikel-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
  border-color: rgba(13,110,253,.30);
}

/* thumbnail */
.artikel-thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #eef2f7;
  overflow: hidden;
}

.artikel-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .25s ease;
}

.artikel-card:hover .artikel-thumb img{
  transform: scale(1.03);
}

/* fallback icon center (kalau tanpa gambar) */
.artikel-thumb .fa-file-alt{
  opacity: .55;
}

/* badge tanggal */
.artikel-badge{
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
}

/* konten */
.artikel-meta{
  font-size: 13px;
  color: #6b7280;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.artikel-title{
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  margin: 10px 0 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* biar rapi */
  overflow: hidden;
}

.artikel-excerpt{
  color: #6b7280;
  line-height: 1.75;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* biar tinggi card konsisten */
  overflow: hidden;
}

/* footer actions */
.artikel-actions{
  margin-top: auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 18px 18px;
}

/* Tombol hanya untuk area artikel (tidak ganggu global .btn-ghost) */
.artikel-actions .btn-ghost{
  background:#fff !important;
  color:#0d6efd !important;
  border:1px solid rgba(13,110,253,.28) !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  transition: .18s ease;
  box-shadow: none !important;
  transform: none !important;
}

.artikel-actions .btn-ghost:hover,
.artikel-actions .btn-ghost:focus{
  background: rgba(13,110,253,.08) !important;
  border-color: rgba(13,110,253,.45) !important;
  color:#0d6efd !important;
}

/* kecilkan jam di kanan biar rapi */
.artikel-actions .text-muted{
  white-space: nowrap;
}

/* responsive */
@media (max-width: 576px){
  .artikel-actions{
    padding: 12px 14px 16px;
  }
  .artikel-actions .btn-ghost{
    padding: 9px 10px !important;
    font-size: 13px;
  }
}

/* =========================================================
   ARTIKEL DETAIL — FULL CSS
   ========================================================= */
.detail-hero{
  position: relative;
  padding: 28px 0 14px;
  background: #f7fafc;
  border-bottom: 1px solid rgba(15,23,42,.06);

  /* Fallback kalau var belum kebaca */
  margin-top: 84px;
}

:root[style*="--bbpmp-header-h"] .detail-hero{
  margin-top: calc(var(--bbpmp-header-h) + 12px);
}

/* WRAP CONTENT */
.detail-wrap{
  padding: 22px 0 60px;
  background: #fff;
}

/* CARD MAIN */
.detail-card{
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow: hidden;
}

/* COVER IMAGE */
.detail-cover{
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
  background: #eef2f7;
}

/* BODY PADDING */
.detail-body{ padding: 18px 18px; }
@media (min-width: 992px){
  .detail-body{ padding: 26px 28px; }
}

/* TITLE + META */
.detail-title{
  font-weight: 900;
  color:#0f172a;
  line-height: 1.15;
  margin: 0;
}

.detail-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
  color:#6b7280;
  font-size: 13px;
  margin-top: 8px;
}

/* ACTIONS (back, copy, share) */
.detail-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  margin-top: 14px;
}

/* Tombol ghost KHUSUS detail (biar tidak bentrok global) */
.detail-actions .btn-ghost{
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  border-radius: 12px;
  font-weight: 800;
  padding: 10px 12px;
  transition: .2s ease;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  text-decoration:none;
  color:#0f172a;
}
.detail-actions .btn-ghost:hover{
  background: rgba(13,110,253,.08);
  border-color: rgba(13,110,253,.28);
  color: #0d6efd;
}

/* pill share button (bootstrap outline masih dipakai) */
.detail-actions .btn-pill{
  border-radius: 999px;
  font-weight: 800;
  padding: 10px 14px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

/* CONTENT TYPOGRAPHY */
.detail-content{
  margin-top: 18px;
  color:#111827;
  line-height: 1.95;
  font-size: 16px;
}

.detail-content p{
  margin-bottom: 14px;
  color:#374151;
}

.detail-content img{
  max-width:100%;
  height:auto;
  border-radius: 14px;
}

/* SIDEBAR */
.side-card{
  background:#fff;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow:hidden;
  padding: 18px;
}

.side-title{
  font-weight: 900;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 12px;
  color:#0f172a;
}

/* warna ikon sidebar dibuat instansi-friendly */
.side-title i{ color: #0d6efd; }

.side-list a{
  display:block;
  text-decoration:none;
  color:#0f172a;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.06);
  transition:.2s ease;
  margin-bottom: 10px;
  background:#fff;
}

.side-list a:hover{
  background: rgba(13,110,253,.08);
  border-color: rgba(13,110,253,.22);
  transform: translateY(-1px);
}

.side-date{
  font-size: 12px;
  color:#6b7280;
  margin-top: 6px;
}

/* breadcrumbs (kalau dipakai) */
.breadcumbs{ margin-top: 18px; }

@media (max-width: 991.98px){
  .detail-hero{
    padding: 22px 0 12px;
    margin-top: 74px;
  }
  :root[style*="--bbpmp-header-h"] .detail-hero{
    margin-top: calc(var(--bbpmp-header-h) + 10px);
  }
}
/* =========================================================
   INDEX: PENGUMUMAN (RUNNING TEXT + HIGHLIGHT)
   ========================================================= */
.idx-announcement{
  padding: 18px 0 6px;
  background: linear-gradient(180deg, rgba(13,110,253,.06) 0%, rgba(255,255,255,0) 100%);
}

/* marquee wrapper */
.announcement-marquee-wrap{
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}

.announcement-label{
  flex: 0 0 auto;
  padding: 12px 14px;
  font-weight: 900;
  color: #0f172a;
  border-right: 1px solid rgba(15,23,42,.08);
  background: rgba(13,110,253,.06);
  white-space: nowrap;
}

.announcement-marquee{
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 12px 0;
}

.announcement-track{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;         /* penting */
  will-change: transform;
  animation: marquee-left 28s linear infinite;

  gap: 0;
}

.announcement-item{
 display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(15,23,42,.92);
  font-weight: 700;

  padding-right: 22px;
}
.announcement-item a{
  color: rgba(15,23,42,.92);
  text-decoration: none;
}
.announcement-item a:hover{ text-decoration: underline; }

.announcement-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(13,110,253,.85);
  flex: 0 0 auto;
}

/* pause saat hover */
.announcement-marquee-wrap:hover .announcement-track{
  animation-play-state: paused;
}

/* highlight cards */
.announcement-highlight{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  padding: 16px 16px 14px;
  height: 100%;
  transition: .2s ease;
}
.announcement-highlight:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
}

.announcement-highlight__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.announcement-highlight__badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(13,110,253,.10);
  color: #0d6efd;
}
.announcement-highlight__date{
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.announcement-highlight__title{
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 8px;
}
.announcement-highlight__desc{
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 12px;
}
.announcement-highlight__actions{
  margin-top: auto;
}

@keyframes marquee-left{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

@media (max-width: 576px){
  .announcement-label{ display:none; }
  .announcement-marquee-wrap{ border-radius: 14px; }
  .announcement-track{ animation-duration: 22s; }
}

.idx-socmed .socmed-side,
.idx-socmed .socmed-content{
  border-radius:16px;
  overflow:hidden;
}

.socmed-tab{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border:0;
}

.socmed-tab .socmed-ico{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:#f1f3f5;
  color:#111;
  flex:0 0 40px;
  font-size:18px;
}

.socmed-meta{ display:flex; flex-direction:column; line-height:1.12; }
.socmed-title{ font-weight:800; color:#111; }
.socmed-sub{ font-size:12px; color:#6c757d; margin-top:2px; }
.socmed-arrow{ margin-left:auto; color:#adb5bd; }

.socmed-tab.active{
  background:#0b4f86;
  color:#fff;
}
.socmed-tab.active .socmed-ico{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.socmed-tab.active .socmed-title,
.socmed-tab.active .socmed-sub,
.socmed-tab.active .socmed-arrow{ color:#fff; }

.socmed-tab-link{
  display:flex;
  align-items:center;
  padding:12px 14px;
  background:#fff;
}

.socmed-vid-card{
  border:1px solid #eef1f4;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  min-height: 420px;
}
.socmed-vid-card iframe{ border:0; }

@media (max-width: 992px){
  .socmed-vid-card{ min-height: unset; }
}

/* =========================================================
   FIX: Bootstrap ratio fallback (kalau kamu pakai BS4)
   Membuat .ratio .ratio-9x16 tetap punya tinggi.
========================================================= */
.ratio {
  position: relative;
  width: 100%;
  display: block;
}

.ratio::before {
  content: "";
  display: block;
}

/* 9:16 => tinggi = 16/9 * 100% = 177.7778% */
.ratio-9x16::before {
  padding-top: 177.7778%;
}

.ratio > iframe,
.ratio > embed,
.ratio > object,
.ratio > video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================
   FOOTER WRAPPER
========================= */
.bbpmp-footer {
  background: #0b3c5d;
  color: #eaf2f8;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================
   FOOTER TOP
========================= */
.bbpmp-footer-top {
  padding: 60px 0 40px;
  background:
    radial-gradient(1200px 500px at 30% 40%, rgba(13,110,253,.18), transparent 55%),
    radial-gradient(900px 420px at 70% 45%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(90deg, #001a33 0%, #021a30 50%, #001427 100%);
}


/* TITLE */
.bbpmp-footer-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

/* TEXT */
.bbpmp-footer-text {
  color: #d6e6f2;
}

.bbpmp-footer-text div {
  margin-bottom: 6px;
}

/* =========================
   VISITOR BOX
========================= */
.footer-visitor-box {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  height: 100%;
  backdrop-filter: blur(6px);
}

.footer-visitor-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}

.footer-visitor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-visitor-list div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #eaf2f8;
}

.footer-visitor-list b {
  font-weight: 600;
}

.footer-visitor-list .total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 15px;
}

/* =========================
   SOCIAL MEDIA
========================= */
.footer-social-box {
  text-align: right;
}

.bbpmp-footer-label {
  font-weight: 600;
  color: #ffffff;
}

.bbpmp-footer-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 12px;
  margin-top: 12px;
}

.bbpmp-footer-social-grid a {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.bbpmp-footer-social-grid a:hover {
  background: #ffffff;
  color: #0b3c5d;
  transform: translateY(-3px);
}

/* =========================
   FOOTER BOTTOM
========================= */
.bbpmp-footer-bottom {
  background: #000f1f;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.bbpmp-footer-copy {
  font-size: 13px;
  color: #cbd9e6;
}


@media (max-width: 576px) {
  .bbpmp-footer-social-grid {
    grid-template-columns: repeat(3, 40px);
    gap: 12px;
  }
}

/* SOSMED LEBIH RINGKAS */
.footer-social-box {
  max-width: 260px;
  margin-left: auto; /* dorong ke kanan */
}

/* Grid sosmed tetap 2 baris */
.bbpmp-footer-social-grid {
  grid-template-columns: repeat(3, 42px);
  gap: 12px;
  justify-content: end;
}

/* Baris ke-2 tetap di tengah */
.bbpmp-footer-social-grid a:nth-child(4) {
  grid-column: 2;
}

.footer-visitor-box {
  padding: 28px 30px;
}

.footer-visitor-list div {
  font-size: 15px;
}

.footer-visitor-list .total {
  font-size: 16px;
}

.bbpmp-footer-text {
  max-width: 90%;
  font-size: 15px;
}

@media (max-width: 768px) {
  .footer-social-box {
    margin: 0 auto;
    text-align: center;
  }

  .bbpmp-footer-social-grid {
    justify-content: center;
  }
}

/* ===============================
   FINAL FIX ICON COLOR (GLOBAL)
================================ */

/* PROGRAM PRIORITAS */
.program-icon__fa {
  background:#eaf2ff;
  color:#2563eb;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 30px;
  line-height: 1;
  transition: color .25s ease, transform .25s ease;
}

.program-card:hover .program-icon__fa {
  color: #084298 !important;
  transform: scale(1.12);
}

/* LAYANAN */
.layanan-icon__fa {
  color: #0d6efd !important;
  font-size: 28px;
  line-height: 1;
  transition: color .25s ease, transform .25s ease;
}

.layanan-icon__fa,
.layanan-icon img{
  font-size:22px;
  width:22px;
  height:22px;
  line-height:1;
}

.layanan-card:hover .layanan-icon__fa {
  color: #084298 !important;
  transform: scale(1.12);
}

/* =================================================
   NAVBAR HOVER DROPDOWN (DESKTOP ONLY)
================================================= */

/* AKTIFKAN HOVER HANYA DI DESKTOP */
@media (min-width: 992px){

  /* saat hover item dropdown */
  .navbar-bbpmp .nav-item.dropdown:hover > .dropdown-menu{
    display: block;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }

  /* pastikan dropdown tersembunyi default */
  .navbar-bbpmp .dropdown-menu{
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
  }

  /* hover link utama tetap putih */
  .navbar-bbpmp .nav-item.dropdown:hover > .nav-link{
    color: #ffffff !important;
  }

  /* submenu level 2 (dropend) */
  .navbar-bbpmp .dropdown-submenu:hover > .dropdown-menu{
    display: block;
    opacity: 1;
    visibility: visible;
  }
}


/* ===============================
   STATISTIK PENGUNJUNG (MAKLUMAT)
================================ */

.visitor-stat-card{
  background:#ffffff;
  border-radius:20px;
  padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  height:100%;
}

.visitor-stat-title{
  font-weight:800;
  font-size:18px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
}

.visitor-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.visitor-stat-item{
  background:#f8fafc;
  border-radius:14px;
  padding:16px;
  text-align:center;
}

.visitor-stat-item.total{
  grid-column:1 / -1;
  background:rgb(251, 210, 6);
  color:#fff;
}

.visitor-stat-item .label{
  font-size:13px;
  color:#6b7280;
  display:block;
}

.visitor-stat-item.total .label{
  color:#e0f2fe;
}

.visitor-stat-item .number{
  font-size:26px;
  font-weight:900;
  display:block;
  margin-top:6px;
}

/* Responsive */
@media (max-width: 576px){
  .visitor-stat-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 576px){

  /* ===============================
     1) ROOT & BODY (HEADER FIX)
  =============================== */
  :root{
    --bbpmp-header-h: 92px;
    --navbar-h: 64px;
  }

  body{
    padding-top: var(--bbpmp-header-h);
  }

  /* ===============================
     2) HEADER & LOGO
  =============================== */
  .top-logo-bar .container-fluid{
    min-height: 64px;
  }

  .brand-logo{
    height: 34px;
  }

  .brand-banner{
    height: 42px !important;
    max-width: 240px !important;
  }

  .brand-mini{
    height: 20px !important;
  }

  /* ===============================
     3) NAVBAR MOBILE (TOUCH FRIENDLY)
  =============================== */
  .navbar-bbpmp .navbar-nav .nav-link{
    padding: 10px 14px !important;
    font-size: 14px;
  }

  .navbar-bbpmp .dropdown-item{
    padding: 10px 14px !important;
    font-size: 13.5px;
  }

  .navbar-bbpmp .navbar-collapse{
    margin-top: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  /* ===============================
     4) SUBMENU MOBILE (RAPI)
  =============================== */
  .dropdown-submenu > .dropdown-menu{
    margin-left: 8px !important;
    padding-left: 8px;
    border-left: 2px solid rgba(255,255,255,.18);
  }

  .dropdown-submenu > a.dropdown-item::after{
    font-size: 14px;
  }

  /* ===============================
     5) HERO / CAROUSEL
  =============================== */
  .hero-slide{
    min-height: 260px;
  }

  .hero-title{
    font-size: 18px;
    line-height: 1.25;
  }

  .hero-content{
    left: 16px;
    right: 16px;
    bottom: 16px;
  }


  /* ===============================
     6) SECTION & CARD (RINGKAS)
  =============================== */
  .section-pad{
    padding: 56px 0;
  }

  .section-card,
  .detail-card,
  .side-card,
  .berita-card,
  .artikel-card,
  .buletin-card{
    padding: 14px !important;
    border-radius: 14px;
  }

  /* ===============================
     7) TYPOGRAPHY (NO JUSTIFY)
  =============================== */
  .detail-content,
  .berita-article,
  .buletin-detail-content,
  .content-sejarah,
  .tupoksi-text,
  .fasilitas-desc{
    text-align: left !important;
  }

  p,
  .detail-content p,
  .berita-article p{
    font-size: 15px;
    line-height: 1.8;
  }

  h1{ font-size: 22px; }
  h2{ font-size: 20px; }
  h3{ font-size: 18px; }


  /* ===============================
     8) FOOTER MOBILE
  =============================== */
  .bbpmp-footer-top{
    padding: 40px 0 30px;
  }

  .bbpmp-footer-text{
    max-width: 100%;
    font-size: 14px;
  }

  .footer-visitor-box{
    padding: 20px;
  }
}

/* =========================================================
   MOBILE FLOATING — STYLE LIKE BACK TO TOP
   ========================================================= */
@media (max-width: 576px){

  .floating-stack{
    right: 18px;
    bottom: 96px;   
    gap: 12px;
  }


  .fab-pill,
  .floating-buletin-pill{
    transform: none !important;
    width: 44px;
    height: 44px;
    padding: 0;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;   
    box-shadow: none;
  }


  .fab-pill__icon{
    width: 100%;
    height: 100%;
    min-width: auto;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 4px 10px rgba(0,0,0,.16);
  }


  .fab-pill__icon img{
    width: 17px;
    height: 17px;
    object-fit: contain;
  }


  .fab-pill__label,
  .floating-buletin-pill span{
    display: none !important;
  }
}

.layanan-jam-card {
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #f4f8ff);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

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

/* icon */
.icon-circle {
  width: 45px;
  height: 45px;
  background: #0d6efd;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hari */
.jam-hari {
  font-size: 14px;
  font-weight: 600;
  color: #f59e0b;
}

/* waktu */
.jam-waktu {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: 0.5px;
}

.jam-waktu span {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

/* spacing */
.jam-item {
  margin-bottom: 18px;
}

/* tutup */
.jam-tutup {
  font-weight: 600;
  color: #dc2626;
  font-size: 14px;
}

/* STATUS */
.status-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.status-open {
  background: #dcfce7;
  color: #16a34a;
}

.status-closed {
  background: #fee2e2;
  color: #dc2626;
}

/* JUDUL */
.layanan-jam-card h5 {
  font-size: 22px;
  font-weight: 700;
}

/* HARI */
.jam-hari {
  font-size: 15px;
  font-weight: 600;
  color: #f59e0b;
}

/* JAM (INI YANG DIBESARKAN) */
.jam-waktu {
  font-size: 24px; /* sebelumnya 20px */
  font-weight: 800;
  color: #1f2937;
  letter-spacing: 0.5px;
}

.jam-waktu span {
  font-size: 16px;
  font-weight: 600;
  color: #6b7280;
}

/* STATUS BADGE */
.status-badge {
  font-size: 14px;
  padding: 8px 16px;
}

/* ICON LEBIH BESAR */
.icon-circle {
  width: 55px;
  height: 55px;
  font-size: 20px;
}

/* SPACING LEBIH LEGA */
.jam-item {
  margin-bottom: 22px;
}

/* MINGGU */
.jam-tutup {
  font-size: 15px;
}

/* RESET BIAR TIDAK KENA STYLE GLOBAL */
.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 0;
  list-style: none;
}

/* HILANGKAN ICON LI (PENTING BANGET) */
.pagination li::before{
  content: none !important;
  display: none !important;
}

/* ITEM */
.page-item{
  list-style: none;
}

/* LINK */
.page-link{
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* HOVER */
.page-link:hover{
  background: #2563eb;
  color: #fff;
}

/* ACTIVE */
.page-item.active .page-link{
  background: #2563eb;
  color: #fff;
}

/* DISABLED */
.page-item.disabled .page-link{
  background: #e2e8f0;
  color: #94a3b8;
  pointer-events: none;
}

/* PREV NEXT */
.page-link[rel="prev"],
.page-link[rel="next"]{
  font-weight: 600;
}

/* OPTIONAL WRAPPER */
.pagination-wrapper{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* CARD WRAPPER */
.berita-card{
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* HOVER EFFECT */
.berita-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* IMAGE */
.berita-cover{
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.berita-cover img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.3s ease;
}

.berita-card:hover .berita-cover img{
  transform: scale(1.05);
}

/* BODY */
.berita-body{
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* DATE */
.berita-date{
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}

/* TITLE */
.berita-title{
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* TITLE HOVER */
.berita-title:hover{
  color: #2563eb;
}

/* EXCERPT */
.berita-excerpt{
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  margin-top: auto;
}

/* RESPONSIVE */
@media (max-width: 768px){
  .berita-cover img{
    height: 180px;
  }
}
.berita-card::after{
  content: "";
  height: 3px;
  width: 0;
  background: #2563eb;
  display: block;
  transition: 0.3s;
}

.berita-card:hover::after{
  width: 100%;
}

/* RESET PAGINATION */
.pagination{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 0;
  list-style: none;
}

/* HILANGKAN ICON LI */
.pagination li::before{
  content: none !important;
}

/* ITEM */
.page-item{
  list-style: none;
}

/* LINK */
.page-link{
  border-radius: 8px;
  padding: 8px 14px;
  background: #f1f5f9;
  border: none;
  color: #1e293b;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s;
}

/* HOVER */
.page-link:hover{
  background: #2563eb;
  color: #fff;
}

/* ACTIVE */
.page-item.active .page-link{
  background: #2563eb;
  color: #fff;
}

/* DISABLED */
.page-item.disabled .page-link{
  background: #e2e8f0;
  color: #94a3b8;
  pointer-events: none;
}

/* CARD */
.artikel-card{
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

/* IMAGE */
.artikel-thumb{
  position: relative;
  overflow: hidden;
}

.artikel-thumb img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 30%;
  transition: 0.3s ease;
}

.artikel-card:hover .artikel-thumb img{
  transform: scale(1.05);
}

/* BADGE */
.artikel-badge{
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* META */
.artikel-meta{
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
}

/* TITLE */
.artikel-title{
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* EXCERPT */
.artikel-excerpt{
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}

/* ACTION */
.artikel-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}

/* BUTTON */
.btn-ghost{
  background: transparent;
  color: #2563eb;
  font-weight: 600;
}

.btn-ghost:hover{
  text-decoration: underline;
}

/* ===== GLOBAL CARD SOSMED ===== */
.socmed-vid-card {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

/* ===== INSTAGRAM ===== */
.instagram-media {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* ===== TIKTOK ===== */
.tiktok-embed {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}


/* ===== YOUTUBE ===== */
.socmed-yt iframe {
  border-radius: 12px;
}

.socmed-content .row > div {
  display: flex;
}

.socmed-vid-card {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}


/* ===== PROGRAM PRIORITAS CLEAN ===== */
.program-box {
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
  padding: 60px;
  border-radius: 35px;
  backdrop-filter: blur(6px);

  box-shadow: 
    0 20px 50px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.6);


  max-width: 1150px;
  margin: auto;
  position: relative;
  z-index: 3;
  overflow: hidden;
}

/* HOVER HALUS */
.program-box:hover {
  transform: translateY(-4px);
}

/* JUDUL (TIDAK UBAH FONT) */
.program-title {
  font-weight: 700;
  color: #1d3557;
  font-size: 16px;
  margin-bottom: 10px;
}

/* DESKRIPSI */
.program-desc {
  color: #555;
  line-height: 1.6;
  font-size: 14px;
  max-width: 520px;
}

/* GAMBAR */
.program-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
  .program-box {
    padding: 25px;
    text-align: center;
  }

  .program-desc {
    margin: auto;
  }

  .program-img {
    margin-top: 20px;
    height: 200px;
  }

  .program-title {
    font-size: 14.5px;
  }
}

/* =====================================
   FIX ICON CAROUSEL PROTAS (FINAL)
===================================== */

/* HAPUS ICON DEFAULT BOOTSTRAP */
#programCarousel .carousel-control-prev-icon,
#programCarousel .carousel-control-next-icon{
  background-image: none !important;
}

/* BUAT PANAH SENDIRI */
#programCarousel .carousel-control-prev-icon::after{
  content: "‹";
  font-size: 28px;
  color: #0b2e59;
}

#programCarousel .carousel-control-next-icon::after{
  content: "›";
  font-size: 28px;
  color: #0b2e59;
}

/* STYLE BULAT ELEGAN */
#programCarousel .carousel-control-prev-icon,
#programCarousel .carousel-control-next-icon{
  width: 50px;
  height: 50px;
  border-radius: 50%;

  background: rgba(255,255,255,0.9);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

/* POSISI */
#programCarousel .carousel-control-prev{
  left: 10px;
}

#programCarousel .carousel-control-next{
  right: 10px;
}




/* =========================================================
   END
   ========================================================= */