/* =========================================================
   KlinikIndonesia.com
   artikel-kesehatan.css
   1:1 CSS migration from the original PHP-generated <style>
   ========================================================= */

/* ROOT — originally emitted by s7/s1.php */
:root{
  --primary:#0ea5e9;
  --radius:20px;
  --transition-fast:0.25s cubic-bezier(.22,1,.36,1);
  --transition:0.45s cubic-bezier(.22,1,.36,1);
  --bg-main:#f6f8fb;
  --bg-hero:#ffffff;
  --bg-hero-soft:#f1f5f9;
  --text-main:#0f172a;
  --text-soft:#64748b;
  --glow-color:rgba(14,165,233,0.25);
}

*, *::before, *::after{
box-sizing:border-box;
}

html{
  overflow-x:hidden;
}

html, body{
  margin:0;
  padding:0;
}

/* ===========================
   UNDERLINE
=========================== */
a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  text-decoration: underline;
}

/* ===========================
   BODY LIGHT / DARK
=========================== */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  background:var(--bg-main);
  color:var(--text-main);
  transition:var(--transition);
}

body.dark{
  --bg-main:#0f172a;
  --bg-hero:#0f172a;
  --bg-hero-soft:#020617;
  --text-main:#f1f5f9;
  --text-soft:#cbd5f5;
  --glow-color:rgba(56,189,248,0.15);
}

/* ===========================
   HEADER
=========================== */
header{
  position:sticky;
  top:15px;
  z-index:1000;
  padding: calc(10px + env(safe-area-inset-top, 0)) 0;
  min-height:64px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(255,255,255,0.25);
  border-bottom:1px solid rgba(15,23,42,0.06);
  border-radius:0;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
  transition: var(--transition), background 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled{
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.dark header{
  background:rgba(20,20,25,0.85);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
}

/* =========================
   GLOBAL CONTAINER
========================= */
.container{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,28px);
  box-sizing:border-box;
}

/* =========================
   HEADER LAYOUT BALANCE
========================= */
.header-inner{
display:flex;
flex-direction:column;
gap:12px;
}

@media (max-width: 1024px) and (orientation: landscape) {

  .header-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
  }

  .header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }

  .header-search {
    display: flex;
    flex: 1;
    order: 2 !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  .search-box {
    flex: 0 1 auto;
    max-width: 380px;
    margin-right: 0;
  }

  .search-wrapper {
    height: 38px;
  }

  .header-actions {
    margin-left: auto;
    order: 3;
  }

}

/* LOGO */
.logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:600;
}

.logo img{
  height:32px;
  width:auto;
  transition:transform .2s ease;
}

.logo span{
  font-size:18px;
  color:#1f2937;
}

.logo:hover img{
  transform:scale(1.08);
}

body.dark .logo span{
  color:#ffffff;
}

body.dark .logo img{
  filter: drop-shadow(0 0 4px rgba(59,130,246,0.6));
}

/* =========================================
   KLINIKINDONESIA — SOFT GLASS HEALTH TIPS
========================================= */

#healthTipsBar {
  position: sticky;
  top: 190px;
  z-index: 999;

  width: calc(100% - (clamp(20px, 4vw, 28px) * 2));
  margin-left: clamp(20px, 4vw, 28px);
  box-sizing: border-box;

  /* Latar transparan halus */
  background: rgba(14, 165, 233, 0.08);
  color: #075985;

  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 16px;

  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;

  box-shadow: none;

  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

#healthTipsBar .container {
  display: flex;
  justify-content: center;
  min-width: 0;
}

#healthTipsBar #tipsText {
  color: #075985;
  line-height: 1.6;
}

#healthTipsBar #tipsText a {
  color: #0369a1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mode gelap */
body.dark #healthTipsBar {
  background: rgba(56, 189, 248, 0.09);
  border-color: rgba(56, 189, 248, 0.18);
  color: #bae6fd;
  box-shadow: none;
}

body.dark #healthTipsBar #tipsText {
  color: #bae6fd;
}

body.dark #healthTipsBar #tipsText a {
  color: #7dd3fc;
}

/* Landscape */
@media (orientation: landscape) {
  #healthTipsBar {
    top: 134px;
  }
}

/* Tablet dan ponsel */
@media (max-width: 768px) {
  #healthTipsBar {
    width: calc(100% - (clamp(20px, 4vw, 28px) * 2));
    margin-left: clamp(20px, 4vw, 28px);
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  #healthTipsBar {
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Landscape pada layar kecil */
@media (max-width: 900px) and (orientation: landscape) {
  #healthTipsBar {
    font-size: 11px;
    padding: 6px 10px;
    top: 130px;
  }

  #healthTipsBar #tipsText {
    white-space: nowrap;
    overflow-x: auto;
  }
}

/* Hormati preferensi minimasi gerakan */
@media (prefers-reduced-motion: reduce) {
  #healthTipsBar {
    scroll-behavior: auto;
  }
}

/* =========================
   BOX SEARCH
========================= */
.search-box{
max-width:520px;
}

/* NAV FIX WIDTH */
nav{
flex:0 0 auto;
}

/* GLASS BASE */
.search-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  width:100%;
  gap: 8px;
  padding: 6px 6px 6px 10px;

  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);

  border-radius: 18px;
  border:1px solid rgba(14,165,233,0.35);
  box-shadow:0 0 0 1px rgba(14,165,233,0.05);

  overflow: hidden;
  transition: all .25s ease;
}

/* Expand on focus */
.search-wrapper:focus-within {
  transform: translateY(-1px);
  border:1px solid var(--primary);
  box-shadow:
    0 8px 20px rgba(14,165,233,0.25),
    0 0 0 2px rgba(14,165,233,0.15);
  background: rgba(255,255,255,0.35);
}

.search-wrapper:focus-within .search-icon{
opacity:1;
color:#0284c7;
}

/* Shimmer border */
.search-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 60px;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  opacity: 0;
  transition: 0.6s;
  pointer-events: none;
}

.search-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 60px;
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
  pointer-events: none;
}

.search-wrapper:hover::before{
  opacity:0.5;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

@keyframes placeholderShift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

/* DARK MODE */
body.dark .search-wrapper{
  background: rgba(20,20,20,0.45);
  border:1px solid rgba(56,189,248,0.35);
}

/* ICON */
.search-icon{
  width:18px;
  height:18px;
  opacity:.6;
  transition:opacity .25s ease, color .25s ease;
}

/* INPUT */
.search-wrapper input {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.search-wrapper input[type='text']{
  flex:1;
  border:none;
  background:transparent;
  outline:none;
  font-size:14px;
  padding:6px;
  color:inherit;
}

.search-wrapper input::placeholder{
  color:#7a7a7a;
  opacity:0.9;
  transition:opacity .25s ease, transform .25s ease;
  animation:placeholderShift 3s ease-in-out infinite;
}

.search-wrapper input:focus::placeholder{
  opacity:0.4;
  transform:translateX(2px);
}

body.dark .search-wrapper input::placeholder{
  color:#cbd5e1;
  opacity:0.85;
}

/* =========================================
   SEARCH CATEGORY
   HEALTH + SERI TADABBUR
========================================= */

.search-wrapper .search-scope {
  position: relative;
  z-index: 3;

  flex: 0 0 auto;
  width: auto;
  max-width: 145px;
  min-width: 0;

  padding: 7px 4px;

  border: 0;
  outline: none;
  border-radius: 8px;

  background: transparent;
  color: inherit;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.search-wrapper .search-scope option {
  background: #ffffff;
  color: #222222;
}

body.dark .search-wrapper .search-scope {
  color: #e2e8f0;
}

body.dark .search-wrapper .search-scope option {
  background: #172033;
  color: #f1f5f9;
}

/* Tablet dan ponsel */
@media (max-width: 600px) {
  .search-wrapper .search-scope {
    max-width: 115px;
    font-size: 11px;
    padding: 6px 2px;
  }
}

/* Layar sangat kecil */
@media (max-width: 380px) {
  .search-wrapper .search-scope {
    max-width: 105px;
    font-size: 10px;
  }
}

/* BUTTON */
.search-wrapper button{
  position: relative;
  z-index: 3; 
  flex-shrink:0;
  transform: translateX(4px);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  line-height:1;

  background: linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa);
  background-size: 200% 200%;
  animation: gradientMove 4s ease infinite;

  color:white;
  border:none;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:0.3s;
}

.search-wrapper button svg{
  width:16px;
  height:16px;
  display:block;
  flex-shrink:0;
  stroke:white;
  fill:none;
  transition: transform 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
}

.search-wrapper button .btn-text{
  align-items:center;
  justify-content:center;
  line-height:1;
  position:relative;
  top:0;
}

@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@keyframes placeholderFade {
  0%{opacity:0; transform:translateY(4px);}
  100%{opacity:1; transform:translateY(0);}
}

.search-wrapper button:hover {
  transform: scale(1.08) rotate(-1deg);
  box-shadow: 0 8px 18px rgba(37,99,235,0.25);
}

.search-wrapper button:hover svg {
  transform: translateX(4px) rotate(5deg);
  fill: #fff;
}

/* LOADING RIPPLE */
.loading-ripple{
  position:absolute;
  inset:0;
  border-radius:60px;
  pointer-events:none;
  background: radial-gradient(circle,
    rgba(37,99,235,0.3) 0%,
    transparent 60%);
  opacity:0;
  transition:0.4s;
}

.search-wrapper.loading .loading-ripple {
  opacity: 1;
  animation: ripple 0.8s ease-out, shimmerRipple 1s linear infinite;
}

@keyframes ripple{
  from{transform:scale(0.8); opacity:0.6;}
  to{transform:scale(1.3); opacity:0;}
}

@keyframes shimmerRipple {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.1) rotate(180deg); opacity: 0.3; }
  100% { transform: scale(0.9) rotate(360deg); opacity: 0.5; }
}

/* RESPONSIVE */
@media(max-width:768px){
  .search-box{
    flex:1 1 0;
    min-width:0;
    max-width:100%;
  }
}

/* =========================
   NAV DESKTOP
========================= */
nav{
position:relative;
z-index:9999;
display:flex;
isolation: isolate;
}

nav > ul{
list-style:none;
display:flex;
align-items: center;
gap:25px;
padding:0;
margin:0;
}

nav ul li{
position:relative;
}

nav ul li a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
}

nav a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

/* Penanda menu aktif pada navigasi desktop */
nav a.active {
    color: #1687b8;
    font-weight: 700;
}

/* Penanda menu aktif pada navigasi mobile */
.mobile-menu ul.submenu > li > a.active {
    color: #1687b8 !important;
    font-weight: 700 !important;
    background: rgba(22, 135, 184, 0.16) !important;
    border-radius: 8px !important;
}

.mobile-menu ul.submenu > li > a.active svg {
    color: #1687b8 !important;
    stroke: #1687b8 !important;
}

/* TES PAKSA: pastikan tautan aktif terlihat */
.mobile-menu a.active {
    background: #1687b8 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.mobile-menu a.active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

nav ul ul{
  display:none;
  flex-direction:column;
  gap:8px;
  position:absolute;
  top:calc(100% + 25px);
  right:0;
  min-width:230px;

  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  border-radius:18px;
  padding:14px;
  box-shadow:0 30px 60px rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.3);
  transition:all .35s ease;
  z-index:10000;

  list-style:none;
  margin:0;
}

nav > ul > li.open > ul {
  display:flex;
  flex-direction:column;
  animation: platinumDrop 0.35s ease forwards;
}

body.dark nav ul ul{
  background:rgba(20,20,25,0.85);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 50px rgba(0,0,0,0.6);
}

