/* ===========================
   VARIABEL WARNA DWP
   =========================== */
:root{
  --dwp-green:       #eea57c;  /* hijau utama cadangan #1A8754 #eea57c*/ 
  --dwp-green-dark:  #0F6848;  /* hijau gelap */
  --dwp-cream:       #F6EFD2;  /* cream hover */
  --dwp-red:         #D53F3F;  /* merah soft untuk hapus */
  --dwp-red-light:   #FCE4E4;

  /* alias agar .btn-brand tetap jalan */
  --brand-primary:       var(--dwp-green);
  --brand-primary-dark:  var(--dwp-green-dark);
}

/* ===========================
   NAVBAR (Bootstrap)
   =========================== */
.navbar.navbar-dwp { background-color: var(--dwp-green) !important; }
.navbar-dwp .navbar-brand,
.navbar-dwp .nav-link { color:#fff !important; font-weight:500; }

.navbar-dwp .nav-link:hover,
.navbar-dwp .nav-link:focus {
  background-color: var(--dwp-cream);
  color: var(--dwp-green-dark) !important;
  border-radius: .5rem;
  transition: .25s;
}

.navbar-dwp .navbar-toggler { border-color: rgba(255,255,255,.5); }
.navbar-dwp .navbar-toggler-icon { filter: invert(1); }

/* ===========================
   TOMBOL (Publik - Bootstrap)
   =========================== */
.btn-brand { background: var(--brand-primary); color:#fff; border:none; }
.btn-brand:hover { background: var(--brand-primary-dark); color:#fff; }

.btn-success {
  background-color: var(--dwp-green) !important;
  border-color: var(--dwp-green) !important;
  color:#fff !important;
  transition: all .3s ease;
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--dwp-cream) !important;
  border-color: var(--dwp-cream) !important;
  color: var(--dwp-green) !important;
}

.btn-outline-success {
  border-color: var(--dwp-green) !important;
  color: var(--dwp-green) !important;
  transition: all .3s ease;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--dwp-cream) !important;
  border-color: var(--dwp-cream) !important;
  color: var(--dwp-green) !important;
}

/* ===========================
   TOMBOL (Admin - Tailwind custom)
   gunakan class .btn-dwp / .btn-outline-dwp / .btn-outline-danger
   =========================== */
.btn-dwp{
  background-color: var(--dwp-green);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:.375rem;
  font-weight:500;
  transition: all .25s ease;
}
.btn-dwp:hover{
  background-color: var(--dwp-cream);
  color: var(--dwp-green);
}

.btn-outline-dwp{
  background:transparent;
  border:2px solid var(--dwp-green);
  color:var(--dwp-green);
  padding:.5rem 1rem;
  border-radius:.375rem;
  font-weight:500;
  transition: all .25s ease;
}
.btn-outline-dwp:hover{
  background-color: var(--dwp-cream);
  border-color: var(--dwp-cream);
  color: var(--dwp-green);
}

.btn-outline-danger{
  background:transparent;
  border:2px solid var(--dwp-red);
  color:var(--dwp-red);
  padding:.5rem 1rem;
  border-radius:.375rem;
  font-weight:500;
  transition: all .25s ease;
}
.btn-outline-danger:hover{
  background-color: var(--dwp-red-light);
  color: var(--dwp-red);
}

/* ===========================
   SLIDER
   =========================== */
.slider-img{ max-height:520px; object-fit:cover; }
.carousel-caption{
  background: rgba(0,0,0,.25);
  padding:1rem 1.25rem;
  border-radius:.75rem;
}

/* ===========================
   LAYANAN CEPAT (kartu shortcut)
   =========================== */
.service-tile{
  display:flex; gap:.75rem; align-items:center;
  border:1px solid #eef2f7; border-radius:.85rem; padding:1rem 1.1rem; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition: transform .16s ease, box-shadow .16s ease;
}
.service-tile:hover{ transform: translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.06); }
.service-icon{
  width:40px; height:40px; border-radius:.75rem;
  display:grid; place-items:center;
  background:#eff6ff; color:#0B63CE;
}

