/* ============================================================
   Inspirasi Software — Custom CSS
   ============================================================ */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* ─── Navbar ─── */
#navbar { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
#navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.18); }

.nav-link { position: relative; padding-bottom: 2px; }
.nav-link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background: #F5E617;
  transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ─── Hero ─── */
.hero-bg {
  background: linear-gradient(135deg, #0a1f5c 0%, #1E3A8A 55%, #1a4fc8 100%);
}
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ─── Section title underline ─── */
.section-title-line {
  display: block;
  width: 56px; height: 4px;
  background: linear-gradient(to right, #E11D24, #F5E617);
  border-radius: 2px;
  margin-top: 12px;
}
.section-title-line.center { margin-left: auto; margin-right: auto; }

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }
.reveal-delay-5 { transition-delay: 0.50s; }
.reveal-delay-6 { transition-delay: 0.60s; }

/* ─── Cards ─── */
.service-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(30,58,138,0.12); }
.service-card:hover .service-icon-wrap { background-color: #1E3A8A; }
.service-card:hover .service-icon-wrap svg { color: white; }

.why-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(30,58,138,0.1); border-color: #1E3A8A; }

/* ─── Portfolio ─── */
.portfolio-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.14); }
.portfolio-overlay {
  opacity: 0; transition: opacity 0.3s ease;
  background: linear-gradient(to top, rgba(10,31,92,0.92) 0%, transparent 100%);
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }

/* ─── Filter buttons ─── */
.filter-btn { transition: all 0.25s ease; }
.active-filter {
  background-color: #1E3A8A !important;
  color: white !important;
  border-color: #1E3A8A !important;
}

/* ─── WhatsApp ─── */
.whatsapp-cta {
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 8px 32px rgba(37,211,102,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(37,211,102,0.5);
}

/* Floating WhatsApp button */
.floating-wa {
  animation: wa-pulse 2.5s ease-in-out infinite;
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  50%       { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}

/* ─── Client logo placeholders ─── */
.client-logo {
  transition: all 0.3s ease;
  border: 2px solid #e5e7eb;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}
.client-logo:hover { border-color: #1E3A8A; background: #EFF6FF; }

/* ─── Contact form ─── */
.form-input { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.form-input:focus { border-color: #1E3A8A; box-shadow: 0 0 0 3px rgba(30,58,138,0.12); outline: none; }

/* ─── Portfolio gradient thumbnails ─── */
.thumb-1 { background: linear-gradient(135deg, #1E3A8A, #2563EB); }
.thumb-2 { background: linear-gradient(135deg, #7C3AED, #EC4899); }
.thumb-3 { background: linear-gradient(135deg, #059669, #10B981); }
.thumb-4 { background: linear-gradient(135deg, #D97706, #F59E0B); }
.thumb-5 { background: linear-gradient(135deg, #DC2626, #E11D24); }

/* ─── Animations ─── */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.float-anim { animation: float 5s ease-in-out infinite; }