@keyframes platinumDrop{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

nav ul ul li{
  margin:0;
  padding:0;
}

nav ul ul li a{
  padding:10px 14px;
  border-radius:10px;
  background: rgba(0,0,255,0.1);
  transition:0.3s ease;
}

nav ul ul li a:hover{
  background:rgba(0,0,0,0.06);
}

nav ul ul li a:hover .menu-icon,
.submenu li a:hover .menu-icon{
  transform:scale(1.15) rotate(-3deg);
  filter:drop-shadow(0 0 6px rgba(200,220,255,.6));
}


body.dark nav ul ul li a:hover{
  color:#e6f2ff;
}

body.dark nav ul ul li a:hover{
  background:rgba(255,255,255,0.08);
}

.hamburger{
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
gap:5px;
margin-left:6px;
}

.hamburger span{
  width:25px;
  height:3px;
  background:currentColor;
  transition: transform 0.35s ease, opacity 0.35s ease;
  border-radius:5px;
}

.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* =========================
   PLATINUM MOBILE MENU
========================= */
.menu-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.45);
backdrop-filter:blur(3px);
opacity:0;
visibility:hidden;
z-index:998;
}

.menu-overlay.active{
opacity:1;
visibility:visible;
}

.mobile-menu{
  position:fixed;
  top:0;
  right:-100%;
  width: min(380px, 85%);
  height:100%;
  padding: 0 25px 25px;
  padding-top: calc(80px + env(safe-area-inset-top));
  overflow-y:auto;
  z-index:999;
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border-left:1px solid rgba(255,255,255,0.4);
  box-shadow:-20px 0 60px rgba(0,0,0,0.25);
}

.mobile-menu .submenu{
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 15px;
}

.mobile-menu .submenu li a{
  padding-left: 32px;
}

body.dark .mobile-menu{
  background:rgba(20,20,25,0.85);
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow:-20px 0 60px rgba(0,0,0,0.6);
}

.mobile-menu.active{
right:0;
}

.mobile-menu ul{
  list-style:none;
  padding:0;
  margin:0;
  margin-top:10px;
}

.mobile-menu li{
margin-bottom:18px;
}

.mobile-menu a,
.mobile-menu .accordion-toggle{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
font-weight:500;
cursor:pointer;
}

.mobile-menu svg{
  width:20px;
  height:20px;
  stroke:url(#platinumStroke);
  stroke-width:2;
  fill:none;
  transition:all .35s ease;
}

.submenu{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding-left:0;
  margin-top:0;
  transition: all 0.35s ease;
}

.submenu svg{
width:18px;
height:18px;
margin-right:8px;
stroke:currentColor;
flex-shrink:0;
}

.submenu.open{
  max-height:400px;
  margin-top:10px;
  opacity:1;
}

/* ===========================
   THEME TOGGLE BUTTON
=========================== */
.theme-toggle{
  cursor:pointer;
  font-size:18px;
  margin-left:10px;
  padding:6px 10px;
  border-radius:50px;
  transition:0.3s ease;
  background:rgba(0,0,0,0.05);
}

body.dark .theme-toggle{
  background:rgba(255,255,255,0.1);
}

.theme-toggle:hover{
  transform:scale(1.1);
  filter:drop-shadow(0 0 6px rgba(200,220,255,.5));
}

/* =========================
   HERO
========================= */
.hero{
padding-bottom: 30px !important;
text-align:center;
background:linear-gradient(180deg,var(--bg-hero) 0%,var(--bg-hero-soft) 100%);
position:relative;
overflow:hidden;
width: 100%;
margin: 0 auto;
}

.hero-inner{
  max-width: 720px;
  padding-top: 70px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}

.hero h1{
margin:0 0 12px 0;
line-height:1.15;
font-weight:700;
letter-spacing:-0.02em;
}

.hero p{
  font-size:clamp(16px,2vw,18px);
  color:var(--text-soft);
  line-height:1.6;
  max-width:600px;
  margin:0 auto 20px;
}

.hero::before{
  content:'';
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle,var(--glow-color),transparent 70%);
  top:-200px;
  left:50%;
  transform:translateX(-50%);
  filter:blur(70px);
  z-index:0;
}

body.dark .hero{
  background:linear-gradient(180deg,#0f172a 0%,#020617 100%);
}

body.dark .hero::before{
  background:radial-gradient(circle,rgba(56,189,248,0.15),transparent 70%);
  filter:blur(80px);
}

body.dark .hero p{
  color:#cbd5f5;
}

/* =========================
   HERO CTA
========================= */
.hero-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  padding:12px 24px;
  font-size:15px;
  font-weight:600;
  border-radius:30px;

  background:linear-gradient(135deg,#2563eb,#3b82f6,#60a5fa);
  background-size:200% 200%;
  color:white;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 12px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.4s ease;
}

.hero-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 12px rgba(37,99,235,0.5);
  background-position: 100% 50%;
}

.hero-cta:active{
  transform:translateY(0) scale(0.96);
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
}

.hero-cta svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  transition: transform 0.3s ease;
}

.hero-cta:hover svg{
  transform:translateX(3px);
}

/* =====================================
   TOMBOL HERO
===================================== */
@media (max-width:768px){
  .hero-cta{
    padding:10px 20px;
    font-size:14px;
    gap:8px;
    box-shadow:0 4px 8px rgba(0,0,0,0.15);
  }

  .hero-cta svg{
    width:16px;
    height:16px;
  }

  .hero-inner h1{
    font-size:clamp(22px,6vw,32px);
  }

  .hero-inner p{
    font-size:clamp(14px,4vw,18px);
  }
}

@media (max-width:480px){
  .hero-cta{
    padding:8px 16px;
    font-size:13px;
    gap:6px;
    box-shadow:0 3px 6px rgba(0,0,0,0.15);
  }

  .hero-cta svg{
    width:14px;
    height:14px;
  }

  .hero-inner h1{
    font-size:clamp(20px,7vw,28px);
  }

  .hero-inner p{
    font-size:clamp(12px,5vw,16px);
  }
}

/* =========================
   ARTIKEL
========================= */
.judul-artikel,
.judul-artikel2 {
  text-align: center;
  margin: 30px 0;
  font-weight: 700;
}

.judul-artikel {
  margin-top: 40px;
}

/* =========================
   GRID
========================= */
.grid {
  padding-top:20px;
  padding-bottom:28px;
}

.grid .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 5px;
}

@media (max-width:900px){
  .grid .container {
    gap: 20px;
    padding-inline: 20px;
  }
}

@media (max-width:600px){
  .grid .container {
    gap: 16px;
    padding-inline: 16px;
  }
}

/* =====================================================
   KLINIKINDONESIA.COM — PREMIUM ANIMATED CARD
   1. Card Lift + Scale + Dynamic Shadow
   2. Icon Zoom + Rotate + Blue Glow
   3. Glass / Moving Shimmer Effect
   Light Mode + Dark Mode + Android Touch
===================================================== */

/* =========================
   1. CARD DASAR
========================= */
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f8fafc 55%,
    #eff6ff 100%
  );

  padding: 32px;
  border-radius: var(--radius, 20px);
  border: 1px solid rgba(15, 23, 42, 0.08);

  box-shadow:
    0 10px 25px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.025);

  opacity: 0;
  transform: translateY(30px);

  transition:
    transform 0.4s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.4s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    opacity 0.4s ease;

  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;

  -webkit-tap-highlight-color: transparent;
}

/* Kartu muncul saat masuk viewport */
.card.show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   2. ANIMASI KARTU
   Lift + Scale + Shadow
========================= */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-7px) scale(1.015);

    border-color: rgba(14, 165, 233, 0.35);

    box-shadow:
      0 22px 45px rgba(15, 23, 42, 0.14),
      0 8px 20px rgba(14, 165, 233, 0.10),
      0 0 0 1px rgba(14, 165, 233, 0.08);

    background: linear-gradient(
      135deg,
      #ffffff 0%,
      #f0f9ff 55%,
      #e0f2fe 100%
    );
  }
}

/* Efek saat kartu disentuh di HP / tablet */
.card:active {
  transform: translateY(-3px) scale(1.01);

  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.16),
    0 0 18px rgba(14, 165, 233, 0.16);

  transition-duration: 0.12s;
}

/* Fokus keyboard */
.card:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.75);
  outline-offset: 4px;
}

/* =========================
   3. ANIMASI IKON
   Zoom + Rotate + Blue Glow
========================= */

.card-icon {
width: 60px;
height: 60px;
flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

position: relative;
z-index: 1;

background: linear-gradient(
135deg,
#0ea5e9,
#0284c7
);

border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
margin-bottom: 16px;

color: #fff;
font-size: 28px;

box-shadow:
0 5px 14px rgba(14, 165, 233, 0.16);

transform: scale(1) rotate(0deg);

transition:
transform 0.4s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s ease,
filter 0.4s ease;

-webkit-transform-origin: center;
transform-origin: center;
}

/* DESKTOP: arahkan mouse ke kartu */
@media (hover: hover) and (pointer: fine) {
.card:hover .card-icon {
transform: scale(1.15) rotate(8deg);

box-shadow:
  0 8px 22px rgba(14, 165, 233, 0.38),
  0 0 0 5px rgba(14, 165, 233, 0.08),
  0 0 25px rgba(56, 189, 248, 0.24);

filter: brightness(1.08);

}
}

/* ANDROID / TABLET: saat kartu disentuh */
.card:active .card-icon {
transform: scale(1.15) rotate(8deg);

box-shadow:
0 8px 22px rgba(14, 165, 233, 0.38),
0 0 0 5px rgba(14, 165, 233, 0.08),
0 0 25px rgba(56, 189, 248, 0.24);

filter: brightness(1.08);

transition-duration: 0.15s;
}

/* KEYBOARD: fokus pada kartu */
.card:focus-visible .card-icon {
transform: scale(1.08);

box-shadow:
0 0 0 4px rgba(14, 165, 233, 0.15),
0 0 20px rgba(56, 189, 248, 0.3);
}

/* =========================
   4. JUDUL DAN DESKRIPSI
========================= */
.card h3 {
  position: relative;
  z-index: 1;

  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;

  transition: color 0.3s ease;
}

.card p {
  position: relative;
  z-index: 1;

  margin: 0;

  color: var(--text-soft);
  text-align: justify;
  text-justify: inter-word;

  line-height: 1.6;
  hyphens: auto;

  transition: color 0.3s ease;
}

/* =========================
   5. GLASS / SHIMMER
   Pantulan cahaya melintas
========================= */

.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Lapisan cahaya */
.card::before {
  content: "";
  position: absolute;
  inset: -50% auto -50% -75%;
  width: 65%;
  height: 200%;

  z-index: 2;
  pointer-events: none;

  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.20) 40%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.20) 60%,
    rgba(255, 255, 255, 0.03) 75%,
    transparent 100%
  );

  transform: translateX(0) skewX(-20deg);
  opacity: 0;
}

/* Cahaya melintas saat hover */
@keyframes cardShimmer {
  0% {
    transform: translateX(0) skewX(-20deg);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translateX(330%) skewX(-20deg);
    opacity: 0;
  }
}

/* KOMPUTER: mouse atau touchpad */
@media (hover: hover) and (pointer: fine) {
  .card:hover::before {
    animation: cardShimmer 0.9s ease-in-out;
  }
}

/* ANDROID / TABLET: sentuhan */
@media (hover: none) and (pointer: coarse) {
  .card:active::before {
    animation: cardShimmer 0.75s ease-in-out;
  }
}

/* Android / tablet: tampilkan kilau saat disentuh */
.card:active::before {
  animation: cardShimmer 0.75s ease-in-out;
}

/* Mode gelap: pantulan sedikit kebiruan */
body.dark .card::before {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(125, 211, 252, 0.03) 25%,
    rgba(125, 211, 252, 0.20) 40%,
    rgba(186, 230, 253, 0.65) 50%,
    rgba(125, 211, 252, 0.20) 60%,
    rgba(125, 211, 252, 0.03) 75%,
    transparent 100%
  );
}

/* =========================
   6. DARK MODE
========================= */
body.dark .card {
  background: linear-gradient(
    135deg,
    #1e293b 0%,
    #172033 55%,
    #0f172a 100%
  );

  color: #e2e8f0;

  border-color: rgba(255, 255, 255, 0.09);

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

body.dark .card h3 {
  color: #f1f5f9;
}

body.dark .card p {
  color: #cbd5e1;
}

body.dark .card::before {
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 25%,
    rgba(125, 211, 252, 0.18) 50%,
    rgba(255, 255, 255, 0.04) 70%,
    transparent 100%
  );
}

