*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,sans-serif;
}

body{
background:#f4f8f7;
color:#333;
}

/* NAVBAR */

/* ================= NAVBAR ================= */

/* ================= NAVBAR ================= */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#0a8a72;
    padding:15px 8%;
    position:sticky;
    top:0;
    z-index:9999;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    width:70px;
}

.logo h2{
    color:#fff;
    margin:0;
}

.logo p{
    color:#fff;
    margin:0;
    font-size:15px;
}

/* MENU */

#nav-menu{
    display:flex;
    align-items:center;
    gap:35px;
}

#nav-menu a{
    color:#fff;
    text-decoration:none;
    font-size:18px;
    transition:.3s;
    position:relative;
}


#nav-menu a:hover{
    color:#ffd54f;
}

/* Menu Aktif */
#nav-menu a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:0%;
    height:3px;
    background:#ffd54f;
    border-radius:10px;
    transition:.3s ease;
    transform:translateX(-50%);
}


/* Tombol WA */

.btn-daftar{
    background:#fff;
    color:#0a8a72 !important;
    padding:12px 24px;
    border-radius:40px;
    font-weight:bold;
}

.btn-daftar:hover{
    background:#f2f2f2;
}

/* Tombol Hamburger */

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    font-size: 30px;
    color: white;
}

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

    .menu-toggle{
        display:flex;
    }

    #nav-menu{
        display:none;
        flex-direction:column;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#0a8a72;
        padding:20px 0;
        gap:15px;
        box-shadow:0 5px 15px rgba(0,0,0,.15);
    }

    
    #nav-menu.show{
        display:flex;
    }


    #nav-menu a{
        width:100%;
        text-align:center;
        padding:12px;
        color:white;
    }
}
/* SLIDER */

.hero-slider{
    position:relative;
    width:100%;
    height:650px;
    overflow:hidden;
}


/* IMAGE SLIDER */

.slides{
    position:absolute;
    width:100%;
    height:100%;
    display:none;
}


.slides img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:zoom 8s infinite;
}



/* Efek zoom profesional */

@keyframes zoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.1);
    }

}



/* Overlay */

.slider-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,80,60,.85),
        rgba(0,0,0,.35)
    );

    z-index:2;

}



/* Caption */

.caption{

    position:absolute;
    z-index:3;

    top:50%;
    left:8%;

    transform:translateY(-50%);

    color:white;

    max-width:650px;

}


.caption h1{

    font-size:55px;
    line-height:1.2;

    margin-bottom:20px;

    animation:slideUp 1s;

}


.caption h1 span{

    color:#20c997;

}



.caption p{

    font-size:22px;

    margin-bottom:35px;

    animation:slideUp 1.3s;

}



/* BUTTON */

.caption-button{

    display:flex;
    gap:20px;

}



.btn{

    background:#20c997;

    color:white;

    padding:14px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}


.btn:hover{

    transform:translateY(-5px);

    background:#0d9f78;

}



.btn-outline{

    background:transparent;

    border:2px solid white;

}



.btn-outline:hover{

    background:white;

    color:#198754;

}



/* DOT */

.dots{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;

}



.dot{

    width:12px;

    height:12px;

    display:inline-block;

    background:white;

    border-radius:50%;

    margin:5px;

    opacity:.5;

    cursor:pointer;

}


.dot.active{

    background:#20c997;

    opacity:1;

}



/* ANIMATION TEXT */

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* MOBILE */

@media(max-width:768px){


.hero-slider{

    height:500px;

}


.caption{

    left:5%;

    right:5%;

    text-align:center;

}


.caption h1{

    font-size:35px;

}


.caption p{

    font-size:17px;

}


.caption-button{

    justify-content:center;

    flex-wrap:wrap;

}


}

/* LAYANAN */

.layanan {
  padding: 70px 20px;
  text-align: center;
  background: radial-gradient(circle at top, #e9fff2, #f7fffb);
  position: relative;
  overflow: hidden;
}

/* efek background hidup */
.layanan::before,
.layanan::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: #2ecc71;
  filter: blur(120px);
  opacity: 0.15;
  border-radius: 50%;
  animation: float 8s infinite alternate;
}

.layanan::before {
  top: -50px;
  left: -50px;
}

.layanan::after {
  bottom: -50px;
  right: -50px;
}

@keyframes float {
  from { transform: translateY(0px); }
  to { transform: translateY(40px); }
}

.layanan h2 {
  font-size: 34px;
  color: #167a4a;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: auto;
}

.card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 30px 20px;
  border-radius: 20px;
  text-align: center;
  transition: 0.4s ease;
  position: relative;

  /* animasi masuk */
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  background: white;
}

