/* Halaman area (layanan x wilayah) - dipindah apa adanya dari <style> halaman HTML lama (identik di 66 halaman).
   Foto hero bisa ditimpa per halaman lewat style inline di single-lokasi.php. */

.loc-hero{
        position:relative;
        background-color:#2b2318;
        background-image:
          linear-gradient(to bottom, rgba(20,15,8,.72), rgba(20,15,8,.6)),
          url("../images/Kerokan-Guasha.jpg");
        background-position:center 30%;
        background-repeat:no-repeat;
        background-size:cover;
        padding:calc(var(--ks-topbar-h,40px) + var(--ks-nav-py,8px)*2 + var(--ks-logo-h,48px) + 56px) 0 56px;
      }
      @media (min-width:1024px){
        .loc-hero{ padding:calc(var(--ks-topbar-h,44px) + var(--ks-nav-py,12px)*2 + var(--ks-logo-h,60px) + 64px) 0 64px; }
      }
      .loc-hero__container{ max-width:1140px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }
      .loc-breadcrumb{ font-family:"Jost",sans-serif; font-size:13px; color:rgba(255,255,255,.7); margin-bottom:20px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
      .loc-breadcrumb a{ color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s ease; }
      .loc-breadcrumb a:hover{ color:var(--ks-primary,#D89B31); }
      .loc-breadcrumb__sep{ color:rgba(255,255,255,.35); }
      .loc-breadcrumb__current{ color:#fff; font-weight:600; }

      .loc-hero__title{
        display:flex; align-items:center; gap:12px;
        font-family:"EB Garamond",serif; font-weight:500;
        font-size:42px; color:#fff; margin:0 0 16px;
        text-shadow:0 2px 18px rgba(0,0,0,.35);
      }
      .loc-hero__pin{ width:28px; height:28px; flex-shrink:0; color:var(--ks-primary,#D89B31); }
      .loc-hero__desc{
        font-family:"Jost",sans-serif; font-weight:300; font-size:15.5px;
        color:rgba(255,255,255,.85); max-width:680px; margin:0;
      }
      .loc-hero__desc strong{ font-weight:600; color:#fff; }

      .loc-body{ background:#fff; padding:56px 0 90px; }
      .loc-body__container{
        max-width:1140px; margin:0 auto; padding:0 20px;
        display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start;
      }

      .loc-content h2{
        font-family:"EB Garamond",serif; font-weight:500; font-size:26px;
        color:#1a1a1a; margin:0 0 18px;
      }
      .loc-content .loc-section-title{ margin-top:44px; }
      .loc-content p{
        font-family:"Jost",sans-serif; font-weight:300; font-size:15px;
        line-height:1.8; color:#5c5c52; margin:0 0 16px;
      }
      .loc-content p a{ color:var(--ks-primary-ink,#9a6410); font-weight:500; text-decoration:underline; text-decoration-color:#e6cd9a; text-underline-offset:2px; }
      .loc-content p a:hover{ color:var(--ks-primary,#D89B31); }

      /* Foto layanan di atas judul "Area yang Kami Layani" (banner tinggi, cocok untuk foto portrait). */
      .loc-area-photo{ width:100%; max-width:400px; margin:36px auto 0; border-radius:12px; overflow:hidden; aspect-ratio:2/3; background:#efe7d6; box-shadow:0 6px 24px rgba(43,35,24,.12); }
      .loc-area-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
      .loc-area-photo + .loc-section-title{ margin-top:36px; }
      .loc-area-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
      .loc-area-pill{
        display:flex; align-items:center; gap:10px;
        font-family:"Jost",sans-serif; font-weight:500; font-size:14px; color:#4a4a42;
        background:#FBF9F4; border:1px solid #ece4d3; border-radius:8px;
        padding:13px 16px; text-decoration:none; transition:border-color .2s ease, background .2s ease, color .2s ease;
      }
      .loc-area-pill:hover{ border-color:var(--ks-primary,#D89B31); background:#fdf6e8; color:var(--ks-primary-ink,#9a6410); }
      .loc-area-pill svg{ width:16px; height:16px; flex-shrink:0; color:var(--ks-primary,#D89B31); }

      .loc-price-card{
        margin-top:18px; background:#FBF9F4; border:1px solid #ece4d3; border-radius:10px;
        padding:8px 24px;
      }
      .loc-price-row{
        display:flex; align-items:center; justify-content:space-between; gap:20px;
        padding:20px 0; border-bottom:1px solid #f0ece0;
      }
      .loc-price-row:last-of-type{ border-bottom:none; }
      .loc-price-name{ display:flex; flex-direction:column; gap:4px; }
      .loc-price-title{ font-family:"EB Garamond",serif; font-weight:500; font-size:19px; color:#1a1a1a; }
      .loc-price-desc{ font-family:"Jost",sans-serif; font-weight:300; font-size:13px; color:#6b6b60; max-width:420px; }
      .loc-price-amount{
        font-family:"Jost",sans-serif; font-weight:600; font-size:17px;
        color:var(--ks-primary-ink,#9a6410); white-space:nowrap;
      }
      .loc-price-note{
        font-family:"Jost",sans-serif; font-weight:300; font-style:italic; font-size:12.5px;
        color:#8a8a75; margin:14px 0 20px;
      }
      .loc-price-cta{ display:inline-flex; width:auto; margin:0 0 20px; padding:11px 26px; }
      @media (max-width:600px){
        .loc-price-row{ flex-direction:column; align-items:flex-start; gap:6px; }
      }

      .loc-sidebar{ display:flex; flex-direction:column; gap:16px; position:sticky; top:calc(var(--ks-topbar-h,40px) + var(--ks-nav-py,8px)*2 + var(--ks-logo-h,48px) + 20px); }
      .loc-card{ background:#FBF9F4; border:1px solid #ece4d3; border-radius:10px; padding:22px; }
      .loc-card h3{ font-family:"EB Garamond",serif; font-weight:500; font-size:18px; color:#1a1a1a; margin:0 0 8px; }
      .loc-card p{ font-family:"Jost",sans-serif; font-weight:300; font-size:13.5px; color:#6b6b60; margin:0 0 14px; line-height:1.6; }
      .loc-btn-primary{
        display:flex; align-items:center; justify-content:center; gap:8px;
        background:var(--ks-gradient, linear-gradient(to right,#B8791A,#D89B31));
        color:#fff; font-family:"Jost",sans-serif; font-weight:600; font-size:14px;
        padding:12px 16px; border-radius:6px; text-decoration:none;
      }
      .loc-btn-primary:hover{ opacity:.9; }
      .loc-btn-outline{
        display:block; text-align:center;
        border:1px solid #d8d0bc; color:#4a4a42;
        font-family:"Jost",sans-serif; font-weight:600; font-size:13.5px;
        padding:11px 16px; border-radius:6px; text-decoration:none;
      }
      .loc-btn-outline:hover{ border-color:var(--ks-primary,#D89B31); color:var(--ks-primary-ink,#9a6410); }

      /* ===== Alasan Memilih Kami: auto slider + swipe mobile ===== */
      .loc-reasons-card{ overflow:hidden; min-width:0; width:100%; box-sizing:border-box; }
      .loc-reasons-slider{ position:relative; overflow:hidden; width:100%; max-width:100%; min-width:0; box-sizing:border-box; touch-action:pan-y; }
      .loc-reasons-track{ display:flex; width:100%; max-width:100%; min-width:0; transition:transform .5s ease; will-change:transform; }
      .loc-reason-slide{ flex:0 0 100%; width:100%; min-width:100%; max-width:100%; box-sizing:border-box; display:flex; align-items:flex-start; gap:13px; padding:3px 2px 4px; }
      .loc-reason-icon{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(216,155,49,.12); color:var(--ks-primary,#D89B31); }
      .loc-reason-icon svg{ width:21px; height:21px; }
      .loc-reason-slide h4{ margin:0 0 5px; font-family:"Jost",sans-serif; font-size:15px; font-weight:600; color:#3f3d35; }
      .loc-reason-slide p{ margin:0; font-family:"Jost",sans-serif; font-size:13.5px; line-height:1.6; font-weight:300; color:#5c5c52; }
      .loc-reasons-dots{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:13px; }
      .loc-reasons-dots button{ width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#d8d0bc; cursor:pointer; transition:all .25s ease; }
      .loc-reasons-dots button.is-active{ width:18px; border-radius:8px; background:var(--ks-primary,#D89B31); }
      @media (max-width:600px){
        .loc-body__container{ padding-left:16px; padding-right:16px; }
        .loc-card{ min-width:0; max-width:100%; }
        .loc-reasons-track{ transform:translate3d(0,0,0); }
        .loc-reason-slide > div:last-child{ min-width:0; overflow-wrap:anywhere; }
      }
      @media (prefers-reduced-motion:reduce){ .loc-reasons-track{ transition:none; } }

      .loc-service-list{ list-style:none; margin:0 0 14px; padding:0; }
      .loc-service-list li{
        font-family:"Jost",sans-serif; font-weight:300; font-size:13.5px; color:#5c5c52;
        padding:5px 0 5px 16px; position:relative;
      }
      .loc-service-list li::before{ content:"•"; color:var(--ks-primary,#D89B31); position:absolute; left:0; }

      @media (max-width:1023px){
        .loc-body__container{ grid-template-columns:minmax(0,1fr); width:100%; max-width:1140px; box-sizing:border-box; }
        .loc-content, .loc-sidebar{ min-width:0; width:100%; max-width:100%; box-sizing:border-box; }
        .loc-sidebar{ position:static; }
        .loc-area-grid, .loc-landmark-grid{ grid-template-columns:1fr; }
        .loc-area-photo{ max-width:none; aspect-ratio:4/5; }
        .loc-hero__title{ font-size:30px; }
      }
/* ==========================================================================
   Theme overrides - Nixe Massage
   File ini untuk penyesuaian di LUAR CSS asli (assets/css/style-0xx.css dst),
   supaya file asli nggak diutak-atik. Dienqueue PALING TERAKHIR di
   functions.php biar bisa nimpa kalau perlu.
   ========================================================================== */

/* --------------------------------------------------------------------
   1) Tombol WhatsApp mengambang (pengganti plugin Join.chat).
      Situs asli pakai plugin ini; kita bikin native di tema biar nggak
      tergantung plugin pihak ketiga. Ruang di footer (padding-bottom
      100px mobile / 48px desktop) MEMANG sengaja disisain buat tombol ini.
   -------------------------------------------------------------------- */
.ks-float-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: #25D366;
	border-radius: 50%;
	box-shadow: 1px 6px 24px 0 rgba(37, 211, 102, .35);
	transition: background-color .2s linear, transform .2s ease;
}
.ks-float-wa:hover,
.ks-float-wa:focus-visible {
	background: #20BA58;
	transform: scale(1.05);
}
.ks-float-wa svg {
	width: 30px;
	height: 30px;
	color: #fff;
}
@media (max-width: 767.98px) {
	.ks-float-wa { right: 16px; bottom: 16px; width: 54px; height: 54px; }
	.ks-float-wa svg { width: 27px; height: 27px; }
}

/* --------------------------------------------------------------------
   2) Safety-net header: nav asli didesain transparan (mengambang di atas
      foto hero gelap). Default-nya sekarang dibikin SOLID (background
      putih, teks gelap) supaya tetap kebaca di halaman yang BELUM/TIDAK
      punya hero (index.php fallback, 404, hasil pencarian).

      Halaman yang punya hero asli (Home, detail layanan, halaman area -
      dibuat di Batch 3-6) menambahkan class body.has-hero supaya nav-nya
      kembali transparan/mengambang seperti desain awal.
   -------------------------------------------------------------------- */
body:not(.has-hero) .site-nav,
body:not(.has-hero) .site-topbar { background: #fff !important; }
body:not(.has-hero) .site-nav { border-bottom: 1px solid var(--ks-line); }
body:not(.has-hero) .site-topbar { color: var(--ks-ink) !important; }
body:not(.has-hero) .site-topbar__wa-icon { color: #25D366; }
body:not(.has-hero) .site-nav__burger { color: var(--ks-ink) !important; }
body:not(.has-hero) .site-nav__link { color: var(--ks-ink) !important; }
body:not(.has-hero) .site-nav__logo .is-white { opacity: 0; }
body:not(.has-hero) .site-nav__logo .is-color { opacity: 1; }

/* --------------------------------------------------------------------
   3) Hilangkan border/outline hitam saat link, tombol, atau tab diklik
      (fokus). Sebelumnya berasal dari bootstrap "button:focus" dan
      outline bawaan browser.
   -------------------------------------------------------------------- */
a,
a:focus,
a:active,
a:focus-visible,
button,
button:focus,
button:active,
button:focus-visible,
summary,
[role="tab"],
[role="button"],
[tabindex],
[tabindex]:focus,
[tabindex]:focus-visible,
.elementor-button:focus,
.elementor-button:focus-visible,
.elementor-tab-title:focus,
.elementor-tab-title:focus-visible {
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
[tabindex]:focus-visible {
	box-shadow: none;
}