@media (hover: hover) and (pointer: fine) {
  body.dark .card:hover {
    background: linear-gradient(
      135deg,
      #26364d 0%,
      #172554 55%,
      #0f172a 100%
    );

    border-color: rgba(56, 189, 248, 0.35);

    box-shadow:
      0 22px 45px rgba(0, 0, 0, 0.40),
      0 8px 25px rgba(14, 165, 233, 0.13),
      0 0 0 1px rgba(56, 189, 248, 0.08);
  }
}

/* =========================
   7. LINK CARD
========================= */
.card:visited,
.card:hover,
.card:active {
  text-decoration: none;
  color: inherit;
}

/* =========================
   8. AKSESIBILITAS
   Kurangi animasi jika diminta
========================= */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card-icon,
  .card::before {
    animation: none !important;
    transition: none !important;
  }

  .card {
    transform: none;
  }

  .card.show {
    opacity: 1;
  }
}

/* =========================
   SECTION
========================= */
section{
  padding:60px 0;
}

/* ===========================
   MENU ICON ULTRA PREMIUM
=========================== */
.menu-icon{
  width:20px;
  height:20px;
  stroke:url(#platinumStroke);
  stroke-width:2;
  fill:none;
  flex-shrink:0;
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

nav ul ul li a,
.submenu li a{
  display:flex;
  align-items:center;
  gap:10px;
}

.mobile-menu{
  touch-action: pan-y;
  will-change: transform;
  transition: transform .35s cubic-bezier(.4,0,.2,1), right .35s cubic-bezier(.4,0,.2,1);
}

.mobile-menu.dragging{
  transition: none;
}

.menu-overlay{
  transition: opacity .3s ease;
}

/* =====================================
   MOBILE PORTRAIT
===================================== */
@media (max-width:600px){

  header{
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
    min-height:56px;
  }

  .logo{
    font-size:16px;
  }

  .header-inner{
    gap:10px;
  }

  .header-search{
    margin-top:8px;
  }

  .search-box{
    flex:1;
    min-width:0;
  }

  .search-wrapper{
    width:100%;
    padding:4px 8px;
  }

  .search-wrapper input[type='text']{
    font-size:13px;
  }

  .search-wrapper button{
    width:36px;
    height:36px;
    padding:0;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    line-height:1;
  }

  .search-wrapper button svg{
    display:block;
  }

  .search-wrapper button .btn-text{
    display:none;
  }

  .theme-toggle{
    font-size:16px;
    padding:4px 8px;
  }

  .hero {
    padding-top: calc(70px + env(safe-area-inset-top));
  }

}

/* =====================================
   SMALL TABLET
===================================== */
@media (min-width:601px) and (max-width:768px){

.search-wrapper button{
width:36px;
height:36px;
padding:0;
border-radius:50%;
}

.search-wrapper button .btn-text{
display:none;
}

.hero{
padding:50px 20px 70px;
}

.hero h1{
font-size:30px;
}

}

/* =====================================
   TABLET PORTRAIT (769px–900px)
===================================== */
@media (min-width:769px) and (max-width:900px){
  header{
    padding:0 16px;
  }
}

.search-box{
flex:1;
min-width:0;
}

.search-wrapper button{
width:36px;
height:36px;
padding:0;
border-radius:50%;
}

.search-wrapper button .btn-text{
display:none;
}

.hero{
padding:50px 20px 70px;
}

.hero h1{
font-size:30px;
}

/* =====================================
   TABLET PORTRAIT
===================================== */
@media (min-width:901px) and (max-width:1024px){
.hero{
padding:50px 20px 70px;
}

.hero h1{
font-size:32px;
}
}

/* =================================
   NAVIGATION BREAKPOINT
================================= */
@media (max-width:900px){


  .header-inner{
    flex-direction:column;
  }

  .header-top{
    width:100%;
  }


}

@media (min-width:901px){  
  nav {  
    display: flex !important;  
    align-items: center;  
  }  
}

/* =====================================
   TABLET LANDSCAPE FIX
===================================== */
@media (min-width:769px) and (orientation:landscape){

.search-wrapper button{
width:auto;
padding:0 16px;
border-radius:30px;
}

.search-wrapper button .btn-text{
display:inline;
}

}

/* =====================================
   HEADER UPDATE
===================================== */
.header-top{
display:flex;
align-items:center;
gap:20px;
width:100%;
}

.header-actions{
display:flex;
align-items:center;
gap:12px;
margin-left:auto;
}

.header-search{
width:100%;
order:3;
margin-top:12px;
padding:0;
min-width:0;
}

/* =====================================
   DESKTOP HEADER FIX
===================================== */
@media (min-width:901px){

.header-inner{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:20px;
}

.header-top{
display:flex;
align-items:center;
gap:12px;
width:auto;
}

.header-search{
flex:1;
margin-top:0;
}

.header-actions{
margin-left:auto;
}

}

@media (max-width: 900px) {

  .header-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  header .logo {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 17px;
  }

  header .header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
  }

  header .header-search {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    box-sizing: border-box;
    z-index: 1;
  }

  header nav {
    display: none !important;
  }

  header .hamburger {
    display: flex;
  }

  .mobile-menu {
    position: fixed;
    z-index: 2000;
    top: 0;
    padding-top: calc(20px + env(safe-area-inset-top));
  }

  .menu-overlay {
    z-index: 1999;
  }

  header {
    min-height: 56px;
  }
}

/* =====================================
   NOTE
===================================== */
.note {
  font-size: 13px;
  text-align: left;
  margin-top: 2px;
  font-style: italic;
  opacity: 0.9;
}

/* =====================================
   FOOTER
===================================== */

.particle-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  text-align: center;
  color: #fff;

  padding: 60px 20px;

  font-family: 'Poppins', sans-serif;
  font-size: 14px;

  background:
    radial-gradient(
      ellipse at 50% -20%,
      rgba(45, 212, 191, 0.12),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 85% 20%,
      rgba(212, 175, 55, 0.06),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #070d1a 0%,
      #0b1120 42%,
      #111c2e 100%
    );
}

#footerCanvas {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;

  pointer-events: none;

  transform: translateZ(0);
}

.particle-footer .footer-content {
  position: relative;
  z-index: 5;
}

.particle-footer .footer-content::before {
  content: '';
  position: absolute;

  width: min(520px, 90%);
  height: 180px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      ellipse,
      rgba(45, 212, 191, 0.055) 0%,
      rgba(45, 212, 191, 0.025) 35%,
      transparent 72%
    );

  filter: blur(18px);

  pointer-events: none;

  z-index: -1;
}

.particle-footer h2 {
  position: relative;

  font-size: 28px;
  font-weight: 700;

  margin-bottom: 10px;

  letter-spacing: 0.2px;

  animation:
    nurTitle 5s ease-in-out infinite;
}

@keyframes nurTitle {

  0%,
  100% {
    color: #ffffff;
    text-shadow:
      0 0 0 rgba(255,255,255,0);
  }

  50% {
    color: #f8fafc;
    text-shadow:
      0 0 20px rgba(255,255,255,0.10),
      0 0 40px rgba(45,212,191,0.05);
  }

}

.particle-footer p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 20px;
}

.footer-links a {
  color: #fff;

  margin: 0 12px;

  text-decoration: none;

  font-weight: 500;

  display: inline-block;

  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    color 0.35s ease;
}

.footer-links a:hover {
  transform: translateY(-3px);

  opacity: 0.9;

  color: #fef3c7;
}

.footer-social {
  margin-top: 30px;
}

.footer-social a {
  color: #fff;

  margin: 0 10px;

  font-size: 20px;

  display: inline-block;

  transition:
    transform 0.4s ease,
    color 0.4s ease;
}

.footer-social a:hover {
  transform:
    translateY(-5px)
    scale(1.15);

  color: #fef3c7;
}

.particle-footer .copyright {
  font-size: 14px;

  opacity: 0.7;

  margin-top: 20px;
}

@media (max-width: 600px) {

  .particle-footer {
    padding: 50px 15px;
  }

  .particle-footer h2 {
    font-size: 24px;
  }

  .particle-footer p {
    font-size: 14px;
  }

  .footer-social {
    margin-top: 20px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .particle-footer h2 {
    animation: none;
  }

  .footer-links a,
  .footer-social a {
    transition: none;
  }

}

/* =====================================
   TOMBOL INSTALL PWA
===================================== */
#install-link {
  color: #fff;
  background-color: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  margin-top: 20px;
  transition: transform 0.3s, opacity 0.3s;
}

#install-link:hover {
  transform: translateY(-2px) scale(1.05);
  opacity: 0.9;
}

.install-button {
  color: #fff;
  background-color: rgba(0,0,0,0.6);
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  margin-top: 25px;
  display: inline-block;
  animation: shimmer 3s infinite;
  transition: transform 0.3s, box-shadow 0.3s;
}

.install-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 4px 12px rgba(255,255,255,0.4);
}

@keyframes shimmer {
  0% { color: #fff; }
  50% { color: #f0f9ff; }
  100% { color: #fff; }
}

@media (max-width:600px) {
  .install-button {
    font-size: 12px;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 25px;
  }

  .footer-links a {
    margin: 0 8px;
    font-size: 13px;
  }

  .footer-social a {
    font-size: 18px;
    margin: 0 8px;
  }
}

/* =========================
LAST MODIFIED
========================= */
.update-info{
  letter-spacing:0.2px;
}

.hero .update-info{
  font-size:12px;
  opacity:0.75;
}

/* =========================
ARTICLE META INFO
========================= */
.article-meta{
  display:flex;
  align-items:center;
  justify-content:center; 
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  margin-bottom:25px;
}

.article-meta .update-info{
  margin:0;
}

.visit-time{
  white-space:nowrap;
  opacity:0.6;
}

.article-meta .visit-time::before{
  content:'|';
  margin-left:0;
  margin-right:6px;
}

/* =========================================================
   FOOTER — LIGHT MODE
   KlinikIndonesia.com
   ========================================================= */

body:not(.dark) .particle-footer {

  color: #172033;

  background:
    radial-gradient(
      ellipse at 50% -20%,
      rgba(14,165,233,0.12),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 85% 20%,
      rgba(212,175,55,0.07),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #f7fbff 0%,
      #eef7fb 42%,
      #e7f3f8 100%
    );

  border-top:
    1px solid rgba(14,165,233,0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90);
}


/* ---------- LIGHT MODE CONTENT ---------- */

body:not(.dark) .particle-footer h2 {

  color: #102a43;

  text-shadow:
    0 0 18px rgba(14,165,233,0.08);
}


body:not(.dark) .particle-footer p {

  color: #526779;

  opacity: 1;
}


/* ---------- LIGHT MODE LINKS ---------- */

body:not(.dark) .footer-links a {

  color: #17324d;

  opacity: 0.92;
}


body:not(.dark) .footer-links a:hover {

  color: #087cff;

  opacity: 1;

  text-shadow:
    0 0 10px rgba(8,124,255,0.15);
}


/* ---------- LIGHT MODE SOCIAL ---------- */

body:not(.dark) .footer-social a {

  color: #31536d;
}


body:not(.dark) .footer-social a:hover {

  color: #087cff;

  text-shadow:
    0 0 12px rgba(8,124,255,0.18);
}


/* ---------- LIGHT MODE COPYRIGHT ---------- */

body:not(.dark) .particle-footer .copyright {

  color: #607487;

  opacity: 0.9;
}


/* =========================================================
   LIGHT MODE — PWA INSTALL BUTTON
   ========================================================= */

body:not(.dark) #install-link {

  color: #17324d;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.95),
      rgba(239,248,252,0.95)
    );

  border:
    1px solid rgba(14,165,233,0.18);

  box-shadow:
    0 6px 18px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}


body:not(.dark) #install-link:hover {

  color: #087cff;

  box-shadow:
    0 8px 22px rgba(8,124,255,0.14);
}


/* =========================================================
   LIGHT MODE — INSTALL BUTTON
   ========================================================= */

body:not(.dark) .install-button {

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #087cff,
      #12b8ed
    );

  box-shadow:
    0 7px 18px rgba(8,124,255,0.20);
}


body:not(.dark) .install-button:hover {

  box-shadow:
    0 10px 25px rgba(8,124,255,0.28);
}


/* =========================================================
   LIGHT MODE — FOOTER GLOW
   ========================================================= */

body:not(.dark) .particle-footer .footer-content::before {

  background:
    radial-gradient(
      ellipse,
      rgba(14,165,233,0.07) 0%,
      rgba(45,212,191,0.035) 35%,
      transparent 72%
    );

  filter: blur(22px);
}


/* =========================================================
   LIGHT MODE — TITLE ANIMATION
   ========================================================= */

@keyframes nurTitleLight {

  0%,
  100% {

    color: #102a43;

    text-shadow:
      0 0 0 rgba(14,165,233,0);
  }

  50% {

    color: #087cff;

    text-shadow:
      0 0 18px rgba(14,165,233,0.12);
  }

}


body:not(.dark) .particle-footer h2 {

  animation:
    nurTitleLight 5s ease-in-out infinite;
}


/* =========================================================
   LIGHT MODE — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  body:not(.dark) .particle-footer h2 {

    animation: none;
  }

}

/* =========================================================
   KLINIKINDONESIA.COM
   PREMIUM FOOTER 10/10
   LIGHT + DARK MODE
   DROP-IN UPGRADE
   ========================================================= */


/* =========================================================
   01. FOOTER BASE
   ========================================================= */

.particle-footer {

  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 420px;

  padding:
    72px 20px
    58px;

  text-align: center;

  font-family:
    'Poppins',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

  transition:
    background .45s ease,
    color .45s ease,
    box-shadow .45s ease;

}


/* =========================================================
   02. LIGHT MODE — PREMIUM BACKGROUND
   ========================================================= */

body:not(.dark) .particle-footer {

  color: #17324d;

  background:

    /* top cyan glow */
    radial-gradient(
      ellipse at 50% -10%,
      rgba(14,165,233,.18),
      transparent 48%
    ),

    /* right warm glow */
    radial-gradient(
      ellipse at 92% 15%,
      rgba(250,204,21,.12),
      transparent 28%
    ),

    /* left teal glow */
    radial-gradient(
      ellipse at 5% 72%,
      rgba(45,212,191,.10),
      transparent 32%
    ),

    /* base */
    linear-gradient(
      135deg,
      #f9fdff 0%,
      #eef9fd 38%,
      #e9f7fa 70%,
      #f4fbf8 100%
    );

  border-top:
    1px solid rgba(14,165,233,.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95);

}


/* =========================================================
   03. DARK MODE — KEEP PREMIUM NAVY
   ========================================================= */

body.dark .particle-footer {

  color: #f8fafc;

  background:

    radial-gradient(
      ellipse at 50% -20%,
      rgba(45,212,191,.13),
      transparent 45%
    ),

    radial-gradient(
      ellipse at 85% 20%,
      rgba(212,175,55,.07),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #050b16 0%,
      #091321 45%,
      #101e30 100%
    );

}


/* =========================================================
   04. DECORATIVE TOP LIGHT
   ========================================================= */

body:not(.dark) .particle-footer::before {

  content: "";

  position: absolute;

  top: -130px;
  left: 50%;

  width: 700px;
  height: 250px;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(56,189,248,.18),
      rgba(255,255,255,0)
      70%
    );

  filter:
    blur(25px);

  pointer-events: none;

  z-index: 0;

}


/* =========================================================
   05. SOFT BOTTOM GLOW
   ========================================================= */

body:not(.dark) .particle-footer::after {

  content: "";

  position: absolute;

  left: -10%;
  right: -10%;
  bottom: -180px;

  height: 300px;

  background:
    radial-gradient(
      ellipse,
      rgba(45,212,191,.13),
      transparent 68%
    );

  filter:
    blur(25px);

  pointer-events: none;

  z-index: 0;

}


/* =========================================================
   06. FOOTER CONTENT
   ========================================================= */

.particle-footer .footer-content {

  position: relative;

  z-index: 10;

  max-width: 760px;

  margin:
    0 auto;

}


/* =========================================================
   07. REMOVE OLD CENTRAL GLOW
   ========================================================= */

body:not(.dark) .particle-footer
.footer-content::before {

  background:
    radial-gradient(
      ellipse,
      rgba(14,165,233,.055),
      transparent 72%
    );

  filter:
    blur(22px);

}


/* =========================================================
   08. BRAND TITLE
   ========================================================= */

.particle-footer h2 {

  position: relative;

  margin:
    0 0 10px;

  font-size:
    clamp(26px, 6vw, 34px);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing:
    -0.7px;

  transition:
    color .4s ease,
    text-shadow .4s ease;

}


/* LIGHT TITLE */

body:not(.dark) .particle-footer h2 {

  color:
    #075985;

  text-shadow:
    0 4px 18px rgba(14,165,233,.12);

  animation:
    footerTitleLight 5s ease-in-out infinite;

}


/* DARK TITLE */

body.dark .particle-footer h2 {

  color:
    #ffffff;

}


/* =========================================================
   09. TITLE ANIMATION
   ========================================================= */

@keyframes footerTitleLight {

  0%,
  100% {

    color:
      #075985;

    text-shadow:
      0 4px 18px rgba(14,165,233,.08);

  }

  50% {

    color:
      #087cff;

    text-shadow:
      0 4px 24px rgba(14,165,233,.20);

  }

}


/* =========================================================
   10. TAGLINE
   ========================================================= */

.particle-footer p {

  position: relative;

  z-index: 2;

  margin:
    0 0 24px;

  font-size:
    clamp(14px, 3vw, 16px);

  line-height:
    1.6;

  letter-spacing:
    .05px;

  transition:
    color .4s ease;

}


/* LIGHT */

body:not(.dark) .particle-footer p {

  color:
    #526779;

  opacity:
    1;

}


/* DARK */

body.dark .particle-footer p {

  color:
    rgba(241,245,249,.82);

}


/* =========================================================
   11. FOOTER NAVIGATION — PREMIUM PILLS
   ========================================================= */

.footer-links {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin:
    4px auto 24px;

}


/* LINKS */

.footer-links a {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px;

  padding:
    9px 18px;

  border-radius:
    999px;

  font-size:
    13px;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;

}


/* LIGHT LINKS */

body:not(.dark) .footer-links a {

  color:
    #17324d;

  background:
    rgba(255,255,255,.82);

  border:
    1px solid rgba(14,165,233,.10);

  box-shadow:
    0 7px 20px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.95);

  backdrop-filter:
    blur(10px);

}


/* LIGHT HOVER */

body:not(.dark) .footer-links a:hover {

  color:
    #087cff;

  background:
    #ffffff;

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 25px rgba(8,124,255,.13);

}


/* DARK LINKS */

body.dark .footer-links a {

  color:
    #e8f7ff;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.09);

  box-shadow:
    0 8px 20px rgba(0,0,0,.18);

}


/* DARK HOVER */

body.dark .footer-links a:hover {

  color:
    #72d9ff;

  background:
    rgba(22,184,255,.10);

  transform:
    translateY(-3px);

}


/* =========================================================
   12. SOCIAL AREA
   ========================================================= */

.footer-social {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  margin:
    8px 0 28px;

}


/* SOCIAL BUTTON */

.footer-social a {

  width:
    42px;

  height:
    42px;

  margin:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  font-size:
    18px;

  text-decoration:
    none;

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease,
    box-shadow .3s ease;

}


/* LIGHT SOCIAL */

body:not(.dark) .footer-social a {

  color:
    #31536d;

  background:
    rgba(255,255,255,.90);

  border:
    1px solid rgba(14,165,233,.10);

  box-shadow:
    0 7px 18px rgba(15,23,42,.07);

}


/* LIGHT SOCIAL HOVER */

body:not(.dark) .footer-social a:hover {

  color:
    #087cff;

  transform:
    translateY(-5px)
    scale(1.06);

  box-shadow:
    0 10px 24px rgba(8,124,255,.16);

}


/* DARK SOCIAL */

body.dark .footer-social a {

  color:
    #e2f5ff;

  background:
    rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.08);

}


/* =========================================================
   13. PWA BUTTON — BIG PREMIUM CTA
   ========================================================= */

#install-link,
.install-button {

  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    46px;

  padding:
    11px 22px;

  margin-top:
    2px;

  border-radius:
    999px;

  font-size:
    13px;

  font-weight:
    800;

  text-decoration:
    none;

  overflow:
    hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;

}


/* LIGHT CTA */

body:not(.dark) #install-link,
body:not(.dark) .install-button {

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #087cff 0%,
      #0ea5e9 48%,
      #16b8ff 100%
    );

  border:
    1px solid rgba(255,255,255,.40);

  box-shadow:
    0 10px 25px rgba(8,124,255,.22),
    0 0 0 4px rgba(14,165,233,.06);

}


/* CTA SHIMMER */

body:not(.dark) #install-link::before,
body:not(.dark) .install-button::before {

  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: -120%;

  width: 60%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  transform:
    skewX(-20deg);

  animation:
    footerCtaShimmer 4s ease-in-out infinite;

}


/* CTA HOVER */

body:not(.dark) #install-link:hover,
body:not(.dark) .install-button:hover {

  transform:
    translateY(-3px);

  filter:
    brightness(1.05);

  box-shadow:
    0 14px 30px rgba(8,124,255,.28),
    0 0 0 5px rgba(14,165,233,.08);

}


/* DARK CTA */

body.dark #install-link,
body.dark .install-button {

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #087cff,
      #16b8ff
    );

  box-shadow:
    0 9px 24px rgba(8,124,255,.28);

}


/* =========================================================
   14. CTA SHIMMER ANIMATION
   ========================================================= */

@keyframes footerCtaShimmer {

  0% {
    left: -120%;
  }

  35%,
  100% {
    left: 140%;
  }

}


/* =========================================================
   15. COPYRIGHT
   ========================================================= */

.particle-footer .copyright {

  position:
    relative;

  margin:
    28px 0 0;

  padding-top:
    18px;

  font-size:
    12px;

  letter-spacing:
    .3px;

  transition:
    color .4s ease,
    border-color .4s ease;

}


/* LIGHT COPYRIGHT */

body:not(.dark) .particle-footer .copyright {

  color:
    #607487;

  opacity:
    .95;

}


/* DARK COPYRIGHT */

body.dark .particle-footer .copyright {

  color:
    rgba(226,232,240,.70);

}


/* =========================================================
   16. COPYRIGHT TOP LINE
   ========================================================= */

.particle-footer .copyright::before {

  content: "";

  position:
    absolute;

  top:
    0;

  left:
    50%;

  width:
    80px;

  height:
    2px;

  transform:
    translateX(-50%);

  border-radius:
    99px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #0ea5e9,
      transparent
    );

}


/* =========================================================
   17. PREMIUM WAVE
   ========================================================= */

.particle-footer {

  --footer-wave:
    rgba(255,255,255,.55);

}


/* LIGHT WAVE */

body:not(.dark) .particle-footer {

  --footer-wave:
    rgba(255,255,255,.60);

}


/* DARK WAVE */

body.dark .particle-footer {

  --footer-wave:
    rgba(255,255,255,.025);

}


/* =========================================================
   18. WAVE SHAPE
   ========================================================= */

.particle-footer .footer-content::after {

  content: "";

  position:
    absolute;

  left:
    50%;

  bottom:
    -250px;

  width:
    900px;

  height:
    340px;

  transform:
    translateX(-50%);

  border-radius:
    50% 50% 0 0;

  background:
    var(--footer-wave);

  filter:
    blur(1px);

  opacity:
    .7;

  pointer-events:
    none;

  z-index:
    -1;

}


