: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); cursor:pointer; transition:all .3s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,162,234,.25)}
.btn:active{transform:translateY(0); box-shadow:0 8px 20px rgba(0,162,234,.2)}
.btn-primary{background:var(--grad); color:white}
.btn-primary:hover{background:linear-gradient(135deg, #0099d9 0%, #25255a 100%)}
.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}
.hero-slider-wrapper{width:100%; max-width:100%; overflow:hidden}
/* 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); width:100%; max-width:100%}
.slides{display:flex; transition:transform .6s ease; width:100%}
.slide{min-width:100%; width:100%; height:320px; position:relative; display:flex; align-items:center; justify-content:center; color:white; font-weight:800; font-size:30px; flex-shrink:0}
.slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:100%; display:block}
.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; padding:0 20px; font-size:24px}
.dots{position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; z-index:3}
.dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.6); cursor:pointer; transition:background .3s}
.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; z-index:3; transition:background .3s}
.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)}
/* Tentang Kami - Text Justify dengan spacing rapat */
#tentang .lead,
#tentang .lead p,
#tentang .lead div,
#tentang .lead > *{
    text-align:justify; 
    text-justify:inter-word; 
    line-height:1.5; 
    margin:0;
    padding:0
}
#tentang .lead > *:first-child{
    margin-top:0
}
#tentang .lead > *:last-child{
    margin-bottom:0
}
/* Visi, Misi, Core Values - Text Justify */
#tentang .about-content{
    text-align:justify; 
    text-justify:inter-word; 
    line-height:1.5; 
    margin:0;
    padding:0
}
#tentang .about-content > *:first-child{
    margin-top:0
}
#tentang .about-content > *:last-child{
    margin-bottom:0
}
#tentang .about-content p{
    text-align:justify; 
    text-justify:inter-word; 
    line-height:1.5; 
    margin:0.35em 0
}
#tentang .about-content p:first-child{
    margin-top:0
}
#tentang .about-content p:last-child{
    margin-bottom:0
}
#tentang .about-content p:only-child{
    margin:0
}
#tentang .about-content > div:not(p):not(ul):not(ol):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
    text-align:justify; 
    text-justify:inter-word; 
    line-height:1.5
}
#tentang .about-content li{
    text-align:justify; 
    text-justify:inter-word; 
    line-height:1.5; 
    margin:0.2em 0
}
#tentang .about-content ul,
#tentang .about-content ol{
    margin:0.35em 0; 
    padding-left:1.5em
}
#tentang .about-content ul li,
#tentang .about-content ol li{
    text-align:justify
}
#tentang .about-content h1,
#tentang .about-content h2,
#tentang .about-content h3,
#tentang .about-content h4,
#tentang .about-content h5,
#tentang .about-content h6{
    text-align:left; 
    margin-top:0.75em; 
    margin-bottom:0.5em;
    line-height:1.3
}
/* Reset spacing yang berlebihan dari CKEditor */
#tentang .about-content br + br{
    display:none
}
#tentang .about-content *{
    max-width:100%
}
.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))}
/* Service Grid - Pastikan semua card memiliki tinggi yang sama */
#layanan-kami .grid{display:grid; gap:18px; align-items:stretch}
.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)}
/* Layanan Kami Section */
#layanan-kami{background:linear-gradient(180deg,#f6fbff,#ffffff); padding:72px 0}
/* Service Card dengan Background Image */
.service-card{position:relative; background:var(--card); border:1px solid #e8eef7; border-radius:18px; overflow:hidden; box-shadow:0 14px 36px rgba(0,0,0,.05); height:100%; min-height:350px; background-size:cover; background-position:center; background-repeat:no-repeat; transition:transform .3s, box-shadow .3s; display:flex; flex-direction:column}
.service-card:hover{transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.15)}
.service-overlay{position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,162,234,.5), rgba(44,46,103,.5)); z-index:1; transition:opacity .3s}
.service-card:hover .service-overlay{opacity:0.6}
.service-content{position:absolute; top:0; left:0; right:0; z-index:2; padding:24px; display:flex; flex-direction:column; color:#fff; background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 60%, transparent 100%); min-height:180px; box-sizing:border-box; justify-content:flex-start}
.service-content h3{margin:0 0 10px; font-size:20px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7); text-align:left; line-height:1.4; padding:0; word-wrap:break-word}
.service-content p{margin:0; padding:0; color:rgba(255,255,255,.95); line-height:1.5; text-shadow:0 1px 4px rgba(0,0,0,.6); text-align:justify; text-justify:inter-word; word-spacing:normal; letter-spacing:normal; word-wrap:break-word}
.service-content > div:not(h3):not(p),
.service-content span{text-align:justify; text-justify:inter-word}
.service-content h1,
.service-content h2,
.service-content h4,
.service-content h5,
.service-content h6{text-align:left}
/* Fallback jika tidak ada image */
.service-card:not([style*="background-image"]){background:linear-gradient(135deg, #00a2ea, #2c2e67)}
.service-card:not([style*="background-image"]) .service-overlay{background:transparent}
.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}
/* Gallery dengan Lightbox */
.gallery-card{position:relative; overflow:hidden}
.gallery-link{display:block; position:relative; cursor:pointer}
.gallery-image{width:100%; height:160px; object-fit:cover; border-radius:12px; transition:transform .3s}
.gallery-link:hover .gallery-image{transform:scale(1.05)}
.gallery-overlay{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; border-radius:12px}
.gallery-link:hover .gallery-overlay{opacity:1}
.gallery-overlay i{color:#fff; font-size:32px; text-shadow:0 2px 8px rgba(0,0,0,.5)}
/* Lightbox Modal */
.lightbox{display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.95); overflow:auto; animation:fadeIn .3s}
.lightbox.active{display:flex; align-items:center; justify-content:center}
.lightbox-image{max-width:90%; max-height:80vh; margin:auto; display:block; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5); animation:zoomIn .3s}
.lightbox-close{position:absolute; top:20px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; z-index:10000; transition:color .3s}
.lightbox-close:hover{color:#00a2ea}
.lightbox-prev,.lightbox-next{position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:30px; font-weight:bold; padding:16px; cursor:pointer; user-select:none; z-index:10000; background:rgba(0,0,0,.5); border-radius:4px; transition:background .3s}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(0,162,234,.8)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-caption{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.8); color:#fff; padding:15px 20px; border-radius:8px; text-align:center; max-width:80%}
.lightbox-caption h3{margin:0 0 5px; font-size:20px}
.lightbox-caption p{margin:0; font-size:14px; opacity:.9}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{transform:scale(0.8); opacity:0}to{transform:scale(1); opacity:1}}
/* Pagination Styling */
.gallery-pagination .pagination{display:flex; justify-content:center; gap:8px; list-style:none; padding:0; margin:0}
.gallery-pagination .pagination li{display:inline-block}
.gallery-pagination .pagination a,.gallery-pagination .pagination span{display:inline-block; padding:10px 16px; border-radius:8px; text-decoration:none; color:var(--secondary); background:#fff; border:1px solid #e8eef7; transition:all .3s; font-weight:600}
.gallery-pagination .pagination a:hover{background:var(--primary); color:#fff; border-color:var(--primary)}
.gallery-pagination .pagination .active span{background:var(--grad); color:#fff; border-color:transparent}
.gallery-pagination .pagination .disabled span{opacity:.5; cursor:not-allowed}
/* Team Card Design */
#tim-ahli{padding:72px 0; background:linear-gradient(180deg,#ffffff,#f6fbff)}
.team-card{background:var(--card); border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08); transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align:center; position:relative; border:1px solid rgba(0,162,234,.08)}
.team-card:hover{transform:translateY(-10px) scale(1.02); box-shadow:0 25px 60px rgba(0,162,234,.25); border-color:rgba(0,162,234,.2)}
.team-image-wrapper{position:relative; overflow:hidden; background:linear-gradient(135deg, #f0f7ff, #e8f4fd); height:280px}
.team-image{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.team-card:hover .team-image{transform:scale(1.15)}
.team-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,162,234,.9) 0%, rgba(44,46,103,.7) 50%, transparent 100%); display:flex; align-items:flex-end; justify-content:center; padding:25px; opacity:0; transition:opacity .4s}
.team-card:hover .team-overlay{opacity:1}
.team-social{display:flex; gap:12px; margin-bottom:15px; transform:translateY(10px); transition:transform .4s}
.team-card:hover .team-social{transform:translateY(0)}
.team-social a{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--primary); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .3s; font-size:18px; box-shadow:0 4px 12px rgba(0,0,0,.2)}
.team-social a:hover{background:#fff; color:var(--secondary); transform:translateY(-3px) scale(1.1); box-shadow:0 6px 20px rgba(0,0,0,.3)}
.team-info{padding:28px 20px; background:#fff; position:relative}
.team-name{margin:0 0 10px; font-size:20px; font-weight:800; color:var(--secondary); line-height:1.3; transition:color .3s}
.team-card:hover .team-name{color:var(--primary)}
.team-position{margin:0 0 12px; font-size:15px; font-weight:600; color:var(--primary); line-height:1.4}
.team-department{display:inline-block; padding:8px 16px; border-radius:25px; background:linear-gradient(135deg, rgba(0,162,234,.12), rgba(44,46,103,.12)); color:var(--secondary); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; border:1px solid rgba(0,162,234,.15); transition:all .3s}
.team-card:hover .team-department{background:linear-gradient(135deg, rgba(0,162,234,.2), rgba(44,46,103,.2)); border-color:rgba(0,162,234,.3); transform:scale(1.05)}
/* Client Slider */
#klien{padding:72px 0; overflow:hidden}
.client-slider-wrapper{position:relative; width:100%; overflow:hidden; margin-top:40px}
.client-slider-track{display:flex; gap:60px; width:fit-content; animation:client-slide 30s linear infinite; will-change:transform; align-items:center}
.client-slider-track:hover{animation-play-state:paused}
.client-slide{flex-shrink:0; display:flex; align-items:center; justify-content:center}
.client-logo{height:60px; max-width:150px; width:auto; object-fit:contain; opacity:.6; filter:grayscale(100%); transition:all .3s}
.client-slide:hover .client-logo{opacity:1; filter:grayscale(0%)}
@keyframes client-slide{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
/* 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:6px; padding:4px 8px; border-radius:9999px; background:rgba(255,255,255,.16); color:white; font-size:12px; font-weight:600; margin-top:8px}
.slide > .caption .pill{font-size:11px; padding:3px 6px}

/* Responsive */
@media (max-width: 980px){
  .menu{display:none}
  .menu.open{
    display:flex; 
    flex-direction: column; /* <-- PERBAIKAN 1: Menu ditumpuk vertikal */
    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:40px 0; gap:30px}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  /* Carousel responsive untuk tablet */
  .carousel{margin:0 auto; max-width:100%}
  .slide > .caption{font-size:20px; padding:0 15px}
  /* Service Card responsive */
  .service-card{min-height:320px}
  .service-content{padding:20px; min-height:160px}
  .service-content h3{font-size:18px; line-height:1.35; margin-bottom:8px}
  .service-content p{line-height:1.45}
  /* Team Card tablet */
  .team-image-wrapper{height:240px}
  .team-info{padding:24px 18px}
  .team-name{font-size:18px}
  .team-position{font-size:14px}
  .team-social a{width:40px; height:40px; font-size:17px}
  /* Client Slider tablet */
  .client-slider-track{gap:40px}
  .client-logo{height:50px; max-width:120px}
}

@media (max-width: 640px){
  .container{padding:0 16px}
  .title{font-size:34px}
  .subtitle{font-size:16px}
  .grid-3, .grid-4{grid-template-columns:1fr}
  .slide{height:240px; font-size:18px}
  .slide > .caption{font-size:16px; padding:0 12px; line-height:1.4}
  .slide > .caption .pill{font-size:10px; padding:2px 5px; margin-top:6px}
  .hero-card { grid-template-columns: 1fr; } /* <-- PERBAIKAN 2: Kartu Info Cepat ditumpuk vertikal */
  .hero-inner{padding:30px 0; gap:24px}
  /* Carousel mobile improvements */
  .carousel{border-radius:12px; margin:0}
  .hero-slider-wrapper{width:100%; margin:0}
  .nav-arrow{width:36px; height:36px; font-size:14px}
  .nav-arrow.left{left:8px}
  .nav-arrow.right{right:8px}
  .dots{bottom:10px; gap:6px}
  .dot{width:8px; height:8px}
  .cta{flex-direction:column; gap:10px}
  .btn{padding:10px 16px; font-size:14px; width:100%; justify-content:center}
  /* Service Card mobile */
  .service-card{min-height:300px}
  .service-content{padding:18px; min-height:150px}
  .service-content h3{font-size:18px; line-height:1.3; margin-bottom:8px}
  .service-content p{font-size:14px; line-height:1.4}
  /* Team Card mobile */
  .team-image-wrapper{height:220px}
  .team-info{padding:20px 16px}
  .team-name{font-size:18px}
  .team-position{font-size:14px}
  .team-social a{width:36px; height:36px; font-size:16px}
  /* Client Slider mobile */
  .client-slider-wrapper{margin-top:30px}
  .client-slider-track{gap:30px; animation-duration:25s}
  .client-logo{height:45px; max-width:100px}
}

@media (max-width: 480px){
  .slide{height:200px}
  .slide > .caption{font-size:14px; padding:0 10px}
  .slide > .caption .pill{font-size:9px; padding:2px 4px; margin-top:4px}
  .nav-arrow{width:32px; height:32px; font-size:12px}
  .nav-arrow.left{left:6px}
  .nav-arrow.right{right:6px}
  .dots{bottom:8px; gap:4px}
  .dot{width:7px; height:7px}
  /* Lightbox mobile */
  .lightbox-image{max-width:95%; max-height:70vh}
  .lightbox-close{top:10px; right:15px; font-size:30px}
  .lightbox-prev,.lightbox-next{font-size:24px; padding:12px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-caption{bottom:10px; padding:12px 15px; max-width:90%}
  .lightbox-caption h3{font-size:16px}
  .lightbox-caption p{font-size:12px}
  /* Pagination mobile */
  .gallery-pagination .pagination{gap:4px; flex-wrap:wrap}
  .gallery-pagination .pagination a,.gallery-pagination .pagination span{padding:8px 12px; font-size:14px}
  /* Team Card mobile kecil */
  .team-image{height:200px}
  .team-info{padding:18px 14px}
  .team-name{font-size:16px; margin-bottom:6px}
  .team-position{font-size:13px; margin-bottom:8px}
  .team-department{font-size:11px; padding:5px 12px}
  /* Client Slider mobile kecil */
  .client-slider-wrapper{margin-top:24px}
  .client-slider-track{gap:24px; animation-duration:20s}
  .client-logo{height:40px; max-width:90px}
}

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

/* === Hero Slider Height Fix (Desktop Only) === */
@media (min-width: 981px) {
    .hero-inner {
        align-items: stretch;
    }
    #hero .hero-inner .carousel {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #hero .hero-inner .slides,
    #hero .hero-inner .slide {
        height: 100%;
        flex-grow: 1; 
    }
    #hero .hero-inner .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}