.icon {
  font-size: 40px;
  margin-bottom: 10px;
  display: inline-block;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.card h3 {
  color: #167a4a;
  margin-bottom: 10px;
}

.card p {
  color: #555;
  font-size: 14px;
}

/* VISI */

.visi{

display:flex;
align-items:center;
gap:40px;
padding:70px;

}

.visi img{

width:500px;
border-radius:15px;

}

.visi-text ul{

margin-top:20px;
padding-left:20px;

}

/* KONTAK */

.kontak {
  background: linear-gradient(135deg, #0f9d58, #34c38f);
  padding: 60px 20px;
  color: white;
}

.kontak h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
}

/* container */
.contact-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
}

.contact-box h3 i {
  margin-right: 8px;
  color: #0f9d58;
}

/* card lebih lembut (bukan kotak kaku) */
.contact-box > div {
  background: rgba(255, 255, 255, 0.92);
  color: #333;
  padding: 25px;
  border-radius: 18px; /* ini kuncinya biar tidak kaku */
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  backdrop-filter: blur(6px);
  transition: all 0.35s ease;
}

/* hover smooth naik */
.contact-box > div:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.2);
}

/* judul */
.contact-box h3 {
  margin-bottom: 10px;
  color: #0f9d58;
}

/* SOCIAL STYLE */
.social-box {
  text-align: center;
}

.social {
  display: block;
  margin: 10px 0;
  padding: 12px;
  border-radius: 50px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* ===================== */
/* INSTAGRAM ANIMATION   */
/* ===================== */
.social.ig {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
  animation: igPulse 2.5s infinite ease-in-out;
}

@keyframes igPulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(221, 42, 123, 0.4);
  }
  50% {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 0 20px rgba(221, 42, 123, 0.6);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 rgba(221, 42, 123, 0.4);
  }
}

/* ===================== */
/* TIKTOK ANIMATION      */
/* ===================== */
.social.tt {
  background: linear-gradient(45deg, #25f4ee, #000000, #fe2c55);
  animation: ttShake 2.8s infinite ease-in-out;
}

@keyframes ttShake {
  0% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 0 0 rgba(37, 244, 238, 0.3);
  }
  25% {
    transform: translateY(-4px) rotate(-1deg);
  }
  50% {
    transform: translateY(-6px) rotate(1deg);
    box-shadow: 0 0 20px rgba(254, 44, 85, 0.5);
  }
  100% {
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 0 0 rgba(37, 244, 238, 0.3);
  }
}

/* hover tetap keren */
.social:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* FOOTER */

footer{

background:#04653f;
padding:20px;
text-align:center;
color:white;

}

/* Animasi */

.fade{

animation:fade 1.2s;

}

@keyframes fade{

from{opacity:.3}
to{opacity:1}

}

/* Responsive */

@media(max-width:900px){

.visi{

flex-direction:column;

}

.caption h1{

font-size:30px;

}

.caption p{

font-size:16px;

}

nav{

display:none;

}

}

/*======================================
        SECTION TITLE
======================================*/

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:35px;
    color:#198754;
    margin-bottom:10px;
}

.section-title p{
    color:#666;
    font-size:16px;
}

/*======================================
        SEJARAH
======================================*/

.history-section{
    padding:80px 8%;
    background:#f8fdf9;
}