/* =========================================================
   19. CANVAS — SOFTEN LIGHT MODE
   ========================================================= */

body:not(.dark) #footerCanvas {

  opacity:
    .28;

  mix-blend-mode:
    multiply;

}


/* DARK CANVAS */

body.dark #footerCanvas {

  opacity:
    .75;

}


/* =========================================================
   20. MOBILE
   ========================================================= */

@media (max-width:600px) {

  .particle-footer {

    min-height:
      400px;

    padding:
      58px 15px 48px;

  }


  .particle-footer h2 {

    font-size:
      26px;

  }


  .particle-footer p {

    font-size:
      14px;

    margin-bottom:
      20px;

  }


  .footer-links {

    gap:
      8px;

    margin-bottom:
      22px;

  }


  .footer-links a {

    min-height:
      39px;

    padding:
      8px 15px;

    font-size:
      12px;

  }


  .footer-social {

    gap:
      9px;

    margin-bottom:
      24px;

  }


  .footer-social a {

    width:
      40px;

    height:
      40px;

    font-size:
      17px;

  }


  #install-link,
  .install-button {

    min-height:
      44px;

    padding:
      10px 18px;

    font-size:
      12px;

  }


  .particle-footer .copyright {

    font-size:
      11px;

  }

}


/* =========================================================
   21. VERY SMALL PHONE
   ========================================================= */

@media (max-width:380px) {

  .footer-links a {

    padding:
      8px 12px;

  }

  .footer-social a {

    width:
      38px;

    height:
      38px;

  }

}


/* =========================================================
   22. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .particle-footer h2 {

    animation:
      none !important;

  }

  body:not(.dark) #install-link::before,
  body:not(.dark) .install-button::before {

    animation:
      none !important;

  }

  .footer-links a,
  .footer-social a,
  #install-link,
  .install-button {

    transition:
      none !important;

  }

}


/* FIX FINAL: POSISI TOMBOL APLIKASI FOOTER */

.particle-footer .footer-content > #install-link.install-button {
  position: relative !important;
  top: 0 !important;
  bottom: auto !important;
  transform: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  margin: 25px auto 0 !important;
  padding: 0 20px !important;

  box-sizing: border-box;
  line-height: 1.2 !important;
  text-align: center;
  white-space: nowrap;

  animation: none !important;
}

.particle-footer .footer-content > #install-link.install-button:hover {
  transform: translateY(-2px) !important;
}

.particle-footer .footer-content > #install-link.install-button:active {
  transform: none !important;
}

/* =========================================
   FOOTER SPACING BALANCE — FINAL
   LIGHT & DARK MODE
   KlinikIndonesia.com
========================================= */

.particle-footer .footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* JUDUL */
.particle-footer h2 {
  margin: 0 0 10px;
  text-align: center;
}

/* TAGLINE */
.particle-footer .footer-content > p {
  margin: 10px 0 22px;
  line-height: 1.6;
  text-align: center;
}

/* NAVIGASI */
.particle-footer .footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}

.particle-footer .footer-links a {
  margin: 0;
}

/* IKON SOSIAL */
.particle-footer .footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 26px;
}

.particle-footer .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 50%;
  line-height: 1;
}

/* TOMBOL APLIKASI */
.particle-footer #install-link.install-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  margin: 0;
  padding: 12px 22px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  white-space: nowrap;
}

/* GARIS DEKORATIF */
.particle-footer .footer-divider {
  flex: 0 0 auto;
  width: 64px;
  height: 3px;
  margin: 26px auto 16px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    transparent,
    #0ea5e9,
    #20b486,
    transparent
  );
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
}

/* COPYRIGHT */
.particle-footer .copyright {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  text-align: center;
}

/* RESPONSIVE MOBILE */
@media (max-width: 600px) {
  .particle-footer {
    padding: 46px 16px 42px;
  }

  .particle-footer .footer-content > p {
    margin-bottom: 20px;
  }

  .particle-footer .footer-links {
    gap: 10px;
    margin-bottom: 20px;
  }

  .particle-footer .footer-social {
    gap: 12px;
    margin-bottom: 24px;
  }

  .particle-footer .footer-social a {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .particle-footer #install-link.install-button {
    min-height: 46px;
    padding: 11px 18px;
    font-size: 13px;
  }

  .particle-footer .footer-divider {
    margin: 24px auto 15px;
  }
}

/* HORMATI PENGATURAN REDUKSI ANIMASI */
@media (prefers-reduced-motion: reduce) {
  .particle-footer .footer-links a,
  .particle-footer .footer-social a,
  .particle-footer #install-link {
    transition: none !important;
    animation: none !important;
  }
}

/* FIX: HANYA SATU GARIS DEKORATIF FOOTER */

.particle-footer .footer-content::after {
  content: none !important;
  display: none !important;
}

.particle-footer .footer-divider {
  display: block;
  width: 64px;
  height: 3px;
  margin: 26px auto 16px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    transparent,
    #0ea5e9 30%,
    #20b486 70%,
    transparent
  );
  box-shadow: none;
}

/* Mode terang */
body:not(.dark) .particle-footer .footer-divider {
  opacity: 0.9;
}

/* Mode gelap */
body.dark .particle-footer .footer-divider {
  opacity: 1;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.2);
}

/* DEBUG: MATIKAN GARIS DEKORATIF BARU */
.particle-footer .footer-divider {
  display: none !important;
}

/* =========================================
   FINAL FOOTER SPACING FIX
========================================= */

/* Jarak ikon sosial ke tombol aplikasi */
.particle-footer .footer-social {
  margin-bottom: 28px !important;
}

/* Tombol aplikasi tetap di tengah */
.particle-footer #install-link.install-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto !important;
  position: relative;
  z-index: 2;
}

/* Sembunyikan garis dekoratif */
.particle-footer .footer-divider {
  display: none !important;
}

/* Beri jarak aman antara tombol dan copyright */
.particle-footer .copyright {
  position: relative;
  margin-top: 22px !important;
  padding-top: 0 !important;
  line-height: 1.7;
  text-align: center;
}

/* Pastikan tidak ada garis tambahan */
.particle-footer .copyright::before,
.particle-footer .copyright::after {
  content: none !important;
  display: none !important;
}

/* Tampilan tablet dan ponsel */
@media (max-width: 600px) {
  .particle-footer .footer-social {
    margin-bottom: 26px !important;
  }

  .particle-footer .copyright {
    margin-top: 20px !important;
  }
}

/* GARIS DEKORATIF FOOTER — FINAL FIX */
.particle-footer .footer-divider {
  display: block !important;
  width: 64px;
  height: 3px;
  margin: 26px auto 16px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #0ea5e9 25%,
    #20b486 75%,
    transparent 100%
  );
  box-shadow: none;
  opacity: 1;
}

/* Jarak copyright tetap rapi */
.particle-footer .copyright {
  margin-top: 0 !important;
  text-align: center;
  line-height: 1.7;
}

/* Pastikan tombol tetap terpisah dari copyright */
.particle-footer #install-link.install-button {
  margin-bottom: 0 !important;
}


/* 1. LIGHT MODE — BACKGROUND LEMBUT */

body:not(.dark) .particle-footer {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(45, 212, 191, 0.07),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 88% 18%,
      rgba(212, 175, 55, 0.035),
      transparent 34%
    ),
    linear-gradient(
      160deg,
      #f7fbfd 0%,
      #eff8fb 52%,
      #eaf4f7 100%
    );
}

/* 2. LIGHT MODE — CAHAYA LEBIH HALUS */

body:not(.dark) .particle-footer .footer-content::before {
  background: radial-gradient(
    ellipse,
    rgba(45, 212, 191, 0.035) 0%,
    rgba(45, 212, 191, 0.015) 35%,
    transparent 72%
  );

  filter: blur(24px);
}

/* 3. PEMISAH FOOTER YANG LEMBUT */

body:not(.dark) .particle-footer {
  border-top: 1px solid rgba(14, 165, 233, 0.08);
}



/* KLINIKINDONESIA — TOMBOL APLIKASI FOOTER */

.particle-footer .footer-content > #install-link.install-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  margin: 0 auto;
  padding: 10px 22px;

  box-sizing: border-box;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  transform: none;
}

.particle-footer .footer-content > #install-link.install-button:hover {
  transform: translateY(-2px);
}

.particle-footer .footer-content > #install-link.install-button:active {
  transform: none;
}

@media (max-width: 600px) {
  .particle-footer .footer-content > #install-link.install-button {
    min-height: 46px;
    padding: 10px 18px;
    font-size: 12px;
  }
}

/* =========================================
   KLINIKINDONESIA — BREADCRUMB FINAL
   Kotak kiri + kotak lama kunjungan kanan
========================================= */

body section.hero > .breadcrumb-meta.badge {
    position: fixed !important;

    top: var(--breadcrumb-top, 200px) !important;
    left: var(--breadcrumb-left, 36px) !important;
    right: auto !important;
    bottom: auto !important;

    width: var(--breadcrumb-width, calc(100vw - 72px)) !important;
    max-width: none !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    float: none !important;

    z-index: 1001 !important;
    pointer-events: none !important;
}

/* Kotak Beranda — selalu di kiri */
body section.hero > .breadcrumb-meta.badge .breadcrumb-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;

    min-width: 0 !important;
    width: fit-content !important;
    max-width: calc(100% - 120px) !important;

    padding: 7px 11px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;

    background: rgba(14, 165, 233, 0.07) !important;
    border: 1px solid rgba(14, 165, 233, 0.14) !important;

    white-space: nowrap !important;
    pointer-events: auto !important;
}

body section.hero > .breadcrumb-meta.badge .breadcrumb-text a {
    color: #0284c7 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

body section.hero > .breadcrumb-meta.badge .breadcrumb-separator {
    color: #64748b !important;
    font-size: 12px !important;
}

/* Kotak Lama Kunjungan — selalu di kanan */
body section.hero > .breadcrumb-meta.badge .meta-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;

    flex: 0 0 auto !important;
    width: fit-content !important;
    margin: 0 !important;
    padding: 7px 11px !important;
    box-sizing: border-box !important;

    border-radius: 12px !important;
    background: rgba(14, 165, 233, 0.07) !important;
    border: 1px solid rgba(14, 165, 233, 0.14) !important;

    white-space: nowrap !important;
    pointer-events: auto !important;
}

body section.hero > .breadcrumb-meta.badge .meta-item .icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
}

body section.hero > .breadcrumb-meta.badge #visit-time {
    display: inline-block !important;
    flex: 0 0 auto !important;

    color: #0284c7 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Mode gelap */
body.dark section.hero > .breadcrumb-meta.badge .breadcrumb-text,
body.dark section.hero > .breadcrumb-meta.badge .meta-item {
    background: rgba(56, 189, 248, 0.07) !important;
    border-color: rgba(56, 189, 248, 0.16) !important;
}

body.dark section.hero > .breadcrumb-meta.badge .breadcrumb-text a,
body.dark section.hero > .breadcrumb-meta.badge #visit-time {
    color: #38bdf8 !important;
}

body.dark section.hero > .breadcrumb-meta.badge .breadcrumb-separator {
    color: #94a3b8 !important;
}

/* Health Tips Bar mengikuti posisi di bawah kedua kotak */
#healthTipsBar {
    position: sticky !important;
    top: var(--tips-top, 250px) !important;
    z-index: 999 !important;
}

/* Ponsel */
@media (max-width: 600px) {
    body section.hero > .breadcrumb-meta.badge {
        gap: 5px !important;
    }

    body section.hero > .breadcrumb-meta.badge .breadcrumb-text {
        gap: 3px !important;
        padding: 6px 8px !important;
        max-width: calc(100% - 105px) !important;
    }

    body section.hero > .breadcrumb-meta.badge .breadcrumb-text a,
    body section.hero > .breadcrumb-meta.badge .breadcrumb-separator {
        font-size: 10px !important;
    }

    body section.hero > .breadcrumb-meta.badge .meta-item {
        gap: 4px !important;
        padding: 6px 8px !important;
    }

    body section.hero > .breadcrumb-meta.badge .meta-item .icon {
        width: 16px !important;
        height: 16px !important;
        flex-basis: 16px !important;
    }

    body section.hero > .breadcrumb-meta.badge #visit-time {
        font-size: 10px !important;
    }
}


