/* ============================================================
   BIDAKARA — Desain ekosistem terpadu (RICH-style)
   Font: DM Sans (body) + Trirong (display)
   Warna: navy #004178 · gold #b69545 · krem #f5f2ea
   ============================================================ */

:root {
  --navy: #004178;
  --navy-900: #00284b;
  --navy-800: #00365f;
  --navy-700: #0a5a9e;
  --navy-ink: #071c2f;
  --gold: #b69545;
  --gold-2: #c9a447;
  --gold-soft: #e8dcc0;
  --paper: #f5f2ea;
  --ink: #1e2023;
  --body: #4a4f57;
  --muted: #8b9199;
  --line: #e4e2da;
  --white: #ffffff;
  --serif: "Trirong", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 14px;
  --shadow: 0 30px 60px rgba(7, 28, 47, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: 110px 0;
}

/* ============================ Announcement ============================ */
.announcement {
  position: relative;
  z-index: 30;
}

.announcement-image {
  position: absolute;
  inset: 0;
  background: var(--announcement-bg, var(--navy)) center / cover no-repeat;
}

.announcement::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 28, 47, 0.68);
}

.announcement-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
}

.announcement-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-family: var(--sans);
}

.announcement-kicker .dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--announcement-accent, var(--gold-2));
  box-shadow: 0 0 0 4px rgba(201, 164, 71, 0.25);
}

/* ============================ Header ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 28, 47, 0.02);
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(7, 28, 47, 0.08);
}

.site-header.on-dark:not(.scrolled) {
  background: rgba(7, 28, 47, 0.32);
  backdrop-filter: blur(6px);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  height: 44px;
  width: auto;
}

.brand .logo-color {
  display: none;
}

.site-header.scrolled .logo-white,
.site-header.on-dark:not(.scrolled) .logo-white {
  display: none;
}

.site-header.scrolled .logo-color,
.site-header.on-dark:not(.scrolled) .logo-color {
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}

.nav-dropdown.open > button .nav-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.nav-dropdown.open > button,
.nav-dropdown > button:hover {
  color: var(--gold-2);
}

.site-header.scrolled .nav-dropdown > button,
.site-header.on-dark:not(.scrolled) .nav-dropdown > button {
  color: var(--ink);
}

.main-nav > a {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s ease;
}

.main-nav > a:hover {
  color: var(--gold-2);
}

.site-header.scrolled .main-nav > a,
.site-header.on-dark:not(.scrolled) .main-nav > a {
  color: var(--ink);
}

.site-header.scrolled .main-nav > a:hover,
.site-header.on-dark:not(.scrolled) .main-nav > a:hover {
  color: var(--gold);
}

/* Mega menu */
.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  width: min(960px, 92vw);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

.nav-dropdown.open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-feature {
  position: relative;
  min-height: 460px;
  background: var(--mega-bg, var(--navy)) center / cover no-repeat;
}

.mega-feature-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(0, 40, 75, 0.2), rgba(0, 40, 75, 0.82));
}

.mega-feature-content {
  position: absolute;
  inset: auto 0 0;
  padding: 34px;
  color: #fff;
}

.mega-feature-content span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 10px;
}

.mega-feature-content strong {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
}

.mega-feature-content small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  line-height: 1.6;
}

.mega-group-grid {
  padding: 30px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 34px;
  align-content: start;
  max-height: 520px;
  overflow: auto;
}

.mega-group h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.mega-group a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.mega-group a:hover {
  background: var(--paper);
}

.mega-icon {
  flex: 0 0 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(0, 65, 120, 0.08);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}

.mega-group a span:last-of-type {
  min-width: 0;
}

.mega-group b {
  display: block;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

.mega-group small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

.mega-group a.mega-all {
  margin-top: 6px;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

/* Language switcher */
.language-switcher {
  position: relative;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.site-header.scrolled .lang-btn,
.site-header.on-dark:not(.scrolled) .lang-btn {
  border-color: rgba(7, 28, 47, 0.25);
  color: var(--ink);
}

.lang-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s var(--ease);
}

.lang-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 9px;
}

.lang-menu button:hover {
  background: var(--paper);
}

.flag {
  display: block;
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(7, 28, 47, 0.16), 0 1px 2px rgba(7, 28, 47, 0.12);
  background: #fff;
}

.lang-btn .flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.lang-menu button,
.offcanvas-lang a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lang-menu button.active {
  background: rgba(0, 65, 120, 0.07);
  color: var(--navy);
}

.lang-menu button.active .flag,
.offcanvas-lang a.active .flag {
  box-shadow: 0 0 0 1px rgba(0, 65, 120, 0.3);
}

.offcanvas-lang a .flag {
  box-shadow: 0 0 0 1px rgba(7, 28, 47, 0.2);
}

.offcanvas-lang a.active .flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 15px 28px;
  border-radius: 40px;
  border: 1px solid transparent;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}

.btn span {
  transition: transform 0.3s var(--ease);
}

.btn:hover span {
  transform: translateX(4px);
}

.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--navy-900);
}

.btn-gold::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.btn-gold:hover::after {
  animation: goldSheen 0.95s var(--ease) forwards;
}

@keyframes goldSheen {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(430%) skewX(-18deg); }
}

.btn-gold:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 32px rgba(182, 149, 69, 0.34);
  transform: translateY(-2px);
}

.btn-navy {
  background: var(--navy);
  color: #fff;
}

.btn-navy:hover {
  background: var(--navy-800);
  box-shadow: 0 16px 32px rgba(0, 65, 120, 0.3);
  transform: translateY(-2px);
}

.btn-outline {
  border-color: rgba(7, 28, 47, 0.35);
  color: var(--ink);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-small {
  padding: 10px 22px;
  font-size: 14px;
}

/* Menu toggle (mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px;
}

.menu-toggle span {
  width: 26px;
  height: 2.4px;
  border-radius: 2px;
  background: #fff;
  transition: all 0.3s ease;
}

.site-header.scrolled .menu-toggle span,
.site-header.on-dark:not(.scrolled) .menu-toggle span {
  background: var(--ink);
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(8.4px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

/* ============================ Offcanvas mobile ============================ */
.offcanvas-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
}

.offcanvas-drawer.open {
  visibility: visible;
}

.offcanvas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 28, 47, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.offcanvas-drawer.open .offcanvas-backdrop {
  opacity: 1;
}

.offcanvas-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  padding: 26px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}

.offcanvas-drawer.open .offcanvas-panel {
  transform: translateX(0);
}

.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.offcanvas-head img {
  height: 40px;
}

.offcanvas-close {
  background: var(--paper);
  border: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--ink);
}

.mobile-nav {
  display: grid;
  gap: 2px;
}

.mobile-nav > a,
.mobile-nav .mob-drop > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  padding: 13px 6px;
  border-bottom: 1px solid var(--line);
}

.mobile-nav .mob-drop ul {
  list-style: none;
  margin: 0;
  padding: 4px 0 12px 14px;
  display: none;
}

.mobile-nav .mob-drop.open ul {
  display: block;
}

.mobile-nav .mob-drop ul a {
  display: block;
  padding: 8px 6px;
  color: var(--body);
  font-size: 15px;
  border-left: 2px solid var(--line);
}

.mobile-nav .mob-drop ul a:hover {
  color: var(--navy);
  border-color: var(--gold);
}

.offcanvas-lang {
  display: flex;
  gap: 10px;
  margin: 22px 0;
}

.offcanvas-lang a {
  padding: 8px 16px;
  border-radius: 30px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.offcanvas-lang a.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ============================ Hero ============================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--navy-900);
}

.hero-slider {
  position: absolute;
  inset: 0;
  /* Memotong slide yang di-scale 1.05 saat transisi iris, supaya tidak
     menimbulkan overflow horizontal pada halaman. */
  overflow: hidden;
}

/* --- Hero video: irisan sinematik, bukan crossfade polos ---
   Slide aktif tersingkap dari kiri (atau kanan saat navigasi mundur) sambil
   zoom pelan ke posisi, sementara slide sebelumnya justru zoom masuk lalu
   memudar — jadi tidak ada jeda kosong di layar saat pergantian. */
.hero {
  --ease-hero: cubic-bezier(0.76, 0, 0.24, 1);
  --hero-wipe: 1.15s;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-size: cover;
  clip-path: inset(0 100% 0 0);
  transform: scale(1.05);
  backface-visibility: hidden;
}

.hero-slide.active {
  opacity: 1;
  animation: heroWipeIn var(--hero-wipe) var(--ease-hero) forwards;
}

.hero-slide.active.from-right {
  animation-name: heroWipeInRight;
}

.hero-slide.is-leaving {
  animation: heroWipeOut var(--hero-wipe) var(--ease-hero) forwards;
}

@keyframes heroWipeIn {
  from {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.05);
    opacity: 1;
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes heroWipeInRight {
  from {
    clip-path: inset(0 0 0 100%);
    transform: scale(1.05);
    opacity: 1;
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes heroWipeOut {
  from {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    opacity: 1;
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1.14);
    opacity: 0;
  }
}

/* Pengganti wipe saat mode reduce: perpindahan slide jadi saling silih
   (cross-fade) murni opasitas. Tidak ada clip-path, tidak ada zoom, jadi tidak
   ada elemen seukuran layar yang bergerak. Durasi tetap mengikuti --hero-wipe
   supaya ritme transisinya tidak terasa berubah mendadak. */
@keyframes heroFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes heroFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.hero-slide video.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 28, 47, 0.62) 0%, rgba(7, 28, 47, 0.2) 45%, rgba(7, 28, 47, 0.82) 100%);
}

/* ==================== Intro logo draw ====================
   Ornamen wayang digambar garis demi garis, lalu bagian dalamnya terisi
   dan ikut menyala, kemudian memudar — berulang terus selama section
   masih terlihat. JS mengukur panjang path lalu mengisi
   --logo-path-length; nilai itu yang jadi panjang dasharray/dashoffset. */
