/* ============================================================
   Klinik Altamira
   Warm editorial yang feminin & tenang: kertas pink pucat,
   tinta plum, raspberry tua untuk CTA, aksen pink jelas.
   Tanpa hijau, tanpa gradient, tanpa shadow kartu, tanpa
   icon library, tanpa ornamen berlebih.
   ============================================================ */

:root {
  --paper: #FDF5F6;      /* background utama — pink pucat */
  --cream: #FAE7EA;      /* band selang-seling & kartu informasi */
  --cream2: #F5D9DE;     /* surface tersier */
  --ink: #45222F;        /* teks utama — plum tua */
  --muted: #7A5964;      /* teks sekunder — mauve keabuan */
  --primary: #8C2B50;    /* raspberry tua: CTA & band gelap */
  --primary-h: #9D3560;
  --accent: #D9628C;     /* pink — hanya untuk teks besar & ikon */
  --accent-ink: #B7325F; /* pink gelap — teks aksen kecil, lolos AA 4.5:1 */
  --accent-soft: #F7C2D3;/* pink muda — teks aksen di band gelap */
  --line: #F2D7DC;       /* hairline */
  --line-dark: rgba(252, 239, 242, .22);
  --milk: #FCEFF2;       /* teks di atas raspberry tua */
  --milk-70: rgba(252, 239, 242, .75);
  --status: #C94F7C;     /* titik "buka sekarang" — pink, bukan hijau */
  --leader: #D4A8B4;     /* titik-titik daftar harga */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 68px;
}