/* Koreksi alignment horizontal semua orientasi */
body section.hero > .breadcrumb-meta.badge {
    left: var(--breadcrumb-left, 36px) !important;
    width: var(--breadcrumb-width, calc(100vw - 72px)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

@media (orientation: landscape) {
    body section.hero > .breadcrumb-meta.badge {
        left: var(--breadcrumb-left) !important;
        width: var(--breadcrumb-width) !important;
        right: auto !important;
    }
}


/* Mode terang dan gelap: Health Tips Bar */
#healthTipsBar {
    position: sticky !important;
    top: var(--tips-top, 250px) !important;
    z-index: 999 !important;
}


/* =========================================
   FIX BREADCRUMB — CEGAH EFEK BLUR
========================================= */

body section.hero > .breadcrumb-meta.badge {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

body section.hero > .breadcrumb-meta.badge .breadcrumb-text,
body section.hero > .breadcrumb-meta.badge .meta-item {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

/* Atur lapisan dropdown */
header {
    z-index: 1100;
}

nav {
    z-index: 1101;
}

nav ul ul {
    z-index: 1102;
}

/* =========================================
   FIX SEARCH LANDSCAPE — CONTAINER WIDTH
   KlinikIndonesia.com
========================================= */

@media (orientation: landscape) and (min-width: 901px) {

  /* Hilangkan batas lebar container header */
  header > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
  }

  header .header-inner {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  header .header-top {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Search mengisi ruang yang tersedia */
  header .header-search {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  header .header-search .search-box,
  header .header-search .search-form,
  header .header-search .search-wrapper {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =========================================
   HEADER TRANSPARAN — KLINIKINDONESIA
   Desktop & Tablet Landscape
========================================= */

@media (min-width: 769px) {

  header {
    background: rgba(11, 18, 36, 0.58) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);

    transition:
      background 0.3s ease,
      box-shadow 0.3s ease;
  }

  header.scrolled {
    background: rgba(11, 18, 36, 0.42) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }

  /* Area dalam header tetap transparan */
  header .container,
  header .header-inner,
  header .header-top {
    background: transparent !important;
  }
}

/* Mode terang */
@media (min-width: 769px) {
  body:not(.dark) header {
    background: rgba(255, 255, 255, 0.65) !important;
    border-bottom-color: rgba(14, 165, 233, 0.10);
  }

  body:not(.dark) header.scrolled {
    background: rgba(255, 255, 255, 0.48) !important;
  }
}

/* =========================================
   KLINIKINDONESIA — HEADER LANDSCAPE FINAL
   Tempel paling akhir artikel-kesehatan.css
========================================= */

@media (min-width: 901px) and (orientation: landscape) {

  header {
    position: sticky;
    top: 0;
    z-index: 1100;
    min-height: 68px;
    padding: 8px 0;
    border-radius: 0;
    background: rgba(11, 18, 36, .92) !important;
    border-bottom: 1px solid rgba(125, 211, 252, .14);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  body:not(.dark) header {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom-color: rgba(14, 165, 233, .12);
    box-shadow: 0 6px 22px rgba(15, 23, 42, .07);
  }

  header > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 28px !important;
    box-sizing: border-box;
  }

  header .header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100%;
    min-width: 0;
    gap: 14px;
  }

  header .header-top {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0;
    gap: 14px;
  }

  header .logo {
    flex: 0 0 auto;
    gap: 8px;
  }

  header .logo img {
    height: 34px;
    width: auto;
  }

  header .logo span {
    font-size: 17px;
    font-weight: 750;
    white-space: nowrap;
  }

  header nav {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    min-width: 0;
  }

  header nav > ul {
    display: flex;
    align-items: center;
    gap: clamp(5px, .8vw, 13px);
    margin: 0;
    padding: 0;
  }

  header nav > ul > li > a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 7px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 9px;
  }

  header .header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0 !important;
  }

  header .theme-toggle {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  header .header-search {
    display: flex;
    flex: 1 1 160px !important;
    width: auto !important;
    min-width: 100px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 0 !important;
  }

  header .header-search .search-box,
  header .header-search .search-form,
  header .header-search .search-wrapper {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  header .search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 4px 5px 4px 12px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, .48);
    border: 1px solid rgba(56, 189, 248, .30);
    box-shadow: none;
  }

  body:not(.dark) header .search-wrapper {
    background: #f8fafc;
    border-color: #dbe7f0;
  }

  header .search-wrapper input[type="text"] {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    padding: 6px 2px;
    font-size: 13px;
    animation: none;
  }

  header .search-wrapper input::placeholder {
    animation: none;
  }

  header .search-wrapper button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 42px;
    height: 36px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    transform: none;
    animation: none;
    white-space: nowrap;
  }

  header .search-wrapper button .btn-text {
    display: inline-flex;
  }

  header .search-wrapper button:hover {
    transform: translateY(-1px);
  }

  header .hamburger {
    display: none !important;
  }
}

/* Tablet dan ponsel tetap memakai aturan responsif lama */


/* =========================================
   KLINIKINDONESIA — LANDSCAPE HEADER REFINEMENT
========================================= */

@media (min-width: 901px) and (orientation: landscape) {

  header {
    min-height: 74px !important;
    padding: 4px 0 !important;
    top: 0 !important;
  }

  header > .container {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  header .header-inner {
    gap: 14px !important;
  }

  header .header-top {
    gap: 12px !important;
  }

  /* Navigasi tetap di tengah secara vertikal */
  header nav {
    flex: 0 0 auto !important;
  }

  header nav > ul {
    gap: clamp(4px, .65vw, 10px) !important;
  }

  header nav > ul > li > a {
    padding: 0 6px !important;
    min-height: 42px;
  }

  /* Tombol tema sebelum kolom pencarian */
  header .header-actions {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    gap: 8px !important;
  }

  header .theme-toggle {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Pencarian mengisi ruang tersisa */
  header .header-search {
    order: 3 !important;
    flex: 1 1 180px !important;
    width: auto !important;
    min-width: 130px !important;
    max-width: none !important;
    margin: 0 !important;
  }

  header .search-wrapper {
    height: 42px !important;
    border-radius: 999px !important;
    padding: 3px 4px 3px 12px !important;
  }

  header .search-wrapper button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    transform: none !important;
  }
}

/* Jangan mengubah susunan pada ponsel */


/* =========================================
   FINAL FIX — TURUNKAN ISI HEADER 6 PX
   Landscape tablet & desktop
========================================= */

@media (min-width: 901px) and (orientation: landscape) {
  header .header-inner {
    transform: translateY(13px) !important;
  }
}

/* =========================================
   KLINIKINDONESIA — PREMIUM GLASS HEADER
   PORTRAIT TABLET & MOBILE
   LIGHT + DARK MODE
========================================= */

@media (max-width: 900px) {

  /* HEADER UTAMA */
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;

    background: rgba(11, 18, 36, 0.40) !important;

    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;

    border-bottom: 1px solid rgba(125, 211, 252, 0.12) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;

    transition:
      background 0.3s ease,
      box-shadow 0.3s ease !important;
  }

  /* HEADER SAAT SCROLL */
  header.scrolled {
    background: rgba(11, 18, 36, 0.30) !important;

    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  }

  /* MODE TERANG */
  body:not(.dark) header {
    background: rgba(255, 255, 255, 0.40) !important;
    border-bottom-color: rgba(14, 165, 233, 0.10) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.035) !important;
  }

  body:not(.dark) header.scrolled {
    background: rgba(255, 255, 255, 0.30) !important;
  }

  /* MODE GELAP */
  body.dark header {
    background: rgba(11, 18, 36, 0.40) !important;
    border-bottom-color: rgba(125, 211, 252, 0.12) !important;
  }

  body.dark header.scrolled {
    background: rgba(11, 18, 36, 0.30) !important;
  }

  /* TRANSPARANSI ISI HEADER */
  header > .container,
  header .header-inner,
  header .header-top {
    background: transparent !important;
  }

}

/* =========================================
   KLINIKINDONESIA — HEADER VERTICAL BALANCE
   PORTRAIT TABLET & MOBILE
========================================= */

@media (max-width: 900px) {

  /* Seimbangkan jarak atas dan bawah baris logo */
  header .header-top {
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Logo tetap sejajar dengan tombol */
  header .logo,
  header .header-actions,
  header .theme-toggle,
  header .hamburger {
    align-self: center !important;
  }

}

/* =====================================================
KLINIKINDONESIA.COM — PREMIUM CARD SYSTEM
Reveal • Lift • Emoji • Glow • Glass Shimmer
===================================================== */

/* 1. CARD DASAR */
.card {
position: relative;
isolation: isolate;
overflow: hidden;

opacity: 0;
transform: translate3d(0, 22px, 0) scale(.99);

transition:
opacity .5s ease,
transform .38s cubic-bezier(.2,.75,.25,1),
box-shadow .38s ease,
border-color .38s ease;

transition-delay: var(--card-delay, 0ms);

border: 1px solid rgba(14,165,233,.10);
box-shadow: 0 8px 24px rgba(15,23,42,.055);

-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: inherit;
}

/* 2. ANIMASI MASUK */
.card.show {
opacity: 1;
transform: translate3d(0,0,0) scale(1);
}

/* 3. IKON EMOJI */
.card-icon {
position: relative;
z-index: 1;

display: flex;
align-items: center;
justify-content: center;

width: 60px;
height: 60px;
flex-shrink: 0;

border-radius: 18px;
background: linear-gradient(145deg,#0ea5e9,#0284c7);
color: #fff;

font-size: 30px;
line-height: 1;

box-shadow: 0 6px 16px rgba(14,165,233,.18);

transition:
transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s ease,
filter .35s ease;
}

/* 4. LAPISAN SHIMMER */
.card::before {
content: "";
position: absolute;
z-index: 2;
top: -50%;
bottom: -50%;
left: -85%;
width: 55%;

pointer-events: none;
opacity: 0;

background: linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,.08) 30%,
rgba(255,255,255,.55) 50%,
rgba(255,255,255,.08) 70%,
transparent 100%
);

transform: translateX(0) skewX(-20deg);
}

@keyframes klinikCardShimmer {
0% {
transform: translateX(0) skewX(-20deg);
opacity: 0;
}
15% { opacity: 1; }
85% { opacity: 1; }
100% {
transform: translateX(360%) skewX(-20deg);
opacity: 0;
}
}

/* 5. HOVER KHUSUS MOUSE / TRACKPAD */
@media (hover: hover) and (pointer: fine) {
.card:hover {
transform: translate3d(0,-6px,0) scale(1.015);
box-shadow: 0 18px 38px rgba(15,23,42,.13);
border-color: rgba(14,165,233,.35);
}

.card:hover .card-icon {
transform: scale(1.08) rotate(-4deg);
box-shadow: 0 0 0 5px rgba(14,165,233,.08),
0 8px 22px rgba(14,165,233,.28);
filter: saturate(1.12);
}

.card:hover::before {
animation: klinikCardShimmer .9s ease-in-out;
}
}

/* 6. RESPONS SENTUH */
.card:active {
transform: scale(.985);
transition-duration: .12s;
}

.card:active::before {
animation: klinikCardShimmer .75s ease-in-out;
}

/* 7. DARK MODE */
body.dark .card {
border-color: rgba(148,163,184,.13);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

body.dark .card:hover {
border-color: rgba(56,189,248,.38);
box-shadow: 0 18px 38px rgba(0,0,0,.30);
}

body.dark .card-icon {
box-shadow: 0 6px 18px rgba(14,165,233,.18);
}

body.dark .card::before {
background: linear-gradient(
105deg,
transparent 0%,
rgba(56,189,248,.04) 30%,
rgba(125,211,252,.24) 50%,
rgba(56,189,248,.04) 70%,
transparent 100%
);
}

/* 8. AKSESIBILITAS */
.card:focus-visible {
outline: 3px solid #38bdf8;
outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
.card,
.card-icon,
.card::before {
animation: none !important;
transition: none !important;
}

.card {
opacity: 1;
transform: none;
}
}

/* 9. HP: INTERAKSI LEBIH TENANG */
@media (hover: none) {
.card:active .card-icon {
transform: scale(1.05);
}
}

/* =========================================
FIX ROTASI IKON KARTU — KLINIKINDONESIA
Desktop + Android + Tablet
========================================= */

/* Pastikan ikon memiliki transisi rotasi */
.card .card-icon {
transform: scale(1) rotate(0deg) !important;
transform-origin: center center;
transition:
transform 0.5s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.4s ease,
filter 0.4s ease !important;
}

/* Desktop: membesar dan berputar */
@media (hover: hover) and (pointer: fine) {
.card:hover .card-icon {
transform: scale(1.15) rotate(20deg) !important;
}
}

/* Android/tablet: rotasi saat kartu ditekan */
.card:active .card-icon {
transform: scale(1.15) rotate(20deg) !important;
transition-duration: 0.25s !important;

box-shadow:
0 8px 22px rgba(14, 165, 233, 0.4),
0 0 25px rgba(56, 189, 248, 0.3);
}

/* Jika kartu mendapat fokus */
.card:focus-visible .card-icon {
transform: scale(1.1) rotate(12deg) !important;
}

/* =====================================================
KLINIKINDONESIA.COM
PREMIUM MEDICAL GLASS SIDEBAR — FINAL
Portrait + Landscape | Light + Dark Mode
Mempertahankan struktur dan perilaku menu yang ada
===================================================== */

/* 1. OVERLAY — SOFT PREMIUM BLUR */
.menu-overlay {
position: fixed !important;
inset: 0 !important;
z-index: 1999 !important;

background: rgba(15, 23, 42, 0.38) !important;

-webkit-backdrop-filter: blur(7px) saturate(115%) !important;
backdrop-filter: blur(7px) saturate(115%) !important;

opacity: 0;
visibility: hidden;
pointer-events: none;

transition:
opacity .32s ease,
visibility .32s ease !important;
}

.menu-overlay.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto;
}

/* 2. SIDEBAR — PREMIUM GLASS PANEL */
.mobile-menu {
position: fixed !important;
top: 0 !important;
right: -100%;
bottom: 0;

width: min(380px, 85vw) !important;
max-width: 100vw;
height: 100vh;
height: 100dvh;

z-index: 2000 !important;

box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;

padding:
calc(82px + env(safe-area-inset-top, 0px))
22px
calc(28px + env(safe-area-inset-bottom, 0px)) !important;

background:
radial-gradient(
circle at 100% 0%,
rgba(14, 165, 233, .13),
transparent 38%
),
linear-gradient(
155deg,
rgba(255, 255, 255, .94),
rgba(241, 248, 252, .92) 58%,
rgba(232, 245, 250, .94)
) !important;

color: #172033;

border-left: 1px solid rgba(255, 255, 255, .85);
border-radius: 24px 0 0 24px;

box-shadow:
-12px 0 35px rgba(15, 23, 42, .10),
-2px 0 10px rgba(14, 165, 233, .05),
inset 1px 0 0 rgba(255, 255, 255, .55);

-webkit-backdrop-filter: blur(30px) saturate(155%);
backdrop-filter: blur(30px) saturate(155%);

isolation: isolate;
touch-action: pan-y;

transition:
right .35s cubic-bezier(.22, 1, .36, 1),
background .3s ease,
box-shadow .3s ease !important;
}

/* Sidebar terbuka */
.mobile-menu.active {
right: 0 !important;
}

/* 3. DAFTAR MENU UTAMA */
.mobile-menu > ul {
margin: 0 !important;
padding: 0 !important;
list-style: none;
}

/* Pemisahan setiap menu */
.mobile-menu > ul > li {
margin: 0 0 8px !important;
padding: 0;
}

/* 4. TAUTAN MENU UTAMA */
.mobile-menu > ul > li > a,
.mobile-menu > ul > li > .accordion-toggle {
position: relative;

display: flex;
align-items: center;
gap: 13px;

min-height: 52px;
width: 100%;
padding: 13px 15px;

box-sizing: border-box;
border: 1px solid transparent;
border-radius: 15px;

color: #243449 !important;
font-size: 15px;
font-weight: 650;
line-height: 1.45;
letter-spacing: .05px;

text-decoration: none !important;
background: transparent;

cursor: pointer;
-webkit-tap-highlight-color: transparent;

transition:
background .22s ease,
border-color .22s ease,
color .22s ease,
transform .22s ease,
box-shadow .22s ease;
}

/* 5. IKON MENU */
.mobile-menu > ul > li > a > svg,
.mobile-menu > ul > li > .accordion-toggle > svg,
.mobile-menu > ul > li > a > .menu-icon {
flex: 0 0 21px;

width: 21px;
height: 21px;

color: #0284c7;
stroke: currentColor;
stroke-width: 1.9;

transition:
color .22s ease,
transform .22s ease;
}

/* 6. INTERAKSI DESKTOP */
@media (hover: hover) and (pointer: fine) {
.mobile-menu > ul > li > a:hover,
.mobile-menu > ul > li > .accordion-toggle:hover {
color: #0369a1 !important;

background: rgba(14, 165, 233, .09);
border-color: rgba(14, 165, 233, .15);

box-shadow:
  0 4px 14px rgba(14, 165, 233, .05);

transform: translateX(-2px);

}

.mobile-menu > ul > li > a:hover svg,
.mobile-menu > ul > li > .accordion-toggle:hover svg {
transform: scale(1.07);
}
}

/* Respons sentuhan */
.mobile-menu > ul > li > a:active,
.mobile-menu > ul > li > .accordion-toggle:active {
background: rgba(14, 165, 233, .13);
transform: scale(.985);
}

/* 7. SUBMENU ACCORDION */
.mobile-menu .submenu {
margin: 5px 0 10px !important;
padding: 0 0 0 12px !important;

border-left: 2px solid rgba(14, 165, 233, .22);
overflow: hidden;
}

.mobile-menu .submenu li {
margin: 3px 0 !important;
}

.mobile-menu .submenu li a {
display: flex;
align-items: center;
gap: 10px;

min-height: 43px;
padding: 10px 12px 10px 15px !important;

border-radius: 11px;
border: 1px solid transparent;

color: #475569 !important;
font-size: 13px;
font-weight: 550;
line-height: 1.45;

text-decoration: none !important;
background: transparent;

transition:
color .2s ease,
background .2s ease,
border-color .2s ease;
}

/* Ikon submenu */
.mobile-menu .submenu svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
color: #0284c7;
stroke: currentColor;
}

