/* ==========================================================================
   Nigana - Custom CSS (di luar Tailwind utility classes)
   Digabung dari style konsisten di seluruh file hasil desain Stitch.
   ========================================================================== */

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #f8f9ff;
  color: #101c2c;
}

.font-lora,
.font-serif {
  font-family: 'Lora', serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Glassmorphism card, dipakai di navbar & beberapa card info */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(168, 212, 240, 0.3);
}

.glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Radial gradient di belakang hero section */
.hero-gradient {
  background: radial-gradient(circle at 50% 50%, rgba(160, 202, 255, 0.15) 0%, rgba(248, 249, 255, 0) 70%);
}

.morning-gradient {
  background: linear-gradient(135deg, #f8f9ff 0%, #e6f0ff 100%);
}

/* Reveal-on-scroll animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.7s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-100.active { transition-delay: 0.1s; }
.reveal.delay-200.active { transition-delay: 0.2s; }
.reveal.delay-300.active { transition-delay: 0.3s; }

/* Soft ambient shadow dipakai di banyak card */
.shadow-soft {
  box-shadow: 0px 10px 30px rgba(74, 144, 217, 0.08);
}
.card-shadow {
  box-shadow: 0px 10px 30px rgba(74, 144, 217, 0.08);
}

/* Cloud-blur decorative blobs */
.cloud-blur {
  filter: blur(60px);
  opacity: 0.4;
  z-index: -1;
}
.cloud-blob {
  position: absolute;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.4;
  border-radius: 50%;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.4;
}

/* Input focus state konsisten di semua form */
.input-focus:focus {
  outline: none;
  border-color: #4A90D9;
  box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.15);
}

/* Zebra table row, dipakai di tabel perbandingan harga */
.zebra-row:nth-child(even) {
  background-color: #f7fbff;
}

/* Prose styling khusus untuk artikel blog */
.blog-prose h2 {
  font-family: 'Lora', serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #101c2c;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.blog-prose h3 {
  font-weight: 700;
  font-size: 18px;
  color: #101c2c;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.blog-prose p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
  color: #414751;
}
.blog-prose ul,
.blog-prose ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
  color: #414751;
}
.blog-prose ul { list-style-type: disc; }
.blog-prose ol { list-style-type: decimal; }
.blog-prose li { margin-bottom: 0.5rem; line-height: 1.7; }
.blog-prose strong { color: #101c2c; font-weight: 700; }
.blog-prose a {
  color: #005ea1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Skeleton state saat navbar/footer partial belum ter-load */
#navbar-placeholder:empty,
#footer-placeholder:empty {
  display: block;
  min-height: 80px;
}