/* ---------- Reset ringkas ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--primary); color: var(--milk); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.band-dark :focus-visible { outline-color: var(--accent-soft); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 300;
  padding: 10px 18px;
  background: var(--primary);
  color: var(--milk);
  border-radius: 0 0 3px 3px;
  font-weight: 600;
  font-size: 14px;
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 0; }

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.ic { flex: 0 0 auto; }

/* ---------- Tipografi dasar ---------- */
h1, h2, h3, .price, .price-inline, .giant, .menu-name, .menu-price, .visit-phone {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "SOFT" 60;
}
h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.accent { font-style: italic; font-weight: 500; color: var(--accent); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead {
  font-size: 19px;
  max-width: 46ch;
  color: var(--ink);
}
.lead strong { font-weight: 600; }
.price-inline { font-style: italic; font-weight: 500; color: var(--accent-ink); }
.price { font-style: italic; font-weight: 500; color: var(--accent-ink); }

/* ---------- Tombol & tautan ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  background: var(--primary);
  color: var(--milk);
  border-radius: 3px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--primary-h); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-light { background: var(--milk); color: var(--primary); }
.btn-light:hover { background: #F8DCE3; }
.btn-outline {
  background: transparent;
  border: 1px solid rgba(252, 239, 242, .55);
  color: var(--milk);
}
.btn-outline:hover { background: rgba(252, 239, 242, .08); border-color: rgba(252, 239, 242, .9); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--primary);
  position: relative;
  padding-bottom: 3px;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
}
.tlink .ic { transition: transform .2s var(--ease); }
.tlink:hover { color: var(--accent-ink); }
.tlink:hover .ic { transform: translateX(4px); }
.tlink--lg { font-size: 16.5px; margin-top: 30px; }

/* ---------- Titik status berdenyut ---------- */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--status);
  display: inline-block;
  position: relative;
  margin-right: 12px;
  flex: 0 0 auto;
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--status);
  animation: pulse 2.5s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled {
  background: rgba(253, 245, 246, .95);
  box-shadow: 0 1px 0 rgba(69, 34, 47, .08);
}
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 34px;
}
.brand {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
}
.nav-links {
  margin-left: auto;
  display: flex;
  gap: 28px;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

.burger {
  display: none;
  margin-left: auto;
  padding: 10px;
  flex-direction: column;
  gap: 5px;
}
.burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav-panel {
  display: none;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 10px 24px 32px;
}
.nav-panel nav { display: flex; flex-direction: column; }
.nav-panel a:not(.btn) {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.nav-panel .btn { margin-top: 24px; justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 104px));
  padding-bottom: clamp(56px, 8vw, 96px);
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.hero-eyebrow { margin-bottom: 26px; }
.hero-copy h1 { margin-bottom: 26px; }
.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Kartu informasi klinik */
.info-card {
  width: min(400px, 100%);
  justify-self: end;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.info-head {
  background: var(--primary);
  color: var(--milk);
  border-radius: 5px 5px 0 0;
  padding: 13px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.info-rows li {
  padding: 15px 22px;
  font-size: 15.5px;
  line-height: 1.55;
}
.info-rows li + li { border-top: 1px solid var(--line); }
.info-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.info-rows a {
  font-weight: 600;
  color: var(--primary);
}
.info-rows a:hover { color: var(--accent-ink); }

/* ============================================================
   KERANGKA SECTION
   ============================================================ */
.section { padding-block: clamp(72px, 10vw, 120px); }
.band-cream { background: var(--cream); }
.band-dark {
  background: var(--primary);
  color: var(--milk);
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sec-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.band-dark .sec-label { color: var(--milk-70); }
.sec-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease) .15s;
}
.band-dark .sec-rule { background: var(--line-dark); }
.js .sec-head.in .sec-rule, html:not(.js) .sec-rule { transform: scaleX(1); }

.sec-title {
  font-size: clamp(1.9rem, 3.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 30px 0 0;
  text-wrap: balance;
}

/* ============================================================
   TENTANG
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 88px);
  margin-top: 30px;
}
.about-grid .sec-title { margin-top: 0; }
.about-body p { max-width: 58ch; }
.about-body p + p { margin-top: 1.2em; }

/* ============================================================
   LAYANAN — tabel editorial ber-hairline
   ============================================================ */
.services {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
}
.service {
  padding: clamp(28px, 3.2vw, 42px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease);
}
.service:nth-child(3n) { border-right: 0; }
.service:nth-last-child(-n+3) { border-bottom: 0; }
.service:hover { background: var(--paper); }
.service-ic { color: var(--primary); transition: color .2s var(--ease); }
.service:hover .service-ic { color: var(--accent); }
.service h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  margin: 20px 0 10px;
}
.service p { font-size: 15px; color: var(--muted); max-width: 34ch; }
.service-note {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-ink) !important;
  font-size: 15px !important;
  margin-top: 14px;
}

/* ============================================================
   SPLIT — Sunat & USG (kolom teks + kolom daftar)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 56px);
}
.split-copy .sec-title { margin-top: 0; }
.split-lead {
  font-size: 18px;
  max-width: 46ch;
  margin-top: 22px;
  color: var(--muted);
}
.band-dark .split-lead { color: var(--milk-70); }
.split-foot { margin-top: 26px; font-size: 15.5px; color: var(--milk-70); }
.split-foot strong { color: var(--milk); font-weight: 600; }
.tag-line {
  margin: 16px 0 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.methods li {
  display: flex;
  gap: 22px;
  padding: 20px 0;
  border-top: 1px solid var(--line-dark);
}
.methods li:last-child { border-bottom: 1px solid var(--line-dark); }
.method-num {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--accent-soft);
  min-width: 26px;
  padding-top: 3px;
}
.methods h3 { font-size: 20px; font-weight: 600; }
.methods p { font-size: 15px; color: var(--milk-70); margin-top: 4px; max-width: 44ch; }

/* Varian terang (section USG) */
.methods--light li { border-top-color: var(--line); }
.methods--light li:last-child { border-bottom-color: var(--line); }
.methods--light .method-num { color: var(--accent-ink); }
.methods--light p { color: var(--muted); }

/* ============================================================
   SKINCARE — kartu menu apotek
   ============================================================ */
.menu-card {
  max-width: 720px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(36px, 5vw, 60px);
}
.menu-head { text-align: center; }
.menu-head h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 600;
}
.menu-head p {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--muted);
  max-width: 42ch;
  margin-inline: auto;
}
.menu-photo {
  margin-top: clamp(28px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px;
}
.menu-photo img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.menu-list {
  margin-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
.menu-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.menu-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.menu-name { font-size: 20px; font-weight: 600; }
.menu-desc {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--muted);
}
.menu-dots {
  flex: 1;
  min-width: 36px;
  border-bottom: 2px dotted var(--leader);
  transform: translateY(-5px);
}
.menu-price {
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--accent-ink);
  white-space: nowrap;
}
.menu-foot {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
}
.menu-card .tlink { margin-top: 18px; }