/* Hover submenu */
.mobile-menu .submenu li a:hover {
color: #0369a1 !important;
background: rgba(14, 165, 233, .08);
border-color: rgba(14, 165, 233, .10);
}

/* 8. DARK MODE */
body.dark .mobile-menu {
background:
radial-gradient(
circle at 100% 0%,
rgba(14, 165, 233, .15),
transparent 40%
),
linear-gradient(
155deg,
rgba(17, 31, 52, .97),
rgba(11, 22, 39, .97) 60%,
rgba(7, 17, 32, .98)
) !important;

color: #f1f5f9;

border-left-color: rgba(125, 211, 252, .13);

box-shadow:
-15px 0 40px rgba(0, 0, 0, .25),
inset 1px 0 0 rgba(255, 255, 255, .035);
}

body.dark .menu-overlay {
background: rgba(2, 6, 23, .58) !important;
}

body.dark .mobile-menu > ul > li > a,
body.dark .mobile-menu > ul > li > .accordion-toggle {
color: #e6f3ff !important;
}

body.dark .mobile-menu > ul > li > a > svg,
body.dark .mobile-menu > ul > li > .accordion-toggle > svg,
body.dark .mobile-menu > ul > li > a > .menu-icon {
color: #7dd3fc;
}

@media (hover: hover) and (pointer: fine) {
body.dark .mobile-menu > ul > li > a:hover,
body.dark .mobile-menu > ul > li > .accordion-toggle:hover {
color: #ffffff !important;
background: rgba(56, 189, 248, .10);
border-color: rgba(56, 189, 248, .17);
}
}

body.dark .mobile-menu .submenu {
border-left-color: rgba(56, 189, 248, .25);
}

body.dark .mobile-menu .submenu li a {
color: #cbd5e1 !important;
}

body.dark .mobile-menu .submenu li a:hover {
color: #7dd3fc !important;
background: rgba(56, 189, 248, .09);
border-color: rgba(56, 189, 248, .12);
}

body.dark .mobile-menu .submenu svg {
color: #7dd3fc;
}

/* 9. PORTRAIT HP KECIL */
@media (max-width: 600px) {
.mobile-menu {
width: min(360px, 88vw) !important;

padding-left: 18px !important;
padding-right: 18px !important;

border-radius: 20px 0 0 20px;

}

.mobile-menu > ul > li > a,
.mobile-menu > ul > li > .accordion-toggle {
min-height: 50px;
padding: 12px 13px;
font-size: 14px;
}

.mobile-menu .submenu li a {
min-height: 41px;
font-size: 13px;
}
}

/* 10. TABLET PORTRAIT */
@media (min-width: 601px) and (max-width: 900px) {
.mobile-menu {
width: min(380px, 72vw) !important;
}
}

/* 11. AKSESIBILITAS */
.mobile-menu a:focus-visible,
.mobile-menu .accordion-toggle:focus-visible {
outline: 2px solid #0ea5e9;
outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
.mobile-menu,
.mobile-menu *,
.menu-overlay {
transition: none !important;
animation: none !important;
}
}

/* 12. FLOATING TETAP DI BELAKANG MENU */
#floatingAds {
z-index: 1000 !important;
}

.menu-overlay {
z-index: 1999 !important;
}

.mobile-menu {
z-index: 2000 !important;
}

/* =========================================
PREMIUM TRANSPARENT GLASS SIDEBAR
========================================= */

/* LIGHT MODE */
.mobile-menu {
background:
radial-gradient(
circle at 100% 0%,
rgba(14, 165, 233, 0.10),
transparent 42%
),
linear-gradient(
145deg,
rgba(255, 255, 255, 0.76),
rgba(235, 247, 253, 0.70)
) !important;

-webkit-backdrop-filter: blur(28px) saturate(160%) !important;
backdrop-filter: blur(28px) saturate(160%) !important;

border-left: 1px solid rgba(255, 255, 255, 0.60) !important;

box-shadow:
-12px 0 35px rgba(15, 23, 42, 0.10),
inset 1px 0 0 rgba(255, 255, 255, 0.30) !important;
}

/* DARK MODE */
body.dark .mobile-menu {
background:
radial-gradient(
circle at 100% 0%,
rgba(14, 165, 233, 0.15),
transparent 42%
),
linear-gradient(
145deg,
rgba(15, 29, 49, 0.82),
rgba(7, 17, 32, 0.78)
) !important;

-webkit-backdrop-filter: blur(28px) saturate(150%) !important;
backdrop-filter: blur(28px) saturate(150%) !important;

border-left: 1px solid rgba(125, 211, 252, 0.16) !important;

box-shadow:
-12px 0 35px rgba(0, 0, 0, 0.22),
inset 1px 0 0 rgba(255, 255, 255, 0.04) !important;
}

/* OVERLAY — HALUS, TIDAK TERLALU GELAP */
.menu-overlay {
background: rgba(15, 23, 42, 0.25) !important;

-webkit-backdrop-filter: blur(5px) !important;
backdrop-filter: blur(5px) !important;
}

body.dark .menu-overlay {
background: rgba(2, 6, 23, 0.42) !important;
}


/* =========================================
   ULTRA TRANSPARENT GLASS SIDEBAR
========================================= */

