:root {
  --charcoal: #1C1D1F;
  --charcoal-2: #2B2D30;
  --concrete: #F2F0EA;
  --steel: #5B5F68;
  --safety: #E8A317;
  --safety-dark: #B57D0F;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  color: var(--charcoal);
}

.font-head {
  font-family: 'Archivo Black', Arial, sans-serif;
}

/* Navbar */
.navbar-brand {
  font-family: 'Archivo Black', Arial, sans-serif;
  font-size: 1.15rem;
  color: #fff !important;
  letter-spacing: .3px;
}
.navbar-brand .dot { color: var(--safety); }
.navbar-dark .nav-link {
  color: #D8D5CC !important;
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 .75rem;
}
.navbar-dark .nav-link.active,
.navbar-dark .nav-link:hover { color: var(--safety) !important; }
.btn-safety {
  background-color: var(--safety);
  border-color: var(--safety);
  color: var(--charcoal);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .5px;
}
.btn-safety:hover { background-color: var(--safety-dark); border-color: var(--safety-dark); color: #fff; }
.btn-outline-light-custom {
  border: 2px solid #D8D5CC;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .5px;
}
.btn-outline-light-custom:hover { background: #fff; color: var(--charcoal); }

/* Hero */
.hero-section {
  background: linear-gradient(180deg, rgba(28,29,31,.90), rgba(28,29,31,.95)),
              url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=70') center/cover;
  color: #fff;
  padding: 7rem 0 6rem;
}
.eyebrow {
  color: var(--safety);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Stats */
.stats-bar { background: var(--concrete); padding: 2.25rem 0; }
.stat-num { font-family: 'Archivo Black', Arial, sans-serif; font-size: 2rem; }
.stat-label { font-size: .78rem; color: var(--steel); text-transform: uppercase; letter-spacing: .5px; }

/* Section titles */
.section-eyebrow {
  color: var(--safety-dark);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.bg-charcoal { background-color: var(--charcoal); color: #fff; }
.bg-charcoal .section-eyebrow { color: var(--safety); }
.bg-charcoal p { color: #D8D5CC; }
.text-steel { color: var(--steel); }

/* Service card */
.service-card {
  border: 1px solid #E3E1D9;
  border-radius: .5rem;
  height: 100%;
}
.service-num { font-family: 'Archivo Black', Arial, sans-serif; color: var(--safety); font-size: .9rem; }

/* Project / gallery images */
.proj-tile, .gallery-tile {
  position: relative;
  border-radius: .4rem;
  overflow: hidden;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.proj-tile.tall { aspect-ratio: 4/5; }
.tile-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent);
  color: #fff;
  padding: 2.5rem .9rem .8rem;
  font-size: .85rem;
}
.tile-caption .cap-loc { font-size: .72rem; color: #D8D5CC; }

/* Mobile (1 kolom, tile full-width) - caption sedikit lebih lega */
@media (max-width: 767.98px) {
  .gallery-tile { aspect-ratio: 16/10; }
  .tile-caption { font-size: .9rem; padding: 2.5rem 1rem .9rem; }
  .tile-caption .cap-loc { font-size: .75rem; }
}

/* Desktop 4 kolom - tile lebih ramping, caption dirapikan supaya tidak sesak */
@media (min-width: 992px) {
  .gallery-tile { aspect-ratio: 1/1; }
  .tile-caption { font-size: .78rem; padding: 2rem .7rem .65rem; }
  .tile-caption .cap-loc { font-size: .66rem; }
}

.filter-pill {
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
}

/* CTA band */
.cta-band { background: var(--safety); padding: 3.5rem 0; }
.cta-band h2 { font-family: 'Archivo Black', Arial, sans-serif; color: var(--charcoal); }

/* Timeline (about) */
.tl-year {
  font-family: 'Archivo Black', Arial, sans-serif;
  color: var(--safety-dark);
  font-size: 1.3rem;
}
.tl-row { border-bottom: 1px solid #E3E1D9; padding: 1.5rem 0; }
.tl-row:last-child { border-bottom: none; }

.value-item { border-left: 3px solid var(--safety); padding-left: 1rem; }

.team-photo {
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  border-radius: .4rem;
}

/* Offcanvas mobile menu */
.offcanvas {
  background-color: var(--charcoal);
  color: #fff;
  width: 280px;
}
.offcanvas-header {
  border-bottom: 1px solid #3A3D42;
}
.offcanvas-title { font-size: 1rem; }
.offcanvas .nav-link {
  color: #D8D5CC !important;
  font-weight: 600;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: .8rem 0;
  border-bottom: 1px solid #3A3D42;
}
.offcanvas .nav-item:last-child .nav-link { border-bottom: none; }
.offcanvas .nav-link.active,
.offcanvas .nav-link:hover { color: var(--safety) !important; }

footer { background: var(--charcoal); color: #D8D5CC; }

/* ===== Floating buttons (WhatsApp + Back to top) ===== */
.whatsapp-float-btn,
.back-to-top-btn {
  position: fixed;
  right: 20px;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.whatsapp-float-btn {
  bottom: 20px;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  color: #fff;
}
.whatsapp-float-btn svg { width: 28px; height: 28px; }
.whatsapp-float-btn:hover { background-color: #1EBE5A; color: #fff; }

.back-to-top-btn {
  bottom: 88px;
  width: 46px;
  height: 46px;
  background-color: var(--charcoal);
  color: var(--safety);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top-btn svg { width: 20px; height: 20px; }
.back-to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top-btn:hover { background-color: var(--charcoal-2); color: var(--safety); }

@media (max-width: 575.98px) {
  .whatsapp-float-btn { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .whatsapp-float-btn svg { width: 25px; height: 25px; }
  .back-to-top-btn { right: 14px; bottom: 76px; width: 42px; height: 42px; }
  .back-to-top-btn svg { width: 18px; height: 18px; }
}

/* ===== Lightbox (popup zoom gambar/video) ===== */
.modal-backdrop.show { opacity: .88; background-color: #000; }
.lightbox-content {
  background: transparent;
  border: none;
}

/* Popup diperkecil supaya muat penuh di layar laptop/mobile,
   termasuk ruang untuk tombol close di dalamnya */
.lightbox-dialog {
  max-width: 560px;
}

/* Tombol close sekarang OVERLAY DI DALAM kartu (pojok kanan atas
   gambar), bukan di luar batas dialog — jadi selalu terjangkau
   dalam layar berapa pun tinggi kartunya */
.lightbox-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 10;
  width: 32px;
  height: 32px;
  background-color: rgba(28, 29, 31, 0.6) !important;
  background-size: .7rem;
  border-radius: 50%;
  opacity: 1;
  margin: 0;
}
.lightbox-close:hover { background-color: rgba(28, 29, 31, 0.85) !important; }

/* Satu kartu utuh: gambar/video menyatu langsung dengan caption,
   tanpa jarak/gap, dibungkus 1 div dengan sudut membulat bersama */
.lightbox-card {
  position: relative;
  background: #fff;
  border-radius: .5rem;
  overflow: hidden;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.lightbox-card #lightboxBody {
  flex-shrink: 0;
}
.lightbox-card #lightboxBody img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: #000;
}
.lightbox-card #lightboxBody iframe {
  display: block;
  width: 100%;
}
.lightbox-card .lightbox-caption {
  overflow-y: auto;
}

/* Caption: background putih, menyatu langsung di bawah gambar/video */
.lightbox-caption {
  padding: 1.1rem 1.4rem;
  background: #fff;
  text-align: center;
}
.lightbox-caption .lightbox-title {
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
}
.lightbox-caption .lightbox-meta {
  color: var(--safety-dark);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: .3rem;
}
.lightbox-caption .lightbox-desc {
  color: var(--steel);
  font-size: .85rem;
  line-height: 1.5;
  margin: .55rem auto 0;
  max-width: 460px;
}

/* Responsive: layar kecil (mobile) - padding & font sedikit lebih ringkas
   supaya proporsional dengan modal yang juga menyempit */
@media (max-width: 575.98px) {
  .lightbox-card { border-radius: .4rem; max-height: 92vh; }
  .lightbox-card #lightboxBody img { max-height: 45vh; }
  .lightbox-close { width: 28px; height: 28px; top: .4rem; right: .4rem; }
  .lightbox-caption {
    padding: .85rem 1rem;
  }
  .lightbox-caption .lightbox-title { font-size: .92rem; }
  .lightbox-caption .lightbox-meta { font-size: .68rem; }
  .lightbox-caption .lightbox-desc { font-size: .78rem; margin-top: .4rem; }
}

/* Modal dialog: beri sedikit jarak dari tepi layar di mobile supaya
   caption & tombol close tidak mepet ke ujung viewport */
@media (max-width: 575.98px) {
  #lightboxModal .modal-dialog {
    margin: 1rem;
  }
}

/* Badge ikon play di atas thumbnail video */
.gallery-tile { cursor: pointer; }
.play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  background: rgba(232, 163, 23, 0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.gallery-tile:hover .play-badge { transform: translate(-50%, -50%) scale(1.08); }

/* Desktop 4 kolom - badge play sedikit lebih kecil supaya proporsional di tile yang lebih ramping */
@media (min-width: 992px) {
  .play-badge { width: 44px; height: 44px; }
}

/* ===== Pagination ===== */
.pagination .page-link {
  color: var(--charcoal);
  border-color: #E3E1D9;
  font-weight: 600;
  font-size: .85rem;
}
.pagination .page-item.active .page-link {
  background-color: var(--safety);
  border-color: var(--safety);
  color: var(--charcoal);
}
.pagination .page-item.disabled .page-link { color: #B9B9B9; }
footer h6 { color: #fff; text-transform: uppercase; font-size: .8rem; letter-spacing: .5px; }
footer a { color: #D8D5CC; text-decoration: none; }
footer a:hover { color: var(--safety); }