/* ============================
   COLOR SYSTEM (dari palette kamu)
   ============================ */

   html {
    scroll-behavior: smooth;
    margin: 0; /* pastikan tidak ada margin default */
    scroll-padding-top: 80px; /* biar anchor gak ketutup header, bisa di-tweak */
  }
   :root {
    /* --color-bg-light: #fcfaf8;  
    --color-bg-light1: #E6DFD7;   
    --color-primary:   #1F3E43; 
    --color-accent:    #B38C6A;  
    --color-danger:    #5B2C36; 
    --color-muted:     #6C757D;   */

    --color-bg-light:      #fcfaf8;
  --color-bg-light-text: #1F3E43;

  --color-primary:       #1F3E43;
  --color-primary-text:  #fcfaf8;

  --color-accent:        #5B2C36;
  --color-accent-text:   #fcfaf8;

  --color-danger:        #E6DFD7;
  --color-danger-text:   #1F3E43;

  --color-muted:         #6C757D;
    --radius-xl: 32px;
    --radius-lg: 24px;
    --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.07);
}

/* Override sedikit gaya global bootstrap */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--color-bg-light);
    color: var(--color-primary);
    margin: 0; /* pastikan tidak ada margin default */
}


/* ============================
   HEADER / NAV PILL
   ============================ */

/* MOBILE FIRST (<= 991px) */
.site-header {
  position: static;
  z-index: 1000;
  padding: 0.75rem 0;
  transition:
      padding 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease;
}

/* STATE: sticky (ditambah class .is-sticky dari JS) */
.site-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  background: var(--color-bg-light);          
  backdrop-filter: blur(12px);
  /* box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); */
  z-index: 1000;
}

/* ketika sticky, pill bar agak mengecil & rapi */
.site-header.is-sticky .nav-pill-bar {
  margin-top: 0;
  /* background-color: #ffffff;                      */
  /* box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08); */
}

/* pill di tengah */
.nav-pill-bar {
  width: calc(100% - 2.5rem);     /* ada space kiri-kanan */
  margin-inline: auto;
  /* background-color: #ffffff; */  /* base biarkan transparan, diatur per state */
  /* border-radius: var(--radius-lg); */
  margin-top: 15px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08); */
}

/* Logo */
/* Default img logo */
.nav-logo img {
  display: block;
  height: 60px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Sembunyikan dulu dua-duanya */
.nav-logo .logo-dark,
.nav-logo .logo-light {
  display: none;
}

/* =======================
 STATE TOP (BELUM SCROLL)
 ======================= */

/* HOME TOP: logo hitam */
body.page-home .nav-logo .logo-dark {
  display: inline-block;
}

/* INNER PAGE TOP: logo putih */
body.page-inner .nav-logo .logo-light {
  display: inline-block;
}

/* =======================
 SAAT STICKY (SCROLL)
 ======================= */

/* Saat sticky di halaman manapun: logo hitam */
.site-header.is-sticky .nav-logo .logo-dark {
  display: block;
}

.site-header.is-sticky .nav-logo .logo-light {
  display: none;
}


/* Menu desktop */
.nav-links {
  flex: 1;
  justify-content: center;
  gap: 2rem;
}

/* BASE: semua link di nav-pill (termasuk Intro) */
.nav-link-item {
  position: relative;
  padding: 0.45rem 0.35rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit; /* warna diatur per state (home/inner/sticky) */
  transition:
      color 0.18s ease-out,
      background-color 0.18s ease-out,
      transform 0.18s ease-out;
}

/* HOVER: efek pill soft */
.nav-link-item:hover,
.nav-link-item:focus {
  background-color: rgba(31, 62, 67, 0.08);   /* soft primary */
  transform: translateY(-1px);
}

/* STATE ACTIVE (kalau mau tandai halaman sekarang) */
.nav-link-item.is-active {
  background-color: rgba(31, 62, 67, 0.14);
  font-weight: 600;
}

/* Tombol WA */
.btn-nav-wa {
  border-radius: 24px;
  padding: 0.8rem 1.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--color-danger);
  color: #ffffff;
  white-space: nowrap;
  transition:
      color 0.18s ease-out,
      background-color 0.18s ease-out,
      transform 0.18s ease-out;
}

.btn-nav-wa:hover {
  filter: brightness(1.05);
  color: #fff;
}

/* PANEL DROPDOWN – glassy, rounded, TURUN DIKIT */
.nav-item-dropdown .dropdown-menu {
  min-width: 220px;
  margin-top: 1.1rem;
  padding: 0.55rem 0.55rem;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
      0 18px 45px rgba(15, 23, 42, 0.18),
      0 0 0 1px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(14px);

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: top center;
  transition:
      opacity 0.18s ease-out,
      transform 0.22s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.nav-item-dropdown .dropdown-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ITEM DROPDOWN – pill & hover rounded */
.nav-item-dropdown .dropdown-item {
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  margin-inline: 0.15rem;
  margin-bottom: 0.15rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
  display: flex;
  align-items: center;
}

.nav-item-dropdown .dropdown-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(31, 62, 67, 0.35);
  margin-right: 0.5rem;
}

.nav-item-dropdown .dropdown-item:hover,
.nav-item-dropdown .dropdown-item:focus {
  background-color: rgba(31, 62, 67, 0.06);
  color: var(--color-primary);
}

.nav-item-dropdown .dropdown-toggle::after {
  margin-left: 0.3rem;
  border-top-width: 0.28em;
  border-top-color: var(--color-primary);
  transition: transform 0.22s ease-out, border-top-color 0.18s;
}

.nav-item-dropdown .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  border-top-color: var(--color-danger);
}

/* burger (hanya mobile) */
.nav-burger {
  margin-left: auto;
  width: 30px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0;
}

.nav-burger span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background-color: var(--color-primary);
  transition: background-color 0.18s ease-out;
}

/* ====================================================
 STATE WARNA BERDASARKAN HALAMAN & SCROLL
 ==================================================== */

/* ============== HOME (page-home, BELUM SCROLL) ============== */
/* Home: semua teks nav hitam */
body.page-home .nav-logo,
body.page-home .nav-link-item {
  color: #111827;
}

body.page-home .nav-item-dropdown .dropdown-toggle::after {
  border-top-color: #111827;
}

body.page-home .nav-burger span {
  background-color: #111827;
}

/* ============== HALAMAN LAIN (page-inner, BELUM SCROLL) ============== */
/* Inner page: nav putih (di atas hero/background gelap) */
body.page-inner .nav-logo,
body.page-inner .nav-link-item {
  color: #ffffff;
}

body.page-inner .nav-item-dropdown .dropdown-toggle::after {
  border-top-color: #111827;
}

body.page-inner .nav-burger span {
  background-color: #111827;
}

/* ============== SAAT SCROLL (STICKY) – SEMUA PAGE ============== */
/* Saat sticky: background putih, teks hitam di semua halaman */
.site-header.is-sticky .nav-logo,
.site-header.is-sticky .nav-link-item {
  color: #111827;
}

.site-header.is-sticky .nav-item-dropdown .dropdown-toggle::after {
  border-top-color: #111827;
}

.site-header.is-sticky .nav-burger span {
  background-color: #111827;
}

/* hover tetap pakai warna primary agar nyambung tema */
.site-header.is-sticky .nav-link-item:hover,
.site-header.is-sticky .nav-link-item:focus {
  background-color: rgba(31, 62, 67, 0.08);
}

/* ============================
   MOBILE SLIDE MENU
   ============================ */
/* OVERLAY DASAR */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: transparent;              /* awal: transparan */
  transition:
    opacity 0.25s ease,
    background 0.25s ease;
  z-index: 9998;                         /* di atas konten, di bawah panel */
}

/* STATE: MENU TERBUKA */
.mobile-menu-overlay.is-open {
  pointer-events: auto;
  opacity: 1;                            /* PENTING: 1, biar anak tidak transparan */
  background: rgba(15, 23, 42, 0.06);    /* efek gelap tipis pakai background, bukan opacity */
}

.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: 0;

  width: min(340px, 80vw);
  height: 100vh;               /* ⬅️ full tinggi viewport */
  overflow-y: auto;            /* ⬅️ kalau konten kepanjangan, scroll di dalam panel */

  background-color: #ffffff;   /* atau var(--color-bg-light) */
  background-image: none;
  box-shadow: -18px 0 45px rgba(15, 23, 42, 0.16);

  transform: translateX(100%);
  transition: transform 0.28s ease;
  padding: 1.75rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;

  z-index: 9999;
}

/* STATE: PANEL MASUK */
.mobile-menu-overlay.is-open .mobile-menu-panel {
  transform: translateX(0);
}


/* tombol close */
.mobile-menu-close {
    align-self: flex-end;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    position: relative;
    margin-bottom: 2rem;
}

.mobile-menu-close span {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--color-muted);
}

.mobile-menu-close span:first-child {
    transform: rotate(45deg);
}

.mobile-menu-close span:last-child {
    transform: rotate(-45deg);
}

/* List utama menu di mobile */
.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

/* Base link mobile */
.mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--color-primary);
    font-size: 1.3rem;
}

/* GROUP INTRO */
.mobile-menu-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Parent Intro row */
.mobile-menu-parent {
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Label Intro */
.mobile-menu-parent-label {
    font-size: 1.3rem;
}

/* ICON CHEVRON */
.mobile-menu-chevron-icon {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg); /* default: panah ke bawah miring */
    transition: transform 0.22s ease-out;
    flex-shrink: 0;
}

.mobile-menu-parent.is-open .mobile-menu-chevron-icon {
    transform: rotate(-135deg);
}

.mobile-menu-children {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.2rem;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height 0.25s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Saat open: turun pelan */
.mobile-menu-children.is-open {
    max-height: 300px;              /* cukup untuk 3–5 anak */
    opacity: 1;
    transform: translateY(0);
}

/* Child item */
.mobile-menu-child {
    font-size: 1rem;
    opacity: 0.85;
    padding-left: 1.4rem;
    justify-content: flex-start;
    gap: 0.2rem;
}

/* Optional bullet */
.mobile-menu-child::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.5);
    margin-right: 0.55rem;
}

.btn-mobile-book {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 999px;
    padding: 0.9rem 1.3rem;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.btn-mobile-book:hover {
    filter: brightness(1.05);
    color: #fff;
}

.mobile-menu-social {
    display: flex;
    gap: 0.6rem;
    margin-top: auto;
}

.social-pill {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background-color: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-primary);
}

body.menu-open {
    overflow: hidden;
}

/* desktop: overlay tidak dipakai */
@media (min-width: 992px) {
    .mobile-menu-overlay {
        display: none;
    }
}

/* ============================
   HERO – FULL BANNER DESKTOP, CARD MOBILE
   ============================ */

/* section hero */
.hero-section {
    padding: 0;
    background-color: transparent;
}

/* container full width */
.site-header > .container,
.hero-section > .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* default = MOBILE STYLE */
.hero-carousel {
    position: relative;
    width: calc(100% - 2.5rem);      /* sejajar dengan pill header */
    margin: 0.75rem auto 2rem;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.25);
}

.hero-img {
    display: block;
    width: 100%;
    height: min(430px, 75vh);
    object-fit: cover;
}

.hero-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 2.3rem;
    z-index: 2;
    color: #ffffff;
    text-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
    text-align: center; /* default mobile */
}

/* lebar sama dengan nav-pill: min(1120px, 100% - 3rem) */
.hero-caption-inner {
    width: min(1120px, 100% - 3rem);
    margin-inline: auto;
}

/* typo & tombol */
.hero-kicker {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.4rem;
}

.hero-title {
    font-size: 1.8rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 0.25rem;
}