/* MODE TERANG */
.mobile-menu {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(14, 165, 233, 0.06),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.35),
      rgba(235, 247, 253, 0.28)
    ) !important;

  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;

  border-left: 1px solid rgba(255, 255, 255, 0.40) !important;

  box-shadow:
    -12px 0 35px rgba(15, 23, 42, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.20) !important;
}

/* MODE GELAP */
body.dark .mobile-menu {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(14, 165, 233, 0.08),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(15, 29, 49, 0.40),
      rgba(7, 17, 32, 0.32)
    ) !important;

  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;

  border-left: 1px solid rgba(125, 211, 252, 0.12) !important;

  box-shadow:
    -12px 0 35px rgba(0, 0, 0, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.03) !important;
}

/* ===== PERBAIKAN HEADER PORTRAIT ===== */
@media (max-width: 768px) {
    /* Navigasi desktop tidak tampil di layar sempit */
    header nav {
        display: none;
    }

    /* Susunan header mobile */
    .header-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    /* Pencarian memenuhi lebar yang tersedia */
    .header-search {
        width: 100%;
        min-width: 0;
    }

    .search-box,
    .search-wrapper {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .search-wrapper input {
        min-width: 0;
    }
}

/* =========================================
   ARTIKEL KESEHATAN
   HEADER / NAVBAR ALIGNMENT FINAL
   Sejajar dengan konten Beranda dan Lama Kunjungan
========================================= */

@media (min-width: 901px) and (orientation: landscape) {

  /* Batasi lebar utama navbar */
  header > .container {
    width: 100% !important;
    max-width: 1150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ikuti lebar container utama */
  header .header-inner,
  header .header-top {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Pertahankan posisi logo, navigasi, dan pencarian */
  header .header-search {
    min-width: 0 !important;
  }

  header .header-search .search-box,
  header .header-search .search-form,
  header .header-search .search-wrapper {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
}

/* =====================================================
   KLINIKINDONESIA.COM
   PREMIUM CUSTOM GLASS SEARCH DROPDOWN
   LIGHT + DARK MODE
   MOBILE + TABLET + DESKTOP
===================================================== */

/* 1. SEARCH WRAPPER */
.search-wrapper {
  overflow: visible !important;
  isolation: isolate;
  z-index: 30;
}

/* 2. CATEGORY CONTAINER */
.search-category {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  z-index: 40;
}

/* 3. DROPDOWN TRIGGER */
.search-wrapper .search-scope-trigger {
  position: relative;
  z-index: 42;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  width: auto;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 5px;

  flex: 0 0 auto;
  flex-shrink: 0;

  color: #075985;
  background: transparent !important;

  border: 0;
  border-radius: 10px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;

  transition:
    background .25s ease,
    color .25s ease;
}

.search-wrapper .search-scope-trigger:hover {
  background: rgba(14,165,233,.09) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ICON */
.scope-current-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scope-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scope-chevron {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform .3s ease;
}

.search-category.open .scope-chevron {
  transform: rotate(180deg);
}

/* 4. GLASS DROPDOWN PANEL */
.search-scope-menu {
  position: absolute;

  top: calc(100% + 11px);
  left: -4px;

  width: 270px;
  max-width: min(270px, calc(100vw - 40px));

  padding: 7px;

  display: flex;
  flex-direction: column;
  gap: 5px;

  background:
    linear-gradient(
      145deg,
      rgba(239,250,255,.94),
      rgba(213,240,252,.90)
    );

  border: 1px solid rgba(14,165,233,.30);
  border-radius: 17px;

  box-shadow:
    0 15px 35px rgba(15,76,110,.14),
    0 4px 12px rgba(14,165,233,.10),
    inset 0 1px 0 rgba(255,255,255,.90);

  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);

  z-index: 100;
  transform-origin: top left;

  animation: glassDropdownIn .22s ease both;
}

/* HIDDEN STATE */
.search-scope-menu[hidden] {
  display: none !important;
}

/* OPEN ANIMATION */
@keyframes glassDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-7px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 5. OPTION BUTTON */
.search-wrapper .search-scope-option {
  position: relative;

  display: flex;
  align-items: center;
  gap: 11px;

  width: 100%;
  min-height: 57px;
  height: auto;
  padding: 9px 11px;

  border: 1px solid transparent;
  border-radius: 11px;

  background: transparent !important;
  color: #164e63 !important;

  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.search-wrapper .search-scope-option > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.search-scope-option strong {
  font-size: 13px;
  font-weight: 750;
  color: #075985;
}

.search-scope-option small {
  font-size: 10px;
  line-height: 1.4;
  color: #64748b;
}

/* CHECK ICON */
.search-scope-option .scope-check {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: #0284c7;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0;
  flex: 0 0 17px;
}

.search-scope-option.active .scope-check {
  opacity: 1;
}

/* SELECTED OPTION */
.search-wrapper .search-scope-option.active {
  background: rgba(14,165,233,.13) !important;
  border-color: rgba(14,165,233,.22);
}

/* HOVER */
@media (hover: hover) and (pointer: fine) {
  .search-wrapper .search-scope-option:hover {
    background: rgba(14,165,233,.12) !important;
    border-color: rgba(14,165,233,.20);
    transform: translateX(2px) !important;
  }
}

/* TOUCH */
.search-wrapper .search-scope-option:active {
  background: rgba(14,165,233,.18) !important;
  transform: scale(.985) !important;
}

/* 6. DARK MODE */
body.dark .search-wrapper .search-scope-trigger {
  color: #bae6fd;
}

body.dark .search-wrapper .search-scope-trigger:hover {
  background: rgba(56,189,248,.12) !important;
}

body.dark .search-scope-menu {
  background:
    linear-gradient(
      145deg,
      rgba(18,44,68,.96),
      rgba(9,27,48,.94)
    );

  border-color: rgba(56,189,248,.27);

  box-shadow:
    0 18px 40px rgba(0,0,0,.30),
    0 4px 15px rgba(14,165,233,.10),
    inset 0 1px 0 rgba(255,255,255,.07);
}

body.dark .search-wrapper .search-scope-option {
  color: #e0f2fe !important;
}

body.dark .search-scope-option strong {
  color: #e0f2fe;
}

body.dark .search-scope-option small {
  color: #94a3b8;
}

body.dark .search-wrapper .search-scope-option.active {
  background: rgba(56,189,248,.15) !important;
  border-color: rgba(56,189,248,.25);
}

body.dark .search-scope-option .scope-check {
  stroke: #38bdf8;
}

@media (hover: hover) and (pointer: fine) {
  body.dark .search-wrapper .search-scope-option:hover {
    background: rgba(56,189,248,.13) !important;
  }
}

/* 7. FOCUS ACCESSIBILITY */
.search-scope-trigger:focus-visible,
.search-scope-option:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* 8. MOBILE */
@media (max-width:600px) {
  .search-wrapper .search-scope-trigger {
    gap: 4px;
    padding: 0 3px;
    font-size: 11px;
  }

  .search-wrapper .search-scope-trigger .scope-icon {
    width: 16px;
    height: 16px;
  }

  .search-wrapper .scope-chevron {
    width: 12px;
    height: 12px;
  }

  .search-scope-menu {
    width: 245px;
    top: calc(100% + 9px);
  }
}

/* 9. SMALL PHONE */
@media (max-width:380px) {
  .search-wrapper .search-scope-trigger {
    gap: 3px;
    font-size: 10px;
  }

  .search-scope-menu {
    width: 230px;
  }

  .search-wrapper {
    gap: 5px;
  }
}

/* 10. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .search-scope-menu,
  .search-scope-trigger,
  .search-scope-option,
  .scope-chevron {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================
   FIX ICON SEARCH DROPDOWN — LIGHT MODE
========================================== */

html:not(.dark) .search-scope-option svg {
  color: #17618a !important;
  stroke: #17618a !important;
  opacity: 1 !important;
  filter: none !important;
}

html:not(.dark) .search-scope-option svg path,
html:not(.dark) .search-scope-option svg circle,
html:not(.dark) .search-scope-option svg line,
html:not(.dark) .search-scope-option svg polyline,
html:not(.dark) .search-scope-option svg rect {
  stroke: #17618a !important;
  opacity: 1 !important;
}

/* Ikon centang pada pilihan aktif */
html:not(.dark) .search-scope-option[aria-selected="true"] svg {
  color: #087fba !important;
  stroke: #087fba !important;
  opacity: 1 !important;
}

/* Pastikan ikon tidak transparan */
html:not(.dark) .search-scope-option {
  color: #174b68;
}


/* ==========================================
   FIX ICON TOMBOL SEARCH SCOPE — LIGHT MODE
   Kesehatan | Seri Tadabbur
========================================== */

html:not(.dark) .search-scope-trigger {
  color: #175675 !important;
}

/* Ikon utama pada tombol Kesehatan */
html:not(.dark) .search-scope-trigger svg {
  color: #17618a !important;
  stroke: #17618a !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Garis ikon SVG */
html:not(.dark) .search-scope-trigger svg path,
html:not(.dark) .search-scope-trigger svg circle,
html:not(.dark) .search-scope-trigger svg line,
html:not(.dark) .search-scope-trigger svg polyline {
  stroke: #17618a !important;
  opacity: 1 !important;
}

/* Ikon dengan fill */
html:not(.dark) .search-scope-trigger svg path[fill]:not([fill="none"]) {
  fill: #17618a !important;
}

/* Panah dropdown */
html:not(.dark) .search-scope-trigger .scope-arrow,
html:not(.dark) .search-scope-trigger .dropdown-arrow {
  color: #17618a !important;
  opacity: 1 !important;
}

/* ==========================================
   FIX SEARCH SCOPE + BREADCRUMB
   DARK MODE — BRIGHT SKY BLUE
========================================== */

html.dark .search-scope-trigger {
  color: #38BDF8 !important;
}

/* Ikon Seri Tadabbur / Kesehatan */
html.dark .search-scope-trigger svg {
  color: #38BDF8 !important;
  stroke: #38BDF8 !important;
  opacity: 1 !important;
  filter: none !important;
}

html.dark .search-scope-trigger svg path,
html.dark .search-scope-trigger svg circle,
html.dark .search-scope-trigger svg line,
html.dark .search-scope-trigger svg polyline {
  stroke: #38BDF8 !important;
  opacity: 1 !important;
}

/* Ikon dengan fill */
html.dark .search-scope-trigger svg path[fill]:not([fill="none"]) {
  fill: #38BDF8 !important;
}

/* Tulisan Beranda pada breadcrumb */
html.dark .breadcrumb a,
html.dark .breadcrumb-meta a {
  color: #38BDF8 !important;
}

/* Ikon breadcrumb jika ada */
html.dark .breadcrumb svg,
html.dark .breadcrumb-meta svg {
  color: #38BDF8 !important;
  stroke: #38BDF8 !important;
}


/* ==========================================
   FINAL FIX SEARCH SCOPE — DARK MODE
   WARNA SAMA PERSIS DENGAN BREADCRUMB BERANDA
========================================== */

body.dark .search-scope-trigger {
    color: #38bdf8 !important;
}

/* Ikon utama: Kesehatan dan Seri Tadabbur */
body.dark .search-scope-trigger svg {
    color: #38bdf8 !important;
    stroke: #38bdf8 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Seluruh elemen SVG */
body.dark .search-scope-trigger svg path,
body.dark .search-scope-trigger svg circle,
body.dark .search-scope-trigger svg line,
body.dark .search-scope-trigger svg polyline,
body.dark .search-scope-trigger svg rect {
    stroke: #38bdf8 !important;
    opacity: 1 !important;
}

/* Ikon yang menggunakan fill */
body.dark .search-scope-trigger svg path[fill]:not([fill="none"]) {
    fill: #38bdf8 !important;
}

/* Panah dropdown */
body.dark .search-scope-trigger .scope-arrow,
body.dark .search-scope-trigger .dropdown-arrow {
    color: #38bdf8 !important;
    opacity: 1 !important;
}

/* Konsistensi warna tulisan Beranda */
body.dark section.hero > .breadcrumb-meta.badge .breadcrumb-text a {
    color: #38bdf8 !important;
}