.intro-logo-drawing {
  position: absolute;
  pointer-events: none;
  user-select: none;
  transition: opacity 1s ease-in-out, mix-blend-mode 0.5s ease;
}

.intro-logo-drawing svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Path-nya tertutup (diakhiri Z)    dan sengaja diisi: fill-opacity 0 saat
   garis masih digambar, lalu 0.5 setelah selesai supaya bentuk dalam
   ornamen ikut terlihat. */
.intro-logo-drawing path {
  fill: var(--gold);
  fill-opacity: 0;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--logo-path-length);
  stroke-dashoffset: var(--logo-path-length);
  transition: fill-opacity 1.2s ease-in-out, opacity 0.8s ease-in-out;
}

.logo-in-view .intro-logo-drawing path {
  animation: bidakaraLogoDraw 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bidakaraLogoDraw {
  from { stroke-dashoffset: var(--logo-path-length); }
  to   { stroke-dashoffset: 0; }
}

.logo-drawing-complete .intro-logo-drawing {
  mix-blend-mode: color-dodge;
}

.logo-drawing-complete .intro-logo-drawing path {
  fill-opacity: 0.5;
}

.intro-logo-drawing.logo-fading-out {
  opacity: 0 !important;
  transition: opacity 1s ease-in-out !important;
}

.intro-logo-drawing.logo-fading-out path {
  fill-opacity: 0 !important;
  transition: fill-opacity 1s ease-in-out !important;
}

/* Hero (#home) — kanan atas, gambar besar */
#home .intro-logo-drawing {
  z-index: 3;
  right: -6%;
  top: 49%;
  width: min(920px, 68vw);
  transform: translateY(-50%);
  opacity: 0.3;
}

/* Values — latar halus di kanan-bawah */
#values .intro-logo-drawing {
  z-index: 1;
  right: -6%;
  bottom: 4%;
  width: min(680px, 46vw);
  opacity: 0.35;
}

.values .container {
  position: relative;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 130px;
}

.hero-content {
  max-width: 780px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-2);
  font-family: var(--sans);
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1.5px;
  background: var(--gold-2);
  display: inline-block;
}

.eyebrow.light {
  color: #fff;
}

.eyebrow.light::before {
  background: #fff;
}

.hero-content h1 {
  margin: 22px 0 20px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(34px, 5.4vw, 66px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.hero-content h1 em {
  font-style: italic;
  color: var(--gold-2);
}

/* :not() dipakai agar span struktural dari split-text tidak ikut jadi emas. */
.hero-content h1 span:not(.line-reveal):not(.line-reveal__i):not(.w) {
  color: var(--gold-2);
}

.hero-content p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 17.5px;
  max-width: 560px;
  margin: 0 0 30px;
}

.hero-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  padding-bottom: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 64px;
}

.hero-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.slider-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: #fff;
  font-size: 18px;
  transition: all 0.25s ease;
}

.slider-arrow:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}

.slider-dots .dot.active {
  background: var(--gold-2);
  width: 26px;
  border-radius: 8px;
}

.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
}

.hero-location span {
  color: var(--gold-2);
}

/* ============================ Stats strip ============================ */
.stats-strip {
  position: relative;
  z-index: 3;
  margin-top: -34px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.stat {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  padding: 26px 28px;
}

.stat-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.stat small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* ============================ Section head ============================ */
.section-head {
  margin-bottom: 54px;
}

.section-head.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

/* Section Services: latar biru penuh, kartu tetap putih agar teksnya terbaca. */
.services-section {
  position: relative;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-800) 52%, var(--navy-900) 100%);
  overflow: hidden;
}

.services-section::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 164, 71, 0.16) 0%, rgba(201, 164, 71, 0) 68%);
  pointer-events: none;
}

.services-section::after {
  content: "";
  position: absolute;
  bottom: -220px;
  left: -120px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.services-section .container {
  position: relative;
  z-index: 1;
}

.services-section .eyebrow {
  color: var(--gold-2);
}

.services-section .section-head h2 {
  color: #fff;
}

.services-section .section-head h2 em {
  color: var(--gold);
}

.services-section .head-copy p {
  color: rgba(255, 255, 255, 0.78);
}

.services-section .text-link {
  color: #fff;
  border-bottom-color: rgba(201, 164, 71, 0.6);
}

.services-section .text-link:hover {
  color: var(--gold-2);
}

.services-section .service-card {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 22px 44px -26px rgba(0, 20, 40, 0.85);
}

/* Kartu tetap putih, jadi teksnya mengikuti kontras di atas putih:
   --muted hanya 3.18:1 dan emas terang hanya 2.85:1 di kartu putih. */
.services-section .service-card p {
  color: var(--body);
}

.services-section .service-card a {
  color: #8a6d24;
}

.services-section .service-card a:hover {
  color: var(--gold);
}

.services-section .service-card:hover {
  border-color: var(--gold-2);
  box-shadow: 0 28px 52px -24px rgba(0, 20, 40, 0.95);
}

.section-head h2 {
  margin-top: 16px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
}

.section-head h2 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 600;
}

.head-copy {
  max-width: 420px;
  padding-bottom: 6px;
}

.head-copy p {
  margin: 0 0 16px;
  color: var(--body);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: all 0.25s ease;
}

.text-link span {
  transition: transform 0.25s var(--ease);
}

.text-link:hover {
  color: var(--gold);
}

.text-link:hover span {
  transform: translateX(4px);
}

/* ============================ Intro / About ============================ */
.intro {
  background: #fff;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 1.35fr;
  gap: 26px;
  align-items: stretch;
}

.intro-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease);
}

.intro-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.intro-card.why-card {
  background: var(--paper);
}

.card-icon {
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 22px;
}

.intro-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.intro-card p {
  color: var(--body);
  margin: 0 0 18px;
}

.check-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--body);
  font-size: 15px;
}

.advantage-list {
  gap: 16px;
}

.advantage-list li strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.advantage-list li span {
  display: block;
  margin-top: 2px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.55;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(182, 149, 69, 0.15);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}

.intro-card .text-link {
  margin-top: auto;
}

.intro-image {
  position: relative;
  border-radius: var(--radius);
  background: center / cover no-repeat;
  min-height: 420px;
  overflow: hidden;
}

.intro-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7, 28, 47, 0.78));
}

.image-caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 1;
  color: #fff;
}

.image-caption span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 8px;
}

.image-caption strong {
  display: block;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
}

/* ============================ Services ============================ */
/* Latar section + styling teks/kartu sudah diatur di blok .services-section
   di atas (sekitar baris 1067), supaya tidak tertimpa urutan Cascade. */

.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: all 0.35s var(--ease);
}

.service-image {
  aspect-ratio: 16 / 11;
  background: center / cover no-repeat;
  transition: transform 0.7s var(--ease);
}

.service-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.service-card h3 {
  color: var(--navy);
  font-size: 19px;
  margin-bottom: 8px;
}

.service-card p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}

.service-card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-weight: 700;
  font-size: 14px;
}

.service-card a span {
  transition: transform 0.25s var(--ease);
}

.service-card a:hover span {
  transform: translateX(4px);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.service-card:hover .service-image {
  transform: scale(1.06);
}

.service-card:hover a {
  color: var(--navy);
}

/* ============================ Values ============================ */
.values {
  position: relative;
  background: #fff;
}

.values .section-head {
  text-align: center;
}

.values .section-head .eyebrow {
  justify-content: center;
}

.value-list {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
}

.value-list article {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 30px;
  padding: 30px 10px;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, padding-left 0.4s var(--ease);
  cursor: default;
}

.value-list article:hover {
  background: var(--paper);
  padding-left: 26px;
}

.value-list article span {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
}

.value-list article h3 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
}

/* ============================ News ============================ */
.news-section {
  background: var(--paper);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.news-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  transition: all 0.35s var(--ease);
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.news-image {
  aspect-ratio: 16 / 10;
  background: center / cover no-repeat;
  transition: transform 0.6s var(--ease);
}

.news-card:hover .news-image {
  transform: scale(1.05);
}

.news-card a {
  display: block;
  padding: 24px;
  flex: 1;
}

.news-card .news-image {
  order: -1;
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.news-meta span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.news-meta time {
  font-size: 12.5px;
  color: var(--muted);
}

.news-card h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card .more {
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
}

.news-card .more:hover {
  color: var(--gold);
}

/* ============================ Agenda ============================ */
.agenda-section {
  position: relative;
  background: linear-gradient(150deg, var(--navy-900), var(--navy) 60%, var(--navy-700));
  color: #fff;
}

/* Section ini juga dipakai di halaman berita/agenda, yang memakai
   .section-head (bukan .agenda-intro seperti di beranda). Tanpa aturan ini
   h2 dan sub-judul ikut warna gelap global dan tidak terlihat di atas
   latar navy. Polanya mengikuti .services-section .section-head h2. */
.agenda-section .section-head h2 {
  color: #fff;
}

.agenda-section .section-head h2 em {
  color: var(--gold-2);
}

.agenda-section .agenda-list {
  margin-top: 0;
}

/* Di bawah 991px tombol .btn-small disembunyikan secara global (memang
   untuk tombol di header), jadi tombol section ini perlu dikembalikan. */
@media (max-width: 991px) {
  .agenda-section .section-head .btn-small {
    display: inline-flex;
  }

  .agenda-section .section-head.split {
    display: flex;
    flex-wrap: wrap;
  }
}

.agenda-wrap {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
}

.agenda-intro h2 {
  color: #fff;
  margin: 16px 0 18px;
  font-size: clamp(28px, 3vw, 40px);
}

.agenda-intro h2 em {
  font-style: italic;
  color: var(--gold-2);
}

.agenda-intro p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 26px;
}

.agenda-list {
  display: grid;
  gap: 14px;
}

.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: center;
  gap: 22px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: all 0.3s var(--ease);
}

