/* PT. TALANG GIFA PERKASA — main-style.css */
@import url('base.css');
@import url('notice.css');
@import url('topbar.css');
@import url('navbar.css');
@import url('hero.css');
@import url('vm.css');
@import url('proyek.css');
@import url('tentang.css');
@import url('timeline.css');
@import url('faq.css');
@import url('team.css');
@import url('layanan.css');
@import url('stats.css');
@import url('testimoni.css');
@import url('footer.css');
@import url('clients.css');
@import url('pages.css');
/* ===================== SECTIONS SHARED ===================== */
.section { padding: 96px 0; }
.section-header { margin-bottom: 56px; }
.section-header.center { text-align: center; }
.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(42,125,225,0.08);
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
}
.section-desc { margin-top: 14px; color: var(--muted); max-width: 560px; margin-left: auto; margin-right: auto; }


/* ===================== ANIMATIONS ===================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .layanan-grid { grid-template-columns: repeat(2,1fr); }
  .kontak-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .kontak-form-wrap { grid-column: 1/-1; }
}

@media (max-width: 768px) {
  .topbar-text { display: none; }
  .hamburger { display: flex; }
  .nav-cart { order: 2; margin-left: 0; }

  .nav-links {
    display: none;
    position: fixed;
    top: calc(var(--topbar-h) + var(--navbar-h));
    left: 0; width: 100%;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 28px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    z-index: 999;
  }
  .nav-links.open { display: flex; }
  .nav-item { padding: 12px 16px; font-size: 15px; }
  .proto-btn { text-align: center; }

  .hero-cards { grid-template-columns: 1fr; }
  .hero-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .hero-card:last-child { border-bottom: none; }

  .tentang-grid { grid-template-columns: 1fr; gap: 28px; }
  .layanan-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .testi-grid { grid-template-columns: 1fr; }
  .kontak-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom-inner { flex-direction: column; gap: 6px; text-align: center; }
  .section { padding: 64px 0; }
}
/* Sembunyikan elemen yang nyasar setelah footer */
.pg-tentang footer ~ * {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* =====================================================
   LCARD SLIDER — Auto-slide gambar pada card produk
   Scope: HANYA .lcard-slider di dalam .layanan-card
   Tidak mempengaruhi card lain di halaman manapun
   ===================================================== */

/* --- Wrapper slider (menggantikan .lcard-img biasa) ---
   position:relative agar slide & elemen absolut di dalam
   tepat posisinya. overflow:hidden memotong slide yang
   sedang bergeser keluar batas card.                   */
.lcard-slider {
  position: relative;
  height: 200px;          /* tinggi area gambar pada card */
  overflow: hidden;
  background: #e8eef8;    /* warna bg saat gambar belum muat */
  flex-shrink: 0;
}

/* --- Setiap slide ---
   Posisi absolute → semua slide menumpuk di tempat yang sama.
   opacity + transform dipakai untuk transisi fade+geser.
   pointer-events:none saat tidak aktif agar tidak
   mengganggu klik pada elemen di atasnya.              */
.lcard-slider .lslide {
  position: absolute;
  inset: 0;               /* top:0 right:0 bottom:0 left:0 */
  opacity: 0;
  transform: translateX(6%);   /* mulai sedikit ke kanan */
  transition: opacity 0.65s ease, transform 0.65s ease;
  pointer-events: none;
}

/* --- Slide aktif: tampil & di posisi normal --- */
.lcard-slider .lslide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 1;
}

/* --- Gambar di dalam slide: isi penuh, proporsi terjaga --- */
.lcard-slider .lslide img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* gambar memenuhi kotak tanpa distorsi */
  object-position: center;  /* fokus ke tengah gambar */
  display: block;
  transition: transform 0.5s ease;
}

/* Efek zoom ringan saat card di-hover */
.layanan-card:hover .lcard-slider .lslide.active img {
  transform: scale(1.05);
}

/* --- Placeholder icon (tampil bila SEMUA gambar error) ---
   Kondisi: .lcard-slider.no-img → sembunyikan semua slide,
   tampilkan placeholder.                                 */
.lcard-slider .lcard-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  color: rgba(42,125,225,0.18);
  pointer-events: none;
  z-index: 0;
}

/* Placeholder tersembunyi bila ada slide (gambar ada) */
.lcard-slider:not(.no-img) .lcard-placeholder {
  display: none;
}

/* Sembunyikan semua slide saat semua gambar gagal */
.lcard-slider.no-img .lslide {
  display: none;
}

/* --- Badge kategori (IT / Mebel / ATK dll) ---
   z-index:3 agar berada di atas slide gambar.         */
.lcard-slider .lcard-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: var(--accent, #2a7de1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  pointer-events: none;
}

/* --- Dot indicator (titik di bawah slider) ---
   Posisi absolute di pojok bawah tengah slider.
   z-index:3 agar tampil di atas gambar.               */
.lcard-slider .lslider-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
}

/* Dot default: kecil, transparan-putih */
.lcard-slider .lslider-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.5);
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

/* Dot aktif: melebar jadi pill, opak penuh */
.lcard-slider .lslider-dots .dot.active {
  width: 18px;
  background: rgba(255,255,255,0.95);
}