.hero-subtitle {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.hero-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
    justify-content: center;
}

/* tombol CTA hero */
.btn-hero-primary {
    border-radius: 999px;
    padding: 0.75rem 1.8rem;
    font-weight: 600;
    font-size: 0.95rem;
    background-color: var(--color-danger);
    border: none;
    color: #fff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.35);
}

.btn-hero-primary:hover {
    filter: brightness(1.05);
    color: #fff;
}

/* indikator rectangle bawah (mobile) */
.hero-indicators-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5rem;
    display: flex;
    gap: 0.4rem;
    z-index: 3;
}

.hero-indicators-bottom button {
    width: 32px;
    height: 9px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

.hero-indicators-bottom button.active {
    background-color: #ffffff;
}

/* indikator dot kanan (mobile) */
.hero-indicators-right {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 3;
}

.hero-indicators-right button {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.4);
}

.hero-indicators-right button.active {
    background-color: #ffffff;
}

/* ============================
   DESKTOP OVERRIDE (>= 992px)
   ============================ */

@media (min-width: 992px) {
    /* header mengapung di atas hero */
    .site-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        background: transparent;
    }

     /* >>> GRID UTAMA: nav-pill & hero-caption-inner sama persis <<< */
     .nav-pill-bar,
     .hero-caption-inner {
         width: min(1120px, 100% - 2rem);
         margin-inline: auto;
     }
 
    /* hero full screen */
    .hero-carousel {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }

    .hero-img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

  /* Caption stretch full, isi dibatasi hero-caption-inner di atas */
  .hero-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10rem;          /* jarak dari bawah, silakan tweak */
    text-align: left;
    z-index: 2;
    color: #fff;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.hero-title {
    font-size: clamp(2.1rem, 3vw + 1rem, 3rem);
}

.hero-subtitle {
    font-size: 1.1rem;
}

.hero-actions {
    justify-content: flex-start;
}

    .hero-indicators-bottom {
        left: clamp(3rem, 8vw, 6rem);
        bottom: 2.2rem;
        transform: none;
    }

    .hero-indicators-right {
        right: clamp(1.5rem, 5vw, 3rem);
        top: 50%;
        transform: translateY(-50%);
    }


}

@media (max-width: 991.98px) {
  .hero-section {
    padding-top: 40px;
}
}

/* extra kecil (opsional) */
@media (max-width: 575.98px) {
    .hero-section {
        padding-top: 50px;
    }

    .hero-section > .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .hero-carousel {
        width: calc(100% - 2.5rem);
        margin: 1rem auto 2.2rem;
        border-radius: 32px;
        overflow: hidden;
        box-shadow: 0 26px 70px rgba(15, 23, 42, 0.25);
    }

    .hero-img {
        width: 100%;
        height: min(620px, 82vh);
        object-fit: cover;
    }

    /* === CAPTION: Nempel di bawah, tapi masih lega === */
    .hero-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;                       /* anchor di bawah */
        padding: 2rem 1.8rem 3.4rem;      /* ruang atas & bawah untuk teks + tombol */
        text-align: center;
        z-index: 2;
        color: #ffffff;
        text-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
    }

    .hero-caption-inner {
        width: 100%;
    }

    .hero-kicker {
        font-size: 0.75rem;
        letter-spacing: 0.22em;
        margin-bottom: 0.6rem;
    }

    .hero-title {
        font-size: 1.6rem;
        line-height: 1.15;
        margin-bottom: 0.6rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.9rem;
    }

    .hero-actions {
        margin-top: 0.4rem;
        justify-content: center;
    }

    .btn-hero-primary {
        padding: 0.8rem 1.9rem;
        font-size: 0.95rem;
    }

    /* === INDICATORS: sedikit di bawah caption === */
    .hero-indicators-bottom {
        bottom: 1.2rem;                  /* jarak dari bawah */
        left: 50%;
        transform: translateX(-50%);
    }

    .hero-indicators-right {
        right: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
    }
}


/* ============================
   HERO STATS – PROFESSIONAL BAR
   ============================ */

   .hero-stats-bar {
    position: relative;
    z-index: 20;
    margin-top: 2rem;          
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .hero-stats-bar {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}
/* Card cukup block, grid dihandle oleh .row .col */
.hero-stats-card {
    width: 100%;
    /* background-color: #ffffff; */
    border-radius: 22px;
    /* box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06); */
    /* padding: 1.2rem 1.4rem; */
}

/* @media (min-width: 992px) {
    .hero-stats-card {
        padding: 1.4rem 1.8rem;
    }
} */

/* Block tiap statistik: icon + text */
.hero-stat-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Icon di kolom 1–3 */
.hero-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg-light);
    flex-shrink: 0;
    font-size: 1.1rem;
}

.hero-stats-main > [class*="col-"] {
    display: flex;
    align-items: center;   /* center secara vertikal di dalam hero-stats-card */
}


/* Border vertikal antar kolom di desktop, sama seperti sebelumnya */
@media (min-width: 992px) {
    .hero-stats-main > .col-md-4 {
        /* display & align-items sudah di-set di rule di atas, di sini fokus ke padding */
        padding-left: 0;
        padding-right: 0;
    }

    .hero-stats-main > .col-md-4:not(:last-child) .hero-stat-block {
        border-right: 1px solid rgba(108, 117, 125, 0.18);
        padding-right: 1.1rem;
    }

    .hero-stats-main > .col-md-4:not(:first-child) .hero-stat-block {
        padding-left: 1.1rem;
    }
}

/* Label & value tetap seperti sebelumnya */
.hero-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    margin-bottom: 0.15rem;
}

.hero-stat-value {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* KANAN: CTA WA */
.hero-stats-cta {
    border-radius: 18px;
    background-color: rgba(31, 62, 67, 0.04);
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 992px) {
    .hero-stats-cta {
        margin-left: 1.4rem;
    }
    /* .hero-stats-bar .container {
        max-width: calc(100% - 2.5rem);  
    } */
}

.hero-stats-cta-text .cta-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-danger);
    margin-bottom: 0.1rem;
}

.hero-stats-cta-text .cta-desc {
    font-size: 0.8rem;
    color: var(--color-muted);
    line-height: 1.4;
}

/* Tombol WA */
.btn-hero-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    background-color: var(--color-danger);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.btn-hero-wa:hover {
    filter: brightness(1.06);
    color: #ffffff;
}

@media (max-width: 991.98px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #f5f6f7; /* abu sangat muda ala app */
    z-index: 1200;
}

/* pill bar jadi full, pojok bawah rounded (kayak app bar) */
.nav-pill-bar {
    width: 100% !important;        /* full width */
    margin-top: 0 !important;      /* hilang gap abu-abunya */
    margin-inline: 0;
    border-radius: 0 0 0 0;
    padding-inline: 1.1rem;
    background-color: var(--color-bg-light); /* abu sangat muda ala app */
    justify-content: space-between;
}

/* logo & burger */
.nav-logo-text {
    font-size: 1.05rem;
}

/* ========== OVERRIDE LOGO DI MOBILE ========== */
/* Di mobile, selalu pakai logo hitam (dark) */
.nav-logo .logo-dark {
    display: block;
}
.nav-logo .logo-light {
    display: none;
}

/* Teks nav & ikon dropdown & burger selalu warna gelap */
.nav-logo,
.nav-link-item {
    color: #111827 !important;
}

.nav-item-dropdown .dropdown-toggle::after {
    border-top-color: #111827 !important;
}

.nav-burger span {
    background-color: #111827 !important;
}

.nav-logo .logo-dark {
  display: inline-block;
}
.nav-logo .logo-light {
  display: none !important;
}
    
      body {
        padding-top: 72px; /* kompensasi header fixed, tweak sesuai tinggi real */
      }

    .hero-stats-bar .container,.why-intro-section .container {
        max-width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}


/* ============================
   SECTION: KENAPA HARUS INTRO
   ============================ */

   .why-intro-section {
    padding: 0 0 4rem;
}

@media (min-width: 992px) {
    .why-intro-section {
        padding: 0 0 4.5rem;
    }
}

/* Header kiri-kanan */
.why-intro-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.8rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.section-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
}

/* Link kanan */
.why-intro-link {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    padding-bottom: 0.1rem;
}

.why-intro-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-primary);
    transition: width 0.2s ease;
}

.why-intro-link-arrow {
    font-size: 0.9rem;
    transform: translateY(-1px);
}

.why-intro-link:hover::after {
    width: 100%;
}

/* Layout kiri-kanan */
.why-intro-layout {
    align-items: flex-start;
}

/* ====== KIRI: LIST ALASAN ====== */

.why-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Tombol alasan – pill putih */
.why-acc-item {
    width: 100%;
    border: none;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 0.8rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.why-acc-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.why-acc-item.active {
    background-color: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

/* Label di dalam tombol */
.why-acc-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.why-acc-index {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    flex-shrink: 0;
}

.why-acc-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Chevron kanan */
.why-acc-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg); /* default: panah ke bawah */
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.why-acc-item.active .why-acc-chevron {
    transform: rotate(-135deg); /* ke atas saat active */
}

/* Panel konten alasan – SLIDE DOWN */
.why-acc-panel-wrapper {
    /* biar area panel rapi di bawah list */
    margin-top: 0.2rem;
}

.why-acc-panel {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);

    /* awalnya “terlipat” */
    margin-top: 0.8rem;
    padding: 0 1.3rem;          /* hanya padding kiri–kanan dulu */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);

    transition:
        max-height 0.28s ease,
        opacity 0.22s ease,
        transform 0.22s ease,
        padding-top 0.22s ease,
        padding-bottom 0.22s ease;
    font-size: 0.9rem;
    color: var(--color-primary);
}

/* Saat panel aktif: terbuka dengan slide down */
.why-acc-panel.active {
    opacity: 1;
    transform: translateY(0);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}


/* ====== KANAN: VIDEO CARD ====== */

.why-video-card {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    padding: 1rem 1rem 1.3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.why-video-card iframe {
    border: 0;
    width: 100%;
    height: 100%;
}

.why-video-caption {
    padding-inline: 0.15rem;
}

.why-video-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.why-video-text {
    font-size: 0.88rem;
    color: var(--color-muted);
}

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

/* Mobile: header & link center */
@media (max-width: 575.98px) {
    .why-intro-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .why-intro-section .section-title,
    .why-intro-section .section-subtitle,
    .why-intro-section .why-intro-link {
        text-align: center;
    }

    .why-video-card {
        padding: 0.9rem 0.9rem 1.3rem;
    }

    .why-video-caption {
        text-align: center;
    }
}


/* Grup satu alasan + panel di bawahnya */
.why-acc-item-group {
    margin-bottom: 0.75rem;
}


.clinic-page-bg {
    background: radial-gradient(circle at top,
    var(--color-accent) 0%, var(--color-bg-light) 40%, var(--color-accent)70%, var(--color-accent) 100%);
    padding-bottom: 100px;
  }



/* Section Layanan Unggulan */
.featured-services-section {
    padding: 3rem 0 4rem;
    /* base warna krem lembut */
    background:transparent;
}

@media (min-width: 992px) {
    .featured-services-section {
        padding: 3.5rem 0 4.5rem;
    }
}

/* header (boleh pakai yang sudah ada, ini hanya pelengkap) */
.featured-services-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

/* ========== DESKTOP/TABLET SCROLLER ========== */

.featured-services-scroller .row {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding-bottom: 0.4rem;

    /* Firefox: sembunyikan scrollbar */
    scrollbar-width: none;
}

/* Chrome / Safari / Edge: sembunyikan scrollbar */
.featured-services-scroller .row::-webkit-scrollbar {
    display: none;
    height: 6px;
}
.featured-services-scroller .row::-webkit-scrollbar-track {
    background: transparent;
}
.featured-services-scroller .row::-webkit-scrollbar-thumb {
    background: rgba(31,62,67,0.35);
    border-radius: 999px;
}

.layanan-link {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    padding-bottom: 0.1rem;
}

.layanan-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-primary);
    transition: width 0.2s ease;
}

