/* =========================================================
   Premier Diagnostic — Custom Styles
   Font: Poppins | Warna dasar: #94D538 (hijau) & #0680C7 (biru)
   ========================================================= */

:root{
  --pd-green: #94d538;
  --pd-green-dark: #6fae1e;
  --pd-blue: #0680c7;
  --pd-blue-dark: #056aa0;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: 'Poppins', sans-serif;
  background-color: #f3f8f4;
  color: #0b2b1e;
  overflow-x: hidden;
}

/* ---------- Background atmosfer lab ---------- */
.pd-bg-gradient{
  background: linear-gradient(135deg, #eafce0 0%, #e4f6fb 45%, #d8f0fa 100%);
}

.pd-mesh{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pd-blob{
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .45;
  animation: pd-float 14s ease-in-out infinite;
}
.pd-blob.b1{ width: 420px; height:420px; background: #94d538; top: -120px; left: -100px; }
.pd-blob.b2{ width: 380px; height:380px; background: #0680c7; top: 40%; right: -140px; animation-delay: 2s; }
.pd-blob.b3{ width: 300px; height:300px; background: #4fd1c5; bottom: -120px; left: 30%; animation-delay: 4s; }

@keyframes pd-float{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px,-40px) scale(1.08); }
}

/* ---------- Glass Card ---------- */
.glass{
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px rgba(6,128,199,0.12);
}
.glass-dark{
  background: rgba(11,43,30,0.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.15);
}

.glass-card{
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 10px 30px rgba(6,128,199,0.10);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.glass-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(6,128,199,0.22);
  border-color: rgba(148,213,56,0.7);
}

/* ---------- Gradient text & buttons ---------- */
.pd-gradient-text{
  background: linear-gradient(90deg, var(--pd-blue) 0%, var(--pd-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-pd{
  background: linear-gradient(90deg, var(--pd-blue) 0%, var(--pd-green) 100%);
  background-size: 200% auto;
  transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 10px 25px rgba(6,128,199,0.25);
}
.btn-pd:hover{
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(148,213,56,0.35);
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Navbar ---------- */
#navbar{
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
#navbar.scrolled{
  box-shadow: 0 6px 24px rgba(6,128,199,0.12);
}

/* ---------- Hero: kartu hasil lab digital + scan line ---------- */
.lab-report{
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
}
.scan-line{
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #94d538, #0680c7, transparent);
  box-shadow: 0 0 18px 2px rgba(148,213,56,0.7);
  animation: pd-scan 3.2s ease-in-out infinite;
}
@keyframes pd-scan{
  0%   { top: 6%; opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 92%; opacity: 1; }
  60%  { opacity: 0; }
  100% { top: 92%; opacity: 0; }
}

.pulse-dot{
  position: relative;
}
.pulse-dot::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: inherit;
  animation: pd-pulse 1.8s ease-out infinite;
}
@keyframes pd-pulse{
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* floating molecule icons in hero */
.float-icon{
  animation: pd-drift 6s ease-in-out infinite;
}
.float-icon.delay-1{ animation-delay: 1.2s; }
.float-icon.delay-2{ animation-delay: 2.4s; }
@keyframes pd-drift{
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
}

/* ---------- WhatsApp Floating Button ---------- */
.wa-float{
  animation: pd-bounce-in .6s ease, pd-pulse-btn 2.6s ease-in-out infinite 1s;
}
@keyframes pd-bounce-in{
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes pd-pulse-btn{
  0%, 100% { box-shadow: 0 8px 24px rgba(37,211,102,0.35); }
  50% { box-shadow: 0 8px 34px rgba(37,211,102,0.6), 0 0 0 8px rgba(37,211,102,0.12); }
}

/* ---------- Counter numbers ---------- */
.counter{
  font-variant-numeric: tabular-nums;
}

/* ---------- Marquee layanan (mobile hint) ---------- */
.badge-soft{
  background: rgba(148,213,56,0.15);
  color: var(--pd-green-dark);
}
.badge-soft-blue{
  background: rgba(6,128,199,0.12);
  color: var(--pd-blue);
}

/* ---------- Utility ---------- */
.section-pad{
  padding-top: clamp(3.5rem, 6vw, 6rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Logo badge: selalu putih agar logo (teks hitam) tetap terbaca di dark mode */
.logo-badge{
  background-color: #ffffff;
}

/* =========================================================
   DARK MODE
   Diaktifkan lewat class "dark" pada <html> (lihat header.php & main.js)
   ========================================================= */

html.dark body{
  background-color: #0a0f1a;
  color: #e2e8f0;
}

html.dark .pd-bg-gradient{
  background: linear-gradient(135deg, #0a1f14 0%, #071a26 45%, #081521 100%);
}

html.dark .pd-blob{
  opacity: .28;
}

html.dark .glass,
html.dark .glass-card{
  background: rgba(15,23,42,0.55);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
html.dark .glass-card:hover{
  box-shadow: 0 20px 45px rgba(0,0,0,0.5);
  border-color: rgba(148,213,56,0.45);
}

html.dark .lab-report{
  background: rgba(15,23,42,0.6);
}

html.dark .badge-soft{
  background: rgba(148,213,56,0.16);
  color: #a3e35c;
}
html.dark .badge-soft-blue{
  background: rgba(6,128,199,0.22);
  color: #5cc2f0;
}

/* Blanket overrides for Tailwind slate utility text/backgrounds so the
   single-page markup doesn't need dark: on every element individually */
html.dark .bg-white{ background-color: #0f172a !important; }
html.dark .bg-white\/60{ background-color: rgba(15,23,42,0.6) !important; }
html.dark .bg-white\/70{ background-color: rgba(15,23,42,0.7) !important; }
html.dark .bg-white\/85{ background-color: rgba(15,23,42,0.75) !important; }
html.dark .bg-slate-100{ background-color: rgba(255,255,255,0.08) !important; }

html.dark .text-slate-900{ color: #f1f5f9 !important; }
html.dark .text-slate-800{ color: #e2e8f0 !important; }
html.dark .text-slate-700{ color: #cbd5e1 !important; }
html.dark .text-slate-600{ color: #a8b3c2 !important; }
html.dark .text-slate-500{ color: #94a3b8 !important; }
html.dark .text-slate-400{ color: #7c8aa0 !important; }

html.dark .border-slate-200\/70{ border-color: rgba(255,255,255,0.08) !important; }
html.dark .border-slate-300{ border-color: rgba(255,255,255,0.15) !important; }
html.dark .border-white\/70{ border-color: rgba(255,255,255,0.12) !important; }
html.dark .border-white\/60{ border-color: rgba(255,255,255,0.1) !important; }

html.dark #navbar .nav-link{ color: #cbd5e1; }

/* Theme toggle icon transition */
#theme-toggle i, #theme-toggle-mobile i{
  transition: opacity .3s ease;
}

/* Share buttons (article page) */
.share-btn{
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.share-btn:hover{
  transform: translateY(-3px);
}