.agenda-item:hover {
  transform: translateX(6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.agenda-item .date {
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--line);
  padding-right: 18px;
}

.agenda-item .date strong {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.agenda-item .date span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}

.agenda-item .tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.agenda-item h3 {
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.agenda-item p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.agenda-item > a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 18px;
  transition: all 0.25s ease;
}

.agenda-item > a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Panah di dalam kartu adalah satu-satunya link, jadi area kliknya
   direbangkan ke seluruh kartu. Di bawah 991px panahnya disembunyikan
   demi hemat ruang; ::after ini tetap menyediakan area klik penuh tanpa
   menambah elemen baru di markup.
   Dikecualikan untuk anchor .btn (dipakai di halaman agenda): tombolnya
   sudah terlihat dan bisa diklik, dan ::after-nya sendiri butuh
   position:relative sehingga akan terikat ke tombol, bukan ke kartu. */
.agenda-item > a:not(.btn)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* .agenda-item > a mengunci ukuran 44x44 untuk accommodate bentuk
   lingkaran panah. Tombol "View Detail" di halaman agenda memakai kelas
   .btn, sehingga teksnya ikut terkunci di kotak 44px dan terpotong
   (terukur client 44px vs scroll 118px). Tombol tidak lagi dibatasi
   ukuran; bentuk lingkaran hanya untuk anchor non-tombol. */
.agenda-item > a.btn {
  width: auto;
  height: auto;
}

/* ============================ Hotel ============================ */
.hotel-section {
  background: #fff;
  padding-bottom: 40px;
}

.hotel-card {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(182, 149, 69, 0.4);
  box-shadow: 0 40px 80px rgba(7, 28, 47, 0.1);
}

.hotel-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  background: radial-gradient(120% 120% at 0 0, #fff, var(--paper));
}

.hotel-copy h2 {
  margin: 16px 0 18px;
  font-size: clamp(28px, 3vw, 42px);
}

.hotel-copy h2 em {
  font-style: italic;
  color: var(--gold);
}

.hotel-copy p {
  margin: 0 0 28px;
  max-width: 420px;
}

.hotel-image {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  background: center / cover no-repeat;
}

/* ============================ Promo Hotel ============================ */
.promo-section {
  background: #fff;
}

.promo__head {
  text-align: center;
  margin-bottom: 52px;
}

.promo__head h2 {
  margin: 16px auto 0;
  max-width: 560px;
  font-size: clamp(28px, 3vw, 42px);
}

.promo__head h2 em {
  font-style: italic;
  color: var(--gold);
}

.promo__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
}

.promo__card {
  display: flex;
  flex-direction: column;
  padding: 34px 28px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all 0.35s var(--ease);
}

.promo__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.promo__card--primary {
  grid-row: span 2;
  justify-content: center;
  background: linear-gradient(150deg, var(--navy-900), var(--navy) 55%, var(--navy-700));
  border-color: transparent;
  color: #fff;
}

.promo__card--primary h3 {
  font-family: var(--serif);
  font-size: 27px;
  color: #fff;
}

.promo__card--primary p {
  color: rgba(255, 255, 255, 0.72);
}

.promo__card--light {
  background: #fff;
}

.promo__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.promo__card h3 {
  font-size: 21px;
  margin-bottom: 12px;
}

.promo__card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
}

.promo__footer {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.promo__cta {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}

.promo__card--primary .promo__cta {
  color: var(--gold-2);
}

.promo__price {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Promo otomatis dari bidakarahotel.com */
.promo__grid--hotel {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

.promo__card--hotel {
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.promo__thumb {
  height: 190px;
  overflow: hidden;
  background: var(--paper);
}

.promo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.promo__card--hotel:hover .promo__thumb img {
  transform: scale(1.06);
}

.promo__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.promo__body .promo__tag {
  margin-bottom: 10px;
}

.promo__body p {
  flex: 1;
}

.promo__bar {
  margin-top: 32px;
  padding: 16px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 0.88rem;
  color: var(--muted);
  white-space: nowrap;
}

.promo__bar-cta {
  font-weight: 700;
  color: var(--gold);
  transition: color 0.2s;
}

.promo__bar-cta:hover {
  color: var(--navy);
}

@media (max-width: 900px) {
  .promo__grid { grid-template-columns: 1fr 1fr; }
  .promo__card--primary { grid-row: auto; }
  .promo__grid--hotel { grid-template-columns: 1fr 1fr; }
  .promo__bar { flex-direction: column; border-radius: 18px; text-align: center; }
}

@media (max-width: 640px) {
  .promo__grid, .promo__grid--hotel { grid-template-columns: 1fr; }
  .promo__thumb { height: 220px; }
}

/* ============================ CSR ============================ */
.csr-section {
  background: #fff;
}

.csr-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.csr-image {
  position: relative;
  min-height: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: center / cover no-repeat;
}

.csr-copy h2 {
  margin: 16px 0 18px;
  font-size: clamp(28px, 3vw, 40px);
}

.csr-copy h2 em {
  font-style: italic;
  color: var(--gold);
}

.csr-copy > p {
  margin: 0 0 26px;
  max-width: 480px;
}

.csr-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.csr-points div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: #fff;
  transition: all 0.3s ease;
}

.csr-points div:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.csr-points span {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}

.csr-points b {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================ Lima Pilar ============================ */
.mitra-section {
  background: var(--paper);
}

.mitra__head {
  text-align: center;
  margin-bottom: 52px;
}

.mitra__head h2 {
  margin: 16px auto 0;
  font-size: clamp(28px, 3vw, 42px);
}

.mitra__head h2 em {
  font-style: italic;
  color: var(--gold);
}

.mitra__visi {
  max-width: 780px;
  margin: 24px auto 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.8;
  color: var(--navy);
}

.mitra__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto;
}

.mitra__grid > .pilar-card:nth-child(-n + 3) { grid-column: span 2; }
.mitra__grid > .pilar-card:nth-child(n + 4) { grid-column: span 3; }

.pilar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 28px 38px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  transition: all 0.35s var(--ease);
  overflow: hidden;
}

.pilar-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pilar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.pilar-card:hover::before {
  opacity: 1;
}

.pilar-card__num {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  background: rgba(182, 149, 69, 0.12);
}

.pilar-card__icon {
  width: 60px;
  height: 60px;
  padding: 14px;
  margin-bottom: 24px;
  border-radius: 14px;
  color: #fff;
  background: var(--navy);
  transition: background 0.3s ease;
}

.pilar-card:hover .pilar-card__icon {
  background: var(--gold);
}

.pilar-card__icon svg {
  width: 100%;
  height: 100%;
}

.pilar-card h3 {
  margin-bottom: 12px;
  font-size: 19px;
  color: var(--navy);
}

.pilar-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 900px) {
  .mitra__grid { grid-template-columns: 1fr 1fr; }
  .mitra__grid > .pilar-card:nth-child(-n + 3),
  .mitra__grid > .pilar-card:nth-child(n + 4) { grid-column: span 1; }
}

@media (max-width: 640px) {
  .mitra__grid { grid-template-columns: 1fr; }
}

/* ============================ Video ============================ */
.video-section {
  background: #fff;
  padding-top: 0;
}

.video-card {
  position: relative;
  min-height: 540px;
  border-radius: 22px;
  background: center / cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 28, 47, 0.4), rgba(7, 28, 47, 0.78));
}

.video-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.video-content h2 {
  color: #fff;
  margin: 16px 0 34px;
  font-size: clamp(28px, 3.4vw, 44px);
}

.video-content h2 em {
  font-style: italic;
  color: var(--gold-2);
}

.play-btn {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 26px;
  backdrop-filter: blur(4px);
  transition: all 0.3s var(--ease);
}

.play-btn::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

.play-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
}

/* ============================ Contact ============================ */
.contact-section {
  background: var(--paper);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.contact-grid > div > h2 {
  margin: 16px 0 16px;
  font-size: clamp(30px, 3.4vw, 44px);
}

.contact-grid > div > h2 em {
  font-style: italic;
  color: var(--gold);
}

.contact-grid > div > p {
  margin: 0 0 30px;
  max-width: 440px;
}

.contact-details {
  display: grid;
  gap: 0;
}

.contact-details > a,
.contact-details > div {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 600;
  transition: color 0.2s ease, padding-left 0.3s var(--ease);
}

.contact-details > a:hover {
  color: var(--gold);
  padding-left: 10px;
}

.contact-details span {
  flex: 0 0 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--line);
}

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form label {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 18px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  appearance: none;
}

.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231e2023' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-color: var(--paper);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 65, 120, 0.12);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #b4b8bf;
}

.form-status {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  min-height: 0;
}

.form-status.ok { color: #147a3b; }
.form-status.err { color: #d92d20; }

/* ============================ Map ============================ */
.map-section {
  background: #fff;
}

.map-wrap {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}

.map-copy h2 {
  margin: 16px 0 18px;
  font-size: clamp(28px, 3vw, 40px);
}

.map-copy h2 em {
  font-style: italic;
  color: var(--gold);
}

.map-copy > p {
  margin: 0 0 24px;
}

.route-list {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.route-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--paper);
  border-radius: 10px;
  color: var(--body);
  font-size: 14px;
}

.route-list b {
  flex: 0 0 auto;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: 0.5px;
}

.map-svg-wrap {
  position: relative;
}

.map-svg-wrap .map-embed {
  display: block;
  width: 100%;
  height: 540px;
  border: 1px solid var(--line);
  border-radius: 20px;
  z-index: 1;
}

.map-open-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.map-open-link:hover .reset-icon {
  transform: rotate(90deg);
}

.reset-icon {
  color: var(--gold);
  transition: transform 0.4s ease-in-out;
}

.map-info-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  width: 320px;
  max-width: calc(100% - 36px);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 50px rgba(7, 28, 47, 0.16);
  backdrop-filter: blur(6px);
}