.layanan-link-arrow {
    font-size: 0.9rem;
    transform: translateY(-1px);
}

.layanan-link:hover::after {
    width: 100%;
} 
/* CARD */
.svc-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 1.1rem 1.2rem 1.1rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    min-height: 190px;           /* supaya tinggi konsisten */
}

/* header card: icon + title sejajar, gak numpuk */
.svc-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.svc-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background-color: rgba(31,62,67,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.svc-card-title {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-primary);
}

.svc-card-text {
    font-size: 0.88rem;
    color: var(--color-muted);
    margin-bottom: 0.65rem;
    line-height: 1.5;
    flex: 1;                     /* dorong tombol ke bawah */
}

/* link "Lihat detail" di dalam card */
.svc-card-link {
    border: none;
    background: transparent;
    padding: 0;
    align-self: flex-start;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
}

.svc-card-link::after {
    content: "↗";
    font-size: 0.82rem;
}

.svc-card-link:hover {
    text-decoration: underline;
}

/* ========== MOBILE: 2 BUTTON ONLY ========== */

.featured-services-actions {
    margin-top: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-svc-main,
.btn-svc-ghost {
    border-radius: 999px;
    padding: 0.8rem 1.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* tombol utama */
.btn-svc-main {
    border: none;
    background-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(15,23,42,0.25);
}
.btn-svc-main:hover {
    filter: brightness(1.05);
    color: #ffffff;
}

/* tombol kedua */
.btn-svc-ghost {
    border: 1px solid rgba(31,62,67,0.25);
    background-color: #ffffff;
    color: var(--color-primary);
}
.btn-svc-ghost:hover {
    background-color: rgba(255,255,255,0.9);
}

/* di mobile tombol full width & center */
@media (max-width: 767.98px) {
    .featured-services-actions {
        justify-content: center;
    }

    .btn-svc-main,
    .btn-svc-ghost {
        width: 100%;
    }
}


/* Mobile: header & link center */
@media (max-width: 575.98px) {
    .featured-services-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .featured-services-section .section-title,
    .featured-services-section .section-subtitle,
    .featured-services-section .layanan-link {
        text-align: center;
    }
   
}


/* === MODAL LAYANAN INTRO DENTAL === */

.svc-modal-dialog {
    max-width: 720px;                    /* agak lebar tapi tidak terlalu full */
  }
  
  @media (max-width: 575.98px) {
    .svc-modal-dialog {
      margin: 1.5rem;                    /* beri ruang dari tepi layar */
    }
  }
  

  .svc-modal {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    /* gradient lembut + transparan */
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92),
        rgba(230, 223, 215, 0.96)
      );
    box-shadow:
      0 30px 80px rgba(15, 23, 42, 0.35),
      0 0 0 1px rgba(15, 23, 42, 0.03);
  
    /* efek blur kaca */
    backdrop-filter: blur(18px) saturate(140%);
    z-index: 1500;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
  
  /* Backdrop di belakang modal juga sedikit blur & gelap tipis */
  .modal-backdrop.show {
    background-color: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .svc-modal-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  
  .svc-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  
  .svc-modal-intro {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  /* List container */
  .svc-list {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.04);
  }
  
  /* Item tiap layanan */
  .svc-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;                         /* hilangkan border default list-group */
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  }
  
  .svc-list-item:last-child {
    border-bottom: none;
  }
  
  /* Icon emoji */
  .svc-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  
  /* Teks */
  .svc-list-text {
    flex: 1;
    min-width: 0;
  }
  
  .svc-list-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.1rem;
  }
  
  .svc-list-desc {
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: 0;
  }
  
  /* Hover di desktop: sedikit angkat supaya terasa interaktif */
  @media (hover: hover) {
    .svc-list-item:hover {
      background-color: rgba(31, 62, 67, 0.02);
    }
  }
  
  /* Tombol ghost di footer */
  .btn-svc-ghost {
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(31, 62, 67, 0.16);
    color: var(--color-primary);
    background-color: #ffffff;
  }
  
  .btn-svc-ghost:hover {
    background-color: rgba(31, 62, 67, 0.04);
    color: var(--color-primary);
  }
  



  /* ============================
   SECTION DOKTER INTRO DENTAL
   ============================ */

.doctors-section {
    padding: 3.5rem 0 4.5rem;
    background:transparent;

}

/* Header kiri */
.doctors-header .section-kicker {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.doctors-title {
    font-size: clamp(1.9rem, 2.4vw + 1rem, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

.doctors-intro {
    font-size: 0.95rem;
    color: var(--color-muted);
    max-width: 25rem;
}

.btn-doctors-primary,
.btn-doctors-ghost {
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.btn-doctors-primary {
    background-color: var(--color-danger);
    color: #fff;
    border: none;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}

.btn-doctors-primary:hover {
    filter: brightness(1.05);
    color: #fff;
}

.btn-doctors-ghost {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid rgba(31, 62, 67, 0.18);
}

.btn-doctors-ghost:hover {
    background-color: rgba(31, 62, 67, 0.05);
    color: var(--color-primary);
}

/* SCROLLER & CARD */
.doctors-scroller {
    overflow-x: auto;
    padding-bottom: 0.35rem;
    margin-right: -1rem; /* sedikit bleed biar full */
}

/* hide scrollbar (desktop) */
.doctors-scroller::-webkit-scrollbar {
    height: 0;
}
.doctors-scroller {
    scrollbar-width: none; /* Firefox */
}

/* horizontal track */
.doctors-track {
    padding-bottom: 0.25rem;
}

/* Kartu dokter */
.doctor-card {
    flex: 0 0 260px;
    max-width: 260px;
}

@media (min-width: 1200px) {
    .doctor-card {
        flex-basis: 280px;
        max-width: 280px;
    }
}

.doctor-card-inner {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 0.9rem 0.9rem 1.2rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* tag spesialis di pojok atas */
.doctor-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-primary);
    background-color: rgba(31, 62, 67, 0.06);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    align-self: flex-start;
    margin-bottom: 0.55rem;
}

/* foto */
.doctor-photo {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 0.7rem;
    aspect-ratio: 3 / 4;
    background-color: #d4d4d4;
}

.doctor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* teks */
.doctor-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.15rem;
}

.doctor-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
}

.doctor-spec {
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

/* kita beri panel warna di bawah foto */
.doctor-card-inner {
  background: linear-gradient(
    to bottom,
    var(--color-bg-light) 0,
    var(--color-bg-light) 55%,
    var(--color-primary) 55%, /* Menggantikan #1f3e43 */
    var(--color-primary)100% /* Menggantikan #1f3e43 */
);
}

.doctor-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.9);
}

/* hint geser */
.doctors-hint-line {
    flex: 0 0 60px;
    height: 2px;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.25);
}

.doctors-hint-text {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* Mobile: header di tengah, scroller full width */
@media (max-width: 991.98px) {
    .doctors-header {
        text-align: center;
    }
    .doctors-intro {
        margin-inline: auto;
    }
    .btn-doctors-primary,
    .btn-doctors-ghost {
        width: 100%;
        justify-content: center;
    }
    .btn-doctors-ghost {
        margin-top: 0.5rem;
    }
    .doctors-scroller {
        margin-right: 0;
        margin-top: 1.2rem;
    }
    .doctors-hint {
        justify-content: center;
    }
}




/* ============================
   SECTION: HASIL PERAWATAN
   ============================ */

   .treatment-section {
    /* tadinya: padding: 4rem 0 4.5rem; */
    padding: 0 0 4.5rem;
    margin-top: -6.5rem;   /* bikin section naik, jadi overlap */
}


/* Card besar sedikit overlap dengan section sebelumnya */
.treatment-card {
    background-color: #ffffff;
    border-radius: 26px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    margin-top: 0;
    
}

/* === BEFORE–AFTER WRAPPER === */

.ba-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
    background-color: #000;
    overflow: hidden;
}

.ba-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Before = jadi layer bawah */
.ba-img-before {
    position: absolute;
    inset: 0;
}

/* After = ter-clip, lebar dikontrol JS */
.ba-after-clip {
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
    pointer-events: none;
}

.ba-img-after {
    position: absolute;
    inset: 0;
}

/* Handle di tengah slider */
.ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background-color: #133445;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.ba-handle-icon {
    font-size: 1.7rem;
    color: #ffffff;
}

/* Slider transparan di bawah handle */
.ba-slider {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: 0;       /* slider invisible tapi clickable */
    cursor: ew-resize;
}

/* === Copy sebelah kanan === */

.treatment-copy {
    padding: 2.5rem 2.4rem;
}

.treatment-kicker {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-muted);
    margin-bottom: 0.4rem;
}

.treatment-title {
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.treatment-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 1.4rem;
}

.btn-treatment-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    border-radius: 999px;
    background-color: var(--color-danger);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.btn-treatment-primary:hover {
    filter: brightness(1.06);
    color: #ffffff;
}

/* === Galeri lainnya === */

.treatment-gallery {
    margin-top: 2.5rem;
}

.gallery-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.gallery-link {
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-primary);
}

.gallery-link:hover {
    text-decoration: underline;
}

/* Thumb 1:1 */
.gallery-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    background-color: #d7d7d7;
    position: relative;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease-out;
}

.gallery-thumb:hover img {
    transform: scale(1.04);
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .treatment-card {
        margin-top: -2rem;
    }

    .treatment-copy {
        padding: 1.7rem 1.5rem 2rem;
        text-align: center;
    }

    .btn-treatment-primary {
        width: 100%;
    }

    .ba-wrapper {
        min-height: 220px;
    }
}


/* ============================
   SECTION: TESTIMONI PASIEN
   ============================ */

   .testimonials-section {
    padding: 3.5rem 0 4.5rem;
}

.testi-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.2rem;
}

.testi-link-more {
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    padding-bottom: 0.08rem;
}

.testi-link-more::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: var(--color-primary);
    transition: width 0.2s ease;
}

.testi-link-more:hover::after {
    width: 100%;
}

.testi-link-arrow {
    font-size: 0.9rem;
    transform: translateY(-1px);
}

/* Card testimoni */
.testimonial-card {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 1.6rem 1.6rem 1.4rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testi-stars {
    font-size: 1rem;
    letter-spacing: 0.18em;
    color: #f5b300; /* gold */
    margin-bottom: 0.75rem;
}

.testi-text {
    font-size: 0.9rem;
    color: var(--color-primary);
    line-height: 1.6;
    margin-bottom: 0;
}

.testi-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.testi-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    flex-shrink: 0;
}

.testi-person-meta {
    display: flex;
    flex-direction: column;
}

.testi-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}