.history-content{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.history-card{
    background:#fff;
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
    border-top:5px solid #198754;
}

.history-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.year{
    width:85px;
    height:85px;
    border-radius:50%;
    background:#198754;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    font-size:18px;
    margin-bottom:20px;
}

.history-card h3{
    color:#198754;
    margin-bottom:15px;
}

.history-card p{
    color:#666;
    line-height:1.8;
}

/*======================================
        VISI MISI
======================================*/

.vision-mission{
    padding:80px 8%;
    background:#ffffff;
}

.vm-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.vm-card{
    background:#fff;
    border-radius:20px;
    padding:40px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
    border-bottom:5px solid #198754;
}

.vm-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.vm-card .icon{
    width:90px;
    height:90px;
    background:#198754;
    color:#fff;
    margin:auto;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
    margin-bottom:25px;
}

.vm-card h3{
    color:#198754;
    margin-bottom:20px;
    font-size:28px;
}

.vm-card p{
    color:#555;
    line-height:1.8;
}

.vm-card ul{
    margin-top:20px;
    text-align:left;
    padding-left:20px;
}

.vm-card ul li{
    margin:15px 0;
    color:#555;
    line-height:1.6;
}

/*======================================
        STATISTIK
======================================*/

.statistics{
    padding:80px 8%;
    background: linear-gradient(135deg,
        #0f5132 0%,
        #198754 35%,
        #20c997 70%,
        #0dcaf0 100%
    );
    position: relative;
    overflow: hidden;
}
.stats-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

.stat-card{
    background: linear-gradient(135deg, #e8f8ef, #d4f5df);
    border-radius:25px;
    padding:40px 20px;
    text-align:center;
    transition:.4s ease;
    border:1px solid rgba(25,135,84,.15);
    box-shadow:0 15px 35px rgba(25,135,84,.15);
    position:relative;
    overflow:hidden;
}

/* Efek dekorasi */
.stat-card::before{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    background:rgba(25,135,84,.08);
    border-radius:50%;
    top:-50px;
    right:-40px;
    transition:.5s;
}

.stat-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(25,135,84,.25);
}

.stat-card:hover::before{
    transform:scale(1.4);
}

.stat-card h2{
    font-size:50px;
    color:#198754;
    margin-bottom:15px;
    font-weight:bold;
    transition:.3s ease;
}

.stat-card:hover h2{
    transform:scale(1.12);
    letter-spacing:1px;
}

.stat-card p{
    color:#555;
    font-size:18px;
    font-weight:600;
}
/*======================================
        RESPONSIVE
======================================*/

@media(max-width:992px){

.section-title h2{
    font-size:30px;
}

.vm-card{
    padding:30px;
}

.stat-card h2{
    font-size:40px;
}

}

@media(max-width:768px){

.history-section,
.vision-mission,
.statistics{
    padding:60px 6%;
}

.section-title h2{
    font-size:28px;
}

.section-title p{
    font-size:15px;
}

.vm-card h3{
    font-size:24px;
}

.year{
    width:70px;
    height:70px;
    font-size:16px;
}

.stat-card h2{
    font-size:36px;
}

}

@media(max-width:480px){

.section-title h2{
    font-size:24px;
}

.history-card,
.vm-card,
.stat-card{
    padding:25px;
}

.vm-card .icon{
    width:70px;
    height:70px;
    font-size:30px;
}

.stat-card h2{
    font-size:32px;
}

.stat-card p{
    font-size:16px;
}

}

/* =========================
   RESET DASAR
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#f6fbfa;
  color:#222;
  line-height:1.6;
}

/* =========================
   NAVBAR
========================= */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 8%;
  background:#02876a;
  color:#fff;
  position:sticky;
  top:0;
  z-index:999;
}

.navbar .logo{
  font-size:20px;
  font-weight:bold;
}

.navbar nav a{
  color:#fff;
  margin-left:20px;
  text-decoration:none;
  font-weight:500;
  transition:.3s;
}

.navbar nav a:hover,
.navbar nav a.active{
  color:#d1ffe9;
}

/* =========================
   HERO LAYANAN
========================= */
.hero-layanan{
  height:320px;
  background:linear-gradient(rgba(2,135,106,.85),rgba(2,135,106,.85)),
             url('../images/hero.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  padding:20px;
}

.hero-layanan h1{
  font-size:40px;
  margin-bottom:10px;
}

.hero-layanan p{
  font-size:18px;
}

/* =========================
   SECTION TITLE
========================= */
.section-title{
  text-align:center;
  margin:70px 0 40px;
  padding:0 20px;
}

.section-title h2{
  font-size:32px;
  color:#02876a;
  margin-bottom:10px;
}

.section-title p{
  color:#666;
}

/* =========================
   SERVICES
========================= */
.services-section{
  padding:20px 8% 60px;
}

.services-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.service-card{
  background:#fff;
  padding:25px;
  border-radius:15px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.3s;
}

.service-card:hover{
  transform:translateY(-8px);
  background:#02876a;
  color:#fff;
}

.service-card .icon{
  font-size:40px;
  margin-bottom:15px;
}

/* =========================
   FEATURES
========================= */
.features-section{
  padding:60px 8%;
  background:#eaf7f4;
}

.features-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.feature-box{
  background:#fff;
  padding:25px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  transition:.3s;
}

.feature-box:hover{
  transform:scale(1.03);
}

/* =========================
   FOOTER
========================= */
footer{
  background:#02876a;
  color:#fff;
  text-align:center;
  padding:40px 20px;
  margin-top:60px;
}

.footer-content h3{
  font-size:22px;
  margin-bottom:10px;
}

.footer-content p{
  margin:5px 0;
  font-size:14px;
}

.copyright{
  margin-top:20px;
  font-size:13px;
  opacity:.8;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){

  .hero-layanan h1{
    font-size:28px;
  }

  .navbar{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  .navbar nav a{
    margin:0 10px;
  }

}


/* =========================
   GALERI SECTION (LAYANAN)
========================= */

.gallery-section{
  padding:70px 8%;
  background:#f6fbfa;
}

/* grid galeri */
.gallery-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:22px;
  margin-top:40px;
}

/* item gambar */
.gallery-item{
  position:relative;
  height:230px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  cursor:pointer;
  background:#000;
}

/* gambar */
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

/* zoom saat hover */
.gallery-item:hover img{
  transform:scale(1.15);
}

/* overlay gradient */
.gallery-item .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(2,135,106,.9),
    rgba(2,135,106,.2),
    transparent
  );
  display:flex;
  align-items:flex-end;
  padding:18px;
  opacity:0;
  transition:.3s ease;
}

