/* ==========================================================
   HOMEPAGE.CSS — MAS
   Entry-point CSS gabungan khusus homepage (is_front_page()).
   Dibuat: 2026-08-19. Diperbarui: 2026-09-05.

   PERUBAHAN 2026-09-05:
   - Widget "Cek Ketersediaan Terapis" versi lama (.order-box,
     berasal dari booking-homepage-style.css) DIGANTI TOTAL oleh
     widget baru (.mas-card ... #waBtnHome) yang sebelumnya
     memakai <style> inline terpisah di halaman.
   - Semua rules lama untuk .order-box, #kodeWrapper, #waBtn,
     .button-group, #linkKotaBtn, #priceListBtn, .sr-only sudah
     DIHAPUS karena HTML lamanya sudah tidak dipakai lagi
     (mati / tidak ada elemen yang mereferensikannya).
   - Variable warna widget baru (yang di draft aslinya bernama
     --primary-1, --secondary-1, dst) DIGANTI memakai variable
     yang SUDAH ADA di :root file ini / di city-section, supaya
     satu sumber warna brand, tidak dobel deklarasi:
       --primary-1  (#FF7F00) -> var(--mas-primary-orange)
       --primary-2  (#0080FF) -> var(--mas-blue)          [dari city-section]
       --secondary-1(#FE5900) -> var(--mas-secondary-orange)
       --secondary-2(#005BFE) -> tidak dipakai di rules manapun, dihapus
       --tertiary-1 (#BF5000) -> var(--mas-orange-dark)   [dari city-section]
       --tertiary-2 (#1A4DB3) -> var(--mas-tertiary-blue)
       --bg-hard    (#FFDEAA) -> var(--mas-bg-hard)   (nama & nilai sama persis)
       --bg-soft    (#F5ECDB) -> var(--mas-bg-soft)   (nama & nilai sama persis)
       --green-wa   (#25D366) -> var(--green-wa)      (nama & nilai sama persis)
       --text       (#2d2d2d) -> var(--text-dark)     [dekat #3d2a1c, sama peran]
     Variable lain yang murni detail UI komponen ini saja
     (muted, border, danger, radius, shadow, white) TETAP
     dideklarasikan lokal di dalam scope .mas-card, karena
     tidak overlap dengan token brand manapun yang sudah ada
     -> tidak menambah polusi :root global.
   - --green-wa-hover dihapus dari :root karena sudah tidak
     dipakai di mana pun (widget baru pakai filter:brightness()
     untuk efek hover, bukan warna hover terpisah).

   Sumber asli (urutan sama seperti urutan enqueue lama):
   1. css/components/testimoni.css
   2. [DIGANTI] dulu booking-homepage-style.css -> sekarang mas-card
   3. css/components/city-section.css
   4. css/components/services-mas-home.css
   5. css/components/tanya-admin-home.css

   File-file sumber di atas sempat dipertahankan sebagai arsip usai
   konsolidasi, tapi sudah dihapus sepenuhnya dari repo -- isinya
   100% sudah tergabung di sini dan tidak ada lagi yang di-enqueue
   dari lokasi lama.
   Kalau mau edit style homepage, edit di file INI.
   ========================================================== */

/* ---------- [1/5] dari components/testimoni.css ---------- */
/* =========================================================
   SECTION: TESTIMONI - MAS (Modular CSS Component)
   File: css/components/testimoni.css
   ========================================================= */

