/* ==========================================================================
   NARAYA SEDOT WC & SOLUSI SANITASI — DESIGN SYSTEM v2
   Design concept: modern home-service marketing site — clean water /
   trust-first. Soft rounded surfaces, layered floating cards, generous
   whitespace, one confident teal identity with a warm amber call-to-action.
   ========================================================================== */

:root {
  /* ---- Core palette -------------------------------------------------- */
  --ink: #0D2B29;          /* deep pine-teal: header, dark sections, headings */
  --ink-soft: #163B38;
  --paper: #F5F8F6;        /* page background — cool off-white */
  --paper-raised: #FFFFFF; /* card / raised surfaces */
  --surface-tint: #EAF4F1; /* soft mint tinted section bg */
  --charcoal: #263635;     /* body text */
  --muted: #64766F;        /* secondary text */
  --line: #E1E9E5;         /* hairline borders */

  --teal: #10A28F;         /* brand teal — clarity / trust / WhatsApp */
  --teal-700: #0C7A6B;
  --teal-100: #DCF2EE;

  --amber: #F5A524;        /* CTA accent — warm, high-visibility */
  --amber-700: #D6870C;
  --amber-100: #FDEEDA;

  --red-flag: #D8583C;     /* urgency flag, used sparingly */
  --white: #FFFFFF;

  /* ---- Type ------------------------------------------------------------ */
  --font-head: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  /* ---- Layout ------------------------------------------------------------ */
  --maxw: 1160px;
  --gap: 1.5rem;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(13, 43, 41, 0.06);
  --shadow: 0 14px 34px rgba(13, 43, 41, 0.10);
  --shadow-lg: 0 26px 60px rgba(13, 43, 41, 0.16);
  --innerHTML:var(--amber-100);
}

/* ---------------------------------------------------------------------- */
/* Reset & base                                                           */
/* ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 62ch; color: var(--charcoal); }
ul, ol { padding-left: 1.25em; }
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}
section { padding: 3rem 0; }
.section--tight { padding: 2rem 0; }
.section--ink { background: var(--ink); color: #CFE3DE; border-radius: var(--radius-lg); margin: 0 1rem; }
.section--ink h2, .section--ink h3 { color: #F5F3EA; }
.section--ink p { color: #CFE3DE; }
.section--ink .text-muted { color: #9FC0B8; }
.section--raised { background: var(--surface-tint); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--amber);
  color: var(--ink); padding: 0.6em 1em; z-index: 200; font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------- */
/* Header — floating rounded bar                                          */
/* ---------------------------------------------------------------------- */
.site-header {
  background: transparent;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.9rem 0 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  min-height: 64px;
  padding: 0.4rem 0.5rem 0.4rem 1.3rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(13, 43, 41, 0.05);
}
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-head);
}
.brand__logo { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.brand__text { display: flex; flex-direction: column; }
.brand:hover { color: var(--ink); }
.brand__name {
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__tag {
  font-size: 0.74rem;
  color: var(--teal-700);
  font-weight: 600;
  display: none;
  white-space: nowrap;   /* cegah tagline patah jadi dua baris */
}
/* Tagline tampil mulai 640px. Sudah diuji muat satu baris sampai
   lebar 1100px (titik peralihan ke menu mobile). */
@media (min-width: 640px) { .brand__tag { display: inline; } }

.nav-toggle {
  background: var(--surface-tint);
  border: none;
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  cursor: pointer;
}
.primary-nav {
  display: none;
  align-items: center;
  flex-wrap: nowrap;          /* menu tidak boleh turun ke baris kedua */
  gap: 1.35rem;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
}
.primary-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;        /* "Area Layanan" tetap satu baris */
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--teal-700); }
.primary-nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 74px; left: 1rem; right: 1rem;
  background: var(--paper-raised);
  padding: 1rem 1.4rem 1.3rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.site-header .header-cta { display: none; white-space: nowrap; }

