:root{
  --primary:#00a2ea; /* biru utama */
  --secondary:#2c2e67; /* biru tua */
  --bg:#f5f9ff;
  --text:#1b2230;
  --muted:#6b7280;
  --card:#ffffff;
  --ring: rgba(0,162,234,.25);
  --grad: linear-gradient(135deg, #00a2ea 0%, #2c2e67 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background:var(--bg);
}
a{color:inherit; text-decoration:none}
/* Header / Navbar */
.header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(255,255,255,.8); border-bottom:1px solid rgba(44,46,103,.08)}
.container{max-width:1200px; margin-inline:auto; padding:0 20px}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800}
.brand img{width:42px; height:42px; border-radius:10px; object-fit:cover; box-shadow:0 6px 18px rgba(0,0,0,.08)}
.brand span{letter-spacing:.3px}
.menu{display:flex; gap:20px}
.menu a{padding:10px 14px; border-radius:12px; font-weight:600; color:var(--secondary)}
.menu a:hover{background:var(--ring)}
.menu-toggle{display:none; border:none; background:transparent; font-size:22px}
/* Hero */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(1200px 600px at 80% -10%, rgba(0,162,234,.25), transparent 60%),
  radial-gradient(900px 500px at -10% 10%, rgba(44,46,103,.20), transparent 60%),
  #ffffff;
}
.hero-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; padding:80px 0}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(0,162,234,.12); color:var(--secondary); font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase}
.title{font-size:44px; line-height:1.1; margin:14px 0; font-weight:800; color:var(--secondary)}
.subtitle{color:var(--muted); font-size:18px; max-width:55ch}
.cta{display:flex; gap:14px; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; border:1px solid transparent; font-weight:700; box-shadow:0 10px 24px rgba(0,162,234,.18);}
.btn-primary{background:var(--grad); color:white}
.btn-outline{background:white; color:var(--secondary); border-color:#e6eaf5}
.hero-card{background:var(--card); border:1px solid #eef2ff; border-radius:20px; padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; box-shadow:0 20px 50px rgba(44,46,103,.10)}
.hero-card .item{background:#f9fbff; border-radius:16px; padding:16px; border:1px dashed rgba(44,46,103,.15)}
.hero .wave{position:absolute; bottom:-1px; left:0; right:0}
/* Banner / Carousel */
.banner{background:linear-gradient(180deg, #ffffff, #f6fbff)}
.carousel{position:relative; overflow:hidden; border-radius:18px; border:1px solid #e8eefc; box-shadow:0 18px 42px rgba(0,0,0,.06)}
.slides{display:flex; transition:transform .6s ease}
.slide{min-width:100%; height:320px; position:relative; display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:30px}
.slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.slide::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.35))}
.slide > .caption{position:relative; z-index:2; text-align:center}
.dots{position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px}
.dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.6); cursor:pointer}
.dot.active{background:#fff}
.nav-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.8); border:none; width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer}
.nav-arrow:hover{background:white}
.nav-arrow.left{left:12px}
.nav-arrow.right{right:12px}
/* Sections */
section{padding:72px 0}
.section-header{margin-bottom:28px}
.kicker{display:inline-block; padding:6px 10px; border-radius:10px; background:rgba(44,46,103,.08); color:var(--secondary); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.6px}
h2{margin:10px 0 0; font-size:32px; color:var(--secondary)}
.lead{color:var(--muted)}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4, minmax(0,1fr))}
.card{background:var(--card); border:1px solid #e8eef7; border-radius:18px; padding:18px; box-shadow:0 14px 36px rgba(0,0,0,.05)}
.card h3{margin:6px 0 4px; font-size:18px; color:var(--secondary)}
.chip{display:inline-flex; align-items:center; gap:8px; background:rgba(0,162,234,.12); color:#056192; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px}
/* Dokter */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 18px}
.filters button{padding:8px 12px; border-radius:12px; border:1px solid #e5e9f6; background:white; cursor:pointer; font-weight:700}
.filters button.active{background:var(--primary); color:white; border-color:var(--primary)}
table{width:100%; border-collapse:separate; border-spacing:0 10px}
th, td{text-align:left; padding:12px 14px}
thead th{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:#536}
tbody tr{background:white; border:1px solid #e9effa}
tbody tr td:first-child{border-radius:12px 0 0 12px}
tbody tr td:last-child{border-radius:0 12px 12px 0}
/* Contact */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
.form .field{display:grid; gap:6px; margin-bottom:14px}
.form input, .form textarea{border:1px solid #dfe6f7; border-radius:12px; padding:12px 14px; font:inherit; outline:none}
.form input:focus, .form textarea:focus{box-shadow:0 0 0 6px var(--ring); border-color:var(--primary)}
iframe{width:100%; height:100%; min-height:320px; border:0; border-radius:16px}
/* Footer */
.footer{background:var(--secondary); color:#c8d0ff}
.footer a{color:#e3e8ff}
/* Utilities */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.center{text-align:center}
.hidden{display:none}
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:9999px; background:rgba(255,255,255,.16); color:white}
/* Responsive */
@media (max-width: 980px){
  .menu{display:none}
  .menu.open{display:flex; position:absolute; top:72px; left:0; right:0; background:white; border-bottom:1px solid #e8eef7; padding:14px 20px}
  .menu a{padding:12px}
  .menu-toggle{display:block}
  .hero-inner{grid-template-columns:1fr; padding:60px 0}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .title{font-size:34px}
  .grid-3, .grid-4{grid-template-columns:1fr}
  .slide{height:240px}
}
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Menambahkan scroll yang lebih mulus di iOS */
}
.hero-title .gradient-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}