/* ============================================================
   FASILITAS
   ============================================================ */
.amenities {
  margin-top: clamp(40px, 6vw, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: 26px 48px;
}
.amenities li {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.amenities svg { color: var(--primary); flex: 0 0 auto; }

/* ============================================================
   INFO KUNJUNGAN + CTA
   ============================================================ */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(36px, 5vw, 56px);
}
.giant {
  font-size: clamp(4rem, 10vw, 7.5rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.02em;
}
.giant span {
  font-style: italic;
  font-weight: 500;
  font-size: .52em;
  color: var(--accent-soft);
}
.visit-sub {
  margin-top: 14px;
  font-size: 17px;
  color: var(--milk-70);
}
.visit-addr {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  line-height: 1.7;
  font-size: 16px;
}
.visit-addr .ic { color: var(--milk-70); margin-top: 5px; }
.visit-addr em {
  font-style: italic;
  color: var(--milk-70);
}
.chips {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chips li {
  border: 1px solid rgba(252, 239, 242, .4);
  border-radius: 3px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.map-frame {
  border: 1px solid rgba(252, 239, 242, .35);
  border-radius: 6px;
  padding: 9px;
}
.map-frame iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 3px;
  filter: sepia(.3) saturate(.85) hue-rotate(-45deg);
}
.visit-cta {
  margin-top: clamp(48px, 7vw, 76px);
  padding-top: clamp(32px, 5vw, 44px);
  border-top: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  gap: 12px 36px;
  flex-wrap: wrap;
}
.visit-phone {
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: .01em;
  transition: color .2s var(--ease);
}
.visit-phone:hover { color: var(--accent-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: clamp(48px, 7vw, 72px) 0 26px; }
.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.footer-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
}
.footer-tag { font-size: 13px; color: var(--muted); margin-top: 2px; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.footer-nav a {
  font-size: 14px;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
}
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.footer-nav a:hover::after { transform: scaleX(1); }
.footer-contact { text-align: right; font-size: 14px; color: var(--muted); }
.footer-contact p + p { margin-top: 4px; }
.footer-contact a { font-weight: 600; color: var(--primary); }
.footer-contact a:hover { color: var(--accent-ink); }
.footer-social { margin-top: 10px !important; }
.footer-social span { margin: 0 6px; }
.footer-base {
  margin-top: clamp(32px, 5vw, 48px);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 13px;
  color: var(--muted);
}

/* ============================================================
   REVEAL — halus & sekali saja
   ============================================================ */
.js .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js body.loaded .rv { opacity: 1; transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.js [data-reveal].in { opacity: 1; transform: none; }

.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal-group].in > * { opacity: 1; transform: none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .rv, .js [data-reveal], .js [data-reveal-group] > * {
    opacity: 1;
    transform: none;
  }
  .sec-rule { transform: scaleX(1) !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 6fr 5fr; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
  .nav-panel.open { display: block; }

  .hero-grid { grid-template-columns: 1fr; }
  .info-card { justify-self: stretch; width: 100%; max-width: 460px; margin-top: 8px; }

  .about-grid { grid-template-columns: 1fr; gap: 28px; }

  .services { grid-template-columns: repeat(2, 1fr); }
  .service:nth-child(3n) { border-right: 1px solid var(--line); }
  .service:nth-child(2n) { border-right: 0; }
  .service:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .service:nth-last-child(-n+2) { border-bottom: 0; }

  .split { grid-template-columns: 1fr; gap: 44px; }

  .visit-grid { grid-template-columns: 1fr; gap: 44px; }
  .map-frame iframe { height: 330px; }

  .footer-inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .footer-contact { text-align: center; }
}

@media (max-width: 600px) {
  .container { padding-inline: 20px; }

  .services { grid-template-columns: 1fr; }
  .service:nth-child(n) { border-right: 0; }
  .service:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .service:last-child { border-bottom: 0; }

  .hero-actions .btn { width: 100%; justify-content: center; }

  .menu-row { flex-wrap: wrap; }
  .menu-dots { display: none; }
  .menu-price { margin-left: auto; }

  .amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

  .visit-cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .amenities { grid-template-columns: 1fr; }
}