/* ==========================================================================
   STYLE TEMPLATE 04 "TENANG" (Salon Kenanga)
   Karakter: Elegan, hening, luas, ritme ruang lega, tanpa ornamen berlebih.
   Sesuai PRD-04.md - Tidak menggunakan box-shadow, gradien, atau animasi berlebih.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABEL & DESIGN TOKENS
   Kenapa: Semua nilai warna, jenis huruf, dan jarak utama dipusatkan di sini
   agar mudah disesuaikan ketika template dipakai untuk klien lain (GANTI DI SINI).
   -------------------------------------------------------------------------- */
:root {
  /* Palet Warna Sesuai PRD Bagian 3 */
  --color-bg: #F6F3F5;             /* Latar utama lembut */
  --color-text: #34293A;           /* Plum gelap untuk teks utama & footer */
  --color-accent: #8A5A6E;         /* Mauve untuk aksen, tombol, dan angka langkah */
  --color-accent-hover: #73485b;   /* Mauve sedikit lebih pekat untuk interaksi hover */
  --color-blush: #E8DCE2;          /* Blush pucat untuk latar Ulasan & Lokasi */
  --color-line: #D8C8D0;           /* Garis pemisah & outline tipis */
  --color-btn-text: #F6F3F5;       /* Teks tombol di atas latar mauve */

  /* Tipografi Sesuai PRD Bagian 3 & 5 */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Skala Ukuran Huruf Fluid */
  --text-h1: clamp(2.5rem, 5.5vw, 4.5rem);
  --text-h2: clamp(2rem, 3.8vw, 3rem);
  --text-h3: clamp(1.25rem, 2vw, 1.6rem);
  --text-body: 1.0625rem;          /* ~17px untuk kenyamanan baca */
  --text-small: 0.875rem;          /* 14px untuk label kapital & keterangan durasi */

  /* Ritme Ruang (Padding vertikal section) */
  --section-pad-desktop: 7rem;     /* Minimal 6rem di laptop */
  --section-pad-mobile: 4.5rem;    /* Minimal 4rem di HP */
  
  /* Lebar Konten Maksimal */
  --container-max-width: 1100px;
}

/* --------------------------------------------------------------------------
   2. RESET DASAR & GLOBAL STYLES
   Kenapa: Menghilangkan margin browser bawaan, menyamakan box-sizing,
   dan memastikan tidak ada elemen yang memicu scroll horizontal liar.
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

/* Aksesibilitas: Indikator fokus yang jelas untuk keyboard user */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Kontainer Standar */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFI
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text);
}

.section-heading {
  margin-bottom: 3.5rem;
}

.section-heading.text-center {
  text-align: center;
}

.section-title {
  font-size: var(--text-h2);
  margin-bottom: 0.75rem;
}

.section-subtitle {
  font-size: var(--text-body);
  max-width: 55ch;
  color: var(--color-text);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   4. TOMBOL (CTA)
   Bentuk: Kapsul (border-radius penuh), tanpa shadow, transisi warna halus.
   -------------------------------------------------------------------------- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-btn-text);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-accent);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn-cta:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   5. HEADER & NAVBAR
   Sesuai PRD: Tanpa sticky, tanpa JS hamburger.
   Laptop: nama di kiri, 4 link di tengah/bersebelahan, tombol WA di kanan.
   HP: baris 1 nama + tombol WA, baris 2 jejer 4 link.
   -------------------------------------------------------------------------- */
.site-header {
  width: 100%;
  border-bottom: 1px solid var(--color-line);
  background-color: var(--color-bg);
}

.nav-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-link {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-item {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: var(--color-accent);
}

.nav-cta {
  padding: 0.65rem 1.25rem;
}

/* --------------------------------------------------------------------------
   6. SECTION HERO
   Struktur: H1 -> offset paragraf & tombol -> arch SVG -> 3 pembeda.
   -------------------------------------------------------------------------- */
.section-hero {
  padding-top: 5rem;
  padding-bottom: var(--section-pad-desktop);
  background-color: var(--color-bg);
}

.hero-container {
  display: flex;
  flex-direction: column;
}

.hero-title {
  font-size: var(--text-h1);
  max-width: 15em; /* Memecah headline menjadi 3-4 baris elegan seperti majalah */
  margin-bottom: 2.5rem;
  line-height: 1.08;
}

/* Komposisi Offset Bertingkat untuk Desktop */
.hero-action-block {
  margin-left: 35%; /* Offset ±35% dari kiri di laptop */
  max-width: 50ch;
  margin-bottom: 4rem;
}

.hero-desc {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  color: var(--color-text);
}

/* Ilustrasi Arch */
.hero-illustration-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 3.5rem;
}

.hero-arch-svg {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

/* 3 Pembeda Salon */
.hero-differentials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  padding-top: 1.5rem;
  max-width: 950px;
  margin: 0 auto;
}

.diff-item {
  flex: 1;
  text-align: center;
}

.diff-item p {
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text);
}

.diff-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. SECTION LAYANAN
   Struktur: 3 kolom di laptop (Rambut, Wajah, Tangan & Kaki)
   -------------------------------------------------------------------------- */
.section-layanan {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-line);
}

.layanan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.layanan-col {
  display: flex;
  flex-direction: column;
}

.layanan-group-title {
  font-size: var(--text-h3);
  font-weight: 600;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.layanan-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.layanan-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--color-line);
}

.layanan-info {
  display: flex;
  flex-direction: column;
}

.layanan-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
}