.mas-home-testimonial-section {
  --mas-primary: #FF7F00;
  --mas-secondary: #FE5900;
  --mas-tertiary: #BF5000;
  --mas-bg-hard: #FFDEAA;
  --mas-bg-soft: #F5ECDB;
  --mas-text: #2A1A0A;
  --mas-card-bg: #ffffff;
  --mas-border: rgba(191, 80, 0, 0.18);
  --mas-blue: #3981d6;
  --mas-blue-dark: #1A4DB3;

  background: linear-gradient(180deg, var(--mas-bg-soft) 0%, #ffffff 100%);
  padding: 42px 16px 48px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--mas-text);
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  .mas-home-testimonial-section {
    --mas-primary: #0080FF;
    --mas-secondary: #005BFE;
    --mas-tertiary: #1A4DB3;
    --mas-bg-hard: #AACEFF;
    --mas-bg-soft: #10192b;
    --mas-text: #eef4ff;
    --mas-card-bg: #162238;
    --mas-border: rgba(170, 206, 255, 0.2);
    background: linear-gradient(180deg, #0c1322 0%, #10192b 100%);
  }
}

.mas-home-testimonial-section *, .mas-home-testimonial-section *::before, .mas-home-testimonial-section *::after { 
  box-sizing: border-box; 
}

.mas-home-testimonial-container {
  max-width: 750px;
  margin: 0 auto;
}

.mas-home-testimonial-header h2 { 
  color: var(--mas-text); 
  font-size: clamp(1.35rem, 3vw, 1.75rem); 
  font-weight: 800; 
  margin: 0 0 6px 0; 
  letter-spacing: -0.3px;
}

.mas-home-testimonial-header h2 span {
  color: var(--mas-primary);
}

.mas-home-testimonial-header p { 
  color: var(--mas-text); 
  opacity: 0.85;
  font-weight: 600; 
  font-size: 0.88rem; 
  max-width: 620px; 
  margin: 0 auto 20px; 
  line-height: 1.5; 
}

.mas-home-testimonial-slider-wrap { 
  position: relative; 
  overflow: hidden; 
  border-radius: 16px;
  touch-action: pan-y pinch-zoom;
}

.mas-home-testimonial-track { 
  display: flex; 
  transition: transform 0.45s cubic-bezier(.4,0,.2,1); 
}

.mas-home-testimonial-card {
  min-width: 100%; 
  background: var(--mas-card-bg); 
  border-radius: 16px; 
  padding: 22px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); 
  text-align: left; 
  border: 1px solid var(--mas-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mas-home-testimonial-card.mas-home-testimonial-card--odd { border-top: 4px solid var(--mas-primary); }
.mas-home-testimonial-card.mas-home-testimonial-card--even { border-top: 4px solid var(--mas-blue); }

.mas-home-testimonial-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mas-home-testimonial-badge { 
  display: inline-block; 
  font-size: 11px; 
  font-weight: 700; 
  padding: 3px 10px; 
  border-radius: 20px; 
}
.mas-home-testimonial-badge.mas-home-testimonial-badge--orange { background: var(--mas-bg-hard); color: var(--mas-tertiary); }
.mas-home-testimonial-badge.mas-home-testimonial-badge--blue { background: #ddeeff; color: var(--mas-blue-dark); }

.mas-home-testimonial-stars {
  color: #ffb400;
  font-size: 13px;
  letter-spacing: 1px;
}

.mas-home-testimonial-text { 
  font-style: italic; 
  color: var(--mas-text); 
  font-size: 0.9rem; 
  line-height: 1.6; 
  margin: 0 0 16px 0; 
  opacity: 0.9;
}

.mas-home-testimonial-author { 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  border-top: 1px solid var(--mas-border); 
  padding-top: 12px; 
}

.mas-home-testimonial-author-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mas-home-testimonial-avatar { 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  color: #fff; 
  font-weight: 700; 
  font-size: 12px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
}

.mas-home-testimonial-name { font-weight: 700; color: var(--mas-text); font-size: 13px; margin: 0; }
.mas-home-testimonial-loc { font-size: 11.5px; opacity: 0.75; margin: 0; }
.mas-home-testimonial-date { font-size: 11px; opacity: 0.6; font-weight: 600; white-space: nowrap; }

.mas-home-testimonial-nav { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  margin-top: 16px; 
}

.mas-home-testimonial-btn { 
  background: var(--mas-card-bg); 
  border: 1.5px solid var(--mas-primary); 
  color: var(--mas-primary); 
  width: 36px; 
  height: 36px; 
  border-radius: 50%; 
  font-size: 16px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: 0.2s; 
  flex-shrink: 0; 
  padding: 0; 
}
.mas-home-testimonial-btn:hover { background: var(--mas-primary); color: #fff; }

.mas-home-testimonial-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
/* Target sentuh diperbesar ke 24x24px (min. rekomendasi WCAG) tanpa mengubah
   tampilan visual dot yang tetap kecil, lewat pseudo-element ::before di tengah. */
.mas-home-testimonial-dot { width: 24px; height: 24px; border-radius: 50%; background: transparent; border: none; cursor: pointer; padding: 0; position: relative; }
.mas-home-testimonial-dot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mas-bg-hard);
  transition: 0.2s;
}
.mas-home-testimonial-dot.mas-home-testimonial-dot--active::before { background: var(--mas-primary); transform: translate(-50%, -50%) scale(1.25); }

.mas-home-testimonial-counter { font-size: 11.5px; opacity: 0.7; margin-top: 8px; font-weight: 600; }

/* MOBILE COMPACT */
@media (max-width: 600px) {
  .mas-home-testimonial-section { padding: 28px 12px 36px; }
  .mas-home-testimonial-header p { font-size: 0.82rem; margin-bottom: 14px; }
  .mas-home-testimonial-card { padding: 16px 14px; border-radius: 12px; }
  .mas-home-testimonial-text { font-size: 0.82rem; line-height: 1.5; margin-bottom: 12px; }
  .mas-home-testimonial-avatar { width: 32px; height: 32px; font-size: 11px; }
  .mas-home-testimonial-name { font-size: 12.5px; }
  .mas-home-testimonial-loc { font-size: 11px; }
  .mas-home-testimonial-date { font-size: 10px; }
  .mas-home-testimonial-nav { margin-top: 12px; gap: 10px; }
  .mas-home-testimonial-btn { width: 32px; height: 32px; font-size: 14px; }
  .mas-home-testimonial-dot::before { width: 7px; height: 7px; }
}

/* ---------- [2/5] WIDGET "CEK KETERSEDIAAN TERAPIS" ----------
   DIPINDAH 2026-09-14 ke css/components/mas-home-booking-availability.css
   (file mandiri, tidak lagi terikat halaman) karena shortcode
   [mas_booking_availability_home] sudah TIDAK dipakai lagi di
   homepage (sudah digantikan booking-popup). Kalau butuh style
   widget ini, edit di file barunya, bukan di sini. */

/* ---------- [3/5] dari components/city-section.css ---------- */
/* ==========================================================
   MASSAGE ARMY SPA - CITY SECTION COMPONENT
   ========================================================== */

/* :root di bawah ini KHUSUS HOMEPAGE (is_front_page), sengaja terpisah
   dari css/root-colors.css. Untuk warna global lihat file itu.
   Sebagian juga dipakai ulang oleh widget .mas-card di atas
   (--mas-blue, --mas-blue-bright, --mas-orange-dark). */
:root {
  --mas-orange: #FF7F00;
  --mas-orange-bright: #FE5900;
  --mas-orange-dark: #BF5000;
  --mas-blue: #0080FF;
  --mas-blue-bright: #005BFE;
  --mas-blue-dark: #1A4DB3;
  --mas-bg-warm: #FFDEAA;
  --mas-bg-cool: #AACEFF;
  --mas-soft-warm: #F5ECDB;
  --mas-soft-cool: #DBE9F5;
  --mas-text-dark: #2C3E50;
}

.mas-home-city-section {
  padding: 60px 16px;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

.mas-home-city-container {
  max-width: 1140px;
  margin: auto;
}

/* HEADER BOX */
.mas-home-city-header-box {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid rgba(0, 128, 255, 0.1);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  max-width: 750px;
  margin: 0 auto 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.mas-home-city-badge {
  display: inline-block;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--mas-orange), var(--mas-orange-bright));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  box-shadow: 0 3px 8px rgba(255, 127, 0, 0.2);
}

.mas-home-city-title {
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 800;
  color: var(--mas-blue-dark);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  line-height: 1.3;
}

.mas-home-city-title span {
  color: var(--mas-orange);
}

.mas-home-city-subtitle {
  max-width: 600px;
  margin: 0 auto;
  color: #64748B;
  line-height: 1.6;
  font-size: 14.5px;
}

/* GRID KOTA */
.mas-home-city-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

@media (max-width: 1024px) {
  .mas-home-city-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

@media (max-width: 768px) {
  .mas-home-city-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

@media (max-width: 480px) {
  .mas-home-city-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.mas-home-city-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 14px;
}

.mas-home-city-divider span {
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--mas-text-dark);
}

.mas-home-city-divider::before,
.mas-home-city-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 128, 255, 0.15);
}

.mas-home-city-grid .mas-home-city-card--hidden {
  display: none !important;
}

/* CARD KOTA */
.mas-home-city-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(0, 128, 255, 0.08);
  border-radius: 14px;
  padding: 18px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}