/* Menu desktop baru aktif di 1100px. Di bawah itu, 7 menu + logo +
   tombol CTA tidak muat dalam satu baris, jadi lebih baik pakai
   tombol menu daripada memaksakan dan membuat header bertumpuk. */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .primary-nav { display: flex; }
  .site-header .header-cta { display: inline-flex; }
}

/* Zona sempit 1100-1279px: rapatkan sedikit supaya tetap muat rapi. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .primary-nav { gap: 1rem; font-size: 0.9rem; }
  .site-header .container { padding-left: 1rem; gap: 0.75rem; }
  .brand__logo { width: 34px; height: 34px; }
  .brand__name { font-size: 1.1rem; }
  .header-cta { padding-left: 1.1rem; padding-right: 1.1rem; font-size: 0.9rem; }
}

/* Pastikan ketiga blok header tidak saling menekan/menumpuk. */
.site-header .brand { flex: 0 0 auto; }
.site-header .primary-nav { flex: 1 1 auto; justify-content: center; min-width: 0; }
.site-header .header-cta { flex: 0 0 auto; }
.site-header .container { flex-wrap: nowrap; }

/* Menu versi mobile: pastikan tetap rapi saat dibuka. */
.primary-nav.is-open { flex-wrap: wrap; gap: 0.25rem; align-items: stretch; }
.primary-nav.is-open a { padding: 0.6rem 0; white-space: normal; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  padding: 0.9rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.1;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn--primary { background: var(--amber); color: var(--ink); box-shadow: 0 10px 22px rgba(245, 165, 36, 0.35); }
.btn--primary:hover { background: var(--amber-700); color: #fff; transform: translateY(-2px); }
.btn--secondary { background: var(--teal); color: #fff; box-shadow: 0 10px 22px rgba(16, 162, 143, 0.32); }
.btn--secondary:hover { background: var(--teal-700); transform: translateY(-2px); }
.btn--ghost { background: var(--paper-raised); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--on-dark { border-color: rgba(255,255,255,0.35); color: #F5F3EA; background: transparent; }
.btn--on-dark:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.5rem 0; align-items: center; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 2.6rem 0 3.2rem;
  /* Dark teal→green gradient adalah tampilan default kalau belum ada foto.
     Begitu file assets/img/hero-banner.jpg ada, foto ini otomatis menutupi
     gradient tersebut (lihat .hero__bg di bawah). */
  background: linear-gradient(135deg, var(--ink) 0%, var(--teal-700) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  /* Full-height di layar biar section 1 langsung kelihatan tanpa scroll,
     dikurangi kira-kira tinggi header sticky. */
  min-height: calc(100svh - 96px);
}
/* Foto banner — ganti file assets/img/hero-banner.jpg untuk mengubah ini. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}
.hero__bg.is-loaded { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(9,31,29,0.92) 0%, rgba(9,31,29,0.72) 45%, rgba(9,31,29,0.38) 100%);
  z-index: 1;
  
}
.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.6rem;
  align-items: center;
}
@media (min-width: 900px) {
  .hero .container { grid-template-columns: 1.05fr 0.95fr; }
}
/* Ilustrasi truk SVG didesain untuk latar terang; sembunyikan begitu foto
   banner asli sudah dimuat supaya tidak tabrakan secara visual. */
.hero__bg.is-loaded ~ .container .hero__art { display: none; }
.hero h1 { color: #fff; }
.hero__lead { color: #D9E6E1; }
.hero__trust { color: #C3D6CF; }
.hero__eyebrow-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--amber-100);
  color: var(--amber-700);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 0.4rem 0.9rem 0.4rem 0.6rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-pill);
}
.hero__eyebrow-flag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-flag);
  flex-shrink: 0;
}
.hero__lead { font-size: 1.12rem; max-width: 46ch; }
.hero__trust {
  margin-top: 1.6rem;
  padding-top: 0;
  border-top: none;
  font-size: 0.92rem;
  color: #C3D6CF;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
.hero__trust span { margin-right: 1.2rem; display: inline-block; }
.hero__trust span:last-child { margin-right: 0; }

/* Breadcrumb di dalam hero gelap — sebelumnya tanpa styling khusus jadi
   kontrasnya lemah di atas gradient. */
.breadcrumb {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #A9C7BF;
  margin: 0 0 1rem;
}
.breadcrumb a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--amber);
  border-color: var(--amber);
}

/* Hero versi ringkas — dipakai di halaman dalam (Layanan, Area Layanan,
   Kontak, Tentang Kami, Blog, halaman detail area/layanan) yang isinya
   cuma breadcrumb + judul + satu kalimat, tanpa ilustrasi/visual seperti
   hero beranda. Tanpa ini, hero mewarisi min-height nyaris satu layar
   penuh dari .hero sehingga menyisakan area kosong yang besar. */
.hero--compact {
  min-height: 0;
  padding: 3rem 0 2.75rem;
  display: block;
}
.hero--compact::before,
.hero--compact::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.hero--compact::before {
  top: -70px;
  right: -30px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(245,165,36,0.28) 0%, rgba(245,165,36,0) 70%);
}
.hero--compact::after {
  bottom: -100px;
  left: 12%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(16,162,143,0.4) 0%, rgba(16,162,143,0) 70%);
}
.hero--compact .container {
  display: block;
  position: relative;
  z-index: 2;
}
.hero--compact h1 { margin-bottom: 0.7rem; }
@media (min-width: 640px) {
  .hero--compact { padding: 3.4rem 0 3.1rem; }
}

/* Floating "quick request" card in the hero */
.ticket {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: var(--shadow-lg);
}
.ticket::before, .ticket::after { content: none; }
.ticket__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-head);
}
.ticket__title { font-size: 1rem; color: var(--ink); font-weight: 700; }
.ticket__status {
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--teal-100);
  color: var(--teal-700);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}
.ticket__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.94rem;
}
.ticket__row:last-of-type { border-bottom: none; }
.ticket__label { color: var(--muted); }
.ticket__value { color: var(--ink); font-weight: 700; text-align: right; }

/* ---------------------------------------------------------------------- */
/* Service cards                                                          */
/* ---------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.card h3 { margin-bottom: 0.45rem; font-size: 1.15rem; }
.card p:last-child { margin-bottom: 0; }
.card__link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.94rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.card__link::after {
  content: "";
  width: 6px; height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
}

/* Card icon — rounded badge */
.card__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--teal-100);
  padding: 9px;
}

/* Process steps — genuinely sequential, so numbering is earned here */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  border: 1px solid var(--line);
  border-left: none;
  border-radius: var(--radius);
  padding: 1.3rem 1.2rem 1.1rem;
  background: var(--paper-raised);
  position: relative;
}
.step__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--white);
  background: var(--teal);
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  margin-bottom: 0.7rem;
  padding: 0;
}
.step h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.step p { margin-bottom: 0; font-size: 0.94rem; }

/* ---------------------------------------------------------------------- */
/* Testimonials v2 — grid rapi (≤5) atau marquee auto-scroll (>5)         */
/* ---------------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
  gap: 1.4rem;
}

.testimonial {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  font-style: normal;
  overflow: hidden;
}
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  right: 1rem;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--teal-100);
  line-height: 1;
  z-index: 0;
}
.testimonial > * { position: relative; z-index: 1; }
.testimonial p { flex-grow: 1; margin-bottom: 0.9rem; }
.testimonial cite {
  font-style: normal;
  display: block;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.testimonial__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.testimonial__stars { font-size: 1.1rem; line-height: 1; letter-spacing: 2px; }
.testimonial__stars .is-filled { color: var(--amber); }
.testimonial__stars .is-empty { color: var(--line); }

.placeholder-note {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--red-flag);
  border: 1px dashed var(--red-flag);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
}

/* Marquee — dipakai otomatis kalau testimoni lebih dari 5, berjalan
   perlahan dari kanan ke kiri, loop tanpa jeda, berhenti saat hover/fokus.
   Kecepatan diatur di assets/js/testimonials.js (MARQUEE_SECONDS_PER_CARD). */
.testimonial-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.testimonial-marquee__track {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  width: max-content;
  animation-name: testimonial-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.testimonial-marquee:hover .testimonial-marquee__track,
.testimonial-marquee:focus-within .testimonial-marquee__track {
  animation-play-state: paused;
}
.testimonial-marquee .testimonial {
  flex: 0 0 280px;
  max-width: 280px;
}
@keyframes testimonial-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------- */
/* Accent stripe — subtle gradient divider (was the hazard-tape strip)    */
/* ---------------------------------------------------------------------- */
.hazard-strip {
  height: 4px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--amber) 100%);
  opacity: 0.9;
}

/* ---------------------------------------------------------------------- */
/* Hero illustration                                                      */
/* ---------------------------------------------------------------------- */
.hero__art {
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--teal-100) 0%, var(--paper-raised) 60%);
  padding: 1.4rem 1.4rem 0.6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin: 0;
}
.hero__art svg { width: 100%; height: auto; display: block; }
.hero__art figcaption {
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
  margin-top: 0.4rem;
  padding-bottom: 0.5rem;
}

/* Hero visual stack — art panel + overlapping floating badge/ticket */
.hero__visual { position: relative; }
.hero__badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 3;
  background: var(--paper-raised);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem 1.05rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  max-width: 200px;
}
.hero__badge-icon {
  color: var(--amber-700);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.hero__badge-text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.3;
}
.hero__visual .ticket {
  margin-top: -2.6rem;
  margin-left: 1.4rem;
  margin-right: 1.4rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 480px) {
  .hero__visual .ticket { margin-left: 0.6rem; margin-right: 0.6rem; }
  .hero__badge { max-width: 170px; padding: 0.55rem 0.8rem; }
}

/* ---------------------------------------------------------------------- */
/* Photo slot — honest placeholder for real photos, styled intentionally  */
/* ---------------------------------------------------------------------- */
.photo-slot {
  position: relative;
  overflow: hidden;
  border: 1.5px dashed #A9BFB9;
  background: var(--surface-tint);
  border-radius: var(--radius-lg);
  padding: 2rem 1.25rem;
  text-align: center;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Foto asli — taruh file dengan nama yang sesuai di assets/img/ (lihat
   assets/img/README.md). Selama file belum ada, placeholder di bawah ini
   yang tampil; begitu file ada & berhasil dimuat, placeholder otomatis
   disembunyikan lewat selector .photo-slot__img.is-loaded ~ */
.photo-slot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.photo-slot__img.is-loaded { opacity: 1; }
.photo-slot__img.is-loaded ~ .photo-slot__placeholder { display: none; }
.photo-slot__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.photo-slot svg { width: 42px; height: 42px; margin-bottom: 0.8rem; color: var(--teal-700); }
.photo-slot__label {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 0.3rem;
}
.photo-slot__hint { font-size: 0.85rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------------- */
/* Avatar badge — testimonial initials (no fake customer photos)          */
/* ---------------------------------------------------------------------- */
.avatar-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-700) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: 0.8rem;
}

/* ---------------------------------------------------------------------- */
/* FAQ                                                                     */
/* ---------------------------------------------------------------------- */
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.8rem;
  background: var(--paper-raised);
}
.faq__item summary {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--white);
  background: var(--teal);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p { margin-top: 0.8rem; color: var(--charcoal); }

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
.form-field { margin-bottom: 1.1rem; }
.form-field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  background: var(--paper-raised);
  font-family: var(--font-body);
  font-size: 1rem;
  border-radius: var(--radius-sm);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-100);
}
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-status { margin-top: 0.8rem; font-weight: 600; }
.form-status--success { color: var(--teal-700); }
.form-status--error { color: var(--red-flag); }

/* ---------------------------------------------------------------------- */
/* Location picker (peta titik lokasi di form kontak)                     */
/* ---------------------------------------------------------------------- */
.location-picker { margin-bottom: 1.1rem; }
.location-picker__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.location-picker__hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.location-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
#location-picker-map {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--surface-tint);
  z-index: 0;
}
.location-picker__status {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  color: var(--muted);
  min-height: 1.2em;
}
.location-picker__status--set { color: var(--teal-700); font-weight: 600; }
.location-picker__status--error { color: var(--red-flag); font-weight: 600; }
.location-picker__maps-link { font-size: 0.85rem; margin-top: 0.3rem; display: inline-block; }

/* ---------------------------------------------------------------------- */
/* Area / breadcrumb                                                      */
/* ---------------------------------------------------------------------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--muted); text-decoration: underline; }
.area-chip-list { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.area-chip {
  border: 1.5px solid var(--line);
  padding: 0.5rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-raised);
  border-radius: var(--radius-pill);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.area-chip:hover { border-color: var(--teal); color: var(--teal-700); background: var(--teal-100); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #B9CCC6;
  padding: 3.4rem 0 6.5rem; /* extra bottom padding clears sticky mobile bar */
  font-size: 0.94rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: 1rem;
}
@media (min-width: 700px) { .site-footer { padding-bottom: 3rem; } }
.site-footer h4 { color: #F5F3EA; font-size: 1rem; margin-bottom: 0.8rem; }
.site-footer p { color: #B9CCC6; }
.site-footer a { color: #B9CCC6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-bottom {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem;
  color: #8AA39C;
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between;
}

/* ---------------------------------------------------------------------- */
/* Ilustrasi image                                                 */
/* ---------------------------------------------------------------------- */
.area-illustration {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 16px;
    margin: 24px 0;
    display: block;
}

/* ---------------------------------------------------------------------- */
/* Sticky mobile CTA bar                                                   */
/* ---------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0.9rem; right: 0.9rem; bottom: 0.9rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 150;
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  min-height: 56px;
}
.sticky-cta .sticky-cta__wa { background: var(--teal); color: #fff; }
.sticky-cta .sticky-cta__tel { background: var(--ink); color: #fff; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------------------------------------------------------------------- */
/* Consent bar                                                            */
/* ---------------------------------------------------------------------- */
.consent-bar {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 4.8rem;
  background: var(--ink);
  color: #E7E5DC;
  border: none;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  z-index: 160;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}

.consent-bar__text {
    color: #FFFFFF;
}

.consent-bar__text a {
    color: #FFFFFF;
    text-decoration: underline;
}


@media (min-width: 900px) { .consent-bar { bottom: 1.2rem; } }
.consent-bar__text { margin: 0; font-size: 0.88rem; }
.consent-bar__text a { color: var(--amber); text-decoration: underline; }
.consent-bar__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Testimonial submission section — always visually separated from        */
/* whatever section sits above it (Transparansi Layanan when the          */
/* testimonials list is hidden, or the testimonials list itself when      */
/* it's visible), regardless of which background class either one has.    */
/* ---------------------------------------------------------------------- */
#testimonial-form-section {
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------------- */
/* Utility                                                                 */
/* ---------------------------------------------------------------------- */
.text-muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.center-narrow { max-width: 62ch; }
.section-head { max-width: 62ch; margin: 0 0 2rem; }
hr.rule { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------- */
/* NARAYA — Bar promo harga (di atas header, semua halaman)                */
/* ---------------------------------------------------------------------- */
.promo-bar {
  background: var(--ink);
  color: #E8F1EE;
  font-size: 0.86rem;
  padding: 0.55rem 0;
}
.promo-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  text-align: center;
}
.promo-bar__tag {
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.promo-bar__text { color: #C9DAD5; }
.promo-bar__text strong { color: var(--white); font-weight: 800; }
.promo-bar__cta {
  color: var(--amber);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex: 0 0 auto;
}
.promo-bar__cta:hover { color: var(--white); }
@media (max-width: 560px) {
  .promo-bar { font-size: 0.8rem; }
  .promo-bar__text { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------- */
/* NARAYA — Blok harga / promo di dalam halaman                           */
/* ---------------------------------------------------------------------- */
.price-card {
  background: var(--paper-raised);
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.price-card__eyebrow {
  display: inline-block;
  background: var(--amber-100);
  color: var(--amber-700);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.9rem;
}
.price-card__amount {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.1rem);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.price-card__amount small {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.25rem;
}
.price-card__note {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.9rem 0 1.3rem;
}

/* Tabel harga per layanan */
.price-table { display: grid; gap: 0.75rem; margin: 1.6rem 0; }
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.price-row__name { font-weight: 700; color: var(--ink); font-family: var(--font-head); }
.price-row__desc { flex: 1 1 100%; font-size: 0.86rem; color: var(--muted); margin: 0; }
.price-row__value { font-weight: 800; color: var(--teal-700); white-space: nowrap; }

/* Badge "mulai Rp..." kecil untuk dipasang di hero halaman layanan/area */
.price-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--amber-100);
  color: var(--amber-700);
  border: 1px solid var(--amber);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------------- */
/* NARAYA — Penyesuaian footer (kolom bertambah + blok harga)             */
/* ---------------------------------------------------------------------- */
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.footer-tagline {
  color: var(--teal);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.6rem;
}
.footer-price {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-price strong { color: var(--amber); font-size: 1.05rem; }
.footer-price__note { font-size: 0.78rem; color: #8AA39C; }


/* ---------------------------------------------------------------------- */
/* NARAYA — celah di atas pil header                                      */
/* ---------------------------------------------------------------------- */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.9rem;                 /* setinggi padding-top .site-header */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}
.site-header { position: sticky; isolation: isolate; }


/* Jaring pengaman anti-geser-horizontal di layar kecil.
   PENTING: overflow-x TIDAK BOLEH dipasang di html/body — itu akan
   mematikan `position: sticky` pada .site-header (browser menganggap
   ancestor dengan overflow selain "visible" sebagai scroll container
   baru, dan elemen sticky di dalamnya jadi "lepas"). Jadi jaring
   pengamannya dipasang di body via kelas wrapper, bukan langsung di
   html/body. */
body { max-width: 100%; }


/* Bar promo di layar kecil: buang klausa penjelas supaya tidak memakan
   tiga baris di layar pertama. Angka harga tetap tampil. */
@media (max-width: 699px) {
  .promo-bar { padding: 0.45rem 0; font-size: 0.78rem; }
    .promo-bar .container { gap: 0.35rem 0.5rem; }
  .promo-bar__text { flex: 0 1 auto; }
}

@media (max-width: 699px) {
  /* Teks dipadatkan jadi "Sedot WC mulai Rp375.000" supaya bar promo
     cukup satu baris dan tidak memakan layar pertama di HP. */
    .promo-bar__cta { font-size: 0.78rem; }
}


/* ---------------------------------------------------------------------- */
/* Bar promo — tiga tingkat panjang teks, supaya selalu ringkas            */
/*   < 700px  : "Sedot WC mulai Rp375.000"                                */
/*   < 1000px : + "& septic tank Jabodetabek"                             */
/*   >=1000px : + klausa "harga dikonfirmasi sebelum teknisi berangkat"   */
/* ---------------------------------------------------------------------- */
@media (max-width: 999px) {
  .promo-bar__note { display: none; }
}
@media (max-width: 699px) {
  .promo-bar__mid { display: none; }
  .promo-bar__text { white-space: nowrap; }
}