.testi-time {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* Carousel indicators style (mobile) */
.testi-indicators {
    position: static;
    margin-top: 1.1rem;
    display: flex;
    justify-content: center;
    gap: 0.45rem;
}

.testi-indicators button {
    width: 26px;
    height: 6px;
    border-radius: 999px;
    border: none;
    background-color: rgba(31, 62, 67, 0.15);
}

.testi-indicators button.active {
    background-color: var(--color-primary);
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
    .testimonials-section {
        padding: 3rem 0 3.8rem;
    }

    .testi-header {
        align-items: flex-start;
    }

    .testi-link-more {
        margin-top: 0.4rem;
    }

    .testimonial-card {
        padding: 1.4rem 1.3rem 1.3rem;
        border-radius: 20px;
    }
}


/* ============================
   TAHAPAN PERAWATAN + FOOTER
   ============================ */

   /* SECTION BG = GRADIENT KREM */
.care-steps-footer {
    position: relative;
    padding: 4rem 0 3.5rem;
    background: var(--color-bg-light);  /* warna dasar halaman */

    overflow: hidden;
  }
  
  /* ELIPS PUTIH YANG MOTONG DARI BAWAH → BIKIN LENGKUNG "n" */
  .care-steps-footer::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -260px;              /* atur seberapa dalam lengkungnya */
    width: 150%;
    height: 1020px;
    border-radius: 50%;

    background: radial-gradient( 
    circle at 50% -60%, 
    var(--color-primary) 0%,      /* Mulai dari warna terang (simulasi cahaya) */
    var(--color-primary)  50%,     /* Transisi ke warna aksen */
    var(--color-primary)  100%     /* Berakhir dengan warna gelap */
);
    z-index: 0;
  }
  
  /* konten tetap di atas elips */
  .care-steps-footer > .container {
    position: relative;
    z-index: 1;
  }
  
  /* Header */
  .care-steps-header {
    max-width: 640px;
    margin: 0 auto 2.5rem;
  }
  
  .care-steps-title {
    font-size: clamp(1.8rem, 2.3vw, 2.4rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.7rem;
  }
  
  .care-steps-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin-bottom: 1.2rem;
  }
  
  .care-steps-cta {
    display: flex;
    justify-content: center;
  }
  
  .btn-care-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2.1rem;
    border-radius: 999px;
    background-color: var(--color-danger);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  }
  
  .btn-care-primary:hover {
    filter: brightness(1.05);
    color: #fff;
  }
  
 /* TIMELINE DESKTOP – CENTER & CLEAN */
.care-steps-timeline {
    margin: 2.5rem auto 0;                       /* center di container */
    padding: 2rem 2.6rem 1.7rem;
    max-width: 980px;                            /* lebar terkontrol */
    border-radius: 26px;
    background: var(--color-accent);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    position: relative;
  }
  
  .care-steps-timeline::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 72px;                                   /* garis sedikit di atas icon */
    border-top: 2px dashed rgba(0, 0, 0, 0.08);
    z-index: 0;
  }
  
  .care-step {
    flex: 1 1 0;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  
  .care-step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--color-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.6rem;
    font-size: 1.7rem;
    color: var(--color-primary);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
  }
  
  .care-step-number {
    width: 26px;
    height: 26px;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }
  
  .care-step-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
  }
  
  .care-step-desc {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 0;
  }
  
  
  /* TIMELINE MOBILE (VERTICAL) */
  .care-steps-timeline-mobile {
    margin-top: 1.8rem;
    padding: 1.4rem 1.2rem 1.6rem;
    border-radius: 22px;
    background-color: var(--color-accent);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
    position: relative;
  }
  
  /* garis vertikal di sisi kiri */
  .care-steps-timeline-mobile::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 18px;
    bottom: 18px;
    border-left: 2px dashed rgba(0, 0, 0, 0.08);
  }
  
  .care-step-mobile {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.1rem;
    position: relative;
  }
  
  .care-step-mobile:last-child {
    margin-bottom: 0;
  }
  
  .care-step-mobile-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    z-index: 1;
  }
  
  .care-step-mobile-text .care-step-label {
    margin-bottom: 0.15rem;
  }
  
  /* CTA Sweetpew */
  .care-steps-alt-book {
    margin-top: 1.8rem;
  }
  
  .care-steps-alt-label {
    font-size: 0.85rem;
    color: var(--color-bg-light);
    margin-bottom: 0.4rem;
  }
  
  .btn-care-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    background-color: var(--color-accent);
    border: 1px solid rgba(31, 62, 67, 0.18);
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
  }
  
  .btn-care-ghost:hover {
    background-color: #ffffff;
  }
  
/* FOOTER – TYPO & LAYOUT */
.intro-footer-main {
    margin-top: 3rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(247, 247, 247, 0.06);
  }
  
  .footer-brand {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-bg-light);
    margin-bottom: 0.55rem;
  }
  
  .footer-text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-bg-light);
  }
  
  .footer-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-bg-light);
    font-weight: 600;
    margin-bottom: 0.4rem;
  }
  
  .footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.86rem;
    color: var(--color-bg-light);
  }
  
  .footer-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .footer-bullets {
    list-style: disc;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    color: var(--color-bg-light);
    margin-bottom: 0;
  }
  
  .footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.86rem;
  }
  
  .footer-nav li + li {
    margin-top: 0.2rem;
  }
  
  .footer-nav a {
    text-decoration: none;
    color: var(--color-bg-light);
  }
  
  .footer-nav a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.8rem;
    color: var(--color-bg-light);
    text-align: center;
  }
  
  /* sosial & pembayaran */
  .footer-social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: var(--color-bg-light);
  }
  
  .footer-social-pill {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
  }
  
  .footer-social-pill i {
    line-height: 1;
  }
  
  .footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
  }
  
  .pay-pill {
    padding: 0.18rem 0.8rem;
    border-radius: 999px;
    background-color: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
  

  @media (max-width: 575.98px) {
    .care-steps-footer {
        padding: 3.2rem 0 3rem;
      }
    
      .care-steps-footer::before {
        bottom: -220px;
        width: 100%;
        height: 2500px;
      }
  }


  /* BOTTOM BAR – hanya mobile */
  .mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0 !important;                        /* nempel di bawah */
    margin: 0 !important;
    border-radius: 18px 18px 0 0;                /* hanya sudut atas yang bulat */
    box-shadow: 0 -12px 35px rgba(15, 23, 42, 0.2);
    z-index: 800;
  }

  
  .mobile-bottom-bar-inner {
    pointer-events: auto;
    width: 100%;
    bottom: 0 !important;                        /* nempel di bawah */
    margin: 0 !important;
    background-color:var(--color-bg-light);
    border-radius: 18px 18px 0 0;      /* hanya atas rounded */
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.2);
    padding: 0.55rem 1.3rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* item */
  .bottom-bar-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    text-decoration: none;
    color: var(--color-primary);
    font-size: 0.72rem;
  }
  
  .bottom-bar-item i {
    font-size: 1.3rem;
  }
  
  /* kecilkan dikit di layar super sempit */
  @media (max-width: 360px) {
    .mobile-bottom-bar-inner {
      padding-inline: 0.8rem;
    }
    .bottom-bar-item i {
      font-size: 1.15rem;
    }
    .bottom-bar-item span {
      font-size: 0.68rem;
    }
  }
  
  

  /* ============================
   PAGE HEADER – CLEAN CORPORATE
   ============================ */

.page-header-shell {
    position: relative;
    padding: 6rem 0 3.5rem;
    overflow: hidden;
    /* gradient halus, tanpa bentuk aneh */
    background: radial-gradient( 
    circle at 50% -60%, 
    var(--color-primary) 0%,      /* Mulai dari warna terang (simulasi cahaya) */
    var(--color-primary) 50%,     /* Transisi ke warna aksen */
    var(--color-primary) 100%     /* Berakhir dengan warna gelap */
);
    color: #ffffff;
  }
  
  /* di mobile sedikit lebih pendek */
  @media (max-width: 991.98px) {
    .page-header-shell {
      padding: 5.2rem 0 3rem;
    }
  }
  
  /* MATIKAN bentuk mangkuk lama */
  .page-header-shell::before {
    content: none;
  }
  
  /* kontainer & inner */
  .page-header-shell .container {
    max-width: 1120px;
    position: relative;
    z-index: 1;
  }
  
  .page-header-inner {
    max-width: 720px;
    padding-top: 85px;
    margin: 0 auto;
    text-align: center;
  }
  
  /* breadcrumb kecil, pill, clean */
  .page-breadcrumb-nav {
    margin-bottom: 0.75rem;
  }
  
  .page-breadcrumb {
    list-style: none;
    padding: 0.45rem 0.9rem;
    margin: 0 auto 0.7rem;
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    border-radius: 999px;
    background-color: var(--color-accent);
    backdrop-filter: blur(10px);
    font-size: 0.78rem;
  }
  
  .page-breadcrumb li {
    color: var(--color-accent-text);
  }
  
  .page-breadcrumb li + li::before {
    content: "•";
    margin: 0 0.3rem;
    opacity: 0.5;
  }
  
  .page-breadcrumb a {
    color: var(--color-accent-text);
    text-decoration: none;
  }
  
  .page-breadcrumb a:hover {
    text-decoration: underline;
  }
  
  /* title & subtitle */
  .page-header-title {
    font-size: clamp(1.9rem, 2.5vw, 2.6rem);
    font-weight: 700;
    color: var(--color-bg-light);
    letter-spacing: -0.03em;
    margin-bottom: 0.4rem;
  }
  
  .page-header-subtitle {
    font-size: 0.95rem;
    max-width: 32rem;
    margin: 0.1rem auto 0;
    color: var(--color-bg-light);
    line-height: 1.7;
  }
  
  /* kecilkan dikit di hp */
  @media (max-width: 575.98px) {
    .page-header-title {
      font-size: 1.7rem;
    }
  
    .page-header-subtitle {
      font-size: 0.9rem;
    }
  }
  
  
  /* ============================
     ABOUT INTRO HERO + FOUNDERS
     ============================ */
  
  .about-intro-hero {
    padding: 3rem 0 3.5rem;
  }
  
  @media (min-width: 992px) {
    .about-intro-hero {
      padding: 3.5rem 0 4rem;
    }
  }
  
  .about-intro-hero .container {
    max-width: 1120px;
  }
  
  .about-lead-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  /* blok pendiri */
  .founder-wrapper {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12);
  }
  
  .founder-section-title {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.7rem;
  }
  
  .founder-card {
    background-color: #f9f3ea;
    border-radius: 18px;
    padding: 0.75rem 0.75rem 0.95rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  
  .founder-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #d9c5ad, #f5ece1);
    margin-bottom: 0.4rem;
  }
  
  .founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .founder-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
  }
  
  .founder-role {
    font-size: 0.78rem;
    color: var(--color-muted);
  }
  
  /* STATEMENT BESAR */
  .about-big-statement {
    margin-top: 2.4rem;
    padding: 1.4rem 1.6rem;
    border-radius: 20px;
    background-color: rgba(31, 62, 67, 0.06);
    border: 1px solid rgba(31, 62, 67, 0.09);
  }
  
  .about-big-statement p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-primary);
    font-weight: 500;
    font-style: italic;
  }
  
  /* Mobile tweaks */
  @media (max-width: 575.98px) {
    .page-header-subtitle {
      font-size: 0.9rem;
    }

    .page-header-inner {
        padding-top: 30px;
      }
  
    .about-big-statement {
      padding: 1.2rem 1.1rem;
    }
  
    .about-big-statement p {
      font-size: 0.95rem;
    }
  }
  
  /* ============================
     ABOUT – PROFIL & HIGHLIGHT
     ============================ */
  
  .about-section .container {
    max-width: 1120px;
  }
  
  .about-highlight-card {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 1.5rem 1.7rem;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12);
  }
  
  .about-highlight-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.7rem;
  }
  
  .about-highlight-list {
    padding-left: 1.1rem;
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    color: var(--color-muted);
  }
  
  .about-highlight-footnote {
    font-size: 0.85rem;
    color: var(--color-muted);
  }
  
  /* ============================
     VISI – MISI CARD
     ============================ */
  
  .visimisi-card {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 1.6rem 1.8rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
  }
  
  .visimisi-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  .visimisi-text {
    font-size: 0.9rem;
    color: var(--color-muted);
  }
  
  .visimisi-list {
    padding-left: 1.1rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
  }
  
  /* ============================
     NILAI & KOMITMEN
     ============================ */


  .about-values-section .container {
    max-width: 1120px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  .page-section-header {
    margin-bottom: 2rem;
  }
  
  .about-values-grid {
    margin-top: 0.5rem;
  }
  
  .about-value-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 1.3rem 1.4rem;
    height: 100%;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
  }
  
  .about-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  }
  
  .about-value-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background-color: var(--color-accent);
    color: var(--color-bg-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
  
  .about-value-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.1rem;
  }
  
  .about-value-text {
    font-size: 0.86rem;
    color: var(--color-muted);
    margin-bottom: 0;
  }
  
  /* Mobile alignment */
  @media (max-width: 575.98px) {
    .page-hero-text {
      max-width: 100%;
    }
  
    .about-section,
    .about-values-section {
      text-align: left;
    }
  
    .page-section-header {
      text-align: center;
    }
  }


  /* ============================
   MAKNA NAMA + VISI MISI
   ============================ */