/* ===========================
   BADGE SOFT (publik)
   =========================== */
.badge-soft{ background:#e9f2ff; color:#0B63CE; border:1px solid #dbe7ff; }

.table td, .table th { vertical-align: middle; }
.badge.bg-success-subtle { background:#E6F6ED; color:#1A8754; border:1px solid #CBE9D9; }
.badge.bg-secondary-subtle { background:#F1F5F9; color:#64748B; border:1px solid #E2E8F0; }

/* ===========================
   TABEL ADMIN (opsional)
   =========================== */
table { width:100%; border-collapse: separate; border-spacing: 0 8px; }
thead { background:#f8fafc; color:#334155; font-weight:600; }
tbody tr { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.05); border-radius:.375rem; }
td, th { padding:.75rem 1rem; vertical-align: middle; }

/* Navbar selalu di atas slider/hero dan tetap terlihat saat scroll */
.navbar.navbar-dwp{
  position: sticky;   /* pakai fixed kalau mau benar2 menempel */
  top: 0;
  z-index: 2000;      /* pastikan di atas carousel */
}

/* Pastikan slider tidak menutupi navbar */
.carousel, #homeCarousel, .hero, .hero-wrap {
  position: relative;
  z-index: 1;
}

/* Jika nanti .navbar dibuat fixed, beri jarak konten di body */
body.has-fixed-navbar { padding-top: 72px; } /* sesuaikan tinggi navbar */

/* Full-bleed section: merentang 100vw di dalam layout terpusat */
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

/* Tinggi slider + crop rapi */
.hero-img{
  width: 100%;
  height: 65vh;           /* tinggi di hp & tablet */
  object-fit: cover;
}
@media (min-width: 992px){
  .hero-img{ height: 78vh; }  /* lebih tinggi di desktop */
}

/* Pastikan slider nempel ke header dan tidak ketiban layer */
.navbar.navbar-dwp{
  position: sticky;  /* atau fixed kalau mau selalu menempel saat scroll */
  top: 0;
  z-index: 2000;
}
#homeCarousel,
#homeCarousel .carousel-inner,
#homeCarousel .carousel-item{ z-index: 1; }

/* Jika navbar kamu pakai position: fixed; aktifkan ini:
body{ padding-top: 72px; }  -- menyesuaikan tinggi navbar
*/

/* full-bleed sudah ada sebelumnya */
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

/* ✅ Hapus semua gap di atas slider */
.no-gap,
.no-gap > * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Jika ada container/section tepat setelah navbar, paksa tanpa margin */
.navbar + .container,
.navbar + .container-fluid,
.navbar + .full-bleed,
header + .full-bleed,
header + .container,
header + .container-fluid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Navbar tidak memberi jarak ke bawah */
.navbar.navbar-dwp{
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  position: sticky;  /* atau fixed jika mau menempel saat scroll */
  top: 0;
  z-index: 2000;
}

/* Pastikan body tidak diberi padding top (kalau tidak pakai fixed) */
body { margin: 0; }
body.has-fixed-navbar { padding-top: 0 !important; }

/* Pastikan slider tidak menutupi navbar */
#homeCarousel, .carousel { position: relative; z-index: 1; }

/* Tinggi gambar hero */
.hero-img{ width:100%; height: 65vh; object-fit: cover; }
@media (min-width: 992px){ .hero-img{ height: 78vh; } }

/* Dropdown di navbar hijau DWP */
.navbar-dwp .dropdown-menu{
  border: 1px solid #e5e7eb;          /* garis halus */
  border-radius: .75rem;               /* sudut membulat */
  padding: .5rem;                      /* ruang dalam */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  margin-top: .5rem;                   /* sedikit turun dari link */
  z-index: 2100;                       /* pastikan di atas konten */
}

.navbar-dwp .dropdown-item{
  color:#334155;                       /* slate-700 */
  padding: .5rem .75rem;
  border-radius: .5rem;
  transition: .2s ease;
}

.navbar-dwp .dropdown-item:hover,
.navbar-dwp .dropdown-item:focus{
  background: var(--dwp-cream);        /* cream khas DWP */
  color: var(--dwp-green-dark);        /* hijau gelap */
}

/* Saat item aktif (Bootstrap) */
.navbar-dwp .dropdown-item.active,
.navbar-dwp .dropdown-item:active{
  background: var(--dwp-cream);
  color: var(--dwp-green-dark);
}

/* Warna caret (segitiga kecil) di link Profil jadi putih */
.navbar-dwp .dropdown-toggle::after{
  border-top-color:#fff !important;
}

/* Opsional: jarak dan efek hover link navbar agar konsisten */
.navbar-dwp .nav-link{
  padding: .5rem .85rem;
  border-radius: .5rem;
}
.navbar-dwp .nav-link:hover,
.navbar-dwp .nav-link:focus{
  background: var(--dwp-cream);
  color: var(--dwp-green-dark) !important;
}

/* Layout agar footer selalu di bawah */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* pastikan konten utama fleksibel dan mendorong footer ke bawah */
main, .container.py-5 {
  flex: 1 0 auto;
}

/* footer selalu di bawah */
footer {
  flex-shrink: 0;
  background-color: var(--dwp-green);
  color: #fff;
  padding: 2rem 0;
}

/* Struktur Organisasi */
.card .card-img-top{
  height: 20px;
  object-fit: cover;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}




/* Foto bulat sempurna */
.avatar-250 {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Avatar kecil & bulat (paksa menang dari utilitas lain) */
.struktur-avatar{
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Kontrol & pagination Swiper berwarna DWP */
.org-swiper .swiper-button-next,
.org-swiper .swiper-button-prev {
  color: var(--dwp-green);
  width: 36px; height: 36px;
}
.org-swiper .swiper-pagination-bullet-active {
  background: var(--dwp-green);
}

.card-img-top, .ratio img {
  object-fit: cover;
  border-radius: .5rem .5rem 0 0;
}

/* intagram */
/* IG hover kecil */
a.d-block.position-relative.rounded-3.overflow-hidden img {
  transition: transform .25s ease;
}
a.d-block.position-relative.rounded-3.overflow-hidden:hover img {
  transform: scale(1.04);
}

.gallery-item { position: relative; overflow: hidden; border-radius: .75rem; }
.gallery-item img { display:block; width:100%; height:auto; }
.gallery-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  color:#fff; opacity:0; transition:opacity .2s ease;
  display:flex; align-items:flex-end; padding:12px;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }

/* thumbnail seragam: rasio 16:9, dipotong rapi */
.card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;  /* atau 4 / 3 sesuai selera */
  object-fit: cover;     /* crop rapi di tengah */
  display: block;
  background: #f6f7f9;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
/* ====== Galeri (Publik) – Thumbnail seragam ====== */
.gallery-thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* ubah ke 4/3 jika mau: 4 / 3 */
  object-fit: cover;    /* crop rapi di tengah */
  display: block;
  background: #f6f7f9;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}

/* Jika butuh kartu konsisten */
.gallery-card {
  border-radius: .75rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Konten di bawah gambar */
.gallery-body { padding: 1rem; }
.gallery-title { font-weight: 600; margin-bottom: .25rem; }
.gallery-caption { color: #4b5563; font-size: .9rem; }


/* Tampilkan gambar utuh (tanpa crop), skala mengikuti lebar kontainer */
  .event-poster {
    width: 50%;
    height: auto;         /* jaga aspek rasio asli */
    object-fit: contain;  /* guard kalau suatu saat ada height dipaksa */
    display: block;
  }