.map-info-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.map-pin-main {
  color: var(--gold);
  margin-top: 4px;
}

.map-info-title strong {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 1.5px;
}

.map-info-title p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.map-destinations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.map-destinations div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--paper);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.map-destinations b {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 12px;
}

.map-destinations span {
  font-weight: 700;
  color: var(--ink);
}

.map-destinations small {
  margin-left: auto;
  color: var(--muted);
}

/* ============================ Footer ============================ */
.footer {
  background: var(--navy-ink);
  color: rgba(255, 255, 255, 0.78);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 40px;
  padding-top: 70px;
  padding-bottom: 50px;
}

.footer-brand img {
  height: 46px;
  width: auto;
}

.footer-brand p {
  margin: 18px 0 20px;
  font-family: var(--serif);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all 0.25s ease;
}

.socials a:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-3px);
}

.socials img {
  width: 18px;
  height: 18px;
  filter: invert(1);
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 18px;
}

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  padding: 6px 0;
  transition: color 0.2s ease, padding-left 0.25s var(--ease);
}

.footer-col a:hover {
  color: #fff;
  padding-left: 6px;
}

.footer-certifications {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-cert-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.footer-cert-list {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-cert-list a {
  display: inline-flex;
  line-height: 0;
  transition: opacity 0.3s ease;
}

.footer-cert-list a:hover {
  opacity: 0.75;
}

.footer-cert-list img {
  height: 54px;
  width: auto;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  padding-bottom: 26px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom a:hover {
  color: var(--gold-2);
}

.footer-bottom > div {
  display: flex;
  gap: 22px;
}

/* ============================ Modal video ============================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.35s ease;
}

.modal.open {
  visibility: visible;
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 28, 47, 0.82);
}

.modal-content {
  position: relative;
  width: min(880px, 92vw);
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  transform: scale(0.94);
  transition: transform 0.35s var(--ease);
}

.modal.open .modal-content {
  transform: scale(1);
}

.modal-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.modal-content.portrait {
  width: min(440px, 92vw);
}

.modal-content.portrait iframe {
  aspect-ratio: 9 / 16;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 22px;
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}

.modal-close:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
}

/* ============================ Reveal animation ============================ */
.reveal-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================ Split-text line reveal ============================ */
.is-split .line-reveal {
  display: block;
  overflow: hidden;
  /* descender (g, j, p) sering terpotong oleh overflow:hidden pada line-height rapat */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.is-split .line-reveal__i {
  display: block;
  transform: translateY(108%);
  transition: transform 0.85s var(--ease);
}

.is-split .line-reveal.is-in .line-reveal__i {
  transform: translateY(0);
}

/* Kata hasil pemecahan baris: inline-block supaya posisi vertikalnya konsisten
   saat diukur, dan warnanya mewarisi agar tidak ikut aturan warna span/heading. */
.is-split .w {
  display: inline-block;
  color: inherit;
}

/* ============================ Back to top + toast ============================ */
.back-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 18px;
  box-shadow: 0 14px 30px rgba(0, 65, 120, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s var(--ease);
}

.back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-top:hover {
  background: var(--gold);
  color: var(--navy-900);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 120;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-900);
  color: #fff;
  padding: 14px 22px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s var(--ease);
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.toast.ok { background: #147a3b; }
.toast.err { background: #b42318; }

/* ============================ Responsive ============================ */
@media (max-width: 1199px) {
  .mega-menu {
    grid-template-columns: 260px 1fr;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .agenda-wrap {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .csr-grid,
  .contact-grid,
  .map-wrap {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .csr-image {
    min-height: 360px;
  }

  .map-svg-wrap .map-embed {
    height: 460px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .main-nav > a,
  .nav-dropdown > button {
    padding: 10px 9px;
    font-size: 14px;
  }

  .btn-small {
    padding: 10px 16px;
  }
}

@media (max-width: 991px) {
  .main-nav,
  .btn-small,
  .language-switcher {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .intro-grid {
    grid-template-columns: 1fr 1fr;
  }

  .intro-image {
    grid-column: 1 / -1;
    min-height: 360px;
  }

  .news-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hotel-card {
    grid-template-columns: 1fr;
  }

  .hotel-image {
    min-height: 340px;
  }

  .section {
    padding: 84px 0;
  }

  .service-card.featured .service-card.featured h3 {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .container {
    padding: 0 20px;
  }

  .hero {
    min-height: 92vh;
  }

  .hero .container {
    padding-bottom: 100px;
  }

  .hero-content h1 {
    font-size: clamp(30px, 9vw, 44px);
  }

  #home .intro-logo-drawing {
    width: 100vw;
    right: -30%;
    top: 44%;
    opacity: 0.4;
  }

  #values .intro-logo-drawing {
    width: 82vw;
    right: -26%;
    bottom: 2%;
    opacity: 0.35;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 40px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section-head.split {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .intro-grid,
  .service-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .intro-image {
    grid-column: auto;
  }

  .value-list article {
    grid-template-columns: 60px 1fr;
    gap: 14px;
    padding: 22px 4px;
  }

  .agenda-item {
    grid-template-columns: 1fr auto;
  }

  .agenda-item .date {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 12px;
    width: 100%;
  }

  /* Panah tidak ditampilkan di layar sempit, tapi linknya tidak boleh
     ikut hilang: display:none membuat kartu tanpa area klik sama sekali.
     Linknya disembunyikan secara visual, lalu ::after di atas tetap
     memberi area klik sebesar kartu. */
  .agenda-item > a {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: transparent;
    font-size: 0;
  }

  .hotel-copy {
    padding: 38px 26px;
  }

  .contact-form .form-row {
    grid-template-columns: 1fr;
  }

  .map-svg-wrap {
    min-height: 540px;
  }

  .map-info-card {
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat {
    padding: 20px 22px;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* ============================ Inner rich pages ============================ */
.page-hero-band {
   position: relative;
   color: #fff;
   background: var(--navy-ink);
   background-image: var(--phb-bg, none);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 96px 0 88px;
   overflow: hidden;
 }

.page-hero-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 28, 47, 0.7), rgba(7, 28, 47, 0.9));
}

.rich-page-body {
  position: relative;
  background: #fff;
}

.rich-orn-watermark {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(300px, 28vw, 460px);
  z-index: 4;
  pointer-events: none;
  background-image: var(--orn-bg, none);
  background-repeat: no-repeat;
  background-size: clamp(300px, 28vw, 460px) auto;
  background-position: right center;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent);
          mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent);
}

body[data-ornamen-side='left'] .rich-orn-watermark {
  right: auto;
  left: 0;
  background-position: left center;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent);
}

.rich-page-body > .container,
.rich-page-body > *:not(.rich-orn-watermark) {
  position: relative;
  z-index: 1;
}

/* ---- Ornamen latar (administrasi via /admin/halaman) ---- */
:root {
  --orn-wayang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg%3E%3Cpath d='M70 6 C92 34 92 60 70 98 C48 60 48 34 70 6 Z' fill='%23071C2F' opacity='.5'/%3E%3Cpath d='M70 98 C98 108 114 122 118 136 M70 98 C42 108 26 122 22 136' stroke='%23071C2F' stroke-width='4' fill='none' opacity='.5'/%3E%3Cpath d='M46 96 C56 100 84 100 94 96' stroke='%23071C2F' stroke-width='3' fill='none' opacity='.4'/%3E%3Ccircle cx='70' cy='50' r='5' fill='%23c9a447'/%3E%3Ccircle cx='70' cy='72' r='3' fill='%23c9a447'/%3E%3C/g%3E%3C/svg%3E");
  --orn-kawung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23071C2F' stroke-width='2.5' opacity='.45'%3E%3Ccircle cx='60' cy='60' r='8'/%3E%3Ccircle cx='60' cy='60' r='19'/%3E%3Ccircle cx='60' cy='0' r='14'/%3E%3Ccircle cx='0' cy='60' r='14'/%3E%3Ccircle cx='120' cy='60' r='14'/%3E%3Ccircle cx='60' cy='120' r='14'/%3E%3Ccircle cx='0' cy='0' r='10'/%3E%3Ccircle cx='120' cy='0' r='10'/%3E%3Ccircle cx='0' cy='120' r='10'/%3E%3Ccircle cx='120' cy='120' r='10'/%3E%3C/g%3E%3C/svg%3E");
  --orn-parang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%23071C2F' stroke-width='2' opacity='.45'%3E%3Cpath d='M-15-15 L125 125 M125-15 L-15 125'/%3E%3Cg fill='%23071C2F'%3E%3Cpath d='M30 30 L43 43 L30 56 L17 43 Z'/%3E%3Cpath d='M70 70 L83 83 L70 96 L57 83 Z'/%3E%3Cpath d='M110 30 L123 43 L110 56 L97 43 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --orn-bidakara: url("../images/ornamen/bidakara-circular.svg");
  --orn-custom: none;
  --orn-bg: var(--orn-wayang);
  --orn-ketupat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23071C2F' stroke-width='3' opacity='.42'%3E%3Cpath d='M65 20 L112 65 L65 110 L18 65 Z'/%3E%3Cpath d='M65 34 L98 65 L65 96 L32 65 Z' opacity='.7'/%3E%3Cpath d='M65 20 L65 8 M60 12 L70 12 M65 110 L65 122 M60 118 L70 118'/%3E%3Cpath d='M18 65 L6 65 M112 65 L124 65 M10 60 L10 70 M120 60 L120 70'/%3E%3C/g%3E%3C/svg%3E");
  --orn-bendera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='100' viewBox='0 0 150 100'%3E%3Cg fill='none' stroke='%23071C2F' stroke-width='3' opacity='.42'%3E%3Cpath d='M10 92 L10 8'/%3E%3Cpath d='M10 12 C 40 4, 60 22, 92 12 L92 52 C 60 62, 40 44, 10 52 Z'/%3E%3Cpath d='M10 58 C 40 50, 60 68, 92 58' opacity='.6'/%3E%3Cpath d='M4 92 L16 92 M7 86 L13 98 M13 86 L7 98'/%3E%3C/g%3E%3C/svg%3E");
  --orn-lampion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='130' viewBox='0 0 110 130'%3E%3Cg fill='none' stroke='%23071C2F' stroke-width='3' opacity='.42'%3E%3Cpath d='M55 4 L55 22'/%3E%3Crect x='28' y='22' width='54' height='8' rx='4'/%3E%3Cpath d='M55 30 C 84 38, 84 66, 55 92 C 26 66, 26 38, 55 30 Z'/%3E%3Cpath d='M55 38 L55 84' opacity='.6'/%3E%3Crect x='30' y='92' width='50' height='8' rx='4'/%3E%3Cpath d='M55 100 L55 112 M50 118 L60 118 M55 112 L55 126'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-ornamen='kawung']   { --orn-bg: var(--orn-kawung); }
body[data-ornamen='parang']   { --orn-bg: var(--orn-parang); }
body[data-ornamen='bidakara'] { --orn-bg: var(--orn-bidakara); }
body[data-ornamen='none']     { --orn-bg: none; }

/* Ornamen yang berasal dari tema aktif (/admin/tema). Tiga pola ini hanya
   ada di tabel tema, bukan di pilihan /admin/halaman, jadi harus punya
   padanan sendiri supaya data-ornamen="bendera" dsb. tidak jatuh
   ke gambar wayang bawaan. Warnanya dibiarkan navy seperti keempat
   pola bawaan, bukan warna tema: watermark ini berada di belakang teks
   dan harus tetap redup di semua latar. */
body[data-ornamen='bendera']  { --orn-bg: var(--orn-bendera); }
body[data-ornamen='ketupat']  { --orn-bg: var(--orn-ketupat); }
body[data-ornamen='lampion']  { --orn-bg: var(--orn-lampion); }
body[data-ornamen-custom]     { --orn-bg: var(--orn-custom); }

.page-hero-band .container {
  position: relative;
  z-index: 1;
}

.page-hero-band h1 {
  color: #fff;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 600;
  margin-top: 20px;
  max-width: 20ch;
}

.page-hero-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 28px;
}

.page-hero-crumb a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s ease;
}

.page-hero-crumb a:hover {
  color: var(--gold-2);
}

.page-hero-crumb__sep {
  color: rgba(255, 255, 255, 0.35);
}

.page-hero-crumb__current {
  color: var(--gold-2);
}

.page-about {
  background: #fff;
}

.page-plain {
  background: #fff;
  padding: 96px 0;
}

.rich-prose--full {
  max-width: 900px;
  margin: 0 auto;
}

.page-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
}

.page-about-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.page-about-media__img {
  aspect-ratio: 4 / 3;
  background: center / cover no-repeat;
}

.rich-prose {
  color: var(--body);
  font-size: 16.5px;
  line-height: 1.85;
}

.rich-prose p {
  margin: 0 0 20px;
}

.rich-prose p.ql-align-justify {
  text-align: justify;
}

.rich-prose p.ql-align-center {
  text-align: center;
}

.rich-prose img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 auto 24px;
}

.rich-prose a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rich-prose a:hover {
  color: var(--navy);
}

.page-subpages {
  background: var(--paper);
}

.subpage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.subpage-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.subpage-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--gold-soft);
}

.subpage-card h3 {
  color: var(--navy);
  font-size: 19px;
}

@media (max-width: 900px) {
  .page-about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .page-hero-band {
    padding: 72px 0 64px;
  }
}

/* ============================ History timeline ============================ */
.history {
  display: grid;
  gap: 64px;
}

.history__intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.history__lead {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.history__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.history__stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 14px 30px rgba(7, 28, 47, 0.05);
}

.history__stat-value {
  display: block;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 600;
  color: var(--navy);
}

.history__stat-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.history__timeline {
  position: relative;
  padding-left: 44px;
  border-left: 2px solid var(--line);
}

.history__item {
  position: relative;
  margin-bottom: 46px;
}

.history__item:last-child {
  margin-bottom: 0;
}

.history__marker {
  position: absolute;
  left: -53px;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-2);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--gold-soft);
}

.history__year {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
}

.history__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 14px 30px rgba(7, 28, 47, 0.05);
}