.about-vision-block {
    padding: 3.5rem 0 4rem;
    background: linear-gradient(
      180deg,
      var(--color-accent) 0%,
      var(--color-bg-light)  40%,
      var(--color-accent)  100%
    );
  }
  
  .about-vision-block .container {
    max-width: 1120px;
  }
  
  /* Kartu utama kiri & kanan */
  .vision-card {
    background-color: #ffffff;
    border-radius: 22px;
    padding: 1.7rem 1.9rem;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  
  @media (min-width: 992px) {
    .vision-card {
      padding: 2rem 2.1rem;
    }
  }
  
  .vision-card-left {
    border: 1px solid rgba(31, 62, 67, 0.06);
  }
  
  .vision-card-right {
    border: 1px solid rgba(31, 62, 67, 0.06);
  }
  
  /* Label kecil di atas judul */
  .vision-pill-label {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.06);
    color: var(--color-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.45rem;
  }
  
  /* Judul section dalam card */
  .vision-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  /* paragraf */
  .vision-text {
    font-size: 0.92rem;
    color: var(--color-muted);
    margin-bottom: 0.35rem;
  }
  
  /* layout header kanan */
  .vision-header-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.4rem;
  }
  
  /* layout dua kolom visi & misi */
  .vision-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: 1.5rem;
    margin-top: 0.6rem;
  }
  
  @media (max-width: 767.98px) {
    .vision-split {
      grid-template-columns: 1fr;
    }
  }
  
  /* sub heading VISI / MISI */
  .vision-subheading {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  /* daftar misi */
  .mission-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--color-muted);
  }
  
  .mission-list li {
    position: relative;
    padding-left: 1.1rem;
  }
  
  /* bullet custom kecil */
  .mission-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--color-accent);
  }
  
  /* sedikit rapat di mobile */
  @media (max-width: 575.98px) {
    .about-vision-block {
      padding: 3rem 0 3.5rem;
    }
  
    .vision-card {
      padding: 1.4rem 1.4rem;
    }
  }
  
  /* ============================
   SEKILAS INTRO – LAYOUT BARU
   ============================ */

.about-intro-hero {
    padding: 3.2rem 0 3.8rem;
  }
  
  @media (min-width: 992px) {
    .about-intro-hero {
      padding: 3.6rem 0 4.2rem;
    }
  }
  
  .about-intro-hero .container {
    max-width: 1120px;
  }
  
  /* Judul besar tapi tetap ringan */
  .about-intro-title {
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
  }
  
  /* Lead pendek, line-height lega */
  .about-lead-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-muted);
    margin-bottom: 1.1rem;
    /* max-width: 38rem; */
  }
  
  /* Baris meta – bikin section nggak terasa "full teks" */
  .about-intro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
  }
  
  .about-meta-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.85rem;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(31, 62, 67, 0.08);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  }
  
  .meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-muted);
  }
  
  .meta-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
  }
  
  /* Paragraf lanjutan sedikit lebih kecil dan lega */
  .about-intro-body {
    font-size: 0.92rem;
    line-height: 1.7;
    /* max-width: 40rem; */
  }
  
  /* Sedikit adjust di mobile supaya nggak sesak */
  @media (max-width: 575.98px) {
    .about-intro-title {
      font-size: 1.5rem;
    }
  
    .about-lead-text {
      font-size: 0.95rem;
    }
  
    .about-intro-meta {
      gap: 0.45rem;
    }
  
    .about-meta-pill {
      width: 100%;
      justify-content: center;
    }
  }


  /* ============================
   FASILITAS – GALLERY
   ============================ */

.facility-gallery-section {
    padding: 3rem 0 3.5rem;
  }
  
  @media (min-width: 992px) {
    .facility-gallery-section {
      padding: 3.2rem 0 4rem;
    }
  }
  
  .facility-gallery-section .container {
    max-width: 1120px;
  }
  
  .section-title {
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  .section-subtitle {
    font-size: 0.92rem;
    color: var(--color-muted);
  }
  
  /* CARD carousel container tetap sama */
.facility-carousel {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    background-color: #000;
  }
  
  /* Gambar diperbesar */
  .facility-img {
    width: 100%;
    height: min(480px, 75vh);  /* lebih tinggi dari sebelumnya */
    object-fit: cover;
  }
  
  @media (max-width: 575.98px) {
    .facility-img {
      height: 320px;
    }
  }
  
  /* Indicators – kita pakai container bootstrap .carousel-indicators
     tapi style sendiri */
  .carousel-indicators.facility-indicators {
    position: absolute;
    left: 50%;
    bottom: 1.3rem;
    transform: translateX(-50%);
    margin: 0;
    display: flex;
    gap: 0.4rem;
  }
  
  .carousel-indicators.facility-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background-color: rgba(255, 255, 255, 0.45);
  }
  
  .carousel-indicators.facility-indicators button.active {
    background-color: #ffffff;
  }
  
  /* Controls – override style bootstrap supaya pill & clean */
  .facility-control {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .carousel-control-prev.facility-control {
    left: 1.1rem;
  }
  
  .carousel-control-next.facility-control {
    right: 1.1rem;
  }
  
  /* Matikan icon bawaan bootstrap, kita pakai text arrow */
  .facility-control .carousel-control-prev-icon,
  .facility-control .carousel-control-next-icon {
    display: none;
  }
  
  .facility-control-icon {
    font-size: 1.2rem;
    color: #ffffff;
  }
  
  
  /* ============================
     FASILITAS – LIST CARD
     ============================ */
  
  .facility-list-section {
    padding: 0 0 4rem;
    background: linear-gradient(
      180deg,
      var(--color-accent) 0%,
      var(--color-accent) 35%,
      var(--color-bg-light) 70%,
      var(--color-bg-light)100%
    );
  }
  
  .facility-list-section .container {
    max-width: 1120px;
  }
  
  .facility-list-header {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
  }
  
  /* grid card */
  .facility-list-grid {
    margin-top: 0.5rem;
  }
  
  /* GRID tetap sama, hanya style card yang di-fine tune */
.facility-card {
    background: radial-gradient(circle at 0% 0%,
                rgba(230, 223, 215, 0.55) 0,
                #ffffff 45%,
                #ffffff 100%);
    border-radius: 22px;
    padding: 1.4rem 1.5rem 1.45rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border: 1px solid rgba(31, 62, 67, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease,
                border-color 0.16s ease;
  }
  
  .facility-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    border-color: rgba(31, 62, 67, 0.18);
  }
  
  /* Icon lebih “badge” */
  .facility-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
  }
  
  /* Judul capitalized rapi */
  .facility-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.1rem;
  }
  
  /* Deskripsi lebih readable */
  .facility-desc {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0;
    line-height: 1.6;
  }
  
  /* Biar tinggi card konsisten walau teks beda-beda */
  .facility-list-grid .col-md-6,
  .facility-list-grid .col-lg-4 {
    display: flex;
  }
  
  .facility-list-grid .col-md-6 > .facility-card,
  .facility-list-grid .col-lg-4 > .facility-card {
    width: 100%;
  }
  
  /* mobile tweaks */
  @media (max-width: 575.98px) {
    .facility-gallery-section {
      padding: 2.6rem 0 3.2rem;
    }
  
    .facility-carousel {
      border-radius: 22px;
    }
  
    .facility-img {
      height: 260px;
    }
  
    .facility-list-section {
      padding-bottom: 3.4rem;
    }
  }
  
  /* ============================
   GALLERY PAGE
   ============================ */

.gallery-section {
    padding: 3rem 0 4rem;
    /* background: linear-gradient(
      180deg,
      #fdf8f3 0%,
      #f7eee4 35%,
      #fdf9f4 70%,
      #ffffff 100%
    ); */
  }
  
  .gallery-section .container {
    max-width: 1120px;
  }
  
  /* Header & filter */
  .gallery-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.8rem;
  }
  
  .gallery-header-text {
    max-width: 520px;
  }
  
  .page-kicker {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0.4rem;
  }
  
  /* Filter pills */
  .gallery-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-start;
  }
  
  .gallery-filter-pill {
    border-radius: 999px;
    border: 1px solid rgba(31, 62, 67, 0.16);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    transition:
      background-color 0.16s ease,
      border-color 0.16s ease,
      transform 0.16s ease;
  }
  
  .gallery-filter-pill:hover {
    transform: translateY(-1px);
    background-color: #ffffff;
  }
  
  .gallery-filter-pill.is-active {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
  }
  
  /* GRID */
  .gallery-grid {
    margin-top: 0.5rem;
  }
  
  
  .gallery-thumb {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  
  .gallery-thumb-inner {
    position: relative;
    width: 100%;
    padding-top: 100%;            /* 1:1 aspect ratio */
    border-radius: 22px;
    overflow: hidden;
    background-color: #111827;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  }
  
  /* gambar isi square */
  .gallery-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* overlay info */
  .gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.05) 0%,
      rgba(15, 23, 42, 0.7) 100%
    );
    opacity: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.9rem 1rem;
    transition: opacity 0.18s ease;
  }
  
  .gallery-thumb-inner:hover .gallery-overlay {
    opacity: 1;
  }
  
  .gallery-overlay-text {
    color: #ffffff;
  }
  
  .gallery-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.9;
    margin-bottom: 0.15rem;
  }
  
  .gallery-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;

  }
  
  /* CTA bawah */
  .gallery-bottom-cta {
    margin-top: 2.5rem;
  }
  
  .gallery-bottom-text {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0.6rem;
  }
  
  .btn-gallery-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.8rem 2.1rem;
    background-color: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22);
  }
  
  .btn-gallery-primary:hover {
    filter: brightness(1.06);
    color: #ffffff;
  }

  .gallery-item.is-hidden {
    display: none !important;
  }
  
  /* RESPONSIVE TWEAKS */
  @media (max-width: 991.98px) {
    .gallery-header {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .gallery-filter-bar {
      justify-content: flex-start;
    }
  }
  
  @media (max-width: 575.98px) {
    .gallery-section {
      padding: 2.6rem 0 3.4rem;
    }
  
    .gallery-header {
      align-items: flex-start;
    }
  
    .gallery-header-text {
      text-align: left;
    }
  }
  

  /* ============================
   CTA SMILE SECTION
   ============================ */

.cta-smile {
    padding: 1rem 0 4.5rem;
  }
  
  .cta-smile-inner {
    border-radius: 32px;
    padding: 3rem 1.8rem 3.2rem;
    background:
      radial-gradient(circle at 0% 100%, rgba(255,255,255,0.6) 0, transparent 5%),
      radial-gradient(circle at 100% 0%,   rgba(255,255,255,0.6) 0, transparent 25%),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent) 80%, var(--color-accent) 20%),
        color-mix(in srgb, var(--color-accent) 45%, var(--color-accent) 55%),
        color-mix(in srgb, var(--color-accent) 20%, var(--color-accent) 80%)
      );
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.18);
    position: relative;
    overflow: hidden;
  }
  
  /* subtle tooth-ish shapes kanan kiri */
  .cta-smile-inner::before,
  .cta-smile-inner::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 60% 40% 55% 45%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    opacity: 0.35;
  }
  
  .cta-smile-inner::before {
    left: -60px;
    bottom: -40px;
  }
  
  .cta-smile-inner::after {
    right: -70px;
    top: -60px;
  }
  
  .cta-smile-copy {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  
  .cta-smile-kicker {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.6rem;
  }
  
  .cta-smile-title {
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.9rem;
  }
  
  .cta-smile-subtitle {
    font-size: 0.98rem;
    color: var(--color-primary);
    max-width: 620px;
    margin: 0 auto 1.8rem;
  }
  
  .cta-smile-action {
    display: flex;
    justify-content: center;
  }
  
  /* tombol WA */
  .btn-cta-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.4rem;
    border-radius: 999px;
    border: none;
    background-color: var(--color-danger);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  }
  
  .btn-cta-wa i {
    font-size: 1.1rem;
  }
  
  .btn-cta-wa:hover {
    color: #ffffff;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.4);
  }
  
  /* responsif */
  @media (max-width: 767.98px) {
    .cta-smile {
      padding: 3rem 0 3.5rem;
    }
  
    .cta-smile-inner {
      padding: 2.4rem 1.6rem 2.8rem;
      border-radius: 26px;
    }
  
    .cta-smile-subtitle {
      font-size: 0.92rem;
    }
  
    .btn-cta-wa {
      width: 100%;
    }
  }



  /* =========================
   PAGE DOKTER – CARD STYLE
   ========================= */

