:root {
  --navy: #18243A; --navy-deep: #111B2C;
  --gold: #A17A28; --gold-2: #C5A04A; --gold-3: #DCC789;
  --cream: #F8F3E5; --off: #FCFAF4; --white: #fff;
  --text: #303847; --muted: #6B7280; --border: #E4D8B9;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px; --radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--off); color: var(--text); font: 400 1rem/1.7 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 200; }
.skip-link:focus { left: 8px; }
.icon { flex: none; vertical-align: middle; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* Top bar */
.topbar { background: var(--navy); color: #fff; font-size: .82rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--gold-3); }
.topbar .icon { color: var(--gold-2); }
.topbar-left { display: flex; gap: 22px; flex-wrap: wrap; }

/* Header */
.site-header { background: var(--cream); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-logo, .custom-logo { width: 64px; height: 64px; object-fit: contain; }
.brand .name { font-family: var(--serif); font-weight: 700; font-size: 1.55rem; color: var(--navy); letter-spacing: .14em; line-height: 1; }
.brand .name small { display: block; font-size: .62rem; color: var(--gold); letter-spacing: .38em; margin-top: 5px; font-weight: 600; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.main-nav li { position: relative; }
.main-nav a { display: block; white-space: nowrap; padding: 10px 12px; text-decoration: none; color: var(--navy); font-weight: 500; font-size: .95rem; }
.main-nav ul > li > a { border-radius: 6px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.main-nav ul > li > a:hover, .main-nav ul > li > a:focus-visible, .main-nav ul > li:hover > a, .main-nav ul > li:focus-within > a { background: var(--navy); color: #fff; }
.main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a, .main-nav .current_page_item > a { background: rgba(161,122,40,.16); color: var(--gold); }
.main-nav .current-menu-item > a:hover, .main-nav .current-menu-ancestor > a:hover { background: var(--navy); color: #fff; }
.sub-toggle { background: none; border: 0; color: var(--navy); cursor: pointer; padding: 8px 6px 8px 0; margin-left: -10px; }
.main-nav li:hover > .sub-toggle, .main-nav li:focus-within > .sub-toggle { color: #fff; }
.main-nav li.menu-item-has-children { display: flex; align-items: center; }
.main-nav li.menu-item-has-children > a { padding-right: 14px; }
.main-nav .sub-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 290px; background: #fff; border: 1px solid var(--border); border-top: 2px solid var(--gold-2); padding: 8px 0 !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; box-shadow: 0 10px 24px rgba(17,27,44,.1); z-index: 20; }
.sub-menu a { padding: 10px 20px; font-size: .92rem; border: 0 !important; }
.sub-menu a { text-decoration: none; cursor: pointer; }
.sub-menu a:hover, .sub-menu a:focus-visible { background: var(--navy); color: #fff; }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu, .main-nav li.open > .sub-menu { display: flex; }
.nav-toggle { display: none; background: none; border: 1px solid var(--gold-2); color: var(--navy); border-radius: var(--radius); padding: 9px 11px; cursor: pointer; }
.nav-toggle .ico-close { display: none; }
.menu-open .nav-toggle .ico-close { display: inline; }
.menu-open .nav-toggle .ico-open { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--gold); color: #fff; padding: 14px 28px; border: 2px solid var(--gold); border-radius: var(--radius); font: 600 .95rem var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; min-height: 48px; text-align: center; }
.btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-outline { background: transparent; color: var(--gold); }
.btn-outline:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-outline-dark { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-dark:hover { background: var(--navy); color: #fff; }
.btn-light { background: var(--gold-2); border-color: var(--gold-2); color: var(--navy-deep); }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--navy); }
.nav-cta { padding: 11px 22px; white-space: nowrap; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--gold); text-decoration: none; }
.link-arrow:hover { color: var(--navy); }

/* Sections */
/* Ornamen damask emas tipis di semua halaman: pita motif di tepi tiap seksi (bergantian kiri/kanan),
   memudar ke tengah. Sengaja sangat samar. Ganti motif: assets/orn-damask.webp */
.hero, .section, main.entry, .page-title { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .section::before, main.entry::before, .page-title::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: min(380px, 38%); background: url("../orn-damask.webp") repeat-y left top / 100% auto; opacity: .3; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%); mask-image: linear-gradient(90deg, #000 35%, transparent 100%); }
main > section:nth-of-type(even)::before, main.entry::before, .page-title::before { left: auto; right: 0; transform: scaleX(-1); }
.page-title::before { opacity: .18; filter: brightness(1.5); width: min(320px, 40%); }
@media (max-width: 767px) { .hero::before, .section::before, main.entry::before { opacity: .26; width: 50%; } .page-title::before { opacity: .12; } }
.section { padding: 84px 0; }
.section.soft { background: var(--cream); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head p { color: var(--muted); }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-size: .75rem; font-weight: 600; margin-bottom: 14px; }
.eyebrow.sm { margin-bottom: 6px; font-size: .68rem; }
.eyebrow a { color: var(--gold-3); text-decoration: none; }
.gold-line { display: block; width: 72px; height: 2px; background: var(--gold-2); margin: 22px 0; }
.gold-line.center { margin: 0 auto 22px; }

/* Hero */
.hero { background: var(--cream); padding: 64px 0; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-text p { font-size: 1.1rem; max-width: 540px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--navy); }
.hero-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-fallback { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: radial-gradient(circle at 50% 40%, #223555 0%, var(--navy-deep) 75%); outline: 1px solid var(--gold-2); outline-offset: -14px; }
.hero-fallback img { width: 240px; height: 240px; object-fit: contain; }
.hero-fallback p { color: var(--gold-3); letter-spacing: .28em; text-transform: uppercase; font-size: .75rem; margin: 0; text-align: center; }

/* Values */
.values { background: var(--off); border-bottom: 1px solid var(--border); padding: 20px 0; }
.values-inner { display: flex; align-items: center; justify-content: center; gap: 22px; }
.vline { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2)); }
.vline:last-child { background: linear-gradient(270deg, transparent, var(--gold-2)); }
.values ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; font-family: var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--navy); font-weight: 600; font-size: .95rem; }
.values li { display: inline-flex; align-items: center; gap: 10px; }
.values .icon { color: var(--gold); }
.values .dot { width: 5px; height: 5px; background: var(--gold-2); border-radius: 50%; }

/* Services */
.svc-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.svc-card, .why, .card, .map-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.svc-card { padding: 30px 26px; display: flex; flex-direction: column; align-items: flex-start; transition: border-color .2s, transform .2s; }
.svc-card:hover { border-color: var(--gold-2); transform: translateY(-3px); }
.svc-card p { color: var(--muted); font-size: .95rem; flex: 1; }
.svc-ico { display: inline-flex; width: 56px; height: 56px; border: 1px solid var(--gold-2); border-radius: 50%; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 18px; background: var(--off); flex: none; }
.svc-ico.sm { width: 44px; height: 44px; margin: 0; }
.svc-list { list-style: none; padding: 0; margin: 0 0 18px; width: 100%; }
.svc-list li { padding: 7px 0 7px 18px; border-top: 1px solid #f0e8cf; font-size: .9rem; position: relative; }
.svc-list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; background: var(--gold-2); border-radius: 50%; }
.svc-list.big li { font-size: 1rem; }

/* Why */
.why-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.why { padding: 28px 24px; text-align: center; }
.why .svc-ico { margin-left: auto; margin-right: auto; }
.why p { color: var(--muted); font-size: .95rem; margin: 0; }

/* About */
.about-grid { display: grid; gap: 40px; align-items: center; }
.about-media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--navy); }
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-media .hero-fallback { gap: 12px; padding: 20px; } .about-media .hero-fallback img { flex: none; width: auto; height: 68%; max-width: 90%; object-fit: contain; }
.about-fallback { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gold-2); outline: 1px solid var(--gold-2); outline-offset: -14px; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; counter-reset: s; }
.steps li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; position: relative; }
.step-n { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold-3); font-family: var(--serif); font-weight: 700; align-items: center; justify-content: center; margin-bottom: 14px; }
.steps p { color: var(--muted); margin: 0; font-size: .95rem; }

/* Articles / cards */
.grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.card { padding: 22px; }
.card .thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px; margin-bottom: 14px; display: block; }
.card h3 a { text-decoration: none; }
.meta { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .95rem; }

/* CTA */
.cta { background: var(--navy); color: #e5e7eb; text-align: center; padding: 72px 0; position: relative; }
.cta::before, .cta::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.cta::before { top: 14px; } .cta::after { bottom: 14px; }
.cta h2 { color: #fff; }
.cta p { max-width: 640px; margin: 0 auto 28px; }

/* Contact */
.contact-grid { display: grid; gap: 28px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-content: start; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list strong { display: block; font-family: var(--serif); color: var(--navy); }
.contact-list a { color: var(--text); }
.map-panel { padding: 34px 28px; text-align: center; color: var(--gold); display: flex; flex-direction: column; align-items: center; background: var(--cream); }
.map-panel p { color: var(--text); }

/* Inner pages */
.page-title { background: var(--navy); padding: 56px 0; }
.page-title h1 { color: #fff; margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.entry { padding: 56px 0; }
.entry-content { max-width: 860px; margin: 0 auto; }
.lead { font-size: 1.15rem; max-width: 800px; margin-bottom: 36px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; }
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Footer */
.site-footer { background: var(--navy-deep); color: #cbd5e1; padding: 64px 0 24px; font-size: .93rem; border-top: 3px solid var(--gold); }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
.f-title { font-family: var(--serif); color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: var(--gold-3); }
.f-logo { display: inline-block; width: 96px; height: 96px; margin-bottom: 14px; }
.f-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.f-contact li { display: flex; gap: 10px; align-items: flex-start; }
.f-contact .icon { color: var(--gold-2); margin-top: 4px; }
.copyright { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; text-align: center; font-size: .85rem; }

/* Responsive */
@media (min-width: 640px) {
  .svc-grid, .why-grid, .grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .hero { padding: 84px 0; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 52px; right: -22px; width: 22px; height: 1px; background: var(--gold-2); }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (min-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.3fr .8fr 1.3fr 1.5fr; }
}
@media (max-width: 1099px) {
  .nav-toggle { display: inline-flex; }
  .main-nav { display: none; position: fixed; top: var(--hdr-bottom, 84px); left: 0; right: 0; bottom: 0; z-index: 99; background: var(--cream); border-top: 2px solid var(--gold); flex-direction: column; align-items: stretch; padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); gap: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .main-nav.open { display: flex; animation: navin .25s ease; }
  @keyframes navin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .main-nav ul { flex-direction: column; align-items: stretch; }
  .main-nav li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .main-nav li.menu-item-has-children > a { flex: 1; }
  .sub-toggle { margin: 0; padding: 12px 14px; }
  .main-nav ul > li > a { border-bottom: 1px solid var(--border); border-radius: 0; }
  .sub-menu { position: static; width: 100%; box-shadow: none; border: 0; border-left: 2px solid var(--gold-2); margin-left: 8px; background: transparent; min-width: 0; }
  .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: none; }
  .main-nav li.open > .sub-menu { display: flex; }
  .nav-cta { width: 100%; }
}
@media (max-width: 639px) {
  .section { padding: 56px 0; }
  .topbar-left { gap: 14px; }
  .header-inner { min-height: 72px; }
  .brand .name { font-size: 1.25rem; }
  .site-logo { width: 52px; height: 52px; }
  .values .vline { display: none; }
  .hero .actions .btn { width: 100%; }
}

/* Jam operasional */
.hours { border-collapse: collapse; margin-top: 6px; font-size: .93rem; }
.hours th { text-align: left; font-weight: 500; padding: 3px 28px 3px 0; color: var(--text); }
.hours td { padding: 3px 0; color: var(--navy); font-weight: 500; }
.hours .closed { color: var(--muted); font-weight: 400; }

/* Halaman Tim Ahli & Galeri */
.empty-state { text-align: center; max-width: 560px; margin: 0 auto; padding: 48px 28px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); }
.empty-state .svc-ico { margin-left: auto; margin-right: auto; }
.entry-content.wide { max-width: var(--wrap); }
.team-page .wp-block-columns, .gallery-page .wp-block-gallery { margin: 0 0 32px; }
.team-page .wp-block-column { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: center; }
.team-page .wp-block-column img { border-radius: 4px; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.team-page h3 { margin: 14px 0 2px; }
.team-page p { color: var(--gold); margin: 0; font-weight: 500; }
.gallery-page .wp-block-gallery { gap: 14px; }
.gallery-page .wp-block-gallery img { border-radius: var(--radius); border: 1px solid var(--border); }

.hours-note { font-size: .88rem; color: var(--muted); margin: 10px 0 0; }
.hours-note strong { color: var(--navy); }

/* Tombol bahasa */
.topbar-right { display: flex; align-items: center; gap: 18px; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; }
.lang-switch a { font-weight: 600; letter-spacing: .05em; opacity: .75; padding: 2px 4px; }
.lang-switch a.on, .lang-switch a:hover { opacity: 1; color: var(--gold-3); }
.lang-switch a.on { border-bottom: 2px solid var(--gold-2); }
.lang-switch span { opacity: .4; }

/* Tombol WhatsApp mengambang */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: 0; background: #25D366; color: #fff; height: 58px; min-width: 58px; border-radius: 29px; justify-content: center; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: gap .2s, padding .2s, background .2s; overflow: hidden; }
.wa-float:hover, .wa-float:focus-visible { background: #1ebe5b; color: #fff; padding: 0 20px 0 16px; gap: 10px; }
.wa-float .icon { color: #fff; }
.wa-label { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: .92rem; transition: max-width .25s; }
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label { max-width: 160px; }
@media (max-width: 639px) { .wa-float { right: 14px; bottom: 14px; height: 54px; min-width: 54px; } .topbar .topbar-loc { display: none; } .topbar-right { gap: 10px; } }
@media print { .wa-float { display: none; } }

/* Tim: nama & jabatan di atas foto dengan latar kaca transparan */
.team-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
.member { position: relative; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); }
.member img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.member figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px 10px; text-align: center; border-radius: 10px;
  background: rgba(17,27,44,.55); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .member figcaption { background: rgba(17,27,44,.38); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
}
.member strong { display: block; font-family: var(--serif); color: #fff; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.member span { display: block; color: var(--gold-3); font-size: .8rem; letter-spacing: .06em; margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

/* Testimoni (slider) */
.carousel { position: relative; padding: 0 28px; }
.carousel-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 2px 10px; cursor: grab; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.testi { flex: 0 0 100%; scroll-snap-align: start; margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; }
.testi blockquote { margin: 12px 0 20px; flex: 1; }
.testi blockquote p { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.65; color: var(--navy); }
.stars { display: flex; gap: 3px; color: var(--gold-2); }
.testi figcaption { display: flex; align-items: center; gap: 14px; border-top: 1px solid #f0e8cf; padding-top: 16px; }
.testi figcaption strong { display: block; color: var(--navy); }
.testi .role { display: block; color: var(--muted); font-size: .88rem; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--gold-2); }
.avatar.initials { display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: var(--gold-3); font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-2); background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(17,27,44,.12); }
.car-btn:hover:not(:disabled) { background: var(--gold); color: #fff; border-color: var(--gold); }
.car-btn:disabled { opacity: .35; cursor: default; }
.car-btn.prev { left: -10px; } .car-btn.next { right: -10px; }
.car-btn.prev .icon { transform: rotate(180deg); }
@media (min-width: 700px) { .testi { flex-basis: calc(50% - 11px); } }
@media (min-width: 1000px) { .testi { flex-basis: calc((100% - 44px) / 3); } .car-btn.prev { left: -22px; } .car-btn.next { right: -22px; } }
@media (max-width: 699px) { .carousel { padding: 0; } .car-btn { top: auto; bottom: -58px; transform: none; } .car-btn.prev { left: calc(50% - 56px); } .car-btn.next { right: calc(50% - 56px); } #testimoni .carousel { margin-bottom: 64px; } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.faq details[open] { border-color: var(--gold-2); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 20px; font-family: var(--serif); font-weight: 600; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--gold); transition: transform .2s; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 20px 18px; margin: 0; color: var(--text); }

/* Slideshow galeri */
.slideshow { position: relative; aspect-ratio: 16 / 9; background: var(--navy-deep); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 40px; }
.slides, .slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; }
.slide { opacity: 0; transition: opacity .8s ease; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sl-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(17,27,44,.65); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sl-btn:hover { background: var(--gold); }
.sl-btn.prev { left: 14px; } .sl-btn.next { right: 14px; } .sl-btn.prev .icon { transform: rotate(180deg); }
.sl-pause { position: absolute; top: 12px; right: 12px; border: 0; border-radius: var(--radius); background: rgba(17,27,44,.65); color: #fff; font-size: .7rem; padding: 8px 10px; cursor: pointer; }
.sl-pause:hover { background: var(--gold); }
.sl-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.sl-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5); }
.sl-dots span.on { background: var(--gold-2); }
@media (max-width: 639px) { .slideshow { aspect-ratio: 4 / 3; } }
.hero-media .slideshow { aspect-ratio: auto; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.hero-media .slide img { object-fit: cover; object-position: 50% 35%; }
.hero-media .sl-dots { bottom: 18px; }
.hero-media .sl-btn { display: none; }
.hero-media .sl-pause { top: auto; bottom: 14px; right: 14px; }
/* Hero: foto memenuhi seluruh hero dan menyatu dengan latar lewat pudaran lembut melengkung di belakang teks (tanpa kotak) */
.hero { padding: 0; min-height: 640px; display: flex; align-items: center; }
.hero-grid { display: block; width: 100%; }
.hero-text { padding: 84px 0; max-width: 460px; position: relative; z-index: 2; }
.hero-text h1 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.hero-text p { font-size: .98rem; max-width: 440px; }
.hero-text .eyebrow { font-size: .7rem; }
.hero-media { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: auto; width: 66%; aspect-ratio: auto; border: 0; border-radius: 0; background: transparent; }
.hero-media .slide img { object-position: 50% 8%;
  -webkit-mask-image: radial-gradient(ellipse 100% 96% at 100% 58%, #000 0, #000 86%, rgba(0,0,0,.8) 90%, rgba(0,0,0,.5) 94%, rgba(0,0,0,.2) 97%, transparent 100%), radial-gradient(ellipse 98% 74% at 100% 10%, #000 0, #000 84%, rgba(0,0,0,.8) 88%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.2) 95%, transparent 100%), radial-gradient(ellipse 100% 70% at 100% 98%, #000 0, #000 84%, rgba(0,0,0,.8) 88%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.2) 95%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 96% at 100% 58%, #000 0, #000 86%, rgba(0,0,0,.8) 90%, rgba(0,0,0,.5) 94%, rgba(0,0,0,.2) 97%, transparent 100%), radial-gradient(ellipse 98% 74% at 100% 10%, #000 0, #000 84%, rgba(0,0,0,.8) 88%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.2) 95%, transparent 100%), radial-gradient(ellipse 100% 70% at 100% 98%, #000 0, #000 84%, rgba(0,0,0,.8) 88%, rgba(0,0,0,.5) 92%, rgba(0,0,0,.2) 95%, transparent 100%); }
.hero-media .sl-dots, .hero-media .sl-pause { z-index: 4; }
@media (max-width: 1099px) {
  .hero { display: block; min-height: 0; }
  .hero-media { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; margin: 0 -20px; height: min(75vw, 620px); order: -1; }
  .hero-media .slide img { -webkit-mask-image: none; mask-image: none; }
  .hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(248,243,229,0), var(--cream)); }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero-text { padding: 4px 0 52px; max-width: none; }
  .hero-text h1 { font-size: clamp(1.45rem, 6vw, 2rem); }
  .hero-text p { font-size: .95rem; max-width: none; }
  .hero-media .sl-dots { bottom: 22px; z-index: 4; } .hero-media .sl-pause { display: none; }
}

/* Galeri: dua kolom */
.gallery-h { margin: 8px 0 20px; }
.gallery-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.g-item { display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); aspect-ratio: 4 / 3; background: var(--cream); }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.04); }
@media (min-width: 900px) { .gallery-2col { gap: 22px; } }

/* Galeri beranda: 5 foto */
.home-gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.hg-item { display: block; position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); aspect-ratio: 4 / 3; background: var(--cream); }
.hg-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.hg-item:hover img, .hg-item:focus-visible img { transform: scale(1.05); }
.home-gallery.n5 .hg-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .home-gallery.n5 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 230px); }
  .home-gallery.n5 .hg-item { aspect-ratio: auto; }
  .home-gallery.n5 .hg-item:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; aspect-ratio: auto; }
}
.home-gallery + p { margin-top: 32px; }

/* Lightbox */
.lb { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10,16,28,.94); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.lb.open { display: flex; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.lb button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; }
.lb button:hover { background: var(--gold); }
.lb .lb-close { top: 16px; right: 16px; } .lb .lb-prev { left: 16px; top: 50%; } .lb .lb-next { right: 16px; top: 50%; }

/* Galeri beranda: 4 foto (2 x 2) */
.home-gallery.n4 .hg-item { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .home-gallery.n4 { gap: 20px; } .home-gallery.n4 .hg-item { aspect-ratio: 16 / 10; } }

/* Keterangan foto galeri: kaca transparan di bagian bawah foto */
.glass-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; border-radius: 10px; color: #fff; font-size: .85rem; line-height: 1.35; font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,.55);
  background: rgba(17,27,44,.55); border: 1px solid rgba(255,255,255,.28); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-cap { background: rgba(17,27,44,.38); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
}
.g-item { position: relative; }
@media (max-width: 639px) { .glass-cap { left: 6px; right: 6px; bottom: 6px; padding: 5px 8px; font-size: .72rem; } .member figcaption { left: 6px; right: 6px; bottom: 6px; padding: 8px 6px; } .member strong { font-size: .95rem; } }

/* Efek masuk saat scroll (aktif via JS; tanpa JS konten tetap tampil) */
.rv { opacity: 0; transition: opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1); will-change: opacity, transform; }
.rv-up { transform: translateY(26px); }
.rv-left { transform: translateX(-44px); }
.rv-right { transform: translateX(44px); }
.rv.rv-in { opacity: 1; transform: none; }
@media (max-width: 767px) { .rv-left, .rv-right { transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* Ikon sosial */
.social { display: inline-flex; align-items: center; gap: 10px; }
.social a { display: inline-flex; align-items: center; justify-content: center; }
.topbar-social a { color: #fff; } .topbar-social a:hover { color: var(--gold-3); }
.f-social { margin-top: 16px; gap: 12px; }
.f-social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--gold-3); transition: background .2s, color .2s, border-color .2s; }
.f-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

/* Kredit pembuat website (kecil dan tidak mencolok) */
.credit { margin: 10px 0 0; text-align: center; font-size: .72rem; color: rgba(203,213,225,.55); }
.credit a { color: rgba(203,213,225,.75); text-decoration: underline; text-decoration-color: rgba(203,213,225,.3); text-underline-offset: 3px; }
.credit a:hover { color: var(--gold-3); text-decoration-color: var(--gold-3); }

/* Fakta Tentang Kami */
.about-facts { display: grid; gap: 16px; margin: 0 0 36px; }
@media (min-width: 640px) { .about-facts { grid-template-columns: 1fr 2fr; } }
.fact { display: flex; gap: 14px; align-items: flex-start; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.fact .icon { color: var(--gold); flex: none; margin-top: 2px; }
.fact strong { display: block; font-family: "Playfair Display", serif; font-size: 1.15rem; color: var(--navy); line-height: 1.3; }
.fact span.l { display: block; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.fact a { color: inherit; text-decoration: none; } .fact a:hover strong { color: var(--gold); }

/* Semua kartu: tampilan premium yang tenang (tepi emas tipis, bayangan lembut, garis aksen, watermark hukum sangat samar) */
.svc-card, .why, .steps li, .card, .testi, .empty-state, .fact, .faq details, .team-page .wp-block-column {
  position: relative; isolation: isolate; background-color: #FFFEFB; border: 1px solid rgba(197,160,74,.34); box-shadow: 0 8px 30px rgba(80,65,40,.06);
}
.map-panel { position: relative; isolation: isolate; border: 1px solid rgba(197,160,74,.34); box-shadow: 0 8px 30px rgba(80,65,40,.06); }
/* garis aksen emas vertikal di sisi kiri isi kartu */
.svc-card, .steps li, .testi {
  background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6));
  background-repeat: no-repeat; background-size: 2px calc(100% - 64px); background-position: 24px 32px;
  padding-left: 42px;
}
.svc-card { padding-top: 34px; padding-bottom: 30px; transition: border-color .25s, box-shadow .25s, transform .25s; }
.svc-card:hover { border-color: rgba(197,160,74,.6); box-shadow: 0 12px 34px rgba(80,65,40,.09); transform: translateY(-2px); }
/* halo lembut di belakang ikon bulat */
.svc-ico { background: #FBF6E8; box-shadow: 0 0 0 7px rgba(220,199,137,.17); }
.svc-ico.sm { box-shadow: 0 0 0 5px rgba(220,199,137,.17); }
.svc-card .svc-ico { margin: 4px 0 24px 7px; }
.why .svc-ico { margin-top: 6px; margin-bottom: 22px; }
.svc-card h3, .svc-card p, .svc-card .svc-list, .svc-card .link-arrow { position: relative; }
.faq details[open] { border-color: rgba(197,160,74,.6); }
.fact { background-color: #FFFEFB; }
.testi { padding-top: 30px; padding-bottom: 28px; }
.carousel-track { padding-top: 6px; padding-bottom: 34px; margin-bottom: -18px; }
@media (prefers-reduced-motion: reduce) { .svc-card, .svc-card:hover { transition: none; transform: none; } }

/* Keterangan foto di beranda: kecil dan ringkas agar tidak menutupi foto */
.home-gallery .glass-cap { left: 6px; right: auto; bottom: 6px; max-width: calc(100% - 12px); padding: 4px 11px; font-size: .78rem; line-height: 1.3; font-weight: 500; letter-spacing: .01em; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 639px) { .home-gallery .glass-cap { left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 2px 6px; font-size: .54rem; border-radius: 5px; } }

/* Peta Google tertanam */
.map-panel { padding: 0 0 28px; overflow: hidden; }
.map-embed { width: 100%; height: 320px; background: var(--cream); margin-bottom: 22px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-panel h3, .map-panel p, .map-panel .btn { margin-left: 28px; margin-right: 28px; }

/* Baris bawah footer: hak cipta di kiri, kredit di kanan (satu baris) */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; text-align: left; }
.footer-bottom .credit { margin: 0; text-align: right; }
@media (max-width: 767px) { .footer-bottom { flex-direction: column; text-align: center; } .footer-bottom .credit { text-align: center; } }
@media (max-width: 1099px) { .hero-media .slide img { object-position: 50% 0%; } }

.footer-bottom .credit { display: inline-block; }

/* Keterangan foto: di tengah bawah, latar transparan hanya selebar tulisan */
.glass-cap, .home-gallery .glass-cap { left: 50%; right: auto; width: max-content; max-width: calc(100% - 12px); transform: translateX(-50%); text-align: center; box-sizing: border-box; }

/* Tim Kami: nama dan jabatan masing-masing punya kapsul kaca sendiri */
.member figcaption, .member figcaption { left: 8px; right: 8px; bottom: 10px; padding: 0; border: 0 !important; box-shadow: none !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.member strong, .member figcaption span { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 5px 14px; border-radius: 999px; background: rgba(17,27,44,.5); -webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%); border: 1px solid rgba(255,255,255,.14); line-height: 1.3; text-align: center; }
.member strong { font-size: .95rem; }
.member figcaption span { margin-top: 0; font-size: .72rem; letter-spacing: .05em; padding: 3px 12px; background: rgba(17,27,44,.42); }
@media (max-width: 639px) { .member figcaption { left: 5px; right: 5px; bottom: 8px; gap: 5px; } .member strong { font-size: .8rem; padding: 4px 10px; } .member figcaption span { font-size: .62rem; padding: 2px 9px; } }

/* Keterangan foto beranda di layar sentuh/ponsel: tersembunyi, muncul saat foto disentuh */
@media (hover: none), (max-width: 639px) {
  .home-gallery .glass-cap { opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
  .home-gallery .hg-item.show-cap .glass-cap { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* Watermark hukum: lapisan latar kartu (tanpa pseudo-element/variabel; stabil di semua ponsel) */
.svc-card[data-wm="scales"], .steps li:nth-child(2), .testi { background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6)), url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2250%22 cy=%227%22 r=%223.2%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M50 10.5v70%22/%3E%3Cpath d=%22M45 16h10M46.5 20h7%22/%3E%3Cpath d=%22M12 25Q50 14 88 25%22/%3E%3Ccircle cx=%2212%22 cy=%2225%22 r=%222.4%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Ccircle cx=%2288%22 cy=%2225%22 r=%222.4%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%0A%3Cpath d=%22M12 25L2 57M12 25L22 57M12 25v32M88 25L78 57M88 25L98 57M88 25v32%22/%3E%0A%3Cpath d=%22M1 57h22q0 11-11 11T1 57z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M77 57h22q0 11-11 11T77 57z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%0A%3Cpath d=%22M33 93l5-9h24l5 9z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M42 84v-4h16v4M28 96h44%22/%3E%3Cpath d=%22M50 30l2.5 5h5l-4 3.5 1.5 5-5-3-5 3 1.5-5-4-3.5h5z%22/%3E%3C/svg%3E"); }
.svc-card[data-wm="document"], .steps li:nth-child(1) { background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6)), url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6h42l20 20v66H18z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M60 6v20h20%22/%3E%3Cpath d=%22M28 38h40M28 48h40M28 58h30M28 68h24%22/%3E%0A%3Ccircle cx=%2270%22 cy=%2276%22 r=%2213%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Ccircle cx=%2270%22 cy=%2276%22 r=%229%22/%3E%3Cpath d=%22M70 69l2 4.5 4.8.6-3.5 3.3.9 4.8-4.2-2.4-4.2 2.4.9-4.8-3.5-3.3 4.8-.6z%22/%3E%3Cpath d=%22M62 87l-4 10 7-3 3 5 3-9M78 87l4 10-7-3-3 5%22/%3E%0A%3Cpath d=%22M92 8C72 16 58 34 52 58c16-6 32-26 40-50z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M92 8L52 58%22/%3E%3C/svg%3E"); }
.svc-card[data-wm="temple"] { background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6)), url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 30L50 8l44 22z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M16 27.5L50 12l34 15.5%22/%3E%3Cpath d=%22M10 32h80v6H10z%22/%3E%3Ccircle cx=%2250%22 cy=%2222%22 r=%223%22/%3E%0A%3Cpath d=%22M17 38v44M33 38v44M50 38v44M67 38v44M83 38v44%22 /%3E%3Cpath d=%22M14 38h6M30 38h6M47 38h6M64 38h6M80 38h6M14 82h6M30 82h6M47 82h6M64 82h6M80 82h6%22/%3E%0A%3Cpath d=%22M10 82h80v5H10zM5 87h90v6H5z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3C/svg%3E"); }
.svc-card[data-wm="house"] { background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6)), url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 48L50 10l44 38%22 /%3E%3Cpath d=%22M14 42v48h72V42%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M72 22v14M66 22h12%22/%3E%3Cpath d=%22M40 90V62h20v28%22/%3E%3Cpath d=%22M52 76h2%22/%3E%3Crect x=%2220%22 y=%2252%22 width=%2214%22 height=%2214%22 rx=%221%22/%3E%3Crect x=%2266%22 y=%2252%22 width=%2214%22 height=%2214%22 rx=%221%22/%3E%3Cpath d=%22M27 52v14M20 59h14M73 52v14M66 59h14%22/%3E%3C/svg%3E"); }
.svc-card[data-wm="globe"] { background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6)), url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2238%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M12 50h76M50 12c16 12 16 64 0 76M50 12c-16 12-16 64 0 76%22/%3E%3Cpath d=%22M17 30h66M17 70h66%22/%3E%3Cellipse cx=%2250%22 cy=%2250%22 rx=%2247%22 ry=%2214%22 transform=%22rotate%28-24 50 50%29%22/%3E%3Ccircle cx=%2286%22 cy=%2236%22 r=%223%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3C/svg%3E"); }
.svc-card[data-wm="books"] { background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6)), url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 30h66a4 4 0 0 1 4 4v14H10z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M10 30v18M18 30v18M70 30v18M10 39h8M70 39h10%22/%3E%0A%3Cpath d=%22M18 52h66a4 4 0 0 1 4 4v14H18z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M18 52v18M26 52v18M78 52v18%22/%3E%0A%3Cpath d=%22M6 74h62a4 4 0 0 1 4 4v14H6z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M6 74v18M14 74v18M62 74v18M14 83h48%22/%3E%0A%3Cpath d=%22M28 8h30v18l-15-6-15 6z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M43 12v6%22/%3E%3C/svg%3E"); }
.steps li:nth-child(3) { background-image: linear-gradient(rgba(197,160,74,.6), rgba(197,160,74,.6)), url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22rotate%28-38 46 36%29%22%3E%3Crect x=%2222%22 y=%2222%22 width=%2248%22 height=%2219%22 rx=%223%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Crect x=%2231%22 y=%2218.5%22 width=%225.5%22 height=%2226%22 rx=%221.5%22/%3E%3Crect x=%2256%22 y=%2218.5%22 width=%225.5%22 height=%2226%22 rx=%221.5%22/%3E%3Crect x=%2243%22 y=%2241%22 width=%226.5%22 height=%2248%22 rx=%222.5%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3C/g%3E%0A%3Cpath d=%22M52 91h40v5H52zM58 82h28v9H58z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M64 86.5h16%22/%3E%3Cpath d=%22M76 20q6-8 14-6M80 28q8-6 14-3%22/%3E%3C/svg%3E"); }
.why:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2250%22 cy=%227%22 r=%223.2%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M50 10.5v70%22/%3E%3Cpath d=%22M45 16h10M46.5 20h7%22/%3E%3Cpath d=%22M12 25Q50 14 88 25%22/%3E%3Ccircle cx=%2212%22 cy=%2225%22 r=%222.4%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Ccircle cx=%2288%22 cy=%2225%22 r=%222.4%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%0A%3Cpath d=%22M12 25L2 57M12 25L22 57M12 25v32M88 25L78 57M88 25L98 57M88 25v32%22/%3E%0A%3Cpath d=%22M1 57h22q0 11-11 11T1 57z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M77 57h22q0 11-11 11T77 57z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%0A%3Cpath d=%22M33 93l5-9h24l5 9z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M42 84v-4h16v4M28 96h44%22/%3E%3Cpath d=%22M50 30l2.5 5h5l-4 3.5 1.5 5-5-3-5 3 1.5-5-4-3.5h5z%22/%3E%3C/svg%3E"); }
.why:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6h42l20 20v66H18z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M60 6v20h20%22/%3E%3Cpath d=%22M28 38h40M28 48h40M28 58h30M28 68h24%22/%3E%0A%3Ccircle cx=%2270%22 cy=%2276%22 r=%2213%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Ccircle cx=%2270%22 cy=%2276%22 r=%229%22/%3E%3Cpath d=%22M70 69l2 4.5 4.8.6-3.5 3.3.9 4.8-4.2-2.4-4.2 2.4.9-4.8-3.5-3.3 4.8-.6z%22/%3E%3Cpath d=%22M62 87l-4 10 7-3 3 5 3-9M78 87l4 10-7-3-3 5%22/%3E%0A%3Cpath d=%22M92 8C72 16 58 34 52 58c16-6 32-26 40-50z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M92 8L52 58%22/%3E%3C/svg%3E"); }
.why:nth-child(1), .card, .empty-state { background-image: url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 30h66a4 4 0 0 1 4 4v14H10z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M10 30v18M18 30v18M70 30v18M10 39h8M70 39h10%22/%3E%0A%3Cpath d=%22M18 52h66a4 4 0 0 1 4 4v14H18z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M18 52v18M26 52v18M78 52v18%22/%3E%0A%3Cpath d=%22M6 74h62a4 4 0 0 1 4 4v14H6z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M6 74v18M14 74v18M62 74v18M14 83h48%22/%3E%0A%3Cpath d=%22M28 8h30v18l-15-6-15 6z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M43 12v6%22/%3E%3C/svg%3E"); }
.why:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M50 6l38 13v27c0 25-17 42-38 50C29 88 12 71 12 46V19z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M50 14l30 10.5V46c0 19-13 33-30 40C33 79 20 65 20 46V24.5z%22/%3E%0A%3Cpath d=%22M50 28v34M38 66h24M33 36h34%22/%3E%3Cpath d=%22M33 36l-6 14a6 6 0 0 0 12 0zM67 36l-6 14a6 6 0 0 0 12 0z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3C/svg%3E"); }
.map-panel { background-image: url("data:image/svg+xml,%3Csvg opacity=%220.27%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23A17A28%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 30L50 8l44 22z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3Cpath d=%22M16 27.5L50 12l34 15.5%22/%3E%3Cpath d=%22M10 32h80v6H10z%22/%3E%3Ccircle cx=%2250%22 cy=%2222%22 r=%223%22/%3E%0A%3Cpath d=%22M17 38v44M33 38v44M50 38v44M67 38v44M83 38v44%22 /%3E%3Cpath d=%22M14 38h6M30 38h6M47 38h6M64 38h6M80 38h6M14 82h6M30 82h6M47 82h6M64 82h6M80 82h6%22/%3E%0A%3Cpath d=%22M10 82h80v5H10zM5 87h90v6H5z%22 fill=%22%23A17A28%22 fill-opacity=%22.2%22/%3E%3C/svg%3E"); }
.svc-card, .steps li, .testi { background-repeat: no-repeat, no-repeat; background-position: 24px 32px, right -18px bottom -16px; background-size: 2px calc(100% - 64px), 210px 210px; padding-left: 42px; }
.why, .card, .empty-state, .map-panel { background-repeat: no-repeat; background-position: right -14px bottom -14px; background-size: 170px 170px; }
@media (max-width: 639px) {
  .svc-card, .steps li, .testi { background-position: 20px 28px, right -16px bottom -8px; background-size: 2px calc(100% - 56px), 230px 230px; padding-left: 38px; }
  .why, .card { background-size: 190px 190px; background-position: right -16px bottom -8px; }
}

/* Hero ponsel: kotak rasio 4:3 dengan padding-bottom (didukung semua browser), foto penuh tanpa terpotong */
@media (max-width: 1099px) {
  .hero-media { height: auto; position: relative; margin: 0 -20px; width: auto; order: -1; }
  .hero-media .slideshow { position: relative; height: 0; padding-bottom: 75%; width: 100%; }
  .hero-media .slideshow .slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .hero-media .slide img { -webkit-mask-image: none; mask-image: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
}

/* Keterangan foto galeri (beranda + halaman Galeri): sangat kecil di ponsel, muncul hanya saat foto disentuh */
.g-item { position: relative; }
@media (hover: none), (max-width: 639px) {
  .home-gallery .glass-cap, .g-item .glass-cap { font-size: 9px; line-height: 1.2; padding: 2px 7px; border-radius: 5px; left: 50%; right: auto; bottom: 5px; width: max-content; max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
  .home-gallery .hg-item.show-cap .glass-cap, .g-item.show-cap .glass-cap { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Nomor versi kecil di footer (untuk memastikan versi tema yang aktif) */
.ver-tag { opacity: .45; font-size: .7rem; margin-left: 8px; }

/* Halaman Galeri: keterangan foto sama dengan galeri beranda (kapsul kaca, di tengah bawah, selebar tulisan) */
.g-item .glass-cap { left: 50%; right: auto; bottom: 8px; width: max-content; max-width: calc(100% - 16px); transform: translateX(-50%); padding: 4px 11px; font-size: .78rem; line-height: 1.3; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; box-sizing: border-box; }

/* Halaman Galeri di ponsel: slideshow, judul, dan grid lebih rapi */
@media (max-width: 639px) {
  .gallery-page .slideshow { margin-bottom: 26px; }
  .gallery-page .sl-dots { display: none; }
  .gallery-page .sl-btn { width: 38px; height: 38px; }
  .gallery-page .sl-btn.prev { left: 8px; } .gallery-page .sl-btn.next { right: 8px; }
  .gallery-page .sl-pause { top: 8px; right: 8px; padding: 6px 8px; }
  .gallery-h { font-size: 1.45rem; margin: 4px 0 14px; }
  .gallery-2col { gap: 10px; }
}

/* Keterangan foto galeri (beranda + Galeri) di desktop/tablet: lebih besar */
@media (min-width: 640px) {
  .home-gallery .glass-cap, .g-item .glass-cap { font-size: 1.02rem; line-height: 1.3; padding: 6px 18px; border-radius: 9px; bottom: 12px; max-width: calc(100% - 24px); letter-spacing: .01em; }
}

/* Sejarah di halaman Tentang Kami */
.about-history { max-width: 780px; }
.about-history .hist-tag { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-size: .75rem; font-weight: 600; margin: 8px 0 10px; }
.about-history h2 { margin: 0 0 14px; }
.about-history h2::after { content: ""; display: block; width: 72px; height: 2px; background: var(--gold-2); margin-top: 16px; }
.about-history .lead { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; color: var(--navy); border-left: 2px solid var(--gold-2); padding-left: 18px; margin: 20px 0 22px; }
.about-history p { line-height: 1.8; }

/* Artikel dwibahasa: tampilkan hanya bahasa yang aktif */
.lang-id .lang-block.lb-en, .lang-en .lang-block.lb-id { display: none; }
.art-lead { font-size: 1.12rem; line-height: 1.7; color: var(--navy); border-left: 2px solid var(--gold-2); padding-left: 16px; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content ul { padding-left: 1.2em; }
.entry-content li { margin-bottom: .45em; line-height: 1.65; }
.art-disc { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--border); font-size: .88rem; color: var(--muted); }

/* Company profile */
.profile { margin-top: 56px; }
.pf-sec { margin: 0 0 54px; }
.pf-sec h2 { margin-bottom: .4em; }
.pf-sec h3 { font-size: 1.15rem; margin: 26px 0 10px; }
.pf-cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 18px 0; }
@media (min-width: 640px) { .pf-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pf-cards { grid-template-columns: repeat(3, 1fr); } }
.pf-two { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 18px 0; }
@media (min-width: 800px) { .pf-two { grid-template-columns: 1fr 1fr; } }
.pf-card { position: relative; background: #FFFEFB; border: 1px solid rgba(197,160,74,.34); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: 0 8px 30px rgba(80,65,40,.06); }
.pf-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.pf-card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.pf-num .pf-n { display: inline-block; font-family: var(--serif); color: var(--gold); font-size: 1.5rem; margin-bottom: 6px; }
.pf-list { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 4px; }
.chips li { margin: 0; padding: 6px 14px; border: 1px solid rgba(197,160,74,.5); border-radius: 999px; background: #FBF6E8; color: var(--navy); font-size: .88rem; }
.flow { list-style: none; counter-reset: f; display: flex; flex-wrap: wrap; gap: 6px 4px; padding: 0; margin: 10px 0 8px; }
.flow li { counter-increment: f; margin: 0; font-family: var(--serif); color: var(--navy); font-weight: 600; }
.flow li:not(:last-child)::after { content: "→"; color: var(--gold-2); margin: 0 8px 0 10px; font-family: inherit; }
.pf-id { display: grid; gap: 10px; margin: 18px 0; }
.pf-id div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; background: #FFFEFB; border: 1px solid rgba(197,160,74,.3); border-radius: var(--radius); }
@media (min-width: 640px) { .pf-id div { grid-template-columns: 200px 1fr; gap: 16px; } }
.pf-id dt { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; align-self: center; }
.pf-id dd { margin: 0; color: var(--navy); }
.pf-end .lead { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); border-left: 2px solid var(--gold-2); padding-left: 16px; margin: 22px 0; }
.pf-tag { text-align: center; color: var(--gold); letter-spacing: .2em; font-size: .72rem; font-weight: 600; }
.profile .team-grid { margin-top: 22px; }

/* Untuk perorangan / perusahaan, Mengapa KARABI, Corporate Legal & Retainer */
.why-karabi { margin-top: 36px; }
.why-karabi h3, #corporate-legal h3 { font-size: 1.2rem; }
.check-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .check-list { grid-template-columns: 1fr 1fr; } }
.check-list li { position: relative; padding: 12px 16px 12px 44px; background: #FFFEFB; border: 1px solid rgba(197,160,74,.3); border-radius: var(--radius); }
.check-list li::before { content: "\2713"; position: absolute; left: 16px; top: 11px; color: var(--gold); font-weight: 700; }
.num-grid { list-style: none; counter-reset: n; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); padding: 0; margin: 20px 0 28px; }
@media (min-width: 640px) { .num-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .num-grid { grid-template-columns: repeat(5, 1fr); } }
.num-grid li { counter-increment: n; background: #FFFEFB; border: 1px solid rgba(197,160,74,.34); border-radius: var(--radius); padding: 16px 14px; text-align: center; font-weight: 500; color: var(--navy); box-shadow: 0 8px 30px rgba(80,65,40,.06); }
.num-grid li::before { content: counter(n, decimal-leading-zero); display: block; font-family: var(--serif); color: var(--gold); font-size: 1.3rem; margin-bottom: 4px; }
.retainer { margin-top: 56px; padding: 36px 24px; border: 1px solid rgba(197,160,74,.4); border-radius: var(--radius); background: #FBF6E8; text-align: center; }
.retainer .chips { justify-content: center; }
.retainer .pf-two { text-align: left; margin: 26px 0; }
@media (max-width: 639px) {
  .num-grid li { padding: 12px 8px; font-size: .88rem; }
  .num-grid li::before { font-size: 1.1rem; }
  .retainer { padding: 26px 16px; }
  .pf-card { padding: 18px 16px; }
  .chips li { font-size: .82rem; padding: 5px 11px; }
  #klien .btn, #corporate-legal .btn { width: 100%; text-align: center; justify-content: center; }
  .check-list li { padding: 11px 12px 11px 40px; font-size: .93rem; }
}