.layanan-duration {
  font-size: var(--text-small);
  color: var(--color-text);
  opacity: 0.65;
  margin-top: 0.2rem;
}

.layanan-price {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.layanan-note {
  font-size: var(--text-small);
  color: var(--color-text);
  opacity: 0.75;
  max-width: 65ch;
  line-height: 1.6;
  padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   8. SECTION CARA RESERVASI
   Struktur: 2 kolom di laptop (kiri H2 + intro, kanan 4 langkah bertumpuk)
   -------------------------------------------------------------------------- */
.section-reservasi {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-line);
}

.reservasi-container {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 4rem;
  align-items: start;
}

.reservasi-intro {
  /* Posisi statis (bukan sticky) sesuai ketentuan PRD */
}

.reservasi-desc {
  margin-top: 1rem;
  max-width: 45ch;
  color: var(--color-text);
  opacity: 0.85;
}

.reservasi-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-line);
}

.step-item:first-child {
  padding-top: 0;
}

.step-number {
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-accent); /* Angka besar Cormorant Mauve */
  font-weight: 500;
  min-width: 2rem;
}

.step-body {
  flex: 1;
}

.step-title {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.step-text {
  font-size: 0.975rem;
  color: var(--color-text);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   9. SECTION ULASAN
   Struktur: Latar Blush Pucat (#E8DCE2), 1 kolom sempit (~700px) rata tengah.
   Teks selalu Plum Gelap (#34293A) di atas latar blush untuk kontras optimal.
   -------------------------------------------------------------------------- */
.section-ulasan {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
  background-color: var(--color-blush);
  border-top: 1px solid var(--color-line);
}

.ulasan-container {
  max-width: 720px;
}

.ulasan-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ulasan-item {
  margin: 0;
  padding: 1.5rem 0;
  max-width: 65ch;
}

.ulasan-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.ulasan-author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.author-name {
  font-family: var(--font-body);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-text);
}

.author-role {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text);
  opacity: 0.7;
}

.ulasan-divider {
  width: 48px;
  height: 1px;
  background-color: var(--color-line);
  margin: 1.5rem auto;
}

/* --------------------------------------------------------------------------
   10. SECTION LOKASI & KONTAK
   Struktur: Latar Blush Pucat (#E8DCE2), dipisah garis tipis dari Ulasan.
   Laptop: 2 kolom (kiri ajakan & tombol, kanan <dl> detail).
   -------------------------------------------------------------------------- */
.section-lokasi {
  padding-top: var(--section-pad-desktop);
  padding-bottom: var(--section-pad-desktop);
  background-color: var(--color-blush);
  border-top: 1px solid var(--color-line);
}

.lokasi-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.lokasi-desc {
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 45ch;
  color: var(--color-text);
}

.lokasi-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.detail-group {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.detail-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.detail-value {
  font-size: 1.0625rem;
  color: var(--color-text);
  line-height: 1.55;
  margin-left: 0;
}

.detail-sub {
  font-size: var(--text-small);
  color: var(--color-text);
  opacity: 0.75;
  display: inline-block;
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   11. FOOTER
   Struktur: Latar Plum Gelap (#34293A), teks #F6F3F5, outline fokus warna terang.
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-text);
  color: var(--color-bg);
  padding-top: 3rem;
  padding-bottom: 3.5rem;
  border-top: 1px solid var(--color-text);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  font-size: var(--text-small);
}

.footer-brand {
  color: var(--color-bg);
  font-weight: 500;
}

.footer-note {
  color: var(--color-bg);
  opacity: 0.75;
}

.site-footer :focus-visible {
  outline: 2px solid var(--color-bg);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. MEDIA QUERIES (RESPONSIVE)
   Menyesuaikan tampilan di HP (max-width: 768px, target pengujian 375px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Padding vertikal berkurang ke ritme HP sesuai PRD (minimal 4rem) */
  .section-hero {
    padding-top: 3.5rem;
    padding-bottom: var(--section-pad-mobile);
  }

  .section-layanan,
  .section-reservasi,
  .section-ulasan,
  .section-lokasi {
    padding-top: var(--section-pad-mobile);
    padding-bottom: var(--section-pad-mobile);
  }

  /* Navbar HP: Baris 1 nama + tombol WA, Baris 2 jejer 4 link */
  .nav-container {
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    gap: 1rem;
  }

  .brand-link {
    order: 1;
    font-size: 1.4rem;
  }

  .nav-cta {
    order: 2;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }

  .nav-links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-line);
  }

  .nav-item {
    font-size: 0.8125rem;
  }

  /* Hero di HP: Hilangkan offset 35%, rata kiri */
  .hero-action-block {
    margin-left: 0;
    max-width: 100%;
    margin-bottom: 3rem;
  }

  .hero-illustration-wrap {
    margin-bottom: 2.5rem;
  }

  .hero-arch-svg {
    max-width: 100%;
  }

  /* 3 Pembeda di HP: Ditumpuk dan dipisah garis tipis */
  .hero-differentials {
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
  }

  .diff-dot {
    display: none;
  }

  .diff-item {
    text-align: left;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-line);
  }

  .diff-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Layanan di HP: Ditumpuk 1 kolom */
  .layanan-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Cara Reservasi di HP: Ditumpuk 1 kolom */
  .reservasi-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .step-item {
    gap: 1.25rem;
    padding: 1.5rem 0;
  }

  .step-number {
    font-size: 2.25rem;
  }

  /* Lokasi & Kontak di HP: Ditumpuk 1 kolom */
  .lokasi-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Footer HP */
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}