.page-doctors {
    padding: 3rem 0 4rem;
  }
  
  @media (max-width: 575.98px) {
    .page-doctors {
      padding: 2.5rem 0 3.5rem;
    }
  }
  
  /* Grid */
  .page-doctors .doc-grid .col-md-6,
  .page-doctors .doc-grid .col-lg-4 {
    display: flex;
  }
  
  .page-doctors .doc-card {
    width: 100%;
    border: 0;
    background: transparent;
  }
  
  /* Card shell */
  .page-doctors .doc-card-inner {
    border-radius: 30px;
    background: #f7f7f7;
    padding: 1.4rem 1.4rem 1.6rem;
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.14);
    display: flex;
    flex-direction: column;
  }
  
  /* Tag di atas foto */
  .page-doctors .doc-tag {
    align-self: flex-start;
    padding: 0.35rem 1.3rem;
    border-radius: 999px;
    background-color: #ffffff;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.9rem;
  }
  
  /* Foto dokter */
  .page-doctors .doc-photo {
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 1.1rem;
    background-color: #ddd;
  }
  
  .page-doctors .doc-photo img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
  }
  
  /* Panel bawah gelap */
  .page-doctors .doc-body {
    border-radius: 24px;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 1.4rem 1.3rem 1.5rem;
    margin: 0 -0.2rem -0.3rem;
  }
  
  /* Typografi */
  .page-doctors .doc-name {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
  }
  
  .page-doctors .doc-spec {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 0.9rem;
  }
  
  .page-doctors .doc-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0;
  }
  
  /* Sedikit rapat di mobile */
  @media (max-width: 575.98px) {
    .page-doctors .doc-card-inner {
      border-radius: 26px;
      padding: 1.2rem 1.2rem 1.4rem;
    }
  
    .page-doctors .doc-body {
      padding: 1.2rem 1.15rem 1.35rem;
    }
  }
  
  /* Meta info di dalam card dokter */
.page-doctors .doc-meta {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }
  
  .page-doctors .doc-meta-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
  }
  
  .page-doctors .doc-meta-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
  }
  
  .page-doctors .doc-meta-value {
    font-size: 0.86rem;
    font-weight: 500;
    text-align: right;
  }
  
  /* Di layar lebar, meta bisa dibagi 3 kolom */
  @media (min-width: 768px) {
    .page-doctors .doc-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 0.75rem;
    }
  
    .page-doctors .doc-meta-item {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .page-doctors .doc-meta-value {
      text-align: left;
    }
  }

  


  /* ============================
   SECTION JADWAL BULANAN DOKTER (VERSI SIMPLE)
   ============================ */

.doctor-schedule-section {
    padding: 3rem 0 3.5rem;
  }
  
  .schedule-shell {
    background-color: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 1.8rem 1.8rem 2rem;
  }
  
  /* Header jadwal */
  .schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
  }
  
  .schedule-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  .schedule-subtitle {
    font-size: 0.9rem;
    color: var(--color-muted);
    max-width: 520px;
  }
  
  /* Picker bulan – simple */
  .schedule-month-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  
  .schedule-month-picker .form-select {
    border-radius: 999px;
    font-size: 0.82rem;
    padding-inline: 1.4rem;
  }
  
  .btn-month-nav {
    border: none;
    background-color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-primary);
    padding: 0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  }
  .btn-month-nav:hover {
    filter: brightness(1.05);
  }
  
  /* ============================
     TABEL – SIMPLE, CLEAN
     ============================ */
  
  .schedule-table-wrapper {
    margin-top: 0.8rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 720px; /* biar kolom nggak terlalu sempit di desktop */
  }
  
  /* Header */
  .schedule-table thead th {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(17, 24, 39, 0.7);
    background-color: rgba(230, 223, 215, 0.35);
    white-space: nowrap;
  }
  
  /* Body */
  .schedule-table tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    color: var(--color-primary);
    vertical-align: middle;
  }
  
  /* Nama dokter & spesialis */
  .schedule-table tbody td:nth-child(1) {
    font-weight: 600;
  }
  .schedule-table tbody td:nth-child(2) {
    color: var(--color-muted);
    white-space: nowrap;
  }
  
  /* ============================
     PILL SHIFT (PAGI / SORE)
     ============================ */
  
  .schedule-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  
  /* Pagi = accent, Sore = danger */
  .schedule-pill--pagi {
    background-color: rgba(179, 140, 106, 0.18);  /* --color-accent */
    color: var(--color-primary);
  }
  
  .schedule-pill--sore {
    background-color: rgba(179, 140, 106, 0.18);  /* --color-accent */
    color: var(--color-primary);
  }
  
  /* versi lebih soft (kalau mau beda feel) */
  .schedule-pill-soft.schedule-pill--pagi {
    background-color: rgba(91, 44, 54, 0.10);
  }
  
  .schedule-pill-soft.schedule-pill--sore {
    background-color: rgba(91, 44, 54, 0.10);

  }
  
  /* Catatan bawah tabel */
  .schedule-note {
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--color-muted);
  }
  
  /* ============================
     RESPONSIVE
     ============================ */
  
  @media (max-width: 991.98px) {
    .schedule-shell {
      padding: 1.6rem 1.4rem 1.9rem;
    }
  
    .schedule-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
  
    .schedule-month-picker {
      align-self: stretch;
      justify-content: flex-end;
    }
  }
  
  @media (max-width: 575.98px) {
    .doctor-schedule-section {
      padding: 2.6rem 0 3rem;
    }
  
    .schedule-shell {
      border-radius: 16px;
    }
  
    .schedule-table {
      font-size: 0.84rem;
      min-width: 640px;
    }
  }


  /* ============================
   PAGE: LAYANAN
   ============================ */

.services-page-section {
    padding: 3.5rem 0 4rem;
  }
  
  .services-header {
    /* max-width: 720px; */
    margin: 0 auto 2.2rem;
    text-align: left;
  }
  
  .services-title {
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
  }
  
  .services-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
  }
  
  /* GRID */
  .services-grid {
    margin-top: 0.5rem;
  }
  
  /* CARD LAYANAN */
  .svc-card {
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.04);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    padding: 1.4rem 1.45rem 1.5rem;
    display: flex;
    flex-direction: column;
    transition:
      transform 0.18s ease-out,
      box-shadow 0.18s ease-out,
      border-color 0.18s ease-out;
  }
  
  .svc-card-inner {
    flex: 1;
  }
  
  /* hover elegan, tidak lebay */
  .svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
    border-color: rgba(31, 62, 67, 0.18);
  }
  
  /* icon bulat */
  .svc-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(31, 62, 67, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
  }
  
  .svc-icon {
    font-size: 1.4rem;
  }
  
  /* chip kecil di atas judul */
  .svc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.7rem;
    border-radius: 999px;
    background-color:var(--color-accent);
    color: var(--color-bg-light1);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.35rem;
  }
  
  /* nama layanan */
  .svc-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  /* deskripsi */
  .svc-desc {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 0;
  }
  
  /* footer card */
  .svc-card-footer {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
  }
  
  /* tombol detail */
  .btn-svc-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(31, 62, 67, 0.3);
    color: var(--color-primary);
    background-color: #ffffff;
    transition:
      background-color 0.18s ease-out,
      color 0.18s ease-out,
      box-shadow 0.18s ease-out,
      border-color 0.18s ease-out;
  }
  
  .btn-svc-detail:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
  }
  
  /* RESPONSIVE */
  @media (max-width: 991.98px) {
    .services-page-section {
      padding: 3rem 0 3.5rem;
    }
  
    .services-header {
      text-align: left;
      margin-bottom: 1.8rem;
    }
  }
  
  @media (max-width: 575.98px) {
    .services-header {
      text-align: left;
    }
  
    .svc-card {
      padding: 1.3rem 1.2rem 1.4rem;
    }
  }
  
  
  /* ============================
   PAGE: DETAIL LAYANAN
   ============================ */

.service-detail-section {
    padding: 3.5rem 0 4rem;
    background-color: #f6eee5;
  }
  
  .service-detail-header {
    /* max-width: 760px; */
    margin: 0 auto 2.6rem;
    text-align: left;
  }
  
  .service-detail-title {
    font-size: clamp(1.9rem, 2.8vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  .service-detail-subtitle {
    font-size: 0.96rem;
    color: var(--color-muted);
    margin-bottom: 1.4rem;
  }
  
  /* meta */
  .service-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.8rem;
    margin-bottom: 1.3rem;
  }
  
  .meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  
  .meta-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(17, 24, 39, 0.6);
  }
  
  .meta-value {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 500;
  }
  
  /* CTA header */
  .service-detail-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .btn-service-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.9rem;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.3);
  }
  
  .btn-service-wa:hover {
    filter: brightness(1.06);
    color: #ffffff;
  }
  
  /* Ringkasan */
  .service-summary {
    margin-bottom: 2.8rem;
  }
  
  .service-block-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  .service-block-text {
    font-size: 0.92rem;
    color: var(--color-muted);
    line-height: 1.7;
  }
  
  /* list */
  .service-bullet-list {
    margin: 0.7rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
  }
  
  .service-bullet-list.small {
    font-size: 0.86rem;
  }
  
  .service-bullet-list li + li {
    margin-top: 0.25rem;
  }
  
  /* highlight card */
  .service-highlight-card {
    border-radius: 18px;
    background-color: #ffffff;
    padding: 1.2rem 1.4rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
  }
  
  .service-highlight-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--color-primary);
  }
  
  /* Blok gambar + teks */
  .service-block {
    padding: 1.2rem 0 0.5rem;
  }
  
  .service-block + .service-block {
    margin-top: 1.2rem;
  }
  
  /* Shell gambar */
  .service-img-shell {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.20);
    background-color: #111;
  }
  
  .service-img {
    display: block;
    width: 100%;
    height: min(320px, 60vh);
    object-fit: cover;
  }
  
  /* Konten blok */
  .service-block-content {
    padding-inline: 0.2rem;
  }
  
  .service-block-content .service-block-title {
    margin-bottom: 0.4rem;
  }
  
  .service-block-content .service-block-text {
    margin-bottom: 0.5rem;
  }
  
  /* responsive tweaks */
  @media (max-width: 991.98px) {
    .service-detail-section {
      padding: 3rem 0 3.5rem;
    }
  
    .service-detail-header {
      text-align: left;
    }
  
    .service-detail-meta {
      gap: 0.5rem 1.3rem;
    }
  
    .service-block {
      padding-top: 1.6rem;
    }
  
    .service-img {
      height: min(260px, 50vh);
    }
  }
  
  @media (max-width: 575.98px) {
    .service-detail-header {
      margin-bottom: 2.1rem;
    }
  
    .service-detail-title {
      font-size: 1.7rem;
    }
  
    .service-detail-meta {
      flex-direction: column;
    }
  
    .btn-service-wa {
      width: 100%;
      justify-content: center;
    }
  }
  

  /* ============================
   DETAIL LAYANAN – REFINED
   ============================ */