.history__card h3 {
  color: var(--navy);
  font-size: 22px;
  margin-bottom: 8px;
}

.history__card p {
  margin: 0;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.7;
}

.history__step {
  display: inline-block;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}

.history__complex {
  background: var(--navy-ink);
  border-radius: var(--radius);
  padding: 72px 56px;
  text-align: center;
}

.history__complex-head .label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 14px;
}

.history__complex-head h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 14px;
}

.history__complex-head p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16.5px;
  max-width: 620px;
  margin: 0 auto;
}

.history__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 48px;
  text-align: left;
}

.history__feature {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 28px;
}

.history__feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(201, 164, 71, 0.16);
  color: var(--gold-2);
  margin-bottom: 18px;
}

.history__feature-icon svg {
  width: 26px;
  height: 26px;
}

.history__feature h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 8px;
}

.history__feature p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

/* ============================ Philosophy ============================ */
.philosophy {
  display: grid;
  gap: 64px;
}

.philosophy__intro {
  position: relative;
  background: var(--navy-ink);
  border-radius: var(--radius);
  padding: 52px 56px;
  color: #fff;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.philosophy__intro-mark {
  font-family: var(--serif);
  font-size: 60px;
  line-height: 0.4;
  color: var(--gold-2);
}

.philosophy__lead {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.55;
  color: #fff;
  margin: 0;
}

.philosophy__sections {
  display: grid;
  gap: 72px;
}

.philosophy__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}

/* Section tanpa gambar hanya berisi ikon, jadi kolomnya ikut menyempit
   dan ikon disejajarkan dengan judul, bukan melayang di tengah. */
@media (min-width: 901px) {
  .philosophy__row:not(.philosophy__row--visual) {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .philosophy__row:not(.philosophy__row--visual) .philosophy__row-body h3 {
    margin-top: 10px;
  }
}

.philosophy__row-media {
  display: grid;
  gap: 20px;
}

.philosophy__row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--gold);
}

.philosophy__row-icon svg {
  width: 28px;
  height: 28px;
}

.philosophy__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.philosophy__figure {
  margin: 0;
  height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
}

.philosophy__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.philosophy__row-body h3 {
  color: var(--navy);
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 6px 0 12px;
}

.philosophy__row-text {
  color: var(--body);
  font-size: 16px;
  line-height: 1.8;
}

.philosophy__row-text > p {
  margin: 0 0 16px;
}

.philosophy__row-text > p:last-child {
  margin-bottom: 0;
}

.philosophy__row-text strong {
  color: var(--navy);
  font-weight: 600;
}

.philosophy__list {
  margin: 0 0 16px;
  padding: 0 0 0 4px;
  list-style: none;
  counter-reset: philosophi;
}

.philosophy__list li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 38px;
  counter-increment: philosophi;
}

.philosophy__list li:last-child {
  margin-bottom: 0;
}

.philosophy__list li::before {
  content: counter(philosophi) ".";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(182, 149, 69, 0.15);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 900px) {
  .philosophy__row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .history__complex {
    padding: 48px 28px;
  }

  .philosophy__intro {
    padding: 40px 28px;
  }
}

/* ============================ Inner pages (menu) ============================ */
.page-hero-band--small {
  padding: 72px 0 64px;
}

.page-hero-lead {
  margin-top: 18px;
  max-width: 660px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.7;
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.category-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s var(--ease);
}

.category-nav a svg {
  width: 16px;
  height: 16px;
}

.category-nav a:hover {
  background: rgba(201, 164, 71, 0.18);
  border-color: rgba(201, 164, 71, 0.65);
  color: var(--gold-2);
}

.empty-note {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  padding: 40px 0;
}

.service-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(7, 28, 47, 0.82);
  color: var(--gold-2);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 30px;
}

.service-image {
  position: relative;
}

.news-card .news-excerpt {
  color: var(--body);
  font-size: 15px;
  line-height: 1.65;
  margin: 10px 0 14px;
}

/* ---- Spec (layanan detail) ---- */
.spec-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}

.spec-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px 32px;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}

.spec-item {
  border-left: 2px solid var(--gold-2);
  padding: 6px 0 6px 18px;
}

.spec-item--full {
  grid-column: 1 / -1;
}

.spec-item__label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.spec-item__value {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--navy);
}

.spec-item__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.spec-item__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  color: var(--body);
}

.spec-item__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-2);
}

.spec-card__plan {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.spec-card__plan img {
  width: 100%;
  border-radius: var(--radius);
}

/* ---- Galeri pendukung (layanan detail) ---- */
.layanan-gallery {
  margin-bottom: 40px;
}

.spec-card + .layanan-gallery {
  margin-top: 40px;
}

.layanan-gallery .section-head {
  margin-bottom: 24px;
}

.layanan-gallery .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 18px;
}

/* ---- CTA band ---- */
.cta-band {
  background: var(--navy-ink);
  color: #fff;
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
}

.cta-band__inner h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  margin: 8px 0;
}

.cta-band__inner p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0;
}

.cta-band .btn {
  flex: 0 0 auto;
}

/* ---- Pagination ---- */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.pagination__inner {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pagination a,
.pagination__current,
.pagination__dots,
.pagination__disabled {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
}

.pagination a:hover {
  background: var(--gold-2);
  border-color: var(--gold-2);
  color: var(--navy-ink);
}

.pagination__current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.pagination__disabled {
  color: var(--muted);
  opacity: 0.5;
}

.pagination__dots {
  border: none;
  background: none;
  color: var(--muted);
}

/* ---- Gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.gallery-item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  border: 1px solid var(--line);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 10px;
  background: linear-gradient(transparent, rgba(7, 28, 47, 0.88));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.gallery-item__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 14px;
}

.layanan-gallery .gallery-item {
  cursor: zoom-in;
}

/* ---- Photo viewer (jQuery) ---- */
body.pv-open {
  overflow: hidden;
}

.pv {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}

.pv.pv--open {
  opacity: 1;
  visibility: visible;
}

.pv__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 28, 47, 0.94);
  cursor: zoom-out;
}

