/* =========================================================
   RELIEVE — SILVER ELEGANT SUBPAGES
   Gunakan pada treatments.html dan halaman detail treatment.
   Letakkan setelah style.css.
   ========================================================= */

:root {
  --bg: #c9ccd0;
  --cream: #ffffff;
  --cream-warm: #eef0f2;
  --silver-light: #f7f8f9;
  --silver-mid: #dfe2e5;
  --silver-dark: #aeb3b9;
  --gold: #b8942f;
  --gold-deep: #86691c;
  --gold-light: #e8cc76;
  --ink: #17191c;
  --earth: #3d4248;
  --muted: #686e75;
  --line: rgba(23, 25, 28, 0.13);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html,
body {
  background: linear-gradient(135deg, #f6f7f8 0%, #dfe2e5 42%, #b9bdc2 100%);
  color: var(--ink);
}

body {
  overflow-x: hidden;
}

/* Header konsisten dengan halaman utama */
.nav {
  height: 64px;
  max-height: 64px;
  padding: 0 1rem;
  background: rgba(247, 248, 249, .9);
  border-bottom: 1px solid rgba(23, 25, 28, .12);
  box-shadow: 0 8px 28px rgba(23, 25, 28, .1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav__inner {
  width: min(1240px, 100%);
  height: 100%;
  margin: 0 auto;
}

.nav__mobile {
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  background: rgba(247, 248, 249, .98) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav__back-btn {
  color: var(--ink) !important;
  transition: transform .25s var(--ease), color .25s ease !important;
}

.nav__back-btn:hover {
  color: var(--gold-deep) !important;
  transform: translateX(-4px);
}

.nav__btn,
.nav__mobile-cta,
.btn,
.protocol__cta {
  border-radius: 999px !important;
}

.nav__btn--gold,
.btn--gold {
  background: linear-gradient(135deg, #c9a94c, #98751e) !important;
  border-color: #a68127 !important;
  box-shadow: 0 10px 24px rgba(134, 105, 28, .25);
}

.nav__btn--outline {
  border-color: var(--gold) !important;
}

/* Halaman daftar paket */
.treatments-hero {
  padding: 8rem 1.5rem 4rem !important;
  background:
    radial-gradient(circle at 18% 45%, rgba(255, 255, 255, .18), transparent 35%),
    linear-gradient(135deg, #25292e 0%, #596068 100%) !important;
}

.treatments-hero__inner {
  max-width: 850px;
}

.treatments-hero__title {
  text-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

.treatments {
  background: transparent !important;
  padding: 4rem 1.5rem 7rem !important;
}

.category-head {
  max-width: 900px;
  margin: 4rem auto 2rem !important;
  padding: 2.5rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 22px;
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 14px 34px rgba(35, 39, 44, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.category-head h2 {
  color: var(--ink);
}

.category-head p {
  color: var(--earth);
}

.category-head__label {
  color: var(--gold-deep) !important;
}

.category-head--blue .category-head__label,
.category-head--green .category-head__label,
.category-head--dark-gold .category-head__label,
.category-head--teal .category-head__label {
  color: var(--gold-deep) !important;
}

.treatments__grid {
  max-width: 1120px;
  margin: 0 auto;
  gap: 1.5rem;
}

.protocol {
  border: 1px solid rgba(255, 255, 255, .75) !important;
  border-radius: 22px !important;
  background: rgba(247, 248, 249, .82) !important;
  box-shadow: 0 14px 34px rgba(35, 39, 44, .12) !important;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.protocol:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 44px rgba(35, 39, 44, .2) !important;
}

.protocol__img {
  background: var(--silver-dark);
}

.protocol__img img {
  transition: transform .8s var(--ease), filter .4s ease;
}

.protocol:hover .protocol__img img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.02);
}

.protocol__body {
  background: rgba(255, 255, 255, .4);
}

.protocol__cta {
  box-shadow: 0 8px 18px rgba(23, 25, 28, .16);
}

/* Halaman detail treatment — gambar hero tetap dipakai */
.treatment-hero {
  min-height: 64vh;
  padding-top: 84px;
  background-color: #747a81;
  background-position: center;
}

.treatment-hero__overlay {
  background: linear-gradient(180deg, rgba(23, 25, 28, .55), rgba(23, 25, 28, .78)) !important;
}

.treatment-hero__content h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  text-shadow: 0 4px 22px rgba(0, 0, 0, .55);
  animation: detailTitleReveal 1s var(--ease) both;
}

.treatment-hero__content p {
  max-width: 680px;
}

@keyframes detailTitleReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.treatment-detail {
  background: transparent !important;
  padding: 5rem 1.5rem 7rem !important;
}

.treatment-detail__container {
  max-width: 980px;
}

.detail-intro {
  max-width: 850px;
  margin: 0 auto 3.5rem;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 22px;
  background: rgba(255, 255, 255, .52);
  box-shadow: 0 14px 34px rgba(35, 39, 44, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.detail-intro p,
.treatment-detail p {
  color: var(--earth);
}

.treatment-detail .section-head {
  width: auto;
  left: auto;
  right: auto;
  margin: 3.5rem auto 2rem;
  padding: 2.2rem 1.25rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(38, 42, 47, .96), rgba(79, 85, 92, .9)) !important;
  box-shadow: 0 16px 36px rgba(35, 39, 44, .15);
}

.treatment-detail .section-head__title {
  color: #fff !important;
}

.min-table {
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(35, 39, 44, .1);
}

.min-table th {
  color: var(--gold-deep);
  background: rgba(231, 234, 237, .82) !important;
}

.min-table td {
  color: var(--earth);
}

.benefit-card {
  background: rgba(255, 255, 255, .74) !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 28px rgba(35, 39, 44, .1) !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.benefit-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 40px rgba(35, 39, 44, .18) !important;
}

.benefit-icon {
  background: linear-gradient(135deg, #f5e6b8, #d7bb63) !important;
  color: var(--gold-deep) !important;
}

.detail-image-block img {
  border-radius: 22px;
  box-shadow: 0 20px 42px rgba(35, 39, 44, .18);
justify-content: center;

}

.detail-closing {
  background: linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(218, 221, 224, .72)) !important;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(35, 39, 44, .12);
}

.footer {
  background: linear-gradient(135deg, #1d2024, #363b41) !important;
}

.fab {
  background: linear-gradient(135deg, #d0ae4d, #916f1d) !important;
}

@media (max-width: 768px) {
  .treatments-hero {
    padding: 7rem 1rem 3rem !important;
  }

  .treatments,
  .treatment-detail {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .category-head,
  .detail-intro {
    padding: 1.8rem 1rem;
    border-radius: 18px;
  }

  .treatment-hero {
    min-height: 58vh;
  }

  .treatment-hero__content h1 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .min-table tr {
    background: rgba(255, 255, 255, .78) !important;
    border-color: rgba(255, 255, 255, .72) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Memusatkan posisi kotak kategori tanpa mengubah isi dan formatnya */
.treatments .category-head {
  width: fit-content !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Menjaga ukuran kotak label tetap mengikuti isinya */
.treatments .category-head__label {
  margin-left: auto;
  margin-right: auto;
}

/* Tampilan HP tetap responsif */
@media (max-width: 600px) {
  .treatments .category-head {
    width: fit-content !important;
    max-width: calc(100% - 32px);
  }
}