/* tampil saat hover */
.gallery-item:hover .overlay{
  opacity:1;
}

/* teks */
.gallery-item h3{
  color:#fff;
  font-size:18px;
  font-weight:600;
  transform:translateY(10px);
  transition:.3s;
}

.gallery-item:hover h3{
  transform:translateY(0);
}

/* efek border halus */
.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid transparent;
  border-radius:16px;
  transition:.3s;
}

.gallery-item:hover::after{
  border-color:#02876a;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){
  .gallery-item{
    height:200px;
  }

  .gallery-section{
    padding:50px 5%;
  }
}

/* =========================
   HERO DOKTER
========================= */

.hero-dokter{
  height:320px;
  background:linear-gradient(rgba(2,135,106,.85),rgba(2,135,106,.85)),
             url('../images/hero-dokter.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:20px;
}

.hero-dokter h1{
  font-size:40px;
  margin-bottom:10px;
}

.hero-dokter p{
  font-size:18px;
}

/* =========================
   SECTION TITLE (GLOBAL)
========================= */

.section-title{
  text-align:center;
  margin:70px 0 40px;
  padding:0 20px;
}

.section-title h2{
  font-size:32px;
  color:#02876a;
  margin-bottom:10px;
}

.section-title p{
  color:#666;
}

/* =========================
   DOKTER GRID
========================= */

.dokter-section{
  padding:60px 8%;
  background:#f6fbfa;
}

.dokter-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:25px;
  margin-top:40px;
}

.dokter-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.4s;
  position:relative;
}

/* hover naik */
.dokter-card:hover{
  transform:translateY(-10px);
}

/* foto dokter */
.dokter-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  transition:.4s;
}

/* efek zoom gambar */
.dokter-card:hover img{
  transform:scale(1.05);
}

/* teks */
.dokter-card h3{
  margin-top:15px;
  font-size:18px;
  color:#222;
}

.dokter-card p{
  color:#02876a;
  font-weight:500;
  margin-bottom:15px;
}

/* JADWAL DOKTER */
.jadwal {
  margin-top: 10px;
  padding: 10px;
  background: #f5f9f7;
  border-radius: 10px;
  font-size: 14px;
  text-align: left;
}

.jadwal strong {
  color: #1a7f5a;
  display: block;
  margin-bottom: 5px;
}

.jadwal ul {
  margin: 0;
  padding-left: 18px;
}

.jadwal ul li {
  color: #333;
  line-height: 1.6;
}

/* =========================
   SPESIALIS BADGE
========================= */

.spesialis-section{
  padding:60px 8%;
  background:#eaf7f4;
}

.spesialis-container{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:40px;
}

.spesialis-card{
  background:#02876a;
  color:#fff;
  padding:10px 18px;
  border-radius:30px;
  font-size:14px;
  font-weight:500;
  transition:.3s;
  cursor:pointer;
}

.spesialis-card:hover{
  background:#026b55;
  transform:scale(1.08);
}

/* =========================
   ANIMASI HALUS
========================= */

.dokter-card,
.spesialis-card{
  animation:fadeUp .6s ease;
}

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

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

  .hero-dokter h1{
    font-size:28px;
  }

  .hero-dokter p{
    font-size:14px;
  }

  .dokter-card img{
    height:200px;
  }

}

/* =========================
   INFO ALERT (DOKTER)
========================= */

.info-alert{
  padding:60px 8%;
  background:#f6fbfa;
}

.alert-box{
  max-width:800px;
  margin:auto;
  background:#fff3cd;
  border-left:6px solid #ffc107;
  padding:25px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  text-align:center;
}

.alert-box h3{
  color:#856404;
  margin-bottom:10px;
}

.alert-box p{
  color:#6b5b00;
  margin-bottom:15px;
  line-height:1.6;
}