.pv__stage {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(1180px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pv__img {
  display: block;
  max-width: min(1180px, 92vw);
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.06);
  cursor: zoom-in;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.pv__stage.is-loading .pv__img {
  opacity: 0;
}

.pv__stage.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--gold-2);
  border-radius: 50%;
  animation: pv-spin 0.8s linear infinite;
}

@keyframes pv-spin {
  to {
    transform: rotate(360deg);
  }
}

.pv__msg {
  display: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--sans);
  font-size: 14px;
}

.pv__stage.is-error .pv__msg {
  display: block;
}

.pv__cap {
  max-width: min(1180px, 92vw);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--sans);
  font-size: 14px;
  text-align: center;
}

.pv__cap:empty {
  display: none;
}

.pv__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(7, 28, 47, 0.7);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pv__nav:hover,
.pv__nav:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  outline: none;
}

.pv__prev {
  left: max(16px, 3vw);
}

.pv__next {
  right: max(16px, 3vw);
}

.pv__close {
  position: absolute;
  top: max(16px, 3vh);
  right: max(16px, 3vw);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(7, 28, 47, 0.7);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pv__close:hover,
.pv__close:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  outline: none;
}

.pv__count {
  position: absolute;
  bottom: max(18px, 3vh);
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(7, 28, 47, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.pv__sep {
  opacity: 0.5;
}

.pv__hint {
  position: absolute;
  bottom: max(60px, 7vh);
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pv.pv--open .pv__hint {
  opacity: 1;
}

@media (max-width: 760px) {
  .pv__nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .pv__prev {
    left: 8px;
  }

  .pv__next {
    right: 8px;
  }

  .pv__img {
    max-height: 68vh;
  }

  .pv__hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv,
  .pv__img,
  .pv__hint {
    transition: none;
  }

  .pv__stage.is-loading::before {
    animation-duration: 1.6s;
  }
}

/* ---- Berita/agenda single ---- */
.rich-figure {
  margin: 0 0 32px;
  border-radius: var(--radius);
  overflow: hidden;
}

.rich-figure img {
  width: 100%;
  display: block;
}

.show-back {
  margin-top: 36px;
}

.video-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  aspect-ratio: 16 / 9;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vtour {
  margin-top: 56px;
}

.vtour__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.vtour__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(201, 164, 71, 0.14);
  border: 1px solid rgba(201, 164, 71, 0.42);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vtour__badge svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.vtour__frame {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow);
}

.vtour__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.vtour__360 {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, #0d2036, #071c2f);
  box-shadow: var(--shadow);
  touch-action: none;
  isolation: isolate;
}

.vtour__360:fullscreen {
  aspect-ratio: auto;
  border-radius: 0;
}

.vtour__360-stage {
  position: absolute;
  inset: 0;
  cursor: grab;
  outline: none;
}

.vtour__360-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.vtour__360-stage:focus-visible {
  box-shadow: inset 0 0 0 3px var(--gold);
  border-radius: var(--radius);
}

.vtour__360-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7, 28, 47, 0.45), transparent 22%),
    linear-gradient(to top, rgba(7, 28, 47, 0.4), transparent 26%);
  z-index: 1;
}

.vtour__360--loading .vtour__360-shade {
  background: linear-gradient(160deg, #0d2036, #071c2f);
}

.vtour__360-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.vtour__360--loading .vtour__360-loader {
  opacity: 1;
  visibility: visible;
}

.vtour__360-loader::before {
  content: '';
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--gold);
  animation: vtour-spin 0.9s linear infinite;
}

@keyframes vtour-spin {
  to {
    transform: rotate(360deg);
  }
}

.vtour__360-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(7, 28, 47, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.vtour__360-hint.is-hidden {
  opacity: 0;
  transform: translate(-50%, 10px);
}

.vtour__360-bar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
}

.vtour__360-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.vtour__360-btn:hover {
  background: #fff;
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

.vtour__360-btn:active {
  transform: translateY(0);
}

.vtour__360-btn.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.vtour__360-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.vtour__360-compass {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 28, 47, 0.55);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.2s linear;
}

.vtour__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.vtour__meta svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--gold);
}

@media (max-width: 640px) {
  .vtour__360-btn {
    width: 36px;
    height: 36px;
  }

  .vtour__360-bar {
    top: 12px;
    right: 12px;
  }

  .vtour__360-hint {
    bottom: 14px;
    font-size: 11.5px;
    padding: 8px 13px;
  }

  .vtour__360-compass {
    display: none;
  }
}

/* ---- Kontak ---- */
.kontak__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}

.kontak__info h2 {
  color: var(--navy);
  font-size: clamp(30px, 3.4vw, 44px);
  margin: 8px 0 16px;
}

.kontak__desc {
  color: var(--body);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 46ch;
}

.kontak__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.kontak__list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.kontak-item__label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 700;
  color: var(--muted);
}

.kontak__list a {
  color: var(--navy);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
}

.kontak__list a:hover {
  color: var(--gold);
}

.kontak__social {
  margin-top: 28px;
}

.kontak__social-links {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.kontak__social-links a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  background: #fff;
  transition: all 0.25s var(--ease);
}

.kontak__social-links a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-2);
}

.kontak__form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}

.kontak__form input,
.kontak__form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.kontak__form input:focus,
.kontak__form textarea:focus {
  border-color: var(--gold-2);
  background: #fff;
}

.kontak__form textarea {
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-notice {
  background: var(--gold-soft);
  color: var(--navy-900);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.form-error {
  display: block;
  color: #b3261e;
  font-size: 13px;
  margin-top: -8px;
  margin-bottom: 12px;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.kontak__map {
  margin-top: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  height: 420px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.kontak__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .kontak__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .spec-card {
    padding: 24px;
  }

  .kontak__form {
    padding: 24px;
  }

  .page-hero-band--small {
    padding: 64px 0 56px;
  }
}
/* ============================ Subsidiaries & Partners ============================ */
.page-subs {
  padding-top: 72px;
}

.subs {
  display: grid;
  gap: 72px;
}

.subs__lead {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.subs__intro {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.subs__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.subs-fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 40px;
}

.subs-fact__num {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
}

.subs-fact__label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--body);
}

.subs-fact--total {
  background: linear-gradient(135deg, var(--navy-800), var(--navy));
  border-color: transparent;
}

.subs-fact--total .subs-fact__num {
  color: var(--gold-2);
}

.subs-fact--total .subs-fact__label {
  color: rgba(255, 255, 255, 0.92);
}

.subs-group {
  display: grid;
  gap: 30px;
}

.subs-group__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.subs-group__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(182, 149, 69, 0.12);
  color: var(--gold);
}

.subs-group__icon svg {
  width: 26px;
  height: 26px;
}

.subs-group__title {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}

.subs-group__desc {
  color: var(--body);
  margin: 6px 0 0;
  max-width: 720px;
}

.subs-group__count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(0, 65, 120, 0.07);
  border: 1px solid rgba(0, 65, 120, 0.12);
  border-radius: 40px;
  padding: 9px 18px;
  white-space: nowrap;
}

.subs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px;
}

.subs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 28px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.subs-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease);
}

a.subs-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--gold-soft);
}

a.subs-card:hover::before {
  transform: scaleY(1);
}

.subs-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
}

/* Flex (bukan grid) supaya max-height:100% menghitung tinggi kotak yang
   sudah pasti. Pada grid bawaan, barisnya ikut membesar mengikuti gambar,
   sehingga persen itu tidak pernah membatasi dan logo meluber menimpa judul. */
.subs-card__logo img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.78;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

a.subs-card:hover .subs-card__logo img {
  filter: none;
  opacity: 1;
  transform: scale(1.04);
}

.subs-card__logo--mono {
  background: linear-gradient(135deg, var(--navy-800), var(--navy));
  border-color: transparent;
}

.subs-card__mono {
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: 2px;
  color: var(--gold-2);
}

.subs-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.subs-card__name {
  font-size: 19px;
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
}

.subs-card__desc {
  color: var(--body);
  margin: 0;
  font-size: 15.5px;
}

.subs-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--gold);
}

.subs-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease);
}

a.subs-card:hover .subs-card__cta svg {
  transform: translateX(4px);
}

.subs-card__cta--muted {
  color: var(--muted);
  font-weight: 600;
}

.subs-group--alt .subs-card {
  background: var(--paper);
  border-color: transparent;
}

a.subs-group--alt .subs-card:hover {
  background: #fff;
  border-color: var(--gold-soft);
}

/* :not() dipakai supaya aturan ini tidak menimpa latar navy pada monogram —
   tanpa itu spesifisitas dua-kelas di sini mengalahkan .subs-card__logo--mono
   dan monogram jadi teks emas di atas kotak putih. */
.subs-group--alt .subs-card__logo:not(.subs-card__logo--mono) {
  background: #fff;
}

.subs-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 44px 48px;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(120deg, var(--navy-ink), var(--navy-700));
  color: #fff;
}

/* Aturan global h1..h5 { color: var(--ink) } melekat langsung ke elemennya,
   jadi pewarisan color:#fff dari .subs-cta tidak berlaku. Perlu eksplisit. */
.subs-cta__copy h2 {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.35;
  margin: 8px 0 10px;
  color: #fff;
}

.subs-cta__copy p {
  margin: 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.78);
}

.subs-cta .btn {
  justify-self: end;
}

