/* =========================================================
   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;
}

.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{
  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-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);
}

.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);
}

.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{ 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); }

.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; }
}

.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); }
}

.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{ font-variant-numeric: tabular-nums; }

.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); }

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

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

.logo-badge{ background-color: #ffffff; }

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; }

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 i, #theme-toggle-mobile i{ transition: opacity .3s ease; }

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

/* ===== Batas Gambar Artikel ===== */
.prose-custom img,
.article-content img,
.prose-custom iframe,
.article-content iframe,
.prose-custom video,
.article-content video{
  max-width:100% !important;
  height:auto !important;
  display:block;
  margin:1.5rem auto;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(14,47,74,.08);
}



/* ===== Gambar Artikel Full Width ===== */
.prose-custom p img,
.article-content p img,
.prose-custom img,
.article-content img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:1.5rem auto !important;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(14,47,74,.08);
}


/* ===== Gambar Artikel Full Width ===== */
.prose-custom p img,
.article-content p img,
.prose-custom img,
.article-content img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:1.5rem auto !important;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(14,47,74,.08);
}