/* ==========================================================================
   Kerangka GAYA DAERAH (dipakai bersama oleh Jawa, Bali, Lombok, dst.)
   Setiap gaya daerah cukup mengisi variabel di bawah pada body.style-<nama>:
     --font-head            huruf judul
     --cream, --cream-2     latar terang
     --cream-rgb            versi r,g,b dari --cream (untuk gradasi hero)
     --orn-pattern          URL pola latar (tile) + --pattern-size
     --orn-line             URL ornamen pembatas judul + --line-w / --line-h
     --orn-icon             URL ornamen besar (gunungan / candi bentar / lumbung) + --icon-w / --icon-h
     --band-bg, --band-mask pita hiasan di bawah header & atas footer
     --why-bg, --why-ink    latar & teks section "Mengapa Harus Kami"
   Ornamen memakai CSS mask sehingga warnanya mengikuti warna tema.
   ========================================================================== */
body.style-regional {
  --radius: 10px; --radius-sm: 8px; --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(60,36,16,.08), 0 1px 3px rgba(60,36,16,.06);
  --shadow: 0 10px 26px -14px rgba(60,36,16,.32), 0 2px 6px rgba(60,36,16,.06);
  --shadow-lg: 0 24px 50px -20px rgba(60,36,16,.42);
  --card-bg: #FFFCF6;
  --pattern-size: 54px;
  --line-w: 168px; --line-h: 28px;
  --icon-w: 210px; --icon-h: 290px;
  --band-h: 7px;
  --band-bg: var(--accent);
  --band-mask: var(--orn-band) repeat-x 0 0 / 14px 14px;
  --why-bg: var(--primary-900);
  --why-ink: #F6EBD3;
  background: var(--cream);
  color: var(--ink);
}

/* ---------- Tipografi ---------- */
.style-regional h1, .style-regional h2, .style-regional h3,
.style-regional .brand-name, .style-regional .pkg-title, .style-regional .why-title,
.style-regional .section-head h2, .style-regional .detail h2.h, .style-regional .cta-band h3,
.style-regional .site-footer h5, .style-regional .svc h4, .style-regional .vm-card h3,
.style-regional .video-title, .style-regional .contact-meta b {
  font-family: var(--font-head); font-weight: 400; letter-spacing: .01em;
}
.style-regional .brand-name { font-size: 24px; }
.style-regional .eyebrow { color: var(--accent-700); letter-spacing: .14em; }

/* ---------- Pola (helper) ---------- */
.style-regional .hero::after,
.style-regional .page-banner::after,
.style-regional .site-footer::before,
.style-regional .why::before {
  content: ""; position: absolute; pointer-events: none;
  background: var(--accent);
  -webkit-mask: var(--orn-pattern) repeat 0 0 / var(--pattern-size) var(--pattern-size);
  mask: var(--orn-pattern) repeat 0 0 / var(--pattern-size) var(--pattern-size);
}

/* ---------- Header + pita hiasan ---------- */
.style-regional .site-header { background: rgba(var(--cream-rgb), .97); border-bottom: 0; }
.style-regional .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--band-h) * -1); height: var(--band-h); pointer-events: none;
  background: var(--band-bg); -webkit-mask: var(--band-mask); mask: var(--band-mask);
}
.style-regional .nav a { color: var(--ink-2); }
.style-regional .nav a.active::after { background: var(--accent); height: 2px; bottom: -13px; }
.style-regional .nav-menu { background: var(--cream); border-color: var(--line); }
.style-regional .drawer-panel { background: var(--cream); }
.style-regional .icon-btn:hover { background: var(--cream-2); }