.service-detail-page {
    padding: 3.5rem 0 4.2rem;
    
  }
  
  /* header */
  .service-detail-head {
    /* max-width: 780px; */
    margin: 0 auto 2.6rem;
    text-align: left;
  }
  
  .service-detail-title {
    font-size: clamp(2rem, 2.8vw, 2.6rem);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    margin-bottom: 0.35rem;
  }
  
  .service-detail-tagline {
    font-size: 0.98rem;
    color: var(--color-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
  }
  
  /* chips */
  .service-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    margin-bottom: 1.3rem;
  }
  
  .svc-chip {
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    background-color: var(--color-primary);
    font-size: 0.78rem;
    color: var(--color-bg-light);
  }
  
  /* CTA */
  .service-detail-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .btn-service-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
  }
  
  .btn-service-wa:hover {
    filter: brightness(1.06);
    color: #ffffff;
  }
  
  /* strip ringkasan */
  .service-intro-strip {
    margin-bottom: 2.6rem;
    padding: 1.4rem 1.6rem;
    border-radius: 22px;
    background: radial-gradient(circle at 0% 0%, rgba(230,223,215,0.6) 0, transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(230,223,215,0.45) 0, transparent 55%),
                #f7efe6;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.10);
  }
  
  .service-block-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
  }
  
  .service-block-text {
    font-size: 0.93rem;
    color: var(--color-muted);
    line-height: 1.8;
  }
  
  /* keypoints samping */
  .service-keypoints {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-muted);
  }
  
  .service-keypoints li {
    position: relative;
    padding-left: 1.1rem;
  }
  
  .service-keypoints li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--color-primary);
  }
  
  .service-keypoints li + li {
    margin-top: 0.3rem;
  }
  
  /* blok gambar + teks */
  .service-section-block {
    margin-bottom: 2.4rem;
  }
  
  
  .service-img-shell {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    background-color: #111;
  }
  
  .service-img {
    display: block;
    width: 100%;
    height: min(320px, 60vh);
    object-fit: cover;
  }
  
  .service-block-content {
    padding-inline: 0.25rem;
  }
  
  .service-step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.45rem;
  }
  
  .service-block-text.small {
    font-size: 0.88rem;
    margin-top: 0.3rem;
  }
  
  /* bullets kecil di dalam blok */
  .service-bullet-list {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    color: var(--color-muted);
  }
  
  .service-bullet-list.small li + li {
    margin-top: 0.25rem;
  }
  
  /* responsive */
  @media (max-width: 991.98px) {
    .service-detail-page {
      padding: 3rem 0 3.6rem;
    }
  
    .service-detail-head {
      text-align: left;
    }
  
    .service-intro-strip {
      padding: 1.2rem 1.3rem;
    }
  
    .service-img {
      height: min(260px, 50vh);
    }
  }
  
  @media (max-width: 575.98px) {
    .service-detail-head {
      margin-bottom: 2.1rem;
    }
  
    .service-detail-title {
      font-size: 1.8rem;
    }
  
    .service-chip-row {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .btn-service-wa {
      width: 100%;
      justify-content: center;
    }
  }
  

  /* ============================
   PAGE PROMO
   ============================ */

.promo-section {
    padding: 3.5rem 0 4.5rem;
    /* background:
      radial-gradient(circle at 0% 0%, rgba(230,223,215,0.55) 0, transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(179,140,106,0.05) 0, transparent 55%),
      #f9f2e9; */
  }
  
  .promo-header {
    max-width: 720px;
    margin: 0 auto 2.6rem;
    text-align: center;
  }
  
  .promo-header .section-title {
    margin-bottom: 0.4rem;
  }
  
  .promo-header .section-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
  }
  
  /* GRID & CARD */
  
  .promo-grid {
    margin-bottom: 2.3rem;
  }
  
  .promo-card {
    background-color: #ffffff;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition:
      transform 0.18s ease-out,
      box-shadow 0.18s ease-out,
      border-color 0.18s ease-out;
    border: 1px solid rgba(31, 62, 67, 0.02);
  }
  
  .promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.14);
    border-color: rgba(31, 62, 67, 0.08);
  }
  
  /* image */
  
  .promo-image-shell {
    position: relative;
    overflow: hidden;      /* tetap on, cuma buat jaga-jaga kalau nanti ada efek lain */
  }
  
  /* gambar tampil penuh, tanpa crop */
  .promo-image {
    display: block;
    width: 100%;
    height: auto;          /* ← ini kunci: jangan pakai fixed height */
    object-fit: contain;   /* atau bisa juga dihapus, karena height:auto sudah cukup */
    transition: opacity 0.25s ease-out;
  }
  
  /* hover cukup main di card, gambar tidak di-zoom lagi */
  .promo-card:hover .promo-image {
    opacity: 0.96;         /* efek halus tapi nggak motong gambar */
  }
  
  /* badge */
  
  .promo-badge {
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(91, 44, 54, 0.95); /* danger */
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  
  .promo-badge-soft {
    background-color: rgba(179, 140, 106, 0.96); /* accent */
  }
  
  /* body */
  
  .promo-body {
    padding: 1.15rem 1.3rem 0.9rem;
  }
  
  .promo-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
  }
  
  .promo-text {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.7;
    margin-bottom: 0.7rem;
  }
  
  /* meta list */
  
  .promo-meta {
    list-style: none;
    margin: 0;
    padding-left: 0;
    font-size: 0.82rem;
    color: var(--color-muted);
  }
  
  .promo-meta li {
    position: relative;
    padding-left: 1rem;
  }
  
  .promo-meta li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.35);
  }
  
  .promo-meta li + li {
    margin-top: 0.2rem;
  }
  
  /* footer */
  
  .promo-footer {
    padding: 0 1.3rem 1.2rem;
  }
  
  .btn-promo-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 999px;
    padding: 0.75rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: var(--color-danger);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.26);
  }
  
  .btn-promo-wa:hover {
    filter: brightness(1.06);
    color: #ffffff;
  }
  
  /* note */
  
  .promo-note {
    font-size: 0.82rem;
    color: var(--color-muted);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  
  /* responsive kecil */
  
  @media (max-width: 575.98px) {
    .promo-section {
      padding: 3rem 0 3.8rem;
    }
  
    .promo-card {
      border-radius: 20px;
    }
  
    /* .promo-image-shell {
      max-height: 190px;
    }
  
    .promo-image {
      height: 190px;
    } */
  
    .promo-footer {
      padding-inline: 1.1rem;
    }
  
    .btn-promo-wa {
      font-size: 0.88rem;
    }
  }
  

  /* === FILTER PILLS ======================================= */

.article-list-section {
    padding: 1.5rem 0 4rem;
  }
  
  .article-filter-bar {
    margin-bottom: 1.5rem;
  }
  
  .article-filter-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }
  
  .article-filter-scroll::-webkit-scrollbar {
    display: none;
  }
  
  .article-filter-pill {
    flex: 0 0 auto;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(31, 62, 67, 0.15);
    background-color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.18s ease-out;
    white-space: nowrap;
  }
  
  .article-filter-pill:hover {
    border-color: rgba(31, 62, 67, 0.3);
    background-color: rgba(230, 223, 215, 0.12);
  }
  
  .article-filter-pill.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
  }

  /* === CARD ARTIKEL ======================================= */

.article-card {
    height: 100%;
    border-radius: 22px;
    background-color: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out;
  }
  
  .article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  }
  
  /* gambar selalu utuh */
  .article-thumb {
    display: block;
  }
  
  .article-img {
    display: block;
    width: 100%;
    height: auto;          /* kunci: biar tidak kepotong */
  }
  
  .article-body {
    padding: 1rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
    color: var(--color-muted);
  }
  
  .article-category {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background-color: rgba(31, 62, 67, 0.06);
    color: var(--color-primary);
    font-weight: 500;
  }
  
  .article-title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0.2rem 0 0.35rem;
  }
  
  .article-excerpt {
    font-size: 0.88rem;
    color: var(--color-muted);
    margin-bottom: 0.7rem;
    flex-grow: 1;
  }
  
  .article-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
  }
  
  .article-readmore span {
    font-size: 0.9rem;
    transition: transform 0.18s ease-out;
  }
  
  .article-card:hover .article-readmore span {
    transform: translateX(2px);
  }
  
  /* sedikit rapat di mobile */
  @media (max-width: 575.98px) {
    .article-body {
      padding: 0.9rem 1rem 1rem;
    }
  }
  

  /* ============================
   DETAIL ARTIKEL – INTRO DENTAL
   ============================ */

