/* assets/styles.css */

/* Background global: gradien modern + pola halus */
:root{
  --grad-1: #0d6efd;
  --grad-2: #6610f2;
  --grad-3: #20c997;
  --glass-bg: rgba(255,255,255,0.6);
  --glass-brd: rgba(255,255,255,0.3);
}
html { scroll-behavior: smooth; } /* anchor halus [web:124] */
body { 
  scroll-padding-top: 4.5rem; 
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(32,201,151,0.15), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(13,110,253,0.12), transparent 55%),
    /* fix syntax: no space in 180deg */
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

/* Tinggi default map/hero offset akan dikalibrasi via JS */
@media (max-width: 991.98px){
  body { scroll-padding-top: 5.5rem; } /* guard kecil; JS tetap menimpa saat runtime [web:75] */
}

/* Jika memakai .ratio wrapper untuk image service, bisa override aspect ratio di breakpoint (opsional) */
.service-media { --bs-aspect-ratio: 70%; }                  /* mobile: lebih tinggi dari 4:3 default [web:109] */
@media (min-width: 768px){
  .service-media { --bs-aspect-ratio: 66.6667%; }           /* ~3:2 di tablet [web:109] */
}
@media (min-width: 992px){
  .service-media { --bs-aspect-ratio: 62.5%; }              /* ~16:10 di desktop [web:109] */
}

/* Opsi tanpa ratio: tinggi fleksibel responsif untuk gambar layanan */
.service-media-fixed{
  width: 100%;
  height: clamp(200px, 28vh, 340px);  /* perbesar area visual [web:112] */
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
@media (min-width: 992px){
  .service-media-fixed{
    height: clamp(260px, 32vh, 420px); /* lebih besar di desktop [web:112] */
  }
}

/* Gambar cover utilitas */
.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* isi penuh, crop proporsional [web:110] */
  object-position: center;
  display: block;
}

/* Hero gradient animated */
.hero{
  background: linear-gradient(135deg, var(--grad-1), var(--grad-2), var(--grad-3));
  background-size: 200% 200%;
  color:#fff;
  animation: gradientMove 12s ease infinite;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
@keyframes gradientMove{
  0%{background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0% 50%;}
}

/* Glass sections */
.section-glass{
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: saturate(140%) blur(6px);
  border-top: 1px solid var(--glass-brd);
  border-bottom: 1px solid var(--glass-brd);
}

.carousel-item { position: relative; }

.carousel-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%; /* Tinggi area gradien */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  pointer-events: none; /* Agar tidak menghalangi interaksi dengan carousel */
}

/* Carousel image fix height */
.carousel-img{
  height: 320px;
  object-fit: cover;   /* jaga proporsi isi penuh [web:124] */
}

.carousel-caption {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Tambahkan shadow tipis agar teks lebih tajam */
  z-index: 1; /* Pastikan caption di atas overlay */
}

/* Cards hover lift */
.lift{
  transition: transform .25s ease, box-shadow .25s ease;
}
.lift:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}
.lift-sm{
  transition: transform .25s ease, box-shadow .25s ease;
}
.lift-sm:hover{ transform: translateY(-3px); }

/* Product/Service cards image sizing (untuk kasus kartu tanpa wrapper custom) */
.product-card img, .service-card img {
  object-fit: cover;   /* utilitas object-fit [web:110] */
  height: 160px;       /* bisa dinaikkan jika ingin lebih besar */
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

/* Floating WhatsApp */
.whatsapp-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 1030;
}

/* Reveal on scroll */
.fade-up{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.show-in{
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.delay-1{ transition-delay: .15s; }
.delay-2{ transition-delay: .3s; }
.delay-3{ transition-delay: .45s; }

/* Decorative waves */
.waves{
  position:absolute; inset: -20% -10% auto -10%; height: 260px; pointer-events:none;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(13,110,253,.12), transparent 60%),
    radial-gradient(60% 50% at 70% 60%, rgba(102,16,242,.12), transparent 60%);
  filter: blur(20px);
}

/* Utility */
.section-title{
  font-weight: 700;
  letter-spacing: .3px;
}

/* Navbar glass + blur helper */
.backdrop-blur{
  backdrop-filter: saturate(160%) blur(8px);
}

/* Modal rounding */
.modal-content{
  border-radius: 1rem;
}

/* Pastikan kartu servis menjadi kolom penuh dan tidak menyisakan celah */
.service-card {
  display: flex !important;           /* jadikan flex container vertikal [web:119] */
  flex-direction: column !important;  /* susun vertikal: media -> body -> footer [web:119] */
}

/* Kontainer gambar tanpa celah bawah */
.service-card .service-media-fixed {
  margin: 0 !important;               /* hilangkan margin yang memicu gap [web:187] */
  line-height: 0 !important;          /* hilangkan celah baseline img inline [web:187] */
}

/* Gambar block agar tidak menyisakan whitespace */
.service-card .service-media-fixed > img {
  display: block !important;          /* hapus jarak inline image [web:187] */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body kartu fleksibel, isi rapat, tombol didorong ke bawah */
.service-card .card-body {
  display: flex !important;           /* gunakan flex agar tombol bisa terdorong [web:119] */
  flex-direction: column !important;
  padding-top: .5rem !important;      /* kurangi padding atas agar tidak tampak jauh [web:119] */
  padding-bottom: .75rem;             /* opsional: rapikan */
  gap: .35rem;                        /* jarak kecil antar judul & teks [web:187] */
}

/* Dorong tombol ke bawah body */
.service-card .card-body .btn {
  margin-top: auto !important;        /* dorong ke bagian bawah body [web:187] */
}

/* Jika masih ada jarak, nol-kan margin top dari heading/paragraph di dalam body */
.service-card .card-body > h5,
.service-card .card-body > p {
  margin-top: 0 !important;           /* cegah margin collapse di atas [web:187] */
}

/* Tambahan: hilangkan border/padding atas default card agar sambungan rapi */
.service-card .card-img-top { 
  margin-bottom: 0 !important;        /* jika ada varian card-img-top dipakai [web:119] */
}