@media (max-width: 900px) {
  .subs-cta {
    grid-template-columns: 1fr;
    padding: 36px 30px;
  }

  .subs-cta .btn {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .page-subs {
    padding-top: 56px;
  }

  .subs {
    gap: 52px;
  }

  .subs__intro {
    font-size: 20px;
  }

  .subs-group__head {
    grid-template-columns: auto 1fr;
    gap: 16px;
  }

  .subs-group__count {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .subs-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Motion — Ken Burns · 3D tilt · scroll progress
   ============================================================ */
.is-kb::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: var(--kb-bg, none);
  pointer-events: none;
  will-change: transform;
  animation: kenBurns 26s ease-in-out infinite alternate;
  animation-delay: var(--kb-delay, 0s);
}

@keyframes kenBurns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.6%, 1.2%, 0); }
}

.tilt {
  transform-origin: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.tilt-active {
  z-index: 2;
}

.scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.scroll-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(201, 164, 71, 0.55);
}

/* ---- Aksesibilitas: motions of tiered, bukan dimatikan total ----
   Prinsipnya: yang dimatikan adalah gerak berarea besar dan yang memicu
   pusing (zoom, geser, putar 3D). Yang tetap jalan adalah gerak kecil di
   area kecil (gambar garis logo, fade opasitas) karena bagian itulah yang
   membawa identitas visual halaman.

   Aturan dasar di bawah tetap memakai selector `*` supaya tidak ada animasi
   yang luput, lalu pengecualian yang dihidupkan kembali ditulis SESUDAH
   aturan dasar itu dengan specificity yang lebih tinggi.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
   *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Ornamen logo: siklus gambar-isian-pudar dimatikan. Garisnya tetap
     digambar penuh supaya bentuknya terbaca, tapi tanpa gerak, tanpa
     isian dalam, dan tanpa blend color-dodge. JS juga tidak memasang
     observer-nya di mode ini, jadi tidak ada timer yang berjalan.
     --logo-path-length tidak diisi di mode ini, jadi deklarasi var() di
     atas otomatis jatuh ke nilai awal; ditulis eksplisit di sini agar
     maksudnya jelas dan tidak bergantung pada perilaku itu. */
  .logo-in-view .intro-logo-drawing path,
  .logo-drawing-complete .intro-logo-drawing path,
  .intro-logo-drawing path {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    fill-opacity: 0 !important;
  }

  .logo-drawing-complete .intro-logo-drawing {
    mix-blend-mode: normal !important;
  }

  /* .logo-fading-out tidak perlu diardown: observer-nya tidak dipasang di
     mode ini, jadi class itu tidak mungkin menempel. Kalau nanti blok JS
     di-gate ulang, tambahkan override opacity di sini. */

  /* ---- Yang tetap hidup: PART 1 ---- */

  /* Reveal on-scroll: translateY diganti fade opasitas. Elemen tidak bergerak
     posisinya, cuma berubah dari transparan ke solid. */
  .reveal-item {
    transform: none !important;
    transition: opacity 0.55s linear !important;
  }

  .reveal-item.in-view {
    opacity: 1 !important;
  }

  /* Split-text: baris tetap dipecah (markup sama dengan mode normal) tapi
     bukan lagi meluncur dari bawah, melainkan fade masuk di tempatnya. */
  .is-split .line-reveal__i {
    transform: none !important;
    opacity: 0;
    transition: opacity 0.55s linear !important;
  }

  .is-split .line-reveal.is-in .line-reveal__i {
    opacity: 1;
  }

  /* Ornamen logo: aturannya di "Yang tetap hidup" bagian atas — digambar
     penuh, tanpa gerak dan tanpa isian dalam. */

  /* Hero: wipe + zoom diganti cross-fade murni opasitas. */
  .hero-slide.active,
  .hero-slide.active.from-right {
    clip-path: none !important;
    transform: none !important;
    animation: heroFadeIn var(--hero-wipe) linear forwards !important;
  }

  .hero-slide.is-leaving {
    animation: heroFadeOut var(--hero-wipe) linear forwards !important;
  }

  /* ---- Yang tetap mati ---- */

  /* Ken Burns & tilt: zoom gambar besar dan putar 3D mengikuti pointer.
     Keduanya bergerak besar dan menutupi area luas, jadi tetap dimatikan. */
  .is-kb::before,
  .tilt,
  .scroll-progress {
    animation: none !important;
    transform: none !important;
  }
}

/* ==================================================================
   SERVICES — kontainer lepas dari cap 1280px, selebar layar
   ==================================================================
   Kontainer default di halaman ini dibatasi max-width:1280px, dan
   services ikut aturan itu. Section ini sekarang dibebaskan dari cap
   tersebut supaya kartu benar-benar memakai lebar viewport — di
   monitor 1920 kartu jadi jauh lebih besar dari sebelumnya.

   Teks judul, paragraf, dan tombol "View All" tidak lagi melintang
   di atas kartu. Sekarang teks itu jadi kolom kiri dan lima kartu
   jadi kolom kanan, sederetan mendatar dalam satu baris.

   Kolom teks dibatasi 280-380px dan tidak memakai satuan persen,
   supaya kartu tidak ikut tergerus. Di 1920px teks dapat 380px dan
   kartu masih 253px per kartu.

   Konsekuensi yang disengaja: section ini sekarang satu-satunya yang
   selebar layar, sementara 13 section lain tetap 1280px. Itu pilihan
   supaya Services terasa beda, bukan kelalaian.

   Batasnya 1400px, bukan 1200px. Alasannya: kalau aktif mulai 1200px,
   kolom teks ikut mengambil ruang dan kartu tinggal 146px — lebih sempit
   dari grid asli. Mulai 1400px, kartu di bawah batas itu kembali jadi
   lima kolom penuh selebar container (229px), sehingga tidak pernah
   lebih sempit dari layout aslinya di lebar mana pun.

   Di bawah 1400px blok ini tidak berlaku sama sekali: judul melintang
   di atas lagi, kartu memakai container 1280px seperti semula.
   ------------------------------------------------------------------ */
@media (min-width: 1400px) {
  .services-section .container {
    max-width: none;
    /* Padding menjaga kartu tidak menempel ke tepi layar. */
    padding-left: clamp(28px, 4vw, 64px);
    padding-right: clamp(28px, 4vw, 64px);
    /* Dua kolom: teks kiri, kartu kanan. Lebar kolom teks dibatasi
       antara 280 dan 380px dan tidak memakai satuan persen, supaya di
       1280px kartu masih mendapat ruang cukup untuk lima kolom. */
    display: grid;
    grid-template-columns: clamp(280px, 22vw, 380px) minmax(0, 1fr);
    column-gap: clamp(28px, 2.4vw, 44px);
    align-items: start;
  }

  /* Judul yang tadinya flex baris jadi satu kolom vertikal. */
  .services-section .section-head.split {
    display: block;
    position: sticky;
    top: 120px;
    margin-bottom: 0;
  }

  .services-section .head-copy {
    margin-top: 24px;
  }

  /* Lebar baris mengikuti lebar kolom; tidak perlu cap manual lagi. */
  .services-section .section-head h2 {
    max-width: none;
  }

  .services-section .head-copy p {
    max-width: none;
  }

  /* Jarak antar kartu ikut melebar sedikit supaya proporsinya tetap
     enak dilihat, bukan lima kartu yang menempel. */
  .services-section .service-grid {
    gap: clamp(14px, 1.4vw, 26px);
  }
}

/* Back to top pindah ke kiri bawah supaya tidak bertumpuk dengan
   tombol chatbot, yang juga melayang di kanan bawah (bottom 22px).
   Keduanya memakai .show saat sama-sama terlihat, jadi kalau tetap di
   kanan yang satu akan menutupi yang lain. Kiri bawah sudah kosong di
   layout ini. */
.back-top {
  left: 26px;
  right: auto;
}

@media (max-width: 520px) {
  .back-top {
    left: 14px;
  }
}

/* ==================================================================
   TEMA — banner/pita promosi dari panel admin
   ==================================================================
   Ini section "Tema" yang dikelola dari admin/tema: label, heading,
   deskripsi, CTA, tiga warna, gaya (banner atau pita), posisi, latar,
   dan ornamen. Markup-nya ada di home/index.blade.php; CSS-nya
   diambil dari public/css/v7.css yang dipakai layout lama.

   Dua penyesuaian untuk halaman rich:

   1. margin-top 110px dari v7.css dihapus. Nilai itu mengompensasi
      header melayang di layout app; di sini header-nya sticky dan
      sudah menyediakan ruangnya sendiri, jadi section ini akan
      bergeser terlalu jauh kalau marginny dibiarkan.
   2. .tema--banner memakai .container dari v7.css. Di halaman ini
      .container sudah punya max-width:1280px dan padding 28px yang
      sama, jadi tidak perlu ditulis ulang.

   Kalau admin mengubah warna lewat panel, section ikut berubah tanpa
   menyentuh file ini — warnanya masuk lewat --tema-1/2/3 di inline
   style pada markup.
   ------------------------------------------------------------------ */
.tema {
  --tema-1: #CE1126;
  --tema-2: #FFFFFF;
  --tema-3: #FFC10E;
  position: relative;
  overflow: hidden;
  color: #ECE8E1;
}
.tema--pita {
  background: linear-gradient(90deg, #00315E 0%, #0B4A8F 55%, #1257A3 100%);
  color: #ECE8E1;
  border-bottom: 3px solid var(--tema-1);
}
.tema--pita .tema__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
}
.tema--pita .tema__ornamen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 34px;
}
.tema--pita .tema__ornamen--lampion { width: 42px; height: 48px; }
.tema--pita .tema__ornamen--bendera {
  border-radius: 4px;
  overflow: hidden;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.tema--pita .tema__ornamen--bendera span:nth-child(1) { flex: 1; background: var(--tema-1); }
.tema--pita .tema__ornamen--bendera span:nth-child(2) { flex: 1; background: var(--tema-2); }
.tema--pita .tema__text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  min-width: 0;
}
.tema--pita .tema__label {
  width: 100%;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #968C83;
}
.tema--pita .tema__heading { font-size: 1.02rem; font-weight: 700; color: #fff; }
.tema--pita .tema__desc { font-size: 0.85rem; color: rgba(236, 232, 225, 0.75); }
.tema--pita .tema__cta {
  margin-left: auto;
  flex: 0 0 auto;
  background: #fff;
  color: #003C71;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}
.tema--pita .tema__cta:hover { background: #968C83; color: #fff; }
.tema--banner {
  background:
    radial-gradient(1000px 520px at 90% -10%, color-mix(in srgb, var(--tema-2) 38%, transparent), transparent 60%),
    linear-gradient(120deg, #0B3F78 0%, #0E5AAE 45%, color-mix(in srgb, var(--tema-1) 88%, #0B3F78) 130%);
}
.tema--banner::before {
  content: '';
  position: absolute;
  right: -6%;
  top: -55%;
  width: 34%;
  height: 210%;
  transform: rotate(14deg);
  background: linear-gradient(180deg, var(--tema-1) 0 50%, var(--tema-2) 50% 100%);
  opacity: 0.2;
  border-radius: 24px;
}
.tema--banner::after {
  content: '';
  position: absolute;
  right: 8%;
  top: -55%;
  width: 18%;
  height: 210%;
  transform: rotate(14deg);
  background: var(--tema-2);
  opacity: 0.12;
  border-radius: 24px;
}
.tema--banner[style*="--tema-bg"] {
  background:
    linear-gradient(105deg, rgba(0, 39, 74, 0.88) 0%, rgba(0, 60, 113, 0.55) 38%, rgba(0, 60, 113, 0.18) 68%, rgba(0, 60, 113, 0) 100%),
    var(--tema-bg) center / cover no-repeat;
}
.tema--banner .container { position: relative; z-index: 1; }
.tema--banner .tema__inner { position: relative; padding: 56px 0; min-height: 210px; }
.tema--banner .tema__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.tema--banner .tema__label {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  background: var(--tema-1);
  color: #fff;
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.tema--banner .tema__heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: #fff;
  line-height: 1.25;
}
.tema--banner .tema__desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.93);
  line-height: 1.7;
  max-width: 60ch;
}
.tema--banner .tema__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--tema-1);
  color: #fff;
  margin-top: 14px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  transition: all 0.25s ease;
}
.tema--banner .tema__cta:hover { background: color-mix(in srgb, var(--tema-1) 82%, #fff); color: #fff; transform: translateY(-2px); }
.tema--banner .tema__ornamen {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  width: 108px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tema--banner .tema__ornamen--lampion {
  width: 104px;
  height: 120px;
  transform: translateY(-50%);
}
.tema--banner .tema__ornamen--bendera {
  border-radius: 6px;
  overflow: hidden;
  flex-direction: column;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}
.tema--banner .tema__ornamen--bendera span:nth-child(1) { flex: 1; background: var(--tema-1); }
.tema--banner .tema__ornamen--bendera span:nth-child(2) { flex: 1; background: var(--tema-2); }
.tema__ornamen svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35)); }
.tema--banner .tema__ornamen-img {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  height: clamp(170px, 30vw, 330px);
  width: auto;
  max-width: 58%;
  object-fit: contain;
  z-index: 0;
  opacity: 0.5;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.tema--pita .tema__ornamen-img {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  height: clamp(88px, 15vw, 120px);
  width: auto;
  max-width: 40%;
  object-fit: contain;
  z-index: 0;
  opacity: 0.55;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.tema--pita .container { position: relative; z-index: 1; }
.tema--pita:has(.tema__ornamen-img) .tema__inner { padding: 44px 0; }
  .tema--banner .tema__ornamen-img {
    right: 3%;
    transform: translateY(-50%) rotate(-6deg);
    height: clamp(110px, 32vw, 200px);
    max-width: 62%;
    opacity: 0.38;
  }
  .tema--pita .tema__ornamen-img {
    height: clamp(54px, 13vw, 72px);
    max-width: 34%;
    opacity: 0.5;
  }
  .tema--pita:has(.tema__ornamen-img) .tema__inner { padding: 30px 0; }
.tema--banner.tema--tengah .tema__text { align-items: center; margin: 0 auto; text-align: center; }
.tema--banner.tema--tengah .tema__cta { align-self: center; }
.tema--banner.tema--tengah .tema__ornamen-img { display: none; }
.tema--banner .tema__flag { animation: temaFloat 5.5s ease-in-out infinite; }
  .tema--banner .tema__flag { animation: none !important; }
  .tema--pita .tema__desc { display: none; }
  .tema--pita .tema__heading { font-size: 0.9rem; }
  .tema--pita .tema__cta { padding: 8px 14px; font-size: 0.75rem; }
  .tema--banner .tema__inner { padding: 40px 0; min-height: 0; }
  .tema--banner .tema__heading { font-size: 1.3rem; }
  .tema--banner .tema__desc { font-size: 0.92rem; }
  .tema--banner .tema__flag { display: none; }

/* ==================================================================
   TEMA — perbaikan tampilan
   ==================================================================
   Empat hal yang diperbaiki di atas blok aslinya:

   1. Heading pakai Trirong, bukan Playfair Display. Font latter tidak
      pernah dimuat di halaman ini (style.css hanya request DM Sans +
      Trirong), jadi yang tampil selama ini jatuh ke serif generik.
      Memakai var(--serif) juga membuat judul tema konsisten dengan
      judul section lain, dan tidak menambah permintaan font baru.

   2. Ornamen diperbesar dan digeser. Semula 108x74px di tengah kanan,
      terlalu kecil untuk banner setinggi 217px — terlihat seperti
      stiker menggantung. Sekarang proporsinya ikut tinggi banner.

   3. Label tidak lagi memakai blok warna --tema-1 yang sama dengan
      tombol CTA, karena dua elemen merah bersebelahan terlihat seperti
      pengulangan. Label jadi teks polos dengan garis aksen di kiri;
      warna penuh sekarang hanya milik tombol.

   4. --tema-3 yang diisi admin sama sekali tidak terpakai di CSS lama.
      Sekarang jadi warna hover tombol dan garis bawah heading, jadi
      ketiga warna dari panel sekarang semuanya terpakai.
   ------------------------------------------------------------------ */

/* 1. Judul konsisten dengan halaman ini. */
.tema--banner .tema__heading {
  font-family: var(--serif);
  font-weight: 600;
  position: relative;
  padding-bottom: 14px;
}

/* Garis bawah heading memakai warna ketiga dari panel. */
.tema--banner .tema__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--tema-3, #FFC10E);
}

.tema--pita .tema__heading {
  font-family: var(--sans);
}

/* 2. Ornamen ikut skala banner, tidak lagi menggantung kecil. */
.tema--banner .tema__ornamen {
  right: 5%;
  width: 168px;
  height: 116px;
}

.tema--banner .tema__ornamen--lampion {
  width: 132px;
  height: 152px;
}

.tema--banner .tema__ornamen--ketupat {
  width: 150px;
  height: 160px;
}

.tema--banner .tema__ornamen-img {
  width: clamp(150px, 15vw, 210px);
  max-width: 22%;
  opacity: 0.5;
}

/* 3. Label jadi teks polos dengan garis aksen, bukan blok merah. */
.tema--banner .tema__label {
  background: none;
  color: var(--tema-3, #FFC10E);
  padding: 0 0 0 14px;
  position: relative;
}

.tema--banner .tema__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1.1em;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--tema-3, #FFC10E);
}

/* 4. Tombol memakai warna ketiga saat hover. */
.tema--banner .tema__cta:hover {
  background: var(--tema-3, #FFC10E);
  color: var(--navy-900);
}

/* Posisi tengah: garis aksen ikut pindah ke tengah. */
.tema--banner.tema--tengah .tema__heading::after {
  left: 50%;
  transform: translateX(-50%);
}

.tema--banner.tema--tengah .tema__label {
  align-self: center;
  padding-left: 0;
}

.tema--banner.tema--tengah .tema__label::before {
  display: none;
}

/* ---- Ornamen di dalam hero halaman ----
   Ornamen digambar lewat ::after pada .page-hero-band, bukan elemen markup
   sendiri. Alasannya: band ini dipakai di tujuh view berbeda (profil,
   berita, agenda, galeri, kontak, layanan), dan tiap pergantian tema
   harus langsung berlaku di semuanya. Dengan pseudo-element cukup satu
   aturan CSS, tidak ada view yang bisa tertinggal.

   Pola asalnya masih dibaca dari body[data-ornamen], jadi ''
   yang tidak punya pasangan (mis. 'none') otomatis tidak tampil. */
.page-hero-band::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: clamp(220px, 22vw, 340px);
  pointer-events: none;
  background-image: var(--orn-bg, none);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: clamp(220px, 22vw, 340px) auto;
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.85), transparent);
          mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.85), transparent);
}

/* Teks hero harus tetap di atas ornamen. */
/* Overlay harus tetap di bawah ornamen, jadi ia dikecualikan dari aturan
   ini. Kalau ikut z-index:2, posisinya berubah dari absolute ke relative
   dan layarnya ikut terangkat ke atas ::after (z-index:1), sehingga
   ornamen tertutup dan hero kehilangan overlay gelapnya. */
.page-hero-band > .container,
.page-hero-band > *:not(.container):not(.page-hero-band__overlay) {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  /* Di layar sempit judul hero sudah memakan hampir seluruh lebar, jadi
     ornamen dipindah makin ke kanan dan diredupkan lagi supaya tetap
     jadi latar, bukan saingan teks. */
  .page-hero-band::after {
    opacity: 0.32;
    width: 150px;
    right: -24px;
    background-size: 150px auto;
  }
}