/* Shell utama halaman detail */
.article-detail-shell {
    padding: 0 0 4rem;
  }
  
  /* HERO – overlap ke header */
  .article-detail-hero {
    max-width: 1040px;
    margin: 0 auto 1.6rem;
  }
  
  .article-hero-overlap {
    margin-top: -3.2rem; /* overlap manis dengan page header */
  }
  
  .article-detail-img {
    width: 100%;
    display: block;
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    object-fit: cover;
  }
  
  .article-detail-hero figcaption {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-top: 0.6rem;
  }
  
  /* Breadcrumb di bawah foto */
  .article-detail-breadcrumb {
    max-width: 1040px;
    margin: 0 auto 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-muted);
  }
  
  .article-detail-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
  }
  
  .article-detail-breadcrumb a:hover {
    text-decoration: underline;
  }
  
  .article-detail-breadcrumb .is-current {
    font-weight: 500;
  }
  
  /* Layout konten + aside */
  .article-detail-layout {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr);
    gap: 2.5rem;
  }
  
  /* Badan artikel */
  .article-detail-body {
    font-size: 0.96rem;
    line-height: 1.9;
    color: #334155;
  }
  
  .article-detail-body .lead {
    font-size: 1.02rem;
    color: var(--color-primary);
    font-weight: 500;
  }
  
  .article-detail-body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
    color: var(--color-primary);
  }
  
  .article-detail-body h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.4rem;
    margin-bottom: 0.4rem;
    color: var(--color-primary);
  }
  
  .article-detail-body p {
    margin-bottom: 0.9rem;
  }
  
  .article-detail-body ul,
  .article-detail-body ol {
    margin-bottom: 1rem;
    padding-left: 1.2rem;
  }
  
  .article-detail-body li + li {
    margin-top: 0.2rem;
  }
  
  .article-detail-quote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    margin: 1.4rem 0;
    font-style: italic;
    color: #475569;
  }
  
  /* Aside / sidebar */
  .article-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  
  .article-aside-card {
    padding: 1.3rem 1.4rem;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    font-size: 0.9rem;
    color: #4b5563;
  }
  
  .article-aside-card h3,
  .article-aside-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
  }
  
  .btn-article-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.7rem;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    background-color: var(--color-danger);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
  }
  
  .btn-article-whatsapp i {
    margin-right: 0.4rem;
  }
  
  .btn-article-whatsapp:hover {
    filter: brightness(1.05);
    color: #fff;
  }
  
  /* Artikel terkait (opsional) */
  .article-related {
    max-width: 1040px;
    margin: 3rem auto 0;
  }
  
  .article-related-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.2rem;
  }
  
  .article-related-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
  }
  
  .article-related-link {
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--color-primary);
  }
  
  .article-related-link:hover {
    text-decoration: underline;
  }
  
  .article-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
  }
  
  .article-related-card {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    font-size: 0.9rem;
  }
  
  .article-related-meta {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
  }
  
  .article-related-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
  }
  
  /* Responsif */
  @media (max-width: 991.98px) {
    .article-hero-overlap {
      margin-top: -2.4rem;
    }
  
    .article-detail-layout {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
  
    .article-detail-aside {
      order: -1;
    }
  
    .article-related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 575.98px) {
    .article-hero-overlap {
      margin-top: -2rem;
    }
  
    .article-detail-breadcrumb {
      font-size: 0.78rem;
      margin-bottom: 1rem;
    }
  
    .article-detail-body {
      font-size: 0.94rem;
    }
  
    .article-detail-body .lead {
      font-size: 0.98rem;
    }
  
    .article-related-grid {
      grid-template-columns: 1fr;
    }
  }
  

  /* kasih ruang bawah di header supaya ada area buat overlap */
.page-header-shell {
    padding: 5rem 0 6rem;   /* perbesar bottom padding */
    position: relative;
    z-index: 0;
  }
  
  /* section detail artikel naik dan duduk di atas header */
  .article-detail-shell {
    position: relative;
    z-index: 1;
    margin-top: -4.5rem;    /* angka ini yang bikin overlap, bisa kamu adjust */
  }
  
  /* kartu hero artikelnya sendiri */
  .article-detail-hero {
    /* max-width: 860px; */
    margin: 0 auto 1.75rem;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow:
      0 18px 55px rgba(15, 23, 42, 0.22),
      0 0 0 1px rgba(15, 23, 42, 0.03);
  }
  
  /* kalau mau tambah sedikit “angkat” lagi fotonya dari section */
  .article-hero-overlap {
    margin-top: -0.5rem;    /* kecil saja, tugas utama ada di .article-detail-shell */
  }
  
  /* responsif – overlap dikurangi biar tidak terlalu ekstrim di mobile */
  @media (max-width: 767.98px) {
    .page-header-shell {
      padding: 4rem 0 4.5rem;
    }
  
    .article-detail-shell {
      margin-top: -3.5rem;
    }
  
    .article-detail-hero {
      border-radius: 22px;
    }
  }


  /* ======================
   CONTACT PAGE SECTION
   ====================== */

.contact-shell {
    padding: 3.5rem 0 4rem;
    background: linear-gradient(
      180deg,
      rgba(230, 223, 215, 0.38) 0%,
      rgba(230, 223, 215, 0.12) 40%,
      #ffffff 100%
    );
  }
  
  .contact-header {
    max-width: 720px;
    margin: 0 auto 2.5rem;
  }
  
  .contact-title {
    font-size: clamp(1.9rem, 2.6vw, 2.4rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
  }
  
  .contact-subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
  }
  
  /* MAP CARD */
  
  .contact-map-wrapper {
    max-width: 1120px;
    margin: 0 auto 2.5rem;
  }
  
  .contact-map-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 1.2rem;
    box-shadow:
      0 20px 50px rgba(15, 23, 42, 0.22),
      0 0 0 1px rgba(15, 23, 42, 0.03);
  }
  
  .contact-map-ratio {
    border-radius: 22px;
    overflow: hidden;
  }
  
  /* GRID CARD KONTAK */
  
  .contact-card-row {
    max-width: 1120px;
    margin: 0 auto;
  }
  
  .contact-card {
    background-color: #ffffff;
    border-radius: 26px;
    padding: 1.7rem 1.4rem 1.6rem;
    box-shadow:
      0 18px 48px rgba(15, 23, 42, 0.16),
      0 0 0 1px rgba(15, 23, 42, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .contact-card-left {
    align-items: flex-start;
    text-align: left;
  }
  
  .contact-icon-pill {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background-color: rgba(179, 140, 106, 0.16); /* accent soft */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    font-size: 1.45rem;
    color: var(--color-primary);
  }
  
  .contact-label {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.75);
    margin-bottom: 0.2rem;
  }
  
  .contact-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
  }
  
  .contact-text {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
  }
  
  .contact-text-small {
    font-size: 0.86rem;
  }
  
  /* BUTTONS */
  
  .btn-contact-main,
  .btn-contact-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.7rem 1.6rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
  }
  
  .btn-contact-main {
    background-color: var(--color-danger);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.32);
  }
  
  .btn-contact-main:hover {
    filter: brightness(1.06);
    color: #ffffff;
  }
  
  .btn-contact-ghost {
    border: 1px solid rgba(31, 62, 67, 0.18);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--color-primary);
  }
  
  .btn-contact-ghost:hover {
    background-color: #ffffff;
  }
  
  /* RESPONSIVE */
  
  @media (max-width: 767.98px) {
    .contact-shell {
      padding: 3rem 0 3.5rem;
    }
  
    .contact-map-card {
      border-radius: 22px;
      padding: 1rem;
    }
  
    .contact-card {
      padding: 1.4rem 1.3rem 1.5rem;
    }
  
    .contact-card-left {
      align-items: flex-start;
      text-align: left;
    }
  }
  
 /* =========================================================
   MODAL PROMO FINAL (Stabil, Halus, Nempel Gambar)
   Khusus #promoWelcomeModal
 /* =========================================================
   PROMO MODAL FINAL STABLE (CENTER + NO JEDUG)
   #promoWelcomeModal only
   ========================================================= */
#promoWelcomeModal{
  z-index: 20050 !important;
}

/* backdrop (overlay gelap) */
.modal-backdrop.show{
  z-index: 20040 !important;
}
/* backdrop sedikit halus (opsional) */
#promoWelcomeModal.modal { --bs-modal-bg: transparent; }

/* 1) modal-dialog full layar + center */
#promoWelcomeModal .modal-dialog{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  max-width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:16px !important; /* biar aman di mobile */
}

/* 2) modal-content jadi “panggung” full width agar center selalu presisi */
#promoWelcomeModal .modal-content{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;

  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 3) FRAME STABIL: ukuran tetap agar tidak “jedeg” */
#promoWelcomeModal .promo-frame{
  position:relative;
  width:min(90vw, 560px); /* kamu bisa naikkan ke 720/980 kalau perlu */
  height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 4) carousel mengikuti frame */
#promoWelcomeModal #promoCarousel,
#promoWelcomeModal #promoCarousel .carousel-inner,
#promoWelcomeModal #promoCarousel .carousel-item{
  width:100% !important;
  height:100% !important;
}

#promoWelcomeModal #promoCarousel .carousel-item{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 5) gambar: masuk frame, tidak merubah layout */
#promoWelcomeModal .promo-slide-img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;

  border-radius:20px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.6) !important;
  display:block !important;
}

/* 6) close nempel frame (konsisten) */
#promoWelcomeModal .modal-promo-close{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  z-index:50 !important;

  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  background-color:#fff !important;
  border:2px solid #fff !important;
  opacity:1 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.25) !important;

  margin:0 !important;
  padding:0 !important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* 7) nav prev/next nempel frame (bukan layar) */
#promoWelcomeModal .promo-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:45;

  width:44px;
  height:44px;
  border:none;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

#promoWelcomeModal .promo-nav.prev{ left:12px; }
#promoWelcomeModal .promo-nav.next{ right:12px; }

#promoWelcomeModal .promo-nav .carousel-control-prev-icon,
#promoWelcomeModal .promo-nav .carousel-control-next-icon{
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* 8) CTA */
#promoWelcomeModal .promo-cta{
  position:absolute;
  left:0; right:0;
  bottom:18px;
  text-align:center;
  z-index:40;
}

/* 9) indicators */
#promoWelcomeModal .carousel-indicators{
  bottom:10px !important; /* di dalam frame biar stabil */
  margin-bottom:0 !important;
}

/* 10) fade lebih halus */
#promoWelcomeModal .carousel.carousel-fade .carousel-item{
  opacity:0;
  transition:opacity .75s cubic-bezier(.22,1,.36,1) !important;
  will-change:opacity;
  transform:translateZ(0);
}
#promoWelcomeModal .carousel.carousel-fade .carousel-item.active,
#promoWelcomeModal .carousel.carousel-fade .carousel-item-next.carousel-item-start,
#promoWelcomeModal .carousel.carousel-fade .carousel-item-prev.carousel-item-end{ opacity:1; }
#promoWelcomeModal .carousel.carousel-fade .active.carousel-item-start,
#promoWelcomeModal .carousel.carousel-fade .active.carousel-item-end{ opacity:0; }

/* Mobile: tinggi sedikit turun */
@media (max-width: 767.98px){
  #promoWelcomeModal .promo-frame{ height:75vh; width:min(92vw, 520px); }
}


  /* Biar button tetap kelihatan kayak pill biasa */
.pay-pill.pay-pill-logo {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pay-pill.pay-pill-logo:hover {
  background: #f8fafc;
  border-color: rgba(15,23,42,0.16);
  transform: translateY(-1px);
}

.pay-pill-logo-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pay-pill-logo-img {
  max-height: 20px;
  max-width: 56px;
  object-fit: contain;
  display: block;
}

.pay-pill-logo-fallback {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.facility-icon-img-el {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.svc-card-icon-img {
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  display: block;
}

.svc-list-icon-img {
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  display: block;
}

  

.carousel-caption {
  background-color: color-mix(in srgb, var(--color-primary) 80%, transparent); 
  padding: 10px 15px;
  margin-bottom: 30px;
  border-radius: 5px;
}

.carousel-caption p {
  text-transform: capitalize;
  margin-bottom: 0; 
  color: white; /* Anda bisa menyesuaikan warna teks ini */
}

.gallery-item.is-hidden {
  display: none !important;
}

.svc-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.svc-icon-fallback {
  font-size: 1.8rem;
  line-height: 1;
}

.service-related-section {
  padding-top: 2.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.service-related-shell {
  background: #f9f5f0;
  border-radius: 20px;
  padding: 1.5rem 1.75rem;
}

.service-related-header .service-block-title {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.service-related-card {
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.service-related-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.9rem 0.95rem;
}

.service-related-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.service-related-icon-wrap {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #e6dfd7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.service-related-icon-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.service-related-icon-placeholder {
  font-weight: 600;
  font-size: 1rem;
  color: #1f3e43;
}

.service-related-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.service-related-desc {
  color: #6c757d;
}

.service-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
}



@media (max-width: 991.98px) {
  .featured-services-section  .container {
      max-width: 100%;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
  }
  .doctors-section  .container {
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.treatment-section  .container {
  max-width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.testimonials-section  .container {
  max-width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.care-steps-footer  .container {
  max-width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.page-section  .container {
  max-width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.care-steps-footer::before {
  bottom: -220px;
  width: 190%;
  height: 1400px;
}
  
}


@media (max-width: 575.98px) {
  .care-steps-footer {
      padding: 3.2rem 0 3rem;
    }
  
    .care-steps-footer::before {
      bottom: -220px;
      width: 190%;
      height: 1600px;
    }
}