/* ---------- Hero ---------- */
.style-regional .hero { background: var(--cream); }
.style-regional .hero-bg { z-index: 0; }
.style-regional .hero-bg::after {
  background: linear-gradient(90deg, rgba(var(--cream-rgb), .98) 0%, rgba(var(--cream-rgb), .93) 36%, rgba(var(--cream-rgb), .45) 60%, rgba(var(--cream-rgb), 0) 78%);
}
.style-regional .hero::after { inset: 0 45% 0 0; opacity: .09; z-index: 1; }
.style-regional .hero .container { z-index: 2; }
.style-regional .hero h1 { color: var(--primary-900); font-size: clamp(32px, 5vw, 56px); line-height: 1.12; }
.style-regional .hero h1::after {
  content: ""; display: block; width: var(--line-w); height: var(--line-h); margin-top: 14px; background: var(--accent);
  -webkit-mask: var(--orn-line) no-repeat left center / contain; mask: var(--orn-line) no-repeat left center / contain;
}
.style-regional .hero p.lead { color: var(--ink-2); }
.style-regional .chip { background: rgba(255,252,245,.9); border-color: var(--line); }
.style-regional .search-box { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); background: var(--card-bg); }
.style-regional .search-field { border-color: var(--line); }

/* ---------- Kartu ---------- */
.style-regional .card, .style-regional .pkg, .style-regional .svc, .style-regional .testi,
.style-regional .contact-card, .style-regional .faq, .style-regional .tl, .style-regional .score,
.style-regional .cta-card, .style-regional .filter-card {
  background: var(--card-bg); border-color: var(--line);
}
.style-regional .feature { background: var(--card-bg); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.style-regional .feature-ic { background: var(--cream-2); color: var(--primary); box-shadow: inset 0 0 0 1px var(--line); }
.style-regional .pkg-img::after {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,250,236,.75); border-radius: 6px; pointer-events: none;
}
.style-regional .pkg-title { font-size: 17.5px; line-height: 1.3; }
.style-regional .pkg-price b { color: var(--primary); }
.style-regional .badge-ribbon { background: var(--primary); box-shadow: 0 0 0 2px rgba(255,248,230,.55); }
.style-regional .badge-ribbon.alt { background: var(--accent); color: #2B1D12; }
.style-regional .svc-ic { background: var(--cream-2); color: var(--primary); }
.style-regional .svc h4 { font-size: 16px; color: var(--primary-900); }

/* ---------- Judul section: rata tengah + ornamen ---------- */
.style-regional .section-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.style-regional .section-head h2 { font-size: clamp(25px, 3vw, 34px); }
.style-regional .section-head h2::after {
  content: ""; display: block; width: var(--line-w); height: var(--line-h); margin: 8px auto 2px; background: var(--accent);
  -webkit-mask: var(--orn-line) no-repeat center / contain; mask: var(--orn-line) no-repeat center / contain;
}
.style-regional .section-head p { max-width: 560px; }
.style-regional .detail h2.h { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.style-regional .detail h2.h::before { content: ""; width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); flex: none; }

/* ---------- Mengapa kami ---------- */
.style-regional .why { background: var(--why-bg); color: var(--why-ink); border: 1px solid rgba(var(--accent-rgb), .35); padding: 40px; }
.style-regional .why::before { inset: 0; opacity: .1; }
.style-regional .why::after {
  content: ""; position: absolute; right: 26px; top: 50%; width: var(--icon-w); height: var(--icon-h); transform: translateY(-50%);
  background: var(--accent); opacity: .3; pointer-events: none;
  -webkit-mask: var(--orn-icon) no-repeat center / contain; mask: var(--orn-icon) no-repeat center / contain;
}
.style-regional .why-art, .style-regional .why-script { display: none; }
.style-regional .why-title { color: var(--why-ink); font-size: clamp(24px, 3vw, 32px); }
.style-regional .why .muted { color: var(--why-ink) !important; opacity: .75; }
.style-regional .why-item h4 { color: var(--why-ink); }
.style-regional .why-item p { color: var(--why-ink); opacity: .72; }
.style-regional .why-item .feature-ic { background: rgba(255,255,255,.06); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.style-regional .why-grid, .style-regional .why-grid.many { max-width: calc(100% - var(--icon-w) - 20px); }

/* ---------- Banner halaman ---------- */
.style-regional .page-banner { background: linear-gradient(100deg, var(--primary-900), var(--primary-700)); }
.style-regional .page-banner::after { inset: 0; opacity: .1; }
.style-regional .page-banner .container { z-index: 2; }
.style-regional .page-banner .bg { opacity: .55; }
.style-regional .page-banner h1 { color: #FFF6E3; }

/* ---------- Tombol & elemen ---------- */
.style-regional .btn { border-radius: 8px; }
.style-regional .btn-primary { box-shadow: 0 8px 16px -8px rgba(60,36,16,.6); }
.style-regional .btn-outline { background: transparent; }
.style-regional .pill.on { background: var(--primary); }
.style-regional .price-card { border-top: 4px solid var(--accent); }
.style-regional .price-card .now { color: var(--primary); }
.style-regional .total-row { background: var(--cream-2); }
.style-regional .tl::before { background: var(--accent); box-shadow: 0 0 0 4px var(--cream-2); }
.style-regional .timeline::before { background: var(--line); }
.style-regional .stat-row div { background: var(--cream-2); border: 1px solid var(--line); }
.style-regional .about-img { border: 1px solid var(--line); padding: 8px; background: var(--card-bg); }
.style-regional .about-img img { border-radius: 8px; }
.style-regional .promo-card { background: linear-gradient(135deg, var(--cream-2), var(--card-bg)); border-color: var(--line); }
.style-regional .field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.style-regional .field select, .style-regional .field textarea, .style-regional .input { background: #FFFDF8; border-color: var(--line); }

/* ---------- CTA ---------- */
.style-regional .cta-band { background: linear-gradient(100deg, var(--primary-900), var(--primary-700)); }
.style-regional .cta-band::after {
  content: ""; position: absolute; right: 28%; top: 50%; transform: translateY(-50%); width: calc(var(--icon-w) * .62); height: calc(var(--icon-h) * .62); opacity: .22; background: var(--accent); pointer-events: none;
  -webkit-mask: var(--orn-icon) no-repeat center / contain; mask: var(--orn-icon) no-repeat center / contain;
}

/* ---------- Footer ---------- */
.style-regional .site-footer { position: relative; background: var(--primary-900); border-top: 0; overflow: hidden; }
.style-regional .site-footer::before { inset: 0; opacity: .07; }
.style-regional .site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--band-h) + 3px); pointer-events: none;
  background: var(--band-bg); -webkit-mask: var(--band-mask); mask: var(--band-mask);
}
.style-regional .site-footer .container { position: relative; z-index: 1; }
.style-regional .site-footer h5 { color: var(--accent); font-size: 16px; }
.style-regional .site-footer .brand-mark { color: var(--accent); }
.style-regional .bottom-nav { background: var(--card-bg); border-top-color: var(--line); }

@media (max-width: 980px) {
  .style-regional .why { padding: 26px 20px; }
  .style-regional .why::after { width: calc(var(--icon-w) * .62); height: calc(var(--icon-h) * .62); right: -20px; top: auto; bottom: -10px; transform: none; opacity: .18; }
  .style-regional .why-grid, .style-regional .why-grid.many { max-width: none; }
  .style-regional .cta-band::after { display: none; }
}
@media (max-width: 860px) {
  .style-regional .hero::after { inset: 0; opacity: .06; }
  .style-regional .hero h1::after { width: calc(var(--line-w) * .78); height: calc(var(--line-h) * .78); margin-top: 10px; }
  .style-regional .section-head h2::after { width: calc(var(--line-w) * .78); height: calc(var(--line-h) * .78); }
}
.style-regional .video-title small, .style-regional .contact-meta small { font-family: var(--font); letter-spacing: 0; }