/* tombol WhatsApp */
.wa-btn{
  display:inline-block;
  background:#25D366;
  color:#fff;
  padding:12px 20px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.wa-btn:hover{
  background:#1ebe5d;
  transform:scale(1.05);
}


/* =========================
   HERO KONTAK
========================= */

.hero-kontak{
  height:300px;
  background:linear-gradient(rgba(2,135,106,.85),rgba(2,135,106,.85)),
             url('../images/hero-kontak.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

/* =========================
   KONTAK CARD
========================= */

.contact-info{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:50px;
}

.kontak-card{
    background:rgba(255,255,255,.95);
    border-radius:25px;
    padding:30px;
    display:flex;
    align-items:flex-start;
    gap:20px;
    position:relative;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.kontak-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:#2e8b57;
    opacity:.08;
    border-radius:50%;
    right:-70px;
    top:-70px;
    transition:.5s;
}

.kontak-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(46,139,87,.25);
}

.kontak-card:hover::before{
    transform:scale(1.3);
}

.icon{
    width:75px;
    height:75px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:28px;
    flex-shrink:0;
}

.alamat{
    background:linear-gradient(135deg,#2ecc71,#27ae60);
}

.telepon{
    background:linear-gradient(135deg,#00b894,#00cec9);
}

.email{
    background:linear-gradient(135deg,#3498db,#2980b9);
}

.content span{
    color:#27ae60;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
}

.content h3{
    margin:8px 0;
    color:#1d3557;
    font-size:24px;
}

.content p{
    color:#666;
    line-height:1.7;
    margin-bottom:18px;
}

.btn-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn-call,
.btn-wa,
.btn-email{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn-call{
    background:#2e8b57;
    color:#fff;
}

.btn-call:hover{
    background:#1f6f46;
    transform:translateY(-3px);
}

.btn-wa{
    background:#25D366;
    color:#fff;
}

.btn-wa:hover{
    background:#1faa54;
    transform:translateY(-3px);
}

.btn-email{
    background:#3498db;
    color:#fff;
}

.btn-email:hover{
    background:#217dbb;
    transform:translateY(-3px);
}
/* =========================
   FORM KONTAK
========================= */

.form-section{
  padding:60px 8%;
  background:#f6fbfa;
}

.contact-form{
  max-width:600px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:15px;
}

.contact-form input,
.contact-form textarea{
  padding:12px;
  border:1px solid #ccc;
  border-radius:10px;
}

.contact-form button{
  background:#02876a;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:10px;
  cursor:pointer;
}

.contact-form button:hover{
  background:#026b55;
}

/* =========================
   MAP
========================= */

.map-section{
  padding:60px 8%;
}

.map-container{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}


/* =========================
   BUTTON KONTAK NAVBAR
========================= */

.btn-kontak{
  background:#fff;
  color:#02876a;
  padding:8px 16px;
  border-radius:25px;
  text-decoration:none;
  font-weight:600;
  margin-left:15px;
  transition:.3s;
  border:2px solid #fff;
}

/* hover */
.btn-kontak:hover{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}

/* SECTION MITRA */
.mitra {
  padding: 70px 20px;
  background: #f5f9f7;
  text-align: center;
}

.mitra h2 {
  color: #1a7f5a;
  font-size: 32px;
  margin-bottom: 10px;
}

.mitra p {
  color: #666;
  margin-bottom: 40px;
}

/* CONTAINER CARD */
.mitra-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

/* CARD MITRA */
.mitra-card {
  background: #fff;
  width: 180px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  cursor: pointer;
}

/* HOVER ANIMATION */
.mitra-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.mitra-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 10px;
}

.mitra-card h3 {
  font-size: 16px;
  color: #333;
}

/* SECTION TESTIMONI */
.testimoni {
  padding: 70px 20px;
  background: #ffffff;
  text-align: center;
}

.testimoni h2 {
  color: #1a7f5a;
  font-size: 32px;
  margin-bottom: 10px;
}

.testimoni p {
  color: #666;
  margin-bottom: 40px;
}

/* CONTAINER */
.testimoni-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

/* CARD */
.testimoni-card {
  background: #f5f9f7;
  width: 280px;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  text-align: left;
}

/* HOVER */
.testimoni-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.testimoni-card .pesan {
  font-style: italic;
  color: #333;
  margin-bottom: 15px;
}

.testimoni-card h4 {
  color: #1a7f5a;
  font-size: 15px;
}


/* SECTION STRUKTUR */
.struktur {
  padding: 70px 20px;
  background: #ffffff;
  text-align: center;
}

.struktur h2 {
  color: #1a7f5a;
  font-size: 32px;
  margin-bottom: 10px;
}

.struktur p {
  color: #666;
  margin-bottom: 30px;
}

/* CARD GAMBAR */
.struktur-card {
  display: inline-block;
  background: #fff;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  transition: 0.3s ease;
}

.struktur-card:hover {
  transform: scale(1.02);
}

/* GAMBAR */
.struktur-card img {
  width: 100%;
  max-width: 900px;
  border-radius: 10px;
}


/* SECTION SAMBUTAN */
.sambutan {
  padding: 70px 20px;
  background: #f5f9f7;
  text-align: center;
}

.sambutan h2 {
  color: #1a7f5a;
  font-size: 32px;
  margin-bottom: 10px;
}

.sambutan p {
  color: #666;
  margin-bottom: 40px;
}

/* CONTAINER */
.sambutan-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

/* FOTO */
.sambutan-img img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #1a7f5a;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* TEKS */
.sambutan-text {
  max-width: 600px;
  text-align: left;
}

.sambutan-text h3 {
  color: #1a7f5a;
  font-size: 22px;
  margin-bottom: 5px;
}

.sambutan-text h4 {
  color: #555;
  font-size: 16px;
  margin-bottom: 15px;
}

.sambutan-text p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.btn-daftar{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    background:#4382DF;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-size:20px;
    font-weight:600;
    transition:.3s;
    box-shadow:0 8px 20px rgba(13,110,253,.3);
}

.btn-daftar:hover{
    background:#0b5ed7;
    transform:translateY(-3px);
}

.btn-info{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: #ffffff;
    color: #0a8a72 !important;

    padding: 14px 28px;
    border-radius: 999px; /* Membuat bentuk kapsul */
    border: none;

    text-decoration: none;
    font-size: 18px;
    font-weight: 600;

    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.btn-info:hover{
    background: #f5f5f5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}


/* =========================
   MOBILE JKN SECTION
========================= */

.mobile-jkn-modern {
    padding: 90px 8%;
    background: #f8fcfa;
    overflow: hidden;
    opacity: 1;
    transform: none;
}


.jkn-wrapper {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 70px;
}


/* =========================
   VISUAL PHONE
========================= */

.jkn-visual {
    width: 45%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.jkn-circle {
    position: absolute;
    width: 430px;
    height: 430px;
    background: #dff4e8;
    border-radius: 50%;
}


.jkn-phone {
    width: 270px;
    background: #111;
    padding: 12px;
    border-radius: 35px;
    position: relative;
    z-index: 2;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}


.jkn-phone img {
    width: 100%;
    display: block;
    border-radius: 25px;
}



/* =========================
   FLOAT CARD
========================= */

.jkn-floating {

    position: absolute;
    z-index: 3;

    background: white;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px 20px;

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.12);

    animation: jknFloat 3s ease-in-out infinite;

}


.jkn-floating i {
    font-size: 28px;
    font-style: normal;
}


.jkn-floating h4 {

    margin:0;

    font-size:16px;

    color:#198754;

}


.jkn-floating p {

    margin:5px 0 0;

    font-size:13px;

    color:#777;

}



.floating-1 {

    left:-20px;

    bottom:100px;

}


.floating-2 {

    right:-20px;

    top:100px;

}



@keyframes jknFloat {

    0%,100% {

        transform:translateY(0);

    }

    50% {

        transform:translateY(-12px);

    }

}



/* =========================
   CONTENT
========================= */


.jkn-content {

    width:55%;

}


.jkn-tag {

    display:inline-block;

    color:#198754;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}



.jkn-content h2 {

    font-size:42px;

    line-height:1.3;

    margin:0 0 20px;

    color:#222;

}



.jkn-content h2 span {

    color:#198754;

}



.jkn-content > p {

    color:#666;

    font-size:16px;

    line-height:1.8;

}




/* =========================
   BENEFIT CARD
========================= */


.jkn-benefit {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:35px;

}



.jkn-benefit div {

    background:white;

    padding:20px;

    border-radius:20px;

    box-shadow:0 8px 25px rgba(0,0,0,0.08);

    transition:.3s ease;

}



.jkn-benefit div:hover {

    transform:translateY(-8px);

}



.jkn-benefit span {

    color:#198754;

    font-size:30px;

    font-weight:bold;

}



.jkn-benefit h4 {

    margin:12px 0 8px;

    font-size:17px;

}



.jkn-benefit p {

    margin:0;

    font-size:14px;

    color:#777;

    line-height:1.5;

}




/* =========================
   BUTTON
========================= */


.jkn-btn {

    display:inline-block;

    margin-top:35px;

    padding:14px 35px;

    background:#198754;

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.jkn-btn:hover {

    background:#146c43;

    transform:translateY(-3px);

}



/* =========================
   RESPONSIVE MOBILE
========================= */


@media(max-width:992px){


    .jkn-wrapper {

        flex-direction:column;

        gap:50px;

    }


    .jkn-visual,
    .jkn-content {

        width:100%;

    }


    .jkn-content {

        text-align:center;

    }



    .jkn-benefit {

        grid-template-columns:1fr;

    }



    .floating-1,
    .floating-2 {

        display:none;

    }


}



@media(max-width:480px){


    .mobile-jkn-modern {

        padding:60px 20px;

    }


    .jkn-phone {

        width:220px;

    }


    .jkn-circle {

        width:300px;

        height:300px;

    }


    .jkn-content h2 {

        font-size:30px;

    }


}


/* ==============================
   DROPDOWN MENU LAYANAN
============================== */

.dropdown {
    position: relative;
}


/* Menu Layanan utama */
.dropdown > a {
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
}


/* Kotak dropdown */
.dropdown-content {

    position: absolute;

    top: 45px;
    left: 0;

    width: 240px;

    background: #198754;

    border-radius: 15px;

    padding: 10px 0;

    box-shadow: 0 10px 30px rgba(0,0,0,0.18);


    /* Animasi */
    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition: all 0.35s ease;


    z-index: 9999;

}



/* Link isi dropdown */
.dropdown-content a {

    display: block;

    padding: 13px 20px;


    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 500;


    transition: 0.3s ease;

}



/* Hover isi dropdown */
.dropdown-content a:hover {

    background: rgba(255,255,255,0.18);

    padding-left: 28px;

    color: white;

}



/* Dropdown muncul */
.dropdown:hover .dropdown-content {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



/* Panah dropdown */
.dropdown > a::after {

    content: "▾";

    font-size: 12px;

    margin-left: 5px;

}



/* Hilangkan panah bawaan jika ada */
.dropdown > a {

    cursor: pointer;

}

/* ================================
   HALAMAN RAWAT INAP
================================ */


/* BANNER RAWAT INAP */

.rawat-banner{

    padding:120px 8%;

    background:
    linear-gradient(
    rgba(25,135,84,.85),
    rgba(25,135,84,.85)
    ),
    url("../images/rawat-inap.jpg");

    background-size:cover;

    background-position:center;

    color:white;

}


.rawat-banner div{

    max-width:700px;

}


.rawat-banner span{

    font-size:18px;

    font-weight:600;

}


.rawat-banner h1{

    font-size:45px;

    margin:20px 0;

    line-height:1.3;

}


.rawat-banner p{

    font-size:18px;

    line-height:1.7;

}




/* ================================
   SECTION KAMAR
================================ */


.kamar-section{

    padding:80px 8%;

    background:#f8f9fa;

}



.section-title{

    text-align:center;

    margin-bottom:50px;

}



.section-title span{

    color:#198754;

    font-weight:bold;

}



.section-title h2{

    font-size:36px;

    margin:15px 0;

    color:#222;

}



.section-title p{

    color:#666;

}





/* GRID KAMAR */


.kamar-container{


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:30px;


}





/* CARD KAMAR */


.kamar-card{


    background:white;


    padding:35px 30px;


    border-radius:25px;


    box-shadow:
    0 10px 30px rgba(0,0,0,.08);


    transition:.4s;


    position:relative;


    overflow:hidden;


}




.kamar-card:hover{


    transform:translateY(-10px);


    box-shadow:
    0 20px 40px rgba(0,0,0,.15);


}





.kamar-card i{


    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#e8f7ef;


    color:#198754;


    font-size:35px;


}




.kamar-card h3{


    margin:25px 0 15px;


    font-size:25px;


    color:#198754;


}




.kamar-card p{


    color:#666;


    line-height:1.7;


}





.kamar-card ul{


    padding:0;


    margin:20px 0;


    list-style:none;


}




.kamar-card ul li{


    margin:12px 0;


    color:#444;


}




/* BUTTON */


.btn-kamar{


    display:inline-block;


    margin-top:15px;


    background:#198754;


    color:white;


    padding:12px 25px;


    border-radius:30px;


    text-decoration:none;


    transition:.3s;


}




.btn-kamar:hover{


    background:#146c43;


}





/* SUPER VIP */


.kamar-card.super{


    border:2px solid #d4af37;


}




.kamar-card.super i{


    background:#fff6d8;


    color:#d4af37;


}




.kamar-card.super h3{


    color:#d4af37;


}





/* ================================
   FASILITAS
================================ */


.fasilitas{


    padding:80px 8%;


}



.fasilitas-container{


    display:flex;


    justify-content:center;


    gap:30px;


}



.fasilitas-container div{


    width:300px;


    background:white;


    padding:35px;


    border-radius:20px;


    text-align:center;


    box-shadow:
    0 10px 25px rgba(0,0,0,.08);


    transition:.3s;


}




.fasilitas-container div:hover{


    transform:translateY(-8px);


}




.fasilitas-container i{


    font-size:40px;


    color:#198754;


}




.fasilitas-container h3{


    margin:20px 0 10px;


}







/* ================================
   RESPONSIVE TABLET
================================ */


@media(max-width:992px){


.kamar-container{


    grid-template-columns:repeat(2,1fr);


}



.rawat-banner h1{


    font-size:35px;


}



}







/* ================================
   RESPONSIVE HP
================================ */


@media(max-width:600px){


.rawat-banner{


    padding:80px 5%;


}



.rawat-banner h1{


    font-size:30px;


}



.kamar-container{


    grid-template-columns:1fr;


}



.fasilitas-container{


    flex-direction:column;


    align-items:center;


}



.fasilitas-container div{


    width:100%;


}



}



/* =====================
   POLIKLINIK
===================== */


.poli-banner{

padding:120px 8%;

background:
linear-gradient(
rgba(25,135,84,.85),
rgba(25,135,84,.85)
),
url("../images/poliklinik.jpg");

background-size:cover;

background-position:center;

color:white;

}


.poli-banner h1{

font-size:45px;

margin:20px 0;

}


.poli-banner p{

font-size:18px;

max-width:650px;

line-height:1.7;

}




.poli-section{

padding:80px 8%;

background:#f8f9fa;

}




.poli-container{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}





.poli-card{

background:white;

padding:35px;

border-radius:25px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

}



.poli-card:hover{

transform:translateY(-10px);

}




.poli-card i{

font-size:45px;

color:#198754;

background:#e8f7ef;

padding:20px;

border-radius:50%;

}



.poli-card h3{

margin:25px 0 15px;

color:#198754;

}




.poli-card p{

color:#666;

line-height:1.6;

}




.btn-poli{

display:inline-block;

margin-top:20px;

padding:12px 25px;

background:#198754;

color:white;

text-decoration:none;

border-radius:30px;

}



.btn-poli:hover{

background:#146c43;

}






@media(max-width:992px){


.poli-container{

grid-template-columns:repeat(2,1fr);

}


}




@media(max-width:600px){


.poli-container{

grid-template-columns:1fr;

}



.poli-banner h1{

font-size:30px;

}


}


/* ALUR RAWAT INAP */
.alur-rawat-inap {
    padding: 80px 8%;
    background: #f7fbff;
}

.alur-rawat-inap .section-title {
    text-align: center;
    margin-bottom: 40px;
}

.alur-rawat-inap .section-title h2 {
    font-size: 32px;
    color: #0077b6;
    margin-bottom: 10px;
}

.alur-rawat-inap .section-title p {
    color: #666;
    font-size: 16px;
}


/* FOTO ALUR */
.alur-image-container {
    max-width: 1000px;
    margin: auto;
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.alur-image-container img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    transition: 0.3s;
}


.alur-image-container img:hover {
    transform: scale(1.02);
}


/* RESPONSIVE */
@media(max-width:768px){

    .alur-rawat-inap {
        padding: 50px 5%;
    }

    .alur-rawat-inap .section-title h2 {
        font-size: 26px;
    }

    .alur-image-container {
        padding: 15px;
    }

}


/* ALUR POLIKLINIK */
.alur-poliklinik {
    padding: 80px 8%;
    background: #ffffff;
}


.alur-poliklinik .section-title {
    text-align: center;
    margin-bottom: 40px;
}


.alur-poliklinik .section-title h2 {
    font-size: 32px;
    color: #008cba;
    margin-bottom: 10px;
}


.alur-poliklinik .section-title p {
    max-width: 700px;
    margin: auto;
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}


/* CONTAINER FOTO */
.alur-poliklinik .alur-image-container {
    max-width: 1000px;
    margin: auto;
    background: #f8fcff;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    text-align: center;
}


.alur-poliklinik .alur-image-container img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    transition: 0.3s ease;
}


.alur-poliklinik .alur-image-container img:hover {
    transform: scale(1.02);
}


/* MOBILE */
@media(max-width:768px){

    .alur-poliklinik {
        padding: 50px 5%;
    }


    .alur-poliklinik .section-title h2 {
        font-size: 25px;
    }


    .alur-poliklinik .alur-image-container {
        padding: 15px;
    }

}