.mas-home-city-card:hover {
  transform: translateY(-4px);
  border-color: var(--mas-blue);
  box-shadow: 0 8px 20px rgba(0, 128, 255, 0.12);
  background: #ffffff;
}

.mas-home-city-icon-wrap {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 128, 255, 0.06);
  color: var(--mas-blue);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.mas-home-city-icon-wrap svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mas-home-city-card:hover .mas-home-city-icon-wrap {
  background: linear-gradient(135deg, var(--mas-orange), var(--mas-orange-bright));
  color: #ffffff;
  transform: scale(1.05);
}

.mas-home-city-name {
  color: var(--mas-text-dark);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}

/* TOMBOL TOGGLE */
.mas-home-city-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px auto 0 !important;
  background: var(--mas-blue-bright);
  color: #fff;
  border: none;
  text-decoration: none;
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 6px 18px rgba(0, 91, 254, 0.2);
  transition: all 0.25s ease;
  position: relative;
  z-index: 1;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.mas-home-city-toggle:hover {
  background: var(--mas-orange);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 128, 255, 0.2);
}

.mas-home-city-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

/* FOOTER BOX */
.mas-home-city-footer-box {
  text-align: center;
  margin-top: 36px;
  position: relative;
  z-index: 1;
}

.mas-home-city-footer-box a {
  display: inline-block;
  background: linear-gradient(90deg, var(--mas-blue), var(--mas-orange-bright));
  color: #fff;
  text-decoration: none;
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 6px 18px rgba(0, 91, 254, 0.2);
  transition: all 0.25s ease;
  position: relative;
  z-index: 1;
}

.mas-home-city-footer-box a:hover {
  background: linear-gradient(90deg, var(--mas-orange), var(--mas-blue-bright));
  color: #fff; !important;
  box-shadow: 0 6px 18px rgba(255, 127, 0, 0.3);
  transform: translateY(-2px);
}

/* OPTIMASI MOBILE */
@media (max-width: 600px) {
  .mas-home-city-section { padding: 30px 12px; }
  .mas-home-city-header-box { padding: 20px 14px; border-radius: 14px; margin-bottom: 20px; }
  .mas-home-city-badge { font-size: 10px; padding: 4px 12px; margin-bottom: 8px; }
  .mas-home-city-title { font-size: 1.25rem; margin-bottom: 6px; }
  .mas-home-city-subtitle { font-size: 12px; line-height: 1.5; }

  .mas-home-city-card {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 10px;
    text-align: left;
  }

  .mas-home-city-icon-wrap { width: 30px; height: 30px; border-radius: 8px; }
  .mas-home-city-icon-wrap svg { width: 16px; height: 16px; }
  .mas-home-city-name { font-size: 12.5px; }
  .mas-home-city-divider { margin: 16px 0 10px; }
  .mas-home-city-divider span { font-size: 12px; }
  .mas-home-city-toggle { padding: 8px 18px; font-size: 12px; margin-top: 14px; }
  .mas-home-city-footer-box { margin-top: 24px; }
  .mas-home-city-footer-box a { padding: 10px 24px; font-size: 12.5px; width: 100%; box-sizing: border-box; }
}

/* ---------- [4/5] LAYANAN 3 KARTU — DIPINDAH KE ARSIP (2026-09-26) ----------
   Section "SERVICES HOMEPAGE (CLEAN 3 CARDS)" sudah tidak dipakai lagi,
   digantikan shortcode [mas_service_price_list]. Kode CSS lengkapnya
   dipindah ke css/_archive/mas-home-services-3cards-ARSIP.css supaya
   tidak lagi ikut ter-load di halaman aktif, tapi tetap disimpan untuk
   referensi. Jangan taruh ulang kode ini di sini tanpa rename prefix
   dulu (lihat catatan lengkap di file arsipnya). */

/* ---------- [5/5] dari components/tanya-admin-home.css ---------- */
/* ==========================================================
   CONTAINER SILAHKAN TANYA ADMIN — KHUSUS HOMEPAGE
   (FIXED & AMAN TANPA BOCOR)
   File ini HANYA di-enqueue saat is_front_page() true.
   Lihat inc/scripts.php -> mas_enqueue_styles()
   ========================================================== */

/* 1. Container Utama */
.mas-tanya-admin-home {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100vh !important;
    padding-top: 100px;
    padding-bottom: 100px;
    background: #f5ecdb;

    /* Trik agar background fixed di dalam section ini saja */
    clip-path: inset(0 0 0 0);
}

/* 2. Pseudo element pembawa gambar */
.mas-tanya-admin-home::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;

    /* Gambar Desktop — Homepage */
    background: url("https://massagearmyspa.com/wp-content/uploads/2026/07/Desktop-Tanya-Admin.avif") no-repeat center center / cover !important;
}

/* 3. Tampilan Mobile (<= 1100px) */
@media (max-width: 1100px) {
    .mas-tanya-admin-home {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .mas-tanya-admin-home::before {
        /* Gambar Mobile — Homepage */
        background: url("https://massagearmyspa.com/wp-content/uploads/2026/07/Mobile-Tanya-Admin.avif") no-repeat center center / contain !important;
        background-color: #f5ecdb !important;
    }
}