/* =====================================================
   Falisha Laundry — Design System
   Warna diambil persis dari brand guideline (LOGO FALISHA Laundry.pdf)
   ===================================================== */

:root {
  /* Warna utama brand */
  --navy: #2B3A63;
  --navy-dark: #1E2A49;
  --yellow: #FFDF00;
  --star-gold: #F5B942;
  --blue: #31A5DF;
  --pink: #E73F80;
  --lime: #C1D624;
  --grey: #989999;
  --whatsapp-green: #25D366;
  --whatsapp-green-dark: #1DA851;

  /* Token fungsional */
  --bg: #FDFDFC;
  --surface: #FFFFFF;
  --surface-muted: #F4F6FA;
  --ink: #1B2438;
  --ink-soft: #565F73;
  --ink-faint: #8890A0;
  --line: #E4E7EF;
  --shadow-sm: 0 1px 2px rgba(27,36,56,0.06);
  --shadow-md: 0 4px 16px -4px rgba(27,36,56,0.14);
  --shadow-lg: 0 16px 40px -12px rgba(27,36,56,0.22);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-display: 'Baloo 2', 'Poppins', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 68ch; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
/* --section-gap diisi lewat <style> inline di public.blade.php, dari
   site_settings.section_spacing_px (diatur di menu Pengaturan Situs) — angka
   70px di sini cuma fallback kalau variabelnya entah kenapa tidak terpasang. */
.section { padding: var(--section-gap, 70px) 0; }
.section--muted { background: var(--surface-muted); }
.section--white { background: var(--surface); }
.section--cream { background: #FFFBEA; }
.section--pink { background: #FDECF2; }
.section--blue { background: #EAF7FD; }
.section--navy { background: var(--navy); }
/* Section gelap: judul & teks aslinya didesain untuk background terang
   (h2 pakai var(--navy)), jadi kalau background section-nya sendiri navy,
   warnanya harus dibalik ke terang supaya tidak "hilang" (navy di atas navy). */
.section--navy .eyebrow { color: var(--yellow); }
.section--navy .eyebrow::before { background: var(--yellow); }
.section--navy h2 { color: #fff; }
.section--navy .section-head p { color: #B9C2DC; }
.section--navy .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.section--navy .btn-outline:hover { background: #fff; color: var(--navy); }
.section--muted + .section--muted,
.section--cream + .section--cream,
.section--pink + .section--pink,
.section--blue + .section--blue { position: relative; }
.section--muted + .section--muted::before,
.section--cream + .section--cream::before,
.section--pink + .section--pink::before,
.section--blue + .section--blue::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 1px;
  background: var(--line);
}
/* Semua section (Beranda maupun halaman lain) pakai padding atas-bawah yang
   sama persis (var(--section-gap)) di semua ukuran layar — termasuk sama
   dengan padding bawah Hero (lihat .hero) — supaya jarak antar section
   terasa konsisten, tidak ada satu pun transisi yang terasa lebih renggang
   dari yang lain. */
@media (prefers-reduced-motion: no-preference) {
  .js .section { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
  .js .section.is-revealed { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--pink); border-radius: 2px; }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head p { margin: 0 auto; color: var(--ink-soft); }
@media (max-width: 900px) {
  /* Baris pertama teks intro Layanan sengaja dipisah manual (enter) supaya
     rapi di layar lebar — di HP malah bikin kata "dan" nyangkut sendirian,
     jadi baris pertama itu dilepas di mobile, biar teks ngalir alami. */
  .layanan-intro-text br:first-of-type { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn-call {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(231,63,128,0.55);
}
.btn-call:hover { transform: scale(1.05); box-shadow: 0 7px 22px -1px rgba(231,63,128,0.63); }
.btn-wa {
  background: var(--whatsapp-green);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(37,211,102,0.55);
}
.btn-wa:hover { transform: scale(1.05); box-shadow: 0 7px 22px -1px rgba(37,211,102,0.63); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-navy {
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  box-shadow: 0 6px 18px -6px rgba(43,58,99,0.55);
}
.btn-navy:hover { transform: scale(1.05); box-shadow: 0 7px 22px -1px rgba(43,58,99,0.63); }
.btn-yellow {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 6px 18px -6px rgba(255,223,0,0.55);
}
.btn-yellow:hover { transform: scale(1.05); box-shadow: 0 7px 22px -1px rgba(255,223,0,0.63); }
.btn-blue {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(49,165,223,0.55);
}
.btn-blue:hover { background: #2790c4; }
.btn-block { width: 100%; }
.btn svg { width: 19px; height: 19px; flex: none; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253,253,252,0.69);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 34px; width: auto; display: block; }
.site-header .logo-img { height: 51px; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.main-nav a:hover, .main-nav a.active { background: var(--surface-muted); color: var(--navy); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .btn { padding-left: 19px; padding-right: 19px; padding-top: 11px; padding-bottom: 11px; min-height: 40px; gap: 6px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  background: var(--surface-muted);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--navy); }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-cta .btn-call span { display: none; }
  .header-cta .btn-call { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex-shrink: 0; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 400px) {
  /* Logo + tombol Chat + Call + menu hamburger baru mepet di HP terkecil
     (~320-360px) — tombol Chat ikut disingkat jadi ikon saja seperti Call,
     supaya tetap muat tanpa memaksa halaman melebar ke samping. */
  .header-cta .btn-wa span { display: none; }
  .header-cta .btn-wa { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex-shrink: 0; }
}

/* ---------- Menu mobile (overlay penuh layar, biru navy Falisha) ---------- */
.mobile-nav-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  animation: mobileNavDrop 0.28s ease both;
}
.mobile-nav-overlay[hidden] { display: none; }
@keyframes mobileNavDrop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.mobile-nav-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mobile-nav-close svg { width: 22px; height: 22px; color: #fff; }
.mobile-nav-links { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.mobile-nav-links a {
  font-family: var(--font-body); font-size: 1.7rem; font-weight: 700;
  color: #fff;
}
.mobile-nav-links a.active { color: var(--yellow); }
@media (min-width: 901px) {
  .mobile-nav-overlay { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding: 56px 0 var(--section-gap, 70px); overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
/* animation-duration & animation-delay dipasang inline per elemen lewat
   home.blade.php ($heroAnimStyle) — nilainya dari pengaturan admin
   (Pengaturan Situs > Identitas Bisnis > "Animasi Masuk Badge & Statistik").
   Baris "animation" di sini cuma fallback kalau inline style entah kenapa
   tidak terpasang. */
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 7px 13px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--navy);
  animation: heroBadgeFadeIn 0.6s ease-out both;
}
@keyframes heroBadgeFadeIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.hero h1 { margin-bottom: 18px; }
.hero-highlight {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.hero-highlight::before {
  content: "";
  position: absolute;
  left: 0; top: 0.08em; bottom: 0.08em;
  width: 0;
  background: var(--yellow);
  z-index: -1;
  border-radius: 4px;
  animation: heroHighlightSweep 1.5s ease forwards;
}
/* Sama seperti .hero-highlight ("kurang dari 29 menit"), tapi animasinya
   dipicu lewat class "is-visible" (bukan langsung jalan begitu CSS dimuat)
   supaya bisa diulang tiap kali di-scroll lewat — lihat IntersectionObserver
   di public.blade.php, pola yang sama dengan .footer-tagline-badge. */
.pasti-ontime-highlight {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.pasti-ontime-highlight::before {
  content: "";
  position: absolute;
  left: 0; top: 0.08em; bottom: 0.08em;
  width: 0;
  background: var(--yellow);
  z-index: -1;
  border-radius: 4px;
}
.pasti-ontime-highlight.is-visible::before { animation: heroHighlightSweep 1.5s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .pasti-ontime-highlight.is-visible::before { animation: none; width: 101.5%; }
}
@keyframes heroHighlightSweep {
  from { width: 0; }
  to { width: 101.5%; }
}
.hero-sub { font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 28px; white-space: pre-line; }
.hero-tagline {
  position: relative;
  display: inline-block;
  margin-top: 1em;
}
.hero-tagline--underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 3px;
  background: var(--yellow);
  border-radius: 2px;
  animation: heroTaglineUnderline 1.5s ease forwards;
  animation-delay: 1.5s;
}
@keyframes heroTaglineUnderline {
  from { width: 0; }
  to { width: 100%; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: -30px; }
/* animation-duration & animation-delay dipasang inline per kotak lewat
   home.blade.php ($heroAnimStyle, plus data-anim-delay/data-anim-duration
   yang dibaca JS untuk mulai hitungan angkanya) — semua dari pengaturan
   admin "Animasi Masuk Badge & Statistik". Baris "animation" di sini cuma
   fallback kalau inline style entah kenapa tidak terpasang. */
.hero-stat { animation: heroBadgeFadeIn 0.6s ease-out both; animation-delay: 1.8s; }
.hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); margin-top: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero-stat > span { font-size: 13px; color: var(--ink-faint); display: block; margin-top: -10px; }
.hero-stat strong span { font-size: inherit; color: inherit; }
.hero-stat strong .stars-inline { display: inline-block; color: var(--star-gold); font-size: 0.85rem; letter-spacing: 1px; margin-right: 6px; vertical-align: middle; }
.hero-stat strong.rating-stat { display: flex; align-items: center; }
.odometer { display: inline-flex; font-variant-numeric: tabular-nums; }
.odometer-digit { display: inline-block; height: 1em; overflow: hidden; position: relative; vertical-align: bottom; line-height: 1; }
.odometer-digit .odometer-strip { display: flex; flex-direction: column; transition: transform 3.5s cubic-bezier(0.22, 1, 0.36, 1); }
.odometer-digit .odometer-strip span { display: block; height: 1em; line-height: 1; text-align: center; }
/* Simbol "+" di "10+ Tahun" — sengaja TIDAK ikut jadi bagian dari kotak
   .odometer (yang pakai flex + overflow:hidden untuk efek gulung angka),
   supaya tetap ikut alur teks normal sejajar dengan "Tahun" di sampingnya
   (masalah sebelumnya: taruh elemen di dalam kotak flex odometer bikin
   vertical-align diabaikan browser, jadi tidak sejajar). Ini cuma elemen
   biasa yang di-fade-in lewat class "is-visible", dipicu dari JS persis
   saat animasi angkanya selesai. */
.years-plus { display: inline-block; }
.years-plus.will-animate { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.years-plus.will-animate.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .years-plus.will-animate { transition: none; opacity: 1; transform: none; }
  .odometer-digit .odometer-strip { transition: none; }
}
.hero-stat--hidden { display: none; }
@media (max-width: 560px) { .hero-stat--desktop-only { display: none; } }
@media (min-width: 561px) { .hero-stat--mobile-only { display: none; } }
.hero-media { position: relative; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center bottom; animation: heroPhotoFadeIn 0.8s ease-out both; }
.hero-media img.no-animate { animation: none; opacity: 1; transform: none; }
.hero-media .hero-slideshow { position: relative; width: 100%; aspect-ratio: 16/9; }
.hero-media .hero-slideshow .hero-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; animation: none; transition: opacity 1s ease; }
.hero-media .hero-slideshow .hero-slide.is-active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-slideshow .hero-slide { transition: none; }
}
@keyframes heroPhotoFadeIn {
  from { transform: translateY(16px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.hero-media .float-card {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 18px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.hero-media .float-card-top { display: flex; align-items: center; gap: 8px; }
.hero-media .float-card .stars { color: var(--star-gold); font-size: 15px; letter-spacing: 1px; line-height: 1; }
.hero-media .float-card strong { font-family: var(--font-display); color: var(--navy); font-size: 1.1rem; line-height: 1; }
.hero-media .float-card small { color: var(--ink-faint); font-size: 12px; display: block; }
.hero-media .float-card-count {
  display: inline-block; background: var(--navy); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-sm);
  /* Mulai tak terlihat — urutan animasi masuk/menghilang/masuk lagi
     sepenuhnya dikendalikan JS (Web Animations API) di home.blade.php
     supaya transisi menghilangnya halus & presisi, bukan lompatan CSS. */
  opacity: 0;
}

.hero-media-chat {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease;
  border-radius: var(--radius-lg);
  overflow: hidden;
  z-index: 2;
}
.hero-media.is-chat-active .hero-media-chat { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-media-chat { transition: none; }
}
/* Badge "X Ulasan" ikut sembunyi selagi chat tampil, muncul lagi begitu foto
   kembali — cuma soal tampilan (opacity), animasi swoosh count-nya sendiri
   (Web Animations API di script) tetap jalan apa adanya di belakang layar. */
.hero-media .float-card { transition: opacity 0.6s ease; }
.hero-media.is-chat-active .float-card { opacity: 0; pointer-events: none; }

.wa-widget { width: 100%; height: 100%; display: flex; flex-direction: column; background: #EFEAE2; }
.wa-widget-head { display: flex; align-items: center; gap: 10px; background: #075E54; color: #fff; padding: 12px 16px; flex: none; }
.hero-media .wa-avatar-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: var(--navy); animation: none; box-shadow: none; }
.wa-widget-head .wa-name { font-weight: 700; font-size: 14px; line-height: 1.2; display: flex; align-items: center; gap: 4px; }
.wa-verified-badge { flex: none; }
.wa-widget-head .wa-status { font-size: 12px; opacity: 0.75; display: flex; align-items: center; gap: 4px; }
.wa-widget-head .wa-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #25D366; display: inline-block; }
.wa-body { flex: 1; padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.wa-composer { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #F0F0F0; }
.wa-composer .wa-input { flex: 1; background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 13px; color: #8890A0; }
.wa-composer .wa-send { width: 32px; height: 32px; border-radius: 50%; background: #075E54; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }

.wa-row { display: flex; }
.wa-row.from-me { justify-content: flex-end; }
.wa-row.from-them { justify-content: flex-start; }
.wa-bubble { max-width: 78%; padding: 8px 11px; border-radius: 9px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,0.08); animation: waBubbleIn 0.28s ease both; color: #1B2438; }
.wa-row.from-me .wa-bubble { background: #D9FDD3; border-bottom-right-radius: 2px; }
.wa-row.from-them .wa-bubble { background: #fff; border-bottom-left-radius: 2px; }
.wa-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 3px; font-size: 10.5px; color: #8890A0; }
.wa-ticks { color: #8890A0; display: inline-flex; align-items: center; }
.wa-ticks svg { display: block; }
.wa-ticks.is-read { color: #53BDEB; }
.wa-typing { display: inline-flex; gap: 4px; background: #fff; padding: 10px 13px; border-radius: 9px; border-bottom-left-radius: 2px; animation: waBubbleIn 0.28s ease both; box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
.wa-typing span { width: 6px; height: 6px; border-radius: 50%; background: #A0A8B4; animation: waTypingBounce 1.1s ease-in-out infinite; }
.wa-typing span:nth-child(2) { animation-delay: 0.15s; }
.wa-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes waBubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes waTypingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .wa-bubble, .wa-typing { animation: none; }
}
@media (max-width: 900px) {
  .wa-widget-head { padding: 10px 14px; }
  .wa-body { padding: 10px; }
}

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-media .float-card { left: 12px; bottom: -14px; padding: 10px 14px; }
  /* Kotak foto/chat dibuat 15% lebih tinggi dari rasio 16:9 default supaya
     jendela chat WhatsApp tidak terasa sempit di layar sempit (9 * 1.15 = 10.35). */
  .hero-media img { aspect-ratio: 16 / 10.35; }
  .hero-media .hero-slideshow { aspect-ratio: 16 / 10.35; }
  /* Ukuran teks bubble chat di mobile diatur admin (Pengaturan Situs >
     Animasi Chat di Hero > "Ukuran Teks Chat di Mobile"), default 85% —
     supaya obrolan yang muat kelihatan lebih banyak di layar sempit. */
  .wa-bubble { font-size: calc(13.5px * var(--hero-chat-font-scale-mobile, 85) / 100); }
}

/* ---------- Tentang Kami: "Cerita Kami" (foto + teks) ---------- */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) {
  .about-story { grid-template-columns: 1fr; }
  .about-story img { order: -1; }
}
@media (max-width: 560px) {
  /* Tombol CTA hero sejajar 1 baris (kiri-kanan), masing-masing berbagi rata
     lebar baris (flex:1 + min-width:0) supaya label panjang bisa turun ke
     baris ke-2 di dalam tombolnya sendiri kalau perlu, bukan mendorong
     halaman melebar ke samping. */
  .hero-actions { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; width: auto; white-space: normal; padding-left: 10px; padding-right: 10px; }
  /* Statistik hero (<29 Menit, rating) disejajarkan 1 baris, rata tengah. */
  .hero-stats { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 20px; }
  .hero-stat { text-align: center; }
  .hero-stat strong { font-size: 1.65rem; }
  .hero-stat > span { font-size: 14.5px; line-height: 1.3; }
}

/* ---------- Package cards ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (min-width: 981px) { .pkg-grid { max-width: 85%; margin: 0 auto; } }
@media (max-width: 980px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pkg-grid { grid-template-columns: 1fr; max-width: 85%; margin: 0 auto; } }
.pkg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex; flex-direction: column;
  text-align: center;
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pkg-card--featured, .pkg-card--bestseller, .pkg-card--affordable { position: relative; }
.pkg-card[data-badge]::before {
  content: attr(data-badge); position: absolute; top: -12px; left: 22px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 4px 12px; border-radius: var(--radius-sm);
}
.pkg-card--featured { border-color: var(--yellow); background: #FFFBEA; }
.pkg-card--featured::before { background: var(--yellow); color: var(--navy); font-style: italic; }
.pkg-card--bestseller { border-color: var(--pink); background: #FDECF2; }
.pkg-card--bestseller::before { background: var(--pink); color: #fff; }
.pkg-card--affordable { border-color: var(--blue); background: #EAF7FD; }
.pkg-card--affordable::before { background: var(--blue); color: #fff; }

/* Nudge animation: draws attention to a package's CTA when it scrolls into view, then settles */
@keyframes btnNudgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px -6px rgba(37,211,102,0.55); }
  50% { transform: scale(1.045); box-shadow: 0 10px 28px -4px rgba(37,211,102,0.9); }
}
.btn-nudge.btn-nudge--active { animation: btnNudgePulse 1.8s ease-in-out 3; }
.btn-nudge.btn-nudge--settled { box-shadow: 0 8px 24px -5px rgba(37,211,102,0.8); }
@media (prefers-reduced-motion: reduce) {
  .btn-nudge.btn-nudge--active { animation: none; }
}
.pkg-card .pkg-name { font-size: 1.05rem; font-weight: 700; color: var(--pink); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 10px; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.pkg-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--navy); margin-bottom: 16px; }
.pkg-price span { font-size: 0.9rem; font-weight: 500; color: var(--ink-faint); }
.pkg-desc { font-size: 12.5px; color: var(--ink-faint); margin: -10px 0 16px; line-height: 1.5; }
.pkg-features { display: flex; flex-direction: column; margin-bottom: 20px; flex: 1; }
.pkg-features li { margin: 0 14px; padding: 10px 0; font-size: 13.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.pkg-features li:first-child { padding-top: 0; }
.pkg-features li:last-child { border-bottom: none; padding-bottom: 0; }
/* "One Machine One Person" ditebalkan dan dipaksa 1 baris. Fontnya
   diperkecil di layar 2-kolom (tablet) dan 4-kolom (desktop) karena
   kolomnya lebih sempit; di 1-kolom (mobile <=560px) kartu selebar
   layar jadi ukuran normal sudah cukup. */
.pkg-feature--omop { font-weight: 700; white-space: nowrap; }
@media (min-width: 561px) { .pkg-feature--omop { font-size: 9.5px; letter-spacing: -0.01em; } }

/* ---------- Layanan Satuan (cuci per item, harga per ukuran) ---------- */
.satuan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (min-width: 981px) { .satuan-grid { max-width: 85%; margin: 0 auto; } }
@media (max-width: 860px) { .satuan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .satuan-grid { grid-template-columns: 1fr; padding: 0 12px; } }
.satuan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.satuan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.satuan-card-name { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.satuan-card-prices { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.satuan-card-prices li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.satuan-card-prices li:last-child { border-bottom: none; padding-bottom: 0; }
.satuan-card-prices li strong { color: var(--navy); font-weight: 700; }

/* ---------- Guarantee / About cards ---------- */
.guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (min-width: 861px) { .guarantee-grid { max-width: 65%; margin: 0 auto; } }
@media (max-width: 860px) { .guarantee-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .guarantee-grid { padding: 0 12px; } }
.guarantee-card {
  background: var(--surface); border-radius: var(--radius-md);
  padding: 30px 26px; border: 1px solid var(--line);
  text-align: center;
}
.guarantee-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guarantee-icon svg { width: 30px; height: 30px; }
.guarantee-card:nth-child(1) .guarantee-icon { background: var(--pink); }
.guarantee-card:nth-child(2) .guarantee-icon { background: var(--blue); }
.guarantee-card:nth-child(3) .guarantee-icon { background: var(--navy); }
/* Efek cahaya saat kartu di-hover — sama seperti tombol "Pilih Paket"
   (.btn-wa:hover), tapi warnanya ikut warna icon masing-masing (bukan
   hijau WhatsApp semua). */
.guarantee-card:hover .guarantee-icon { transform: scale(1.08); }
.guarantee-card:nth-child(1):hover .guarantee-icon { box-shadow: 0 7px 22px -1px rgba(231,63,128,0.6); }
.guarantee-card:nth-child(2):hover .guarantee-icon { box-shadow: 0 7px 22px -1px rgba(49,165,223,0.6); }
.guarantee-card:nth-child(3):hover .guarantee-icon { box-shadow: 0 7px 22px -1px rgba(43,58,99,0.6); }
.guarantee-card h3 { margin-bottom: 8px; }
.guarantee-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0 auto; }
.guarantee-card.cta-yellow { background: linear-gradient(180deg, #FFFBEA, var(--surface) 40%); border-color: var(--yellow); position: relative; }
.guarantee-card.cta-yellow::before {
  content: "Promo"; position: absolute; top: -12px; left: 22px;
  background: var(--yellow); color: var(--navy); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 4px 12px; border-radius: var(--radius-sm);
}
.guarantee-card.cta-yellow .btn { margin-top: 20px; }
.guarantee-card p + .btn { margin-top: 20px; }

/* ---------- Stars / rating ---------- */
.stars { color: var(--star-gold); letter-spacing: 2px; font-size: 15px; }
.stars svg { width: 16px; height: 16px; display: inline-block; }
.rating-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--navy);
}

/* ---------- Testimonials (screenshot ulasan, di-crop persegi) ---------- */
/* max-width 65% disamakan persis dengan .guarantee-grid (kartu "Pasti
   Dijemput <29 Menit" dkk di Tentang Kami) supaya lebar kolom testimoni
   seragam dengan kolom section itu. */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (min-width: 861px) { .testi-grid { max-width: 65%; margin: 0 auto; } }
@media (max-width: 860px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .testi-grid { grid-template-columns: 1fr; padding: 0 12px; } }
.testi-shot {
  margin: 0; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 1; background: var(--surface-2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.testi-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi-shot a { display: block; width: 100%; height: 100%; }
.testi-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Hotel partners ---------- */
.partner-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.partner-chip {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: 8px;
}
.partner-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.partner-logo {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 100px; min-width: 140px; transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.partner-logo:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.partner-logo img {
  max-height: 38px; max-width: 130px; width: auto; height: auto; object-fit: contain;
}
.partner-logo-name { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.2; }

/* ---------- Quick Answer (GEO) ---------- */
.quick-answer {
  background: var(--surface-muted); border-left: 4px solid var(--navy); border-radius: var(--radius-md);
  padding: 18px 22px; margin: 0 0 28px;
}
/* Disamakan lebarnya dengan .pkg-grid (4 kartu paket) di bawahnya, supaya
   kotak "Jawaban Singkat" tidak lebih lebar dari kartu-kartu paketnya. */
@media (min-width: 981px) { .quick-answer { max-width: 85%; margin-left: auto; margin-right: auto; } }
@media (max-width: 560px) { .quick-answer { max-width: 85%; margin-left: auto; margin-right: auto; } }
.quick-answer .label { font-family: var(--font-body); font-weight: 700; color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 6px; }
.quick-answer p { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.6; }
/* Highlight "One Machine One Person." di kotak Jawaban Singkat — sapuan
   kuning yang sama seperti .pasti-ontime-highlight (pas ke teksnya saja,
   tanpa bocor ke spasi sebelumnya), diulang tiap kali di-scroll lewat lewat
   IntersectionObserver di site.js. Titik di akhir kalimat ikut masuk span
   ini supaya highlight-nya berhenti pas di akhir kalimat. Ditebalkan dan
   dipaksa 1 baris (nowrap); di layar sempit fontnya diperkecil dulu supaya
   tetap muat 1 baris sebelum browser terpaksa memotongnya. */
.omoc-highlight { position: relative; display: inline-block; z-index: 1; font-weight: 700; white-space: nowrap; }
.omoc-highlight::before {
  content: ""; position: absolute; left: 0; top: 0.08em; bottom: 0.08em;
  width: 0; background: var(--yellow); z-index: -1; border-radius: 4px;
}
.omoc-highlight.is-visible::before { animation: heroHighlightSweep 1.35s ease forwards; }
@media (max-width: 400px) { .omoc-highlight { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .omoc-highlight.is-visible::before { animation: none; width: 101.5%; }
}
/* Highlight "semua gratis." di paragraf Cerita Kami halaman Tentang Kami —
   sapuan kuning yang sama seperti .omoc-highlight, diulang tiap kali
   di-scroll lewat lewat IntersectionObserver di site.js. */
.gratis-highlight { position: relative; display: inline-block; z-index: 1; }
.gratis-highlight::before {
  content: ""; position: absolute; left: 0; top: 0.08em; bottom: 0.08em;
  width: 0; background: var(--yellow); z-index: -1; border-radius: 4px;
}
.gratis-highlight.is-visible::before { animation: heroHighlightSweep 1.35s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .gratis-highlight.is-visible::before { animation: none; width: 101.5%; }
}

/* ---------- Comparison Table ---------- */
.comparison-table-wrap { overflow-x: auto; margin: 24px 0; }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 480px; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); }
.comparison-table th, .comparison-table td { padding: 9px 18px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.comparison-table th { background: var(--navy); color: #fff; font-family: var(--font-body); font-weight: 700; }
.comparison-table tr:last-child td { border-bottom: 1px solid var(--line); }
.comparison-table td:first-child { font-weight: 700; color: var(--navy); }
.comparison-table th:first-child { font-weight: 700; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary {
  padding: 18px 22px; font-weight: 700; color: var(--navy);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 22px; color: var(--pink); flex: none; font-family: var(--font-display); transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 22px 20px; color: var(--ink-soft); font-size: 14.5px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding: 16px 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-faint); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line); }
.breadcrumb a { color: var(--ink-soft); font-weight: 600; }
.breadcrumb a:hover { color: var(--pink); }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (min-width: 981px) { .blog-grid { max-width: 85%; margin: 0 auto; } }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .blog-grid { padding: 0 12px; } }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease; display: flex; flex-direction: column; }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-card .thumb { aspect-ratio: 16/10; background: var(--surface-muted); position: relative; overflow: hidden; }
.post-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card .cat-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--surface); padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--navy);
}
.post-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card h3 { font-size: 1.05rem; margin: 0; }
.post-card .excerpt { font-size: 13.5px; color: var(--ink-soft); margin: 0; flex: 1; }
.post-meta { font-size: 12px; color: var(--ink-faint); display: flex; gap: 10px; align-items: center; }
/* Kartu artikel tinggi menyesuaikan yang paling panjang (grid stretch), jadi
   tanggal/penulis didorong ke bawah supaya sejajar walau judul cuma 2 baris. */
.post-card .body .post-meta { margin-top: auto; }
.ig-handle { display: inline-block; background: var(--yellow); color: var(--navy); font-weight: 700; padding: 2px 10px; border-radius: 999px; text-decoration: none; }

.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; justify-content: center; }
.cat-filter .row-break { flex-basis: 100%; width: 0; height: 0; }
.cat-filter a {
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface);
}
.cat-filter a.active, .cat-filter a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.sort-toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: -14px 0 28px; }
.sort-toggle span { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.sort-toggle a {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface);
}
.sort-toggle a.active, .sort-toggle a:hover { background: var(--pink); color: #fff; border-color: var(--pink); }
@media (max-width: 860px) { .cat-filter { display: none; } }

article.post-body { max-width: 720px; margin: 0 auto; }
.post-short-answer { background: #FFFBEA; border: 1px solid var(--yellow); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 24px; }
.post-short-answer-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pink); margin-bottom: 8px; }
.post-short-answer p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); font-weight: 600; }
.post-toc { background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 28px; }
.post-toc-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 10px; }
.post-toc ul { list-style: none; margin: 0; padding: 0; }
.post-toc li { font-size: 14.5px; margin-bottom: 7px; }
.post-toc li:last-child { margin-bottom: 0; }
.post-toc li.post-toc-h3 { margin-left: 18px; font-size: 13.5px; }
.post-toc a { color: var(--navy); text-decoration: none; }
.post-toc a:hover { text-decoration: underline; }
article.post-body .post-cover { border-radius: var(--radius-lg); aspect-ratio: 16/8; object-fit: cover; margin-bottom: 28px; }
article.post-body .content { font-size: 17px; line-height: 1.8; color: var(--ink); }
article.post-body .content h2 { margin-top: 1.6em; font-size: 1.4rem; }
article.post-body .content h3 { margin-top: 1.3em; font-size: 1.15rem; }
article.post-body .content p { margin-bottom: 1.2em; }
article.post-body .content img { border-radius: var(--radius-md); margin: 1.4em 0; }
article.post-body .content ul, article.post-body .content ol { margin: 0 0 1.2em; padding-left: 22px; list-style: revert; }
article.post-body .content a { color: var(--pink); text-decoration: underline; }
article.post-body .content ul.place-info { list-style: none; padding: 16px 20px; margin: 0 0 1.4em; background: var(--surface-muted); border-radius: var(--radius-sm); border-left: 3px solid var(--pink); }
article.post-body .content ul.place-info li { margin-bottom: 7px; font-size: 15px; line-height: 1.55; }
article.post-body .content ul.place-info li:last-child { margin-bottom: 0; }
article.post-body .content figure { margin: 1.4em 0; }
article.post-body .content figure img { margin: 0; display: block; width: 100%; }
article.post-body .content figcaption { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
article.post-body .content .inline-cta {
  position: relative; text-align: center;
  background: linear-gradient(180deg, #FFFBEA, var(--surface) 40%);
  border: 1px solid var(--yellow); border-radius: var(--radius-md);
  padding: 26px 22px; margin: 2em auto; max-width: 544px;
}
article.post-body .content .inline-cta::before {
  content: "Promo"; position: absolute; top: -12px; left: 22px;
  background: var(--yellow); color: var(--navy); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 4px 12px; border-radius: 999px;
}
article.post-body .content .inline-cta h3 { margin: 0 0 8px; }
article.post-body .content .inline-cta .btn { margin-top: 12px; color: #fff; text-decoration: none; }
article.post-body .content .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.4em 0; border-radius: var(--radius-md); overflow: hidden; background: #000; }
article.post-body .content .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #DDE3F5; padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.6fr 0.8fr 1fr; gap: 36px; margin-bottom: 40px; align-items: start; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 0; }
  .footer-grid > div { padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .footer-grid > div:first-child { padding-top: 0; border-top: none; text-align: center; }
  .footer-grid > div:first-child .logo { justify-content: center; }
  .footer-grid > div:first-child .logo-img { height: 39px; }
  .footer-grid > div:first-child .footer-social { justify-content: center; }
  .footer-links > a { min-height: 44px; display: flex; align-items: center; }
}
.footer-service-cols { display: flex; gap: 22px; }
@media (max-width: 560px) { .footer-service-cols { flex-direction: column; gap: 18px; } }
.site-footer h4 { display: inline-block; background: var(--yellow); color: var(--navy); font-size: 13px; font-weight: 700; margin-bottom: 16px; padding: 5px 14px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em; }

/* Label "Layanan" di footer: murni judul statis (ukuran disamakan dengan
   Perusahaan/Kontak), tanda + tetap ditampilkan sebagai ikon dekoratif.
   Yang bisa dibuka/tutup sekarang cuma sub-daftarnya masing-masing
   (Express On Kilo's / Express per Item) lewat .footer-sub-toggle di bawah,
   supaya keduanya tetap kelihatan tanpa perlu buka "Layanan" dulu. */
.footer-accordion-summary {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--yellow); color: var(--navy); font-size: 13px; font-weight: 700; line-height: 1.2;
  margin-bottom: 16px; padding: 5px 14px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em;
}
.footer-accordion-icon { position: relative; width: 10px; height: 10px; flex: none; }
.footer-accordion-icon::before, .footer-accordion-icon::after {
  content: ""; position: absolute; background: var(--navy); border-radius: 2px;
}
.footer-accordion-icon::before { left: 0; top: 4px; width: 10px; height: 2px; }
.footer-accordion-icon::after { left: 4px; top: 0; width: 2px; height: 10px; }
@media (min-width: 561px) {
  .footer-accordion-icon { display: none; }
}

/* Sub-daftar layanan di HP: judul subhead ("Express On Kilo's" / "Express per
   Item") selalu tampil, isinya baru muncul saat disentuh/diklik supaya
   footer tidak langsung panjang. Di tablet/desktop isinya tetap selalu
   terlihat seperti semula. */
.footer-links-subhead.footer-sub-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; font: inherit; padding: 0; text-align: left; color: var(--yellow);
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.footer-sub-icon { position: relative; width: 8px; height: 8px; flex: none; }
.footer-sub-icon::before, .footer-sub-icon::after {
  content: ""; position: absolute; background: var(--yellow); border-radius: 2px; transition: transform 0.2s ease;
}
.footer-sub-icon::before { left: 0; top: 3px; width: 8px; height: 1.5px; }
.footer-sub-icon::after { left: 3px; top: 0; width: 1.5px; height: 8px; }
.footer-sub-toggle[aria-expanded="true"] .footer-sub-icon::after { transform: scaleY(0); }
@media (max-width: 560px) {
  .footer-links-subhead.footer-sub-toggle { min-height: 32px; }
  .footer-links .footer-sub-body { display: none; }
  .footer-links .footer-sub-body.is-open { display: flex; }
}
@media (min-width: 561px) {
  .footer-sub-toggle { pointer-events: none; cursor: default; }
  .footer-sub-toggle .footer-sub-icon { display: none; }
}

/* Garis penghubung dari "Layanan" ke tiap subhead di HP, gaya sama persis
   dengan garis penghubung antar item di .footer-links-group di bawah. */
@media (max-width: 560px) {
  .footer-service-cols { position: relative; padding-left: 14px; }
  .footer-service-cols > .footer-links { position: relative; }
  .footer-service-cols > .footer-links::before {
    content: ""; position: absolute; left: -14px; top: -22px; width: 10px; height: 38px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom-left-radius: 6px;
  }
  .footer-service-cols > .footer-links:first-child::before { top: -4px; height: 20px; }
}
.site-footer .logo { color: #fff; }
.site-footer p { color: #AEB7D6; font-size: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-links a { color: #C4CBE8; font-size: 14px; }
.footer-links span { display: block; }
.footer-links-subhead { display: block; color: var(--yellow); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.footer-links-subhead:first-child { margin-top: 0; }
.footer-links-group { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 14px; margin-top: 2px; }
.footer-links-group > a, .footer-links-group > span { position: relative; }
.footer-links-group > a::before, .footer-links-group > span::before {
  content: ''; position: absolute; left: -14px; top: -22px; width: 10px; height: 34px;
  border-left: 1px solid rgba(255,255,255,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.22);
  border-bottom-left-radius: 6px;
}
.footer-links-group > a:first-child::before, .footer-links-group > span:first-child::before { top: 0; height: 12px; }
.footer-links a:hover { color: var(--yellow); }
.footer-contact-link { display: inline-flex; align-items: center; gap: 10px; }
.footer-contact-link svg { width: 16px; height: 16px; flex: none; color: #fff; }
@media (max-width: 480px) {
  /* Khusus daftar link "Perusahaan" & "Kontak" di footer mobile —
     dirapatkan, beda dari daftar footer lain (Layanan) yang tetap renggang. */
  .footer-links--company, .footer-links--kontak { gap: 2px; }
  .footer-links--company > a, .footer-links--kontak > a { min-height: 30px; }
}
/* Kotak "Layanan" di footer isinya 2 daftar (Express On Kilo's + per Item)
   jadi lebih panjang dari kotak Perusahaan/Kontak — dirapatkan sedikit
   (baris & jarak antar-item) khusus di sini biar tingginya tidak jomplang
   dibanding kotak sebelahnya. Tinggi garis penghubung ikut disesuaikan
   supaya tetap nyambung rapi ke tiap baris yang sekarang lebih rapat. */
.footer-service-cols .footer-links-group { gap: 6px; }
.footer-service-cols .footer-links-group > a,
.footer-service-cols .footer-links-group > span { line-height: 1.25; }
.footer-service-cols .footer-links-group > a::before,
.footer-service-cols .footer-links-group > span::before { height: 24px; }
.footer-service-cols .footer-links-group > a:first-child::before,
.footer-service-cols .footer-links-group > span:first-child::before { height: 9px; }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.footer-social a:hover { background: var(--pink); }
.footer-social a.social-facebook:hover { background: #1877F2; }
.footer-social a.social-x:hover { background: #000000; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: #8D97BD; }
@media (max-width: 480px) { .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; } }
.footer-tagline-badge { position: relative; display: inline-block; color: var(--navy); font-style: italic; z-index: 1; }
.footer-tagline-badge::before {
  content: ""; position: absolute; left: -5%; top: -0.15em; bottom: -0.15em;
  width: 0; background: var(--yellow); z-index: -1; border-radius: 4px;
}
.footer-tagline-badge.is-visible::before { animation: footerTaglineSweep 1.35s ease forwards; }
@keyframes footerTaglineSweep {
  from { width: 0; }
  to { width: 110%; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-tagline-badge.is-visible::before { animation: none; width: 110%; }
}

/* ---------- Form Ulasan Pelanggan ---------- */
.review-alert { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 24px; font-size: 14.5px; }
.review-alert--success { background: #EAF9F0; border: 1px solid #B9E8CC; color: #1F7A4D; }
.review-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 32px 28px; box-shadow: var(--shadow-sm); }
@media (max-width: 480px) { .review-form { padding: 24px 18px; } }
.review-field { margin-bottom: 20px; }
.review-field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 8px; font-size: 14.5px; }
.review-field input[type=text], .review-field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--surface);
  transition: border-color 0.15s ease;
}
.review-field input[type=text]:focus, .review-field textarea:focus { outline: none; border-color: var(--navy); }
.review-field textarea { resize: vertical; min-height: 120px; }
.review-error { display: block; color: var(--pink); font-size: 13px; margin-top: 6px; font-weight: 600; }
.review-stars { display: flex; gap: 6px; }
.review-star { background: none; border: none; font-size: 32px; line-height: 1; color: var(--line); cursor: pointer; padding: 0; transition: color 0.12s ease, transform 0.12s ease; }
.review-star:hover { transform: scale(1.12); }
.review-star.is-active { color: var(--yellow); }
.review-rating-feedback { margin-top: 10px; font-size: 14px; line-height: 1.5; padding: 10px 14px; border-radius: var(--radius-sm); display: none; }
.review-rating-feedback:empty { display: none; }
.review-rating-feedback.is-good, .review-rating-feedback.is-bad { display: block; }
.review-rating-feedback.is-good { background: #EAF9F0; color: #1F7A4D; }
.review-rating-feedback.is-bad { background: #FDECF2; color: #A5325A; }
.review-rating-feedback em { font-style: normal; opacity: 0.8; }

/* ---------- Ulasan tulisan langsung dari pelanggan (beda dari screenshot
   Google Business — lihat .testi-shot). Desain kartunya sengaja dibuat
   mirip kartu ulasan Google (avatar+nama+bintang di atas, sudut kartu
   tumpul) — tampil satu section dengan judul yang sama (bukan label
   terpisah), ditaruh di atas grid screenshot Google di halaman beranda. */
/* Kolomnya sengaja disamakan persis dengan .testi-grid (screenshot Google)
   di bawahnya — 3 kolom desktop, 2 tablet, 1 mobile, plus max-width 65%
   yang sama di desktop (yang mana juga meniru .guarantee-grid di Tentang
   Kami) — supaya lebar tiap kartu ulasan terasa seragam, apa pun jenisnya
   (gambar atau teks). */
.testi-text-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (min-width: 861px) { .testi-text-grid { max-width: 65%; margin-left: auto; margin-right: auto; } }
@media (max-width: 860px) { .testi-text-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .testi-text-grid { grid-template-columns: 1fr; padding: 0 12px; } }
.testi-text-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: var(--shadow-sm); }
.testi-text-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.testi-text-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--surface-muted); color: var(--ink-faint); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.testi-text-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-text-header-info { min-width: 0; padding-top: 2px; }
.testi-text-name-text { display: block; font-weight: 700; color: var(--navy); font-size: 14.5px; }
.testi-text-name-image { display: block; max-width: 100%; max-height: 34px; width: auto; margin-bottom: 6px; }
.testi-text-stars { color: var(--star-gold); font-size: 13px; letter-spacing: 1.5px; }
.testi-text-card p { color: var(--ink); font-size: 13.2px; line-height: 1.6; margin-bottom: 12px; }
.testi-text-media { display: flex; gap: 8px; margin-bottom: 12px; }
.testi-text-media img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.testi-text-video { display: block; width: 100%; max-height: 220px; border-radius: 10px; margin-bottom: 12px; background: #000; }

/* ---------- Pop-up Pengumuman Beranda (mis. libur Idul Fitri/Idul Adha) ---------- */
.announce-popup-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(27, 36, 56, 0);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  transition: background 0.25s ease;
}
.announce-popup-overlay[hidden] { display: none; }
.announce-popup-overlay.is-visible { background: rgba(27, 36, 56, 0.55); }
.announce-popup {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-width: 320px; width: 100%; padding: 24px 20px; text-align: center;
  opacity: 0; transform: translateY(14px) scale(0.96);
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.announce-popup-overlay.is-visible .announce-popup { opacity: 1; transform: translateY(0) scale(1); }
.announce-popup .icon {
  width: 52px; height: 52px; border-radius: 50%; background: #FFF6D6; color: #8A6D00;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  transform-origin: 50% 0%;
}
.announce-popup .icon svg { width: 26px; height: 26px; }
.announce-popup-overlay.is-visible .icon--bell { animation: bellShake 0.7s ease-in-out 0.35s 3; }
@keyframes bellShake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-7deg); }
  75% { transform: rotate(4deg); }
  90% { transform: rotate(-2deg); }
}
.announce-popup h2 { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); margin: 0 0 10px; }
.announce-popup-date {
  display: inline-block; background: var(--surface-muted); color: var(--navy);
  font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 999px; margin: 0 0 16px;
}
.announce-popup p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; margin: 0 0 22px; white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
  .announce-popup-overlay, .announce-popup { transition: none; }
  .announce-popup-overlay.is-visible .icon--bell { animation: none; }
}

/* Pita pengumuman melayang — pengingat singkat di bawah layar selama
   pop-up di atas aktif, tetap ada walau pop-up-nya sudah ditutup. */
.announce-banner {
  position: fixed; left: 50%; bottom: 18px; z-index: 350;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-lg);
  max-width: calc(100% - 32px);
}
.announce-banner[hidden] { display: none; }
.announce-banner svg { width: 16px; height: 16px; flex: none; color: var(--yellow); animation: bannerClockPulse 1.6s ease-in-out infinite; }
@keyframes bannerClockPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.65; }
}
.announce-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .announce-banner { font-size: 12px; padding: 9px 14px; }
}
.announce-popup-actions { display: flex; gap: 10px; justify-content: center; }
.announce-popup-actions .btn { width: auto; padding: 12px 14px; font-size: 14.5px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .announce-banner svg { animation: none; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; max-width: none; }
.mt-0 { margin-top: 0; }
.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(--navy); color: #fff;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }