/* ==========================================================================
   Landing Page — SIPAM
   Dimuat hanya di resources/views/user/home.blade.php lewat @push('styles').
   Tidak memengaruhi halaman lain.
   ========================================================================== */

:root {
  --landing-primary: #54a8c7;
  --landing-primary-dark: #3a92b5;
  --landing-navy: #1a3a4a;
  --landing-bg-soft: #f4f9fb;
}

/* ---- Utilitas umum: reveal (dipakai semua section) ---- */

.reveal {
  will-change: opacity, transform;
}

/*
 * .js-reveal (kelas di <html> yang membuat .reveal di atas mulai dari
 * opacity:0) di-set oleh inline <script> bersama di home.blade.php, dan
 * rule .js-reveal .reveal{opacity:0} juga didefinisikan di sana — dipakai
 * bareng oleh V1 & V2, tidak diulang di sini.
 */

.landing-badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  border-radius: 50rem;
  background-color: rgba(84, 168, 199, .15);
  color: var(--landing-primary-dark);
}

/* ---- Hero ---- */

.landing-hero {
  position: relative;
  padding-bottom: 6rem;
  background: linear-gradient(160deg, #0f2a38 0%, #163b4d 55%, #1a4256 100%);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.landing-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--landing-primary);
}

.hero-illustration {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.hero-illustration__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
}

.hero-illustration__blob--a {
  width: 260px;
  height: 260px;
  background: var(--landing-primary);
  top: 10%;
  left: 15%;
}

.hero-illustration__blob--b {
  width: 200px;
  height: 200px;
  background: #ffffff;
  bottom: 8%;
  right: 10%;
  opacity: .12;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-illustration__blob--a { animation: landing-float 7s ease-in-out infinite; }
  .hero-illustration__blob--b { animation: landing-float 9s ease-in-out infinite reverse; }
}

@keyframes landing-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.05); }
}

/* Ilustrasi asli (vektor tema) sebagai pusat visual, dikelilingi 5 badge
   ikon layanan. Gambar sendiri punya latar transparan, jadi blob di
   belakang tetap terlihat di sekelilingnya. */
.hero-illustration__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Lima kartu ikon layanan melayang di sekeliling ilustrasi — motion
   (mengambang), bukan 3D (tidak ada perspective/rotateX/rotateY). */
.hero-illustration__card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}

.hero-illustration__card--1 { top: -6%; left: 0; }
.hero-illustration__card--2 { top: -8%; right: 6%; }
.hero-illustration__card--3 { top: 42%; right: -6%; }
.hero-illustration__card--4 { bottom: -6%; right: 18%; }
.hero-illustration__card--5 { bottom: -8%; left: 4%; }

@media (prefers-reduced-motion: no-preference) {
  .hero-illustration__card--1 { animation: landing-float 6s ease-in-out infinite; }
  .hero-illustration__card--2 { animation: landing-float 7.5s ease-in-out infinite .4s; }
  .hero-illustration__card--3 { animation: landing-float 8.5s ease-in-out infinite .8s; }
  .hero-illustration__card--4 { animation: landing-float 7s ease-in-out infinite 1.2s; }
  .hero-illustration__card--5 { animation: landing-float 9s ease-in-out infinite .2s; }
}

/* ---- Layanan ---- */

.landing-layanan { background: #ffffff; }

.service-card {
  display: block;
  height: 100%;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid rgba(26, 58, 74, .08);
  box-shadow: 0 10px 30px rgba(26, 58, 74, .06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.service-card:hover {
  box-shadow: 0 20px 45px rgba(84, 168, 199, .22);
  border-color: rgba(84, 168, 199, .35);
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .service-card { transition: none; }
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  background: rgba(84, 168, 199, .12);
  color: var(--landing-primary-dark);
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.service-card__title {
  color: var(--landing-navy);
  font-weight: 700;
  margin-bottom: .5rem;
}

.service-card__desc {
  color: #64818c;
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.service-card__arrow {
  color: var(--landing-primary-dark);
  font-weight: 600;
  font-size: .88rem;
}

.service-card:hover .service-card__arrow { text-decoration: underline; }

/* ---- Cara Pengajuan ---- */

.landing-cara { background: var(--landing-bg-soft); }

.infografis-card {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(84, 168, 199, .2);
  transition: transform .2s ease;
}

.infografis-card:hover {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .infografis-card { transition: none; }
}

.landing-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--landing-primary), var(--landing-primary-dark));
  box-shadow: 0 10px 18px rgba(84, 168, 199, .35);
}

/* ---- CTA Penutup ---- */

.landing-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--landing-primary-dark), var(--landing-primary));
}

.landing-cta__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  background: rgba(255, 255, 255, .18);
}

.landing-cta__blob--a { width: 260px; height: 260px; top: -80px; left: -60px; }
.landing-cta__blob--b { width: 220px; height: 220px; bottom: -70px; right: -40px; }
