/* ================================================================
   main.css — Portal Buana Jeruk Boulevard
   Mobile-first. Bootstrap 5 menangani grid; ini menangani tampilan.
   ================================================================ */

/* ──────────────────────────────────────────
   CSS Variables / Design Tokens
   ────────────────────────────────────────── */
:root {
  /* Warna brand — selaras dengan logo PT. Citra Buana Pertiwi */
  --primary:        #1A3A6B;   /* navy blue dari logo */
  --primary-hover:  #1E4D8C;
  --primary-light:  #E8EEF7;   /* biru muda latar */
  --accent:         #D4780A;   /* oranye emas dari ikon gedung logo */

  /* WhatsApp */
  --wa:       #25D366;
  --wa-hover: #128C7E;

  /* Status unit — wajib konsisten di SEMUA halaman */
  --status-kosong:      #2E7D32;
  --status-kosong-bg:   #E8F5E9;
  --status-dipesan:     #F9A825;
  --status-dipesan-bg:  #FFF8E1;
  --status-booking:     #1565C0;
  --status-booking-bg:  #E3F2FD;
  --status-terjual:     #6A1B9A;
  --status-terjual-bg:  #F3E5F5;

  /* Netral */
  --text:           #212121;
  --text-secondary: #616161;
  --text-muted:     #9E9E9E;
  --bg:             #FFFFFF;
  --bg-light:       #F8F9FA;
  --border:         #E0E0E0;

  /* Bayangan */
  --shadow-sm:    0 1px 4px rgba(0,0,0,.08);
  --shadow:       0 2px 12px rgba(0,0,0,.10);
  --shadow-hover: 0 6px 24px rgba(0,0,0,.15);

  /* Radius */
  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 20px;
}

/* ──────────────────────────────────────────
   Reset & Dasar
   ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

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

/* ──────────────────────────────────────────
   Override warna Bootstrap btn-primary
   ────────────────────────────────────────── */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ──────────────────────────────────────────
   NAVBAR
   ────────────────────────────────────────── */
.navbar-main {
  background: var(--primary);
  padding: .75rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.navbar-main .navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.navbar-main .navbar-brand:hover { color: #fff; opacity: .9; }

.brand-icon     { font-size: 1.3rem; }
.brand-icon-img {
  height: 34px;
  max-height: 34px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: .4rem;
}
.brand-accent { color: #FFD54F; font-style: italic; }

.navbar-main .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  padding: .45rem .55rem !important;
  font-size: .9rem;
  border-radius: var(--radius-sm);
  transition: background .18s;
}
.navbar-main .nav-link:hover,
.navbar-main .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.15);
}

/* Hamburger (mobile) */
.navbar-main .navbar-toggler { border-color: rgba(255,255,255,.5); }
.navbar-main .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Tombol WA di navbar */
.btn-wa {
  background: var(--wa);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: .45rem 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: background .18s;
  white-space: nowrap;
}
.btn-wa:hover { background: var(--wa-hover); color: #fff; }

/* Di layar kecil: navbar collapse punya padding & border atas */
@media (max-width: 991.98px) {
  .navbar-main .navbar-collapse {
    padding: .75rem 0;
    border-top: 1px solid rgba(255,255,255,.18);
    margin-top: .5rem;
  }
  .btn-wa { margin-top: .5rem; width: 100%; justify-content: center; }
}


/* ──────────────────────────────────────────
   HERO SECTION
   ────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, #1A3A6B 0%, #1E4D8C 55%, #2563A8 100%);
  color: #fff;
  padding: 4.5rem 0 5.5rem;
  position: relative;
  overflow: hidden;
}

/* Lingkaran dekoratif latar belakang */
.hero-section::before {
  content: '';
  position: absolute;
  top: -40%;  right: -8%;
  width: 550px; height: 550px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -6%;
  width: 420px; height: 420px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
  pointer-events: none;
}

/* Badge "Dihuni Sejak 2015" */
.badge-since {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.12);
  color: #FFD54F;
  border: 1px solid rgba(255,213,79,.4);
  border-radius: 100px;
  padding: .35rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(4px);
}

.hero-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
@media (min-width: 576px) { .hero-title { font-size: 2.6rem; } }
@media (min-width: 768px) { .hero-title { font-size: 3rem; } }

.hero-subtitle {
  font-size: .975rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 2rem;
  line-height: 1.75;
}
@media (min-width: 576px) { .hero-subtitle { font-size: 1.1rem; } }

/* Tombol CTA di hero */
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
@media (min-width: 480px) {
  .hero-cta { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

.btn-hero-primary {
  background: #fff;
  color: var(--primary);
  border: 2px solid #fff;
  border-radius: var(--radius-sm);
  padding: .7rem 1.6rem;
  font-weight: 700;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .2s, box-shadow .2s;
  box-shadow: var(--shadow);
}
.btn-hero-primary:hover,
.btn-hero-primary:focus,
.btn-hero-primary:active {
  background: #f1f8f1 !important;   /* putih sedikit hijau supaya ada perubahan */
  color: var(--primary) !important; /* paksa teks tetap hijau gelap */
  border-color: #f1f8f1 !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn-hero-wa {
  background: var(--wa);
  color: #fff;
  border: 2px solid var(--wa);
  border-radius: var(--radius-sm);
  padding: .7rem 1.6rem;
  font-weight: 700;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .2s, background .18s;
}
.btn-hero-wa:hover {
  background: var(--wa-hover);
  border-color: var(--wa-hover);
  color: #fff;
  transform: translateY(-2px);
}

/* Gelombang putih di bawah hero */
.hero-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  line-height: 0;
}
.hero-wave svg { width: 100%; height: 100%; display: block; }


/* ──────────────────────────────────────────
   STATISTIK UNIT
   ────────────────────────────────────────── */
.stats-section {
  padding: 2.5rem 0 3rem;
  background: #fff;
}

.stat-card {
  border-radius: var(--radius);
  padding: .9rem .75rem .8rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  border-radius: 50% 50% 0 0 / 60px;
  bottom: -30px;
  pointer-events: none;
}
.stat-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* Varian warna per kartu */
.stat-card-green  { background: linear-gradient(135deg, #2E7D32, #43A047); }
.stat-card-teal   { background: linear-gradient(135deg, #00695C, #00897B); }
.stat-card-navy   { background: linear-gradient(135deg, #1A3A6B, #1E4D8C); }
.stat-card-orange { background: linear-gradient(135deg, #D4780A, #E8920F); }
.stat-card-indigo { background: linear-gradient(135deg, #283593, #3949AB); }

.stat-sub {
  font-size: .68rem;
  color: rgba(255,255,255,.7);
  margin-top: .1rem;
}

.stat-icon {
  font-size: 1.25rem;
  opacity: .75;
  margin-bottom: .25rem;
  display: block;
}

.stat-number {
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .2rem;
}

.stat-label {
  font-size: .72rem;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
}


/* ──────────────────────────────────────────
   SECTION COMMON (judul, subtitle, spacing)
   ────────────────────────────────────────── */
.section-tipe,
.section-berita,
.section-galeri,
.section-fasilitas {
  padding: 5rem 0;
}
.section-berita    { background: var(--bg-light); }
.section-fasilitas { background: #F0F7FF; }

.section-header { margin-bottom: 2.75rem; }

/* ══════════════════════════════════════════
   FASILITAS — Palet Warna Modern
   10 gradien elegan, siklus otomatis via nth-child
   ══════════════════════════════════════════ */

/* ── Variabel palet 10 warna ── */
:root {
  --fas-1:  linear-gradient(135deg, #1A3A6B 0%, #2563EB 100%); /* Navy Blue   */
  --fas-2:  linear-gradient(135deg, #0D9488 0%, #0F766E 100%); /* Teal        */
  --fas-3:  linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%); /* Purple      */
  --fas-4:  linear-gradient(135deg, #D97706 0%, #92400E 100%); /* Amber       */
  --fas-5:  linear-gradient(135deg, #059669 0%, #065F46 100%); /* Emerald     */
  --fas-6:  linear-gradient(135deg, #4F46E5 0%, #3730A3 100%); /* Indigo      */
  --fas-7:  linear-gradient(135deg, #E11D48 0%, #9F1239 100%); /* Rose        */
  --fas-8:  linear-gradient(135deg, #0284C7 0%, #075985 100%); /* Sky Blue    */
  --fas-9:  linear-gradient(135deg, #EA580C 0%, #9A3412 100%); /* Orange      */
  --fas-10: linear-gradient(135deg, #475569 0%, #1E293B 100%); /* Slate       */
}

/* ── Grid beranda ── */
.fasilitas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

/* Kartu beranda — kotak berwarna penuh */
.fasilitas-card {
  border-radius: var(--radius);
  padding: 1.5rem 1rem 1.25rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  background: var(--fas-1); /* fallback */
  position: relative;
  overflow: hidden;
}
/* Kilap halus di sudut kiri atas */
.fasilitas-card::before {
  content: '';
  position: absolute;
  top: -30px; left: -30px;
  width: 90px; height: 90px;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  pointer-events: none;
}
.fasilitas-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

/* Warna siklus 10 warna untuk beranda */
.fasilitas-card:nth-child(10n+1)  { background: var(--fas-1);  }
.fasilitas-card:nth-child(10n+2)  { background: var(--fas-2);  }
.fasilitas-card:nth-child(10n+3)  { background: var(--fas-3);  }
.fasilitas-card:nth-child(10n+4)  { background: var(--fas-4);  }
.fasilitas-card:nth-child(10n+5)  { background: var(--fas-5);  }
.fasilitas-card:nth-child(10n+6)  { background: var(--fas-6);  }
.fasilitas-card:nth-child(10n+7)  { background: var(--fas-7);  }
.fasilitas-card:nth-child(10n+8)  { background: var(--fas-8);  }
.fasilitas-card:nth-child(10n+9)  { background: var(--fas-9);  }
.fasilitas-card:nth-child(10n+10) { background: var(--fas-10); }

.fasilitas-icon {
  font-size: 2.1rem;
  color: rgba(255,255,255,.95);
  margin-bottom: .65rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.fasilitas-nama {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .2rem;
  line-height: 1.3;
}
.fasilitas-desk {
  font-size: .7rem;
  color: rgba(255,255,255,.78);
  line-height: 1.4;
}

/* ── Halaman Fasilitas tersendiri — kartu horizontal ── */
.fasilitas-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
}
.fasilitas-card-full {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
/* Garis tipis kiri berwarna */
.fasilitas-card-full::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
  background: var(--fas-1);
}
.fasilitas-card-full:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Warna siklus untuk halaman fasilitas */
.fasilitas-card-full:nth-child(10n+1)::before  { background: var(--fas-1);  }
.fasilitas-card-full:nth-child(10n+2)::before  { background: var(--fas-2);  }
.fasilitas-card-full:nth-child(10n+3)::before  { background: var(--fas-3);  }
.fasilitas-card-full:nth-child(10n+4)::before  { background: var(--fas-4);  }
.fasilitas-card-full:nth-child(10n+5)::before  { background: var(--fas-5);  }
.fasilitas-card-full:nth-child(10n+6)::before  { background: var(--fas-6);  }
.fasilitas-card-full:nth-child(10n+7)::before  { background: var(--fas-7);  }
.fasilitas-card-full:nth-child(10n+8)::before  { background: var(--fas-8);  }
.fasilitas-card-full:nth-child(10n+9)::before  { background: var(--fas-9);  }
.fasilitas-card-full:nth-child(10n+10)::before { background: var(--fas-10); }

/* Kotak ikon berwarna di halaman fasilitas */
.fasilitas-icon-full {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  flex-shrink: 0;
  background: var(--fas-1); /* fallback */
}
.fasilitas-card-full:nth-child(10n+1)  .fasilitas-icon-full { background: var(--fas-1);  }
.fasilitas-card-full:nth-child(10n+2)  .fasilitas-icon-full { background: var(--fas-2);  }
.fasilitas-card-full:nth-child(10n+3)  .fasilitas-icon-full { background: var(--fas-3);  }
.fasilitas-card-full:nth-child(10n+4)  .fasilitas-icon-full { background: var(--fas-4);  }
.fasilitas-card-full:nth-child(10n+5)  .fasilitas-icon-full { background: var(--fas-5);  }
.fasilitas-card-full:nth-child(10n+6)  .fasilitas-icon-full { background: var(--fas-6);  }
.fasilitas-card-full:nth-child(10n+7)  .fasilitas-icon-full { background: var(--fas-7);  }
.fasilitas-card-full:nth-child(10n+8)  .fasilitas-icon-full { background: var(--fas-8);  }
.fasilitas-card-full:nth-child(10n+9)  .fasilitas-icon-full { background: var(--fas-9);  }
.fasilitas-card-full:nth-child(10n+10) .fasilitas-icon-full { background: var(--fas-10); }

.fasilitas-nama-full {
  font-size: .925rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: .2rem;
}
.fasilitas-desk-full {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Dropdown navbar ── */
.navbar-main .dropdown-menu {
  background: #0D2549;
  border: 1px solid #2A4A80;
  border-radius: var(--radius-sm);
  min-width: 210px;
  margin-top: .35rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: .4rem 0;
}
.navbar-main .dropdown-item {
  color: #E8EFF9;
  font-size: .88rem;
  font-weight: 500;
  padding: .55rem 1.1rem;
  transition: background .15s;
  display: flex;
  align-items: center;
}
.navbar-main .dropdown-item:hover {
  background: #1A3A6B;
  color: #fff;
}
.navbar-main .dropdown-item.active {
  background: #FFD54F;
  color: #0D2549;
  font-weight: 700;
}
.navbar-main .dropdown-divider {
  border-color: #2A4A80;
  margin: .3rem 0;
}
.navbar-main .nav-link.dropdown-toggle::after {
  vertical-align: .15em;
}

.section-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
  display: inline-block;
  position: relative;
}
/* Garis oranye di bawah judul */
.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
@media (min-width: 576px) { .section-title { font-size: 1.8rem; } }

.section-subtitle {
  color: var(--text-secondary);
  font-size: .95rem;
  margin-top: 1.2rem;
}


/* ──────────────────────────────────────────
   TIPE RUMAH — Kartu
   ────────────────────────────────────────── */
/* ── Group header Rumah / Ruko ── */
.tipe-group-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid #C3D4EF;
}
.tipe-group-header i { font-size: 1.3rem; }
.tipe-group-header-ruko { color: #00695C; border-bottom-color: #B2DFDB; }
.tipe-group-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .7rem;
  border-radius: 99px;
  margin-left: auto;
}
.tipe-group-badge-rumah { background: #EEF3FB; color: var(--primary); }
.tipe-group-badge-ruko  { background: #E0F2F1; color: #00695C; }

/* ── Badge "X tersedia" di pojok foto ── */
.tipe-badge-tersedia {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #2E7D32;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 99px;
}

/* ── Ruko card — aksen teal ── */
.tipe-card-ruko .tipe-badge-ruko {
  background: #00695C;
}
.tipe-card-ruko .tipe-card-footer .btn {
  border-color: #00897B;
  color: #00695C;
}
.tipe-card-ruko .tipe-card-footer .btn:hover {
  background: #00695C;
  color: #fff;
}

.tipe-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.tipe-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

.tipe-card-img {
  position: relative;
  height: 185px;
  overflow: hidden;
  background: var(--primary-light);
}
.tipe-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.tipe-card:hover .tipe-card-img img { transform: scale(1.06); }

.tipe-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E8EEF7, #C5D5EE);
  font-size: 4rem;
  color: var(--primary);
}

/* Badge "Type 56" di pojok kiri atas foto */
.tipe-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tipe-card-body {
  padding: 1rem 1.25rem;
  flex: 1;
}
.tipe-card-nama {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .5rem;
}
.tipe-card-specs {
  display: flex;
  gap: .75rem;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.tipe-card-specs span {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.tipe-card-harga {
  border-top: 1px solid var(--border);
  padding-top: .7rem;
}
.tipe-card-harga small {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: .1rem;
}
.tipe-card-harga strong {
  font-size: 1rem;
  color: var(--primary);
  font-weight: 700;
}

.tipe-card-footer {
  padding: .75rem 1.25rem 1.25rem;
}


/* ──────────────────────────────────────────
   BERITA — Kartu
   ────────────────────────────────────────── */
.berita-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.berita-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.berita-img {
  width: 100%; height: 185px;
  object-fit: cover;
  display: block;
}
.berita-img-placeholder {
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E8EEF7, #C5D5EE);
  font-size: 3rem;
  color: var(--primary);
}

.berita-body {
  padding: 1rem 1.25rem;
  flex: 1;
}

.berita-kategori {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .6rem;
  border-radius: 100px;
  margin-bottom: .6rem;
}
.berita-kategori-progres  { background: #E3F2FD; color: #1565C0; }
.berita-kategori-promo    { background: #FFF3E0; color: #D4780A; }
.berita-kategori-kegiatan { background: #F3E5F5; color: #6A1B9A; }

.berita-judul {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .4rem;
  line-height: 1.45;
  /* Maks 2 baris */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.berita-tanggal {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.berita-ringkasan {
  font-size: .875rem;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.berita-footer { padding: .75rem 1.25rem 1.25rem; }


/* ──────────────────────────────────────────
   GALERI — Grid foto
   ────────────────────────────────────────── */
.galeri-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--primary-light);
  cursor: pointer;
}
.galeri-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .32s;
}
.galeri-item:hover .galeri-img { transform: scale(1.09); }
.galeri-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-light), #C8E6C9);
  font-size: 2rem;
  color: var(--primary);
}


/* ──────────────────────────────────────────
   CTA — Ajakan Tindakan (hijau gelap)
   ────────────────────────────────────────── */
.section-cta {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--primary) 0%, #1E4D8C 100%);
  color: #fff;
}
.cta-box h2 {
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .75rem;
}
@media (min-width: 576px) { .cta-box h2 { font-size: 1.9rem; } }

.cta-box p {
  color: rgba(255,255,255,.85);
  margin-bottom: 1.75rem;
}
.cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
@media (min-width: 480px) {
  .cta-buttons { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

.btn-cta-white {
  background: #fff;
  color: var(--primary) !important;
  border: 2px solid #fff;
  border-radius: var(--radius-sm);
  padding: .7rem 1.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .2s, box-shadow .2s;
}
.btn-cta-white:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.btn-cta-wa {
  background: var(--wa);
  color: #fff;
  border: 2px solid var(--wa);
  border-radius: var(--radius-sm);
  padding: .7rem 1.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: background .18s, transform .2s;
}
.btn-cta-wa:hover {
  background: var(--wa-hover);
  border-color: var(--wa-hover);
  color: #fff;
  transform: translateY(-2px);
}


/* ──────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────── */

/* ──────────────────────────────────────────
   HALAMAN ERROR (404)
   ────────────────────────────────────────── */
.error-page-section {
  padding: 5rem 0;
  background: #F0F4FA;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.error-page-wrap {
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}
.error-code {
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--primary);
  opacity: .12;
  letter-spacing: -6px;
  margin-bottom: -.5rem;
}
.error-icon {
  font-size: 4rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.error-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: .75rem;
}
.error-sub {
  color: #616161;
  font-size: .975rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.error-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.error-links p {
  font-size: .85rem;
  color: #9E9E9E;
  margin-bottom: .75rem;
}
.error-link-grid {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.error-link-grid a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  color: var(--primary);
  text-decoration: none;
  background: #EEF3FB;
  border: 1px solid #C3D4EF;
  border-radius: 99px;
  padding: .3rem .85rem;
  transition: background .15s;
}
.error-link-grid a:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.footer-main {
  background: #1A1A1A;
  color: #BDBDBD;
  padding: 3rem 0 0;
}

.footer-heading {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.footer-text { font-size: .875rem; line-height: 1.75; }

.footer-contact {
  list-style: none;
  padding: 0; margin: 0;
}
.footer-contact li {
  font-size: .875rem;
  margin-bottom: .55rem;
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  line-height: 1.5;
}
.footer-contact i { color: var(--accent); margin-top: .15rem; flex-shrink: 0; }

.footer-nav-list {
  list-style: none;
  padding: 0; margin: 0;
}
.footer-nav-list li { margin-bottom: .4rem; }
.footer-nav-list a {
  color: #BDBDBD;
  font-size: .875rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .18s;
}
.footer-nav-list a::before { content: '›'; font-size: .9rem; }
.footer-nav-list a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid #333;
  margin-top: 2.5rem;
  padding: 1.25rem 0;
  text-align: center;
}
.footer-bottom p {
  font-size: .82rem;
  color: #757575;
  margin: 0;
}


/* ================================================================
   PAGE HEADER — sub-hero kecil untuk halaman dalam
   ================================================================ */
.page-header {
  background: linear-gradient(135deg, var(--primary) 0%, #1E4D8C 100%);
  color: #fff;
  padding: 2.5rem 0 2rem;
}

.breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); }
.breadcrumb-item a          { color: rgba(255,255,255,.75); }
.breadcrumb-item a:hover    { color: #fff; }
.breadcrumb-item.active     { color: rgba(255,255,255,.9); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

.page-header-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .35rem;
  line-height: 1.2;
}
@media (min-width: 576px) { .page-header-title { font-size: 2rem; } }

.page-header-kode {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  padding: .1rem .55rem;
  font-size: .75em;
  margin-right: .4rem;
  vertical-align: middle;
}

.page-header-sub {
  color: rgba(255,255,255,.82);
  font-size: .95rem;
  margin: 0;
}


/* ================================================================
   KATALOG — kartu horizontal
   ================================================================ */
/* ── Tab bar katalog ── */
.katalog-tab-bar {
  background: #fff;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 62px; /* tinggi navbar */
  z-index: 99;
}
.katalog-tab-wrap {
  display: flex;
  gap: 0;
}
.katalog-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.katalog-tab-btn:hover { color: var(--primary); }
.katalog-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.katalog-tab-btn[data-target="ruko"].active {
  color: #00695C;
  border-bottom-color: #00695C;
}
.katalog-tab-count {
  background: #EEF3FB;
  color: var(--primary);
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 99px;
}
.katalog-tab-count-ruko { background: #E0F2F1; color: #00695C; }

/* ── Ruko card aksen teal ── */
.katalog-card-ruko { border-left: 4px solid #00897B; }
.katalog-card-ruko .katalog-card-body { border-left: none; }
.btn-teal {
  background: #00695C;
  color: #fff;
  border: 1px solid #00695C;
}
.btn-teal:hover { background: #004D40; color: #fff; border-color: #004D40; }

.katalog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .25s, transform .2s;
}
.katalog-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.katalog-card-img {
  position: relative;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  background: var(--primary-light);
  display: flex;
  flex-direction: column;
}
.katalog-card-img img,
.katalog-main-photo {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  transition: transform .35s, opacity .2s;
  display: block;
}
.katalog-card:hover .katalog-card-img img,
.katalog-card:hover .katalog-main-photo { transform: scale(1.04); }

/* Label overlay di atas thumbnail strip */
.katalog-foto-label {
  position: absolute;
  bottom: 56px; /* tepat di atas strip thumbnail */
  left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 14px 10px 5px;
  text-align: left;
  pointer-events: none;
  letter-spacing: .02em;
}
/* Jika tidak ada thumbnail strip, label melekat ke bawah gambar */
.katalog-card-img:not(:has(.katalog-thumb-strip)) .katalog-foto-label {
  bottom: 0;
  padding-bottom: 28px; /* space untuk badge */
}

/* Strip thumbnail */
.katalog-thumb-strip {
  display: flex;
  gap: 3px;
  padding: 5px 6px;
  background: rgba(15,28,54,.85);
  flex-shrink: 0;
}
.katalog-thumb {
  flex: 1;
  height: 44px;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color .15s, opacity .15s;
  background: none;
}
.katalog-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: none; /* override hover scale dari parent */
  transform: none !important;
}
.katalog-thumb.active {
  border-color: #fff;
}
.katalog-thumb:not(.active) {
  opacity: .65;
}
.katalog-thumb:hover:not(.active) {
  opacity: .9;
  border-color: rgba(255,255,255,.5);
}

.katalog-card-img-placeholder {
  width: 100%; height: 100%;
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #E8EEF7, #C5D5EE);
  font-size: 5rem;
  color: var(--primary);
}

.katalog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.katalog-card-nama {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* Badge "X unit tersedia" / "Tidak tersedia" */
.unit-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 100px;
  white-space: nowrap;
}
.unit-badge-tersedia {
  background: var(--status-kosong-bg);
  color: var(--status-kosong);
}
.unit-badge-habis {
  background: #FAFAFA;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Spesifikasi singkat (ikon + teks) */
.katalog-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
}
.katalog-spec-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  color: var(--text-secondary);
}
.katalog-spec-item i { color: var(--primary); }

.katalog-deskripsi {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

.katalog-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.katalog-harga small {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
}
.katalog-harga strong {
  font-size: 1.1rem;
  color: var(--primary);
  font-weight: 700;
}
.katalog-cta { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Tombol WhatsApp outline (untuk katalog & beberapa tempat lain) */
.btn-wa-outline {
  color: var(--wa-hover);
  border: 1.5px solid var(--wa);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: .45rem 1rem;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: background .18s, color .18s;
}
.btn-wa-outline:hover {
  background: var(--wa);
  color: #fff;
}

/* Tombol WhatsApp solid (untuk detail tipe) */
.btn-wa-solid {
  background: var(--wa);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: .6rem 1.2rem;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .18s;
}
.btn-wa-solid:hover { background: var(--wa-hover); color: #fff; }


/* ================================================================
   DETAIL TIPE — foto, spek, deskripsi
   ================================================================ */
.detail-foto-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.detail-foto {
  width: 100%; height: 280px;
  object-fit: cover;
  display: block;
}
.detail-foto-placeholder {
  width: 100%; height: 280px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #E8EEF7, #C5D5EE);
  font-size: 6rem;
  color: var(--primary);
}

/* Ringkasan status (4 kotak) */
.status-summary {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.status-summary-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .9rem;
}
.status-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.status-summary-item {
  background: var(--sb);
  border-radius: var(--radius-sm);
  padding: .6rem .4rem;
  text-align: center;
}
.status-count {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--sc);
  line-height: 1;
}
.status-name {
  display: block;
  font-size: .68rem;
  color: var(--sc);
  font-weight: 600;
  margin-top: .15rem;
  opacity: .8;
}

/* Tabel spesifikasi */
.spek-box, .deskripsi-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.spek-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--primary-light);
}
.spek-table {
  width: 100%;
  border-collapse: collapse;
}
.spek-table tr { border-bottom: 1px solid var(--border); }
.spek-table tr:last-child { border-bottom: none; }
.spek-table th {
  padding: .65rem .5rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: .875rem;
  width: 45%;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.spek-table th i { color: var(--primary); }
.spek-table td {
  padding: .65rem .5rem;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
}
.spek-harga { color: var(--primary) !important; font-weight: 700 !important; font-size: 1rem !important; }

/* Fix: th & td di dalam tr dengan display table */
.spek-table tr { display: table-row; }
.spek-table th, .spek-table td { display: table-cell; vertical-align: middle; }

.deskripsi-isi {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Legenda warna */
.legenda-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.legenda-label { font-size: .8rem; color: var(--text-muted); margin: 0; }
.legenda-items { display: flex; flex-wrap: wrap; gap: .4rem; }
.legenda-item {
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 100px;
}
.legenda-kosong  { background: var(--status-kosong-bg);  color: var(--status-kosong); }
.legenda-dipesan { background: var(--status-dipesan-bg); color: var(--status-dipesan); }
.legenda-booking { background: var(--status-booking-bg); color: var(--status-booking); }
.legenda-terjual { background: var(--status-terjual-bg); color: var(--status-terjual); }


/* ================================================================
   BLOK GRID — daftar unit per tipe
   ================================================================ */
.blok-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .6rem;
}
@media (min-width: 576px) {
  .blok-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.blok-item {
  border-radius: var(--radius-sm);
  padding: .85rem .6rem .7rem;
  text-align: center;
  border: 2px solid transparent;
  position: relative;
  transition: transform .18s, box-shadow .18s;
  /* Reset gaya <a> bawaan browser ketika blok-item dipakai sebagai link */
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Warna per status */
.blok-kosong  { background: var(--status-kosong-bg);  border-color: var(--status-kosong);  }
.blok-dipesan { background: var(--status-dipesan-bg); border-color: var(--status-dipesan); }
.blok-booking { background: var(--status-booking-bg); border-color: var(--status-booking); }
.blok-terjual { background: var(--status-terjual-bg); border-color: var(--status-terjual); }

/* Hanya unit kosong yang punya cursor pointer & efek hover */
.blok-clickable { cursor: pointer; }
.blok-clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.blok-kode {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .2rem;
}
.blok-kosong  .blok-kode { color: var(--status-kosong); }
.blok-dipesan .blok-kode { color: var(--status-dipesan); }
.blok-booking .blok-kode { color: var(--status-booking); }
.blok-terjual .blok-kode { color: var(--status-terjual); }

.blok-luas {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.blok-status-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}
.blok-kosong  .blok-status-label { color: var(--status-kosong); }
.blok-dipesan .blok-status-label { color: var(--status-dipesan); }
.blok-booking .blok-status-label { color: var(--status-booking); }
.blok-terjual .blok-status-label { color: var(--status-terjual); }

/* Ikon panah di unit kosong */
.blok-pesan-link {
  display: block;
  margin-top: .35rem;
  font-size: 1rem;
  color: var(--status-kosong);
  text-decoration: none;
  transition: transform .15s;
}
.blok-clickable:hover .blok-pesan-link { transform: scale(1.2); }


/* ================================================================
   TIPE MINI CARD — navigasi antar tipe di halaman detail
   ================================================================ */
.tipe-mini-card {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.tipe-mini-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.tipe-mini-img {
  width: 100%; height: 90px;
  object-fit: cover;
  display: block;
}
.tipe-mini-placeholder {
  width: 100%; height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light);
  font-size: 2rem;
  color: var(--primary);
}
.tipe-mini-body {
  padding: .5rem .6rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.tipe-mini-kode {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tipe-mini-nama {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}


/* ================================================================
   PAGE HEADER — tombol lompat cepat
   ================================================================ */
.page-header-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.btn-jump {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 99px;
  padding: .3rem .85rem;
  font-size: .82rem;
  font-weight: 500;
  transition: background .18s;
  text-decoration: none;
}
.btn-jump:hover {
  background: rgba(255,255,255,.28);
  color: #fff;
}


/* ================================================================
   GALLERY GAMBAR TEKNIS — halaman detail tipe rumah
   ================================================================ */

.foto-gallery {
  /* Pembungkus utama */
}

/* ── Area gambar utama ── */
.gallery-main-area {
  position: relative;
  background: #f0f0f0;
  border-radius: var(--radius);
  overflow: hidden;
  /* Tinggi tetap agar tidak loncat saat gambar berganti */
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-main-img {
  width: 100%;
  /* contain: gambar penuh terlihat tanpa crop, portrait & landscape OK */
  height: 300px;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  background: #f0f0f0;
}
@media (min-width: 576px) { .gallery-main-img { height: 380px; } }

/* Placeholder bila tidak ada gambar */
.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2rem;
  color: #9e9e9e;
  height: 260px;
}
.gallery-placeholder i { font-size: 3rem; opacity: .35; }
.gallery-placeholder span { font-size: .85rem; }

/* Tombol fullscreen (pojok kanan atas area gambar) */
.gallery-expand-btn {
  position: absolute;
  top: .6rem;
  right: .6rem;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s;
  z-index: 2;
}
.gallery-expand-btn:hover { background: rgba(0,0,0,.7); }

/* Label nama gambar aktif (pojok kiri bawah, semi-transparan) */
.gallery-current-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 1.2rem .75rem .45rem;
  pointer-events: none;
}

/* ── Tab bar pilih gambar ── */
.gallery-tab-bar {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .55rem 0 .35rem;
  /* Sembunyikan scrollbar tapi tetap bisa scroll */
  scrollbar-width: none;
}
.gallery-tab-bar::-webkit-scrollbar { display: none; }

.gallery-tab-btn {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .4rem .65rem;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  min-width: 60px;
  text-align: center;
  line-height: 1.2;
}
.gallery-tab-btn i {
  font-size: 1.05rem;
}
.gallery-tab-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.gallery-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}


/* ================================================================
   SITE PLAN — gambar denah resmi
   ================================================================ */
.siteplan-section {
  padding: 3rem 0 2.5rem;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
}

/* Pembungkus gambar: centred, max-width, bayangan */
.siteplan-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #e0e0e0;   /* placeholder abu-abu saat gambar loading */
  min-height: 200px;     /* agar placeholder terlihat */
}

/* Gambar responsif: selalu penuh lebar wrapper */
.siteplan-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Placeholder jika gambar gagal (kelas ditambah JS via onerror) */
.siteplan-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #9e9e9e;
}
.siteplan-placeholder i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: .4;
}
.siteplan-placeholder p  { margin: 0 0 .25rem; font-weight: 500; }
.siteplan-placeholder small { font-size: .8rem; }

/* Saat error: sembunyikan <img>, tampilkan placeholder */
.siteplan-wrap.siteplan-error .siteplan-img { display: none; }
.siteplan-wrap.siteplan-error .siteplan-placeholder { display: flex; }

/* Keterangan di bawah gambar */
.siteplan-caption {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 .5rem;
}
.siteplan-caption-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .4rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.siteplan-caption-title i { color: var(--primary); }
.siteplan-caption-note {
  font-size: .83rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
  display: flex;
  gap: .35rem;
  align-items: flex-start;
}
.siteplan-caption-note i { margin-top: .15rem; flex-shrink: 0; color: var(--text-muted); }
.siteplan-caption-note a { color: var(--primary); font-weight: 600; }

/* Anchor tak terlihat untuk scroll ke denah interaktif */
.denah-interaktif-anchor {
  /* Offset untuk navbar fixed agar tidak tertutup */
  scroll-margin-top: 70px;
}


/* ================================================================
   DENAH INTERAKTIF
   ================================================================ */

/* ── Bar ringkasan angka (atas halaman) ── */
.denah-summary-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 1rem 0 .75rem;
  box-shadow: var(--shadow-sm);
}

/* Baris atas: kotak global */
.denah-summary-global {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-bottom: .85rem;
}
.denah-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
  padding: .75rem 1.1rem;
  border-radius: var(--radius);
  background: var(--sb, #f5f5f5);
  border: 2px solid var(--sc, #ccc);
}
.dsm-count {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sc, var(--text));
  line-height: 1;
}
.dsm-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: .25rem;
  white-space: nowrap;
}
.dsm-total { border-color: var(--border); background: var(--bg-light); }
.dsm-total .dsm-count { color: var(--text); }

/* Baris bawah: breakdown Rumah vs Ruko */
.denah-summary-breakdown {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: .65rem;
  border-top: 1px dashed var(--border);
}
.dsb-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: .45rem .85rem;
  border: 1px solid var(--border);
}
.dsb-group-rumah { border-color: #C3D4EF; background: #F5F8FF; }
.dsb-group-ruko  { border-color: #B2DFDB; background: #F0FAFA; }
.dsb-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-right: .25rem;
}
.dsb-group-ruko .dsb-label { color: #00695C; }
.dsb-items {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.dsb-item {
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 99px;
  white-space: nowrap;
}
.dsb-kosong  { background: var(--status-kosong-bg);  color: var(--status-kosong);  border: 1px solid var(--status-kosong); }
.dsb-dipesan { background: var(--status-dipesan-bg); color: var(--status-dipesan); border: 1px solid var(--status-dipesan); }
.dsb-booking { background: var(--status-booking-bg); color: var(--status-booking); border: 1px solid var(--status-booking); }
.dsb-terjual { background: var(--status-terjual-bg); color: var(--status-terjual); border: 1px solid var(--status-terjual); }
.dsb-total   { background: #F5F5F5; color: #555; border: 1px solid #CCC; }

/* ── Bar legenda warna ── */
.denah-legenda-bar {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  padding: .65rem 0;
}
.denah-legenda-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
.legenda-label-text {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.denah-legenda-items {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
}
.denah-legenda-item {
  font-size: .78rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.denah-legenda-item.legenda-kosong  { color: var(--status-kosong); }
.denah-legenda-item.legenda-dipesan { color: var(--status-dipesan); }
.denah-legenda-item.legenda-booking { color: var(--status-booking); }
.denah-legenda-item.legenda-terjual { color: var(--status-terjual); }

/* ── Grup per blok ── */
.denah-group {
  margin-bottom: 2.5rem;
}
.denah-group-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-bottom: .85rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--border);
}
.denah-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
}
.denah-group-badge {
  font-size: .72rem;
  background: var(--primary-light);
  color: var(--primary);
  padding: .15rem .55rem;
  border-radius: 99px;
  font-weight: 600;
}
.denah-group-tipe {
  font-size: .8rem;
  color: var(--text-secondary);
}

/* ── Grid tile ── */
.denah-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ── Satu tile unit ── */
.denah-tile {
  width: 90px;
  height: 90px;
  border-radius: var(--radius);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  padding: 6px 4px;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Warna solid per status — lebih kalem & elegan */
.denah-tile.status-kosong  { background: linear-gradient(145deg, #2A5C38, #336944); }
.denah-tile.status-dipesan { background: linear-gradient(145deg, #A86D08, #BF7D0C); }
.denah-tile.status-booking { background: linear-gradient(145deg, #163F70, #1A4F8A); }
.denah-tile.status-terjual { background: linear-gradient(145deg, #4A1570, #581A85); opacity: .9; }

/* Hover efek */
.denah-tile.status-kosong:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 20px rgba(42,92,56,.4);
}
.denah-tile:not(.status-kosong):hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0,0,0,.22);
}

/* Teks dalam tile — putih */
.denah-tile-kode {
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #fff;
}
.denah-tile-tipe {
  font-size: .63rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  margin-top: 3px;
}
.denah-tile-lt {
  font-size: .6rem;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}

/* Tile dipesan (bg kuning) pakai teks gelap */
.denah-tile.status-dipesan .denah-tile-kode { color: #4E2600; }
.denah-tile.status-dipesan .denah-tile-tipe { color: rgba(0,0,0,.6); }
.denah-tile.status-dipesan .denah-tile-lt   { color: rgba(0,0,0,.45); }

/* Responsif: layar kecil tile lebih kecil */
@media (max-width: 400px) {
  .denah-tile { width: 76px; height: 76px; }
  .denah-tile-kode { font-size: .72rem; }
}

/* ── Modal detail blok ── */
.modal-status-bar {
  padding: .6rem 1.2rem;
  display: flex;
  align-items: center;
}
.modal-status-badge {
  font-size: .8rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 99px;
}
.modal-info-table {
  width: 100%;
  border-collapse: collapse;
}
.modal-info-table th,
.modal-info-table td {
  padding: .6rem 1.2rem;
  font-size: .88rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.modal-info-table th {
  color: var(--text-secondary);
  font-weight: 600;
  width: 42%;
  white-space: nowrap;
}
.modal-info-table th i {
  margin-right: .3rem;
  opacity: .7;
}
.modal-info-table tr:last-child th,
.modal-info-table tr:last-child td {
  border-bottom: none;
}
.modal-pesan-info {
  margin: .75rem 1.2rem;
  padding: .65rem .9rem;
  background: var(--status-kosong-bg);
  border: 1px solid var(--status-kosong);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: var(--status-kosong);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.modal-tidak-tersedia {
  margin: .75rem 1.2rem;
  padding: .65rem .9rem;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: var(--text-secondary);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}


/* ================================================================
   HALAMAN PROFIL
   ================================================================ */
.profil-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: .4rem;
}
.profil-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .2rem;
}
@media (min-width: 576px) { .profil-title { font-size: 2.2rem; } }
.profil-sub {
  color: var(--text-secondary);
  font-size: .95rem;
  margin-bottom: 1.25rem;
}
.profil-teks {
  color: var(--text);
  line-height: 1.8;
  font-size: .95rem;
}

/* Box info singkat kanan */
.profil-info-box {
  background: var(--primary-light);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.profil-badge-besar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(27,94,32,.2);
}
.profil-badge-besar > i {
  font-size: 2.5rem;
  color: var(--primary);
  flex-shrink: 0;
}
.profil-badge-tahun {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.profil-badge-sub {
  display: block;
  font-size: .78rem;
  color: var(--text-secondary);
  margin-top: .15rem;
}
.profil-stats-mini {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.psm-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text);
}
.psm-item i { color: var(--primary); width: 16px; flex-shrink: 0; }

/* Sejarah */
.sejarah-wrap { max-width: 760px; margin: 0 auto; }
.sejarah-teks {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 2rem;
}
.sejarah-milestone {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 1.5rem;
}
.milestone-item {
  text-align: center;
  flex-shrink: 0;
}
.milestone-tahun {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-light);
  border: 2px solid var(--primary);
  border-radius: 99px;
  padding: .35rem 1rem;
  display: inline-block;
}
.milestone-keterangan {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: .4rem;
}
.milestone-garis {
  flex: 1;
  height: 2px;
  background: var(--primary);
  opacity: .3;
  margin: 0 .5rem;
  margin-bottom: 1.4rem;  /* sejajar dengan tengah badge */
}

/* Kartu navigasi profil → halaman terkait */
.profil-nav-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .18s, transform .18s, border-color .18s;
  height: 100%;
}
.profil-nav-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-color: var(--primary);
  color: var(--text);
}
.profil-nav-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.profil-nav-body { flex: 1; min-width: 0; }
.profil-nav-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: .2rem;
}
.profil-nav-sub {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.profil-nav-arrow {
  font-size: 1.25rem;
  color: var(--border);
  flex-shrink: 0;
  transition: color .18s;
}
.profil-nav-card:hover .profil-nav-arrow { color: var(--primary); }

/* Pengurus cards */
.pengurus-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition: box-shadow .2s;
}
.pengurus-card:hover { box-shadow: var(--shadow); }
.pengurus-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.pengurus-foto-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--primary), #388E3C);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
}
.pengurus-info { padding: .75rem .5rem; }
.pengurus-nama {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .2rem;
}
.pengurus-jabatan {
  font-size: .75rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Grid 5 kolom di layar besar (col-lg-2-4 ≈ 20%) */
@media (min-width: 992px) {
  .col-lg-2-4 { flex: 0 0 auto; width: 20%; }
}


/* ================================================================
   HALAMAN KONTAK
   ================================================================ */
.kontak-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--border);
}
.kontak-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.kontak-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.kontak-ikon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.kontak-detail {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.kontak-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.kontak-value {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.5;
}
.kontak-link { color: var(--primary); font-weight: 600; }
.kontak-link:hover { color: var(--primary-hover); }

/* Info rekening */
.kontak-rekening {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: .5rem;
}
.kontak-rekening-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.kontak-rekening-title i { color: var(--primary); }
.kontak-rekening-table { width: 100%; border-collapse: collapse; }
.kontak-rekening-table th,
.kontak-rekening-table td {
  font-size: .82rem;
  padding: .2rem .3rem;
  vertical-align: top;
}
.kontak-rekening-table th {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  width: 38%;
}

/* ── Kontak PIC ── */
.kontak-item-pic-header { padding-bottom: .25rem; }
.kontak-item-pic {
  align-items: flex-start;
  padding: .65rem .5rem .65rem 0;
  border-bottom: 1px solid var(--border);
}
.kontak-item-pic:last-of-type { border-bottom: none; }

/* Avatar — bisa berupa foto atau inisial huruf */
.kontak-pic-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;          /* potong foto jadi lingkaran */
  background: var(--primary);
  flex-shrink: 0;
  margin-right: .9rem;
  border: 2px solid var(--primary-light);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Foto asli */
.kontak-pic-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* zoom & crop tengah — hanya muka terlihat */
  object-position: center top; /* fokus ke bagian atas (wajah, bukan pinggang) */
  display: block;
}
/* Fallback inisial (bila foto tidak ada / gagal load) */
.kontak-pic-inisial {
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.kontak-pic-nama {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.2;
}
.kontak-pic-jabatan {
  display: block;
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.kontak-pic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .3rem;
}
.kontak-pic-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .65rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.kontak-pic-btn:hover { opacity: .85; text-decoration: none; }
.kontak-pic-btn-tel {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary);
}
.kontak-pic-btn-wa {
  background: #25D366;
  color: #fff;
  border: 1px solid #25D366;
}

/* Maps embed */
.maps-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #e0e0e0;
  min-height: 300px;
  margin-bottom: .75rem;
}
.maps-wrap iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}
@media (min-width: 992px) { .maps-wrap iframe { height: 460px; } }
.maps-url-fallback {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border-radius: var(--radius);
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--text-secondary);
}
.maps-url-fallback i { font-size: 2.5rem; color: var(--primary); margin-bottom: .75rem; }
.maps-url-fallback p { margin: 0 0 .25rem; font-size: .9rem; }
.maps-embed-hint { max-width: 380px; }

.maps-placeholder {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: #9e9e9e;
}
.maps-placeholder i { font-size: 3rem; opacity: .3; margin-bottom: .75rem; }
.maps-placeholder p { margin: 0 0 .35rem; font-weight: 500; font-size: .9rem; }
.maps-placeholder small { font-size: .8rem; }
.maps-alamat-hint {
  font-size: .82rem;
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: .3rem;
}

/* FAQ accordion */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  margin-bottom: .5rem;
  overflow: hidden;
}
.faq-item .accordion-button {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  background: #fff;
  gap: .6rem;
  display: flex;
  align-items: flex-start;
  padding: .9rem 1.1rem;
}
.faq-item .accordion-button:not(.collapsed) {
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: none;
}
.faq-item .accordion-button::after {
  /* Gunakan ikon Bootstrap bawaan, tapi sesuaikan warna */
  filter: none;
}
.faq-icon { color: var(--primary); flex-shrink: 0; margin-top: .05rem; }
.faq-jawaban {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.75;
  padding: 1rem 1.1rem 1rem 2.7rem;
}

/* Kelas alias agar accordion di beranda & halaman faq sama tampilannya */
.faq-accordion .faq-item { border-radius: var(--radius-sm); }

/* CTA box bawah halaman FAQ */
.faq-cta-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #EEF3FB;
  border: 1px solid #C3D4EF;
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.5rem;
}
.faq-cta-icon {
  font-size: 2rem;
  color: var(--primary);
  flex-shrink: 0;
}
.faq-cta-title {
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 .15rem;
  font-size: 1rem;
}
.faq-cta-sub {
  color: var(--text-muted);
  font-size: .875rem;
  margin: 0;
}
.faq-cta-btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
@media (max-width: 576px) {
  .faq-cta-btns { margin-left: 0; width: 100%; }
  .faq-cta-btns .btn { flex: 1; text-align: center; }
}


/* ================================================================
   HALAMAN TESTIMONI
   ================================================================ */

/* Bar statistik */
.testimoni-stats-bar {
  background: var(--primary);
  padding: 1rem 0;
}
.testimoni-stats-items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.tsb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tsb-angka {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.tsb-star { font-size: 1.1rem; color: #FFD54F; }
.tsb-label {
  font-size: .72rem;
  color: rgba(255,255,255,.75);
  margin-top: .2rem;
  white-space: nowrap;
}
.tsb-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.25);
}
@media (max-width: 575px) { .tsb-divider { display: none; } }

/* Card testimoni */
.testimoni-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: box-shadow .2s;
}
.testimoni-card:hover { box-shadow: var(--shadow); }

.testimoni-header {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.testimoni-foto {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimoni-inisial {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #66BB6A);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimoni-meta { flex: 1; }
.testimoni-nama {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  margin: 0 0 .1rem;
}
.testimoni-pekerjaan {
  font-size: .78rem;
  color: var(--text-secondary);
  margin: 0 0 .3rem;
}
.testimoni-bintang {
  font-size: .85rem;
  color: #FFC107;
  display: flex;
  gap: 1px;
}
.testimoni-bintang .bi-star { color: #e0e0e0; }

.testimoni-isi {
  flex: 1;
  font-size: .875rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  font-style: italic;
  border-left: 3px solid var(--primary-light);
  padding-left: .85rem;
}

.testimoni-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.testimoni-blok-badge {
  font-size: .72rem;
  background: var(--primary-light);
  color: var(--primary);
  padding: .15rem .5rem;
  border-radius: 99px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.testimoni-tahun {
  font-size: .72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* ================================================================
   SIMULATOR KPR (/simulasi/)
   ================================================================ */

/* Disclaimer utama */
.sim-disclaimer {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: #FFF8E1;
  border: 1.5px solid #FFD54F;
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-size: .82rem;
  color: #5D4037;
  margin-bottom: 2rem;
  line-height: 1.55;
}
.sim-disclaimer i { color: #F9A825; font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

/* Card form kiri */
.sim-form-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

/* Field */
.sim-field { margin-bottom: 1.5rem; }
.sim-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}
.sim-prefix {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  border-color: var(--border);
}
.sim-input { font-weight: 600; font-size: 1rem; }
.sim-field-hint { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; }

/* Nilai DP / tenor di sebelah label */
.sim-dp-persen {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 99px;
}

/* Slider */
.sim-slider {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}
.sim-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .25rem;
}
.sim-dp-nominal {
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: .5rem;
}
.sim-pokok-info {
  text-align: center;
  font-size: .78rem;
  color: var(--text-secondary);
  margin-top: .2rem;
}

/* Daftar bank */
.sim-bank-list { display: flex; flex-direction: column; gap: .5rem; }
.sim-bank-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sim-bank-item input[type="radio"] { display: none; }
.sim-bank-item:hover { border-color: var(--primary-hover); background: var(--primary-light); }
.sim-bank-item.active { border-color: var(--primary); background: var(--primary-light); }
.sim-bank-logo {
  height: 36px;
  width: 60px;
  object-fit: contain;
  flex-shrink: 0;
}
.sim-bank-logo-placeholder {
  height: 36px; width: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sim-bank-info { display: flex; flex-direction: column; gap: .1rem; }
.sim-bank-nama { font-size: .85rem; font-weight: 700; color: var(--text); }
.sim-bank-meta { font-size: .72rem; color: var(--text-secondary); }
.sim-bank-tipe {
  font-size: .68rem;
  background: var(--primary-light);
  color: var(--primary);
  padding: .1rem .45rem;
  border-radius: 99px;
  font-weight: 600;
  width: fit-content;
}

/* ── Kartu pilih tipe rumah ── */
.sim-tipe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem;
}
@media (min-width: 480px) {
  .sim-tipe-grid { grid-template-columns: repeat(3, 1fr); }
}
.sim-tipe-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .65rem .4rem .6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  user-select: none;
  gap: .1rem;
}
.sim-tipe-item input[type="radio"] { display: none; }
.sim-tipe-item:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.sim-tipe-item.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(26, 58, 107, .12);
}
.sim-tipe-kode {
  font-size: .6rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sim-tipe-nama {
  font-size: .88rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}
.sim-tipe-luas {
  font-size: .68rem;
  color: var(--text-secondary);
}
.sim-tipe-harga {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: .15rem;
}

/* Kolom kanan: hasil */
.sim-hasil-wrap {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  height: 100%;
}
.sim-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--text-muted);
  text-align: center;
  gap: .75rem;
}
.sim-empty i { font-size: 3rem; opacity: .3; }
.sim-empty p { font-size: .9rem; margin: 0; }

/* Header hasil */
.sim-hasil-header {
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: .75rem;
  margin-bottom: 1.25rem;
}
.sim-hasil-bank { font-size: .95rem; font-weight: 800; color: var(--primary); }
.sim-hasil-metode {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: .15rem;
}

/* Cicilan utama — angka besar */
.sim-cicilan-utama {
  background: linear-gradient(135deg, var(--primary), #1E4D8C);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  text-align: center;
  color: #fff;
  margin-bottom: 1.25rem;
}
.sim-cicilan-label { font-size: .75rem; opacity: .85; margin-bottom: .25rem; }
.sim-cicilan-angka { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.sim-cicilan-sub   { font-size: .78rem; opacity: .75; margin-top: .3rem; }

/* Rincian */
.sim-rincian { display: flex; flex-direction: column; gap: .45rem; }
.sim-rincian-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .83rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-secondary);
}
.sim-rincian-row strong { color: var(--text); font-weight: 700; }
.sim-row-pokok { color: var(--primary); }
.sim-row-pokok strong { color: var(--primary); }
.sim-row-total {
  border-bottom: 2px solid var(--primary-light);
  font-weight: 700;
  color: var(--text);
}
.sim-row-total strong { color: var(--primary); font-size: .95rem; }

/* Disclaimer kecil bawah */
.sim-disclaimer-kecil {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}
.sim-disclaimer-kecil i { color: #FFB300; }

/* ──────────────────────────────────────────
   Halaman Galeri (/galeri/)
   ────────────────────────────────────────── */
.galeri-page-grid {
  columns: 2;
  column-gap: .75rem;
}
@media (min-width: 576px) { .galeri-page-grid { columns: 3; } }
@media (min-width: 992px) { .galeri-page-grid { columns: 4; } }

.galeri-page-item {
  break-inside: avoid;
  margin-bottom: .75rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: block;
}
.galeri-page-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s;
}
.galeri-page-item:hover .galeri-page-img {
  transform: scale(1.04);
}

/* ── Caption galeri — label SELALU tampil di bawah gambar ── */
.galeri-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.50) 55%,
    transparent 100%
  );
  padding: 2.2rem .65rem .55rem;
  transition: padding .2s ease;
}
.galeri-page-item:hover .galeri-caption { padding-bottom: .75rem; }

/* Badge nama album */
.galeri-caption-album {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .1rem .4rem;
  border-radius: 99px;
  margin-bottom: .25rem;
}
/* Judul — selalu terlihat */
.galeri-caption-judul {
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Keterangan — muncul saat hover */
.galeri-caption-ket {
  color: rgba(255,255,255,.85);
  font-size: .7rem;
  margin: .25rem 0 0;
  line-height: 1.35;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s;
}
.galeri-page-item:hover .galeri-caption-ket {
  max-height: 5em;
  opacity: 1;
}

/* Ikon zoom di pojok kanan atas */
.galeri-page-zoom {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(255,255,255,.9);
  color: var(--primary);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .2s;
}
.galeri-page-item:hover .galeri-page-zoom { opacity: 1; }

/* ── Lightbox modal ── */
.galeri-modal-content {
  background: #000;
  border: none;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.galeri-modal-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  max-height: 80vh;
  overflow: hidden;
}
.galeri-modal-img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}
.galeri-modal-caption {
  background: rgba(0,0,0,.9);
  color: #fff;
  padding: .7rem 1rem .7rem 1.1rem;
  min-height: 2.8rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.galeri-modal-caption-text { flex: 1; min-width: 0; }
/* Badge album dalam lightbox */
.galeri-modal-album {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .1rem .45rem;
  border-radius: 99px;
  margin-bottom: .25rem;
}
/* Judul dalam lightbox */
.galeri-modal-judul {
  font-size: .92rem;
  font-weight: 700;
  margin: 0 0 .1rem;
  line-height: 1.3;
}
/* Keterangan dalam lightbox */
.galeri-modal-ket {
  font-size: .78rem;
  opacity: .78;
  margin: 0;
  line-height: 1.35;
}
.galeri-counter {
  flex-shrink: 0;
  font-size: .73rem;
  opacity: .55;
  white-space: nowrap;
  margin-top: .15rem;
}
.galeri-modal-close {
  position: absolute;
  top: .6rem;
  right: .75rem;
  z-index: 10;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s;
}
.galeri-modal-close:hover { background: rgba(255,255,255,.3); }
.galeri-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background .15s;
}
.galeri-modal-nav:hover { background: rgba(255,255,255,.3); }
.galeri-nav-prev { left: .75rem; }
.galeri-nav-next { right: .75rem; }

/* Fasilitas (profil.html lama — sudah dipindah ke halaman tersendiri) */

/* ──────────────────────────────────────────
   Nomor kontak pengurus (profil.html)
   ────────────────────────────────────────── */
.pengurus-kontak {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  margin-top: .3rem;
  padding: .2rem .5rem;
  border-radius: 99px;
  background: var(--primary-light);
  transition: background .15s, color .15s;
}
.pengurus-kontak:hover {
  background: var(--primary);
  color: #fff;
}

/* ──────────────────────────────────────────
   Seksi testimoni di beranda
   ────────────────────────────────────────── */
.section-testimoni {
  padding: 4rem 0;
  background: var(--bg-light);
}

/* ──────────────────────────────────────────
   Footer — logo developer
   ────────────────────────────────────────── */
.footer-developer {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-logo-developer {
  max-width: 180px;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  padding: .4rem .75rem;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
  transition: box-shadow .2s, transform .2s;
}
.footer-logo-developer:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────
   Berita — pagination
   ────────────────────────────────────────── */
.berita-pagination .page-link {
  color: var(--primary);
  border-color: var(--border);
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  min-width: 38px;
  text-align: center;
  transition: background .15s, color .15s;
}
.berita-pagination .page-link:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.berita-pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.berita-pagination .page-item.disabled .page-link {
  color: #ccc;
  border-color: var(--border);
}

/* ──────────────────────────────────────────
   Berita — filter bar
   ────────────────────────────────────────── */
.berita-filter-bar {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  padding: .75rem 0;
}
.berita-filter-wrap {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.berita-filter-btn {
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-secondary);
  background: #fff;
  border: 1.5px solid var(--border);
  transition: all .15s;
}
.berita-filter-btn:hover,
.berita-filter-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* warna per kategori saat aktif */
.berita-filter-btn.berita-filter-progres.active  { background: #1565C0; border-color: #1565C0; }
.berita-filter-btn.berita-filter-promo.active    { background: #D4780A; border-color: #D4780A; }
.berita-filter-btn.berita-filter-kegiatan.active { background: var(--primary); border-color: var(--primary); }

/* ──────────────────────────────────────────
   Berita — halaman detail artikel
   ────────────────────────────────────────── */
.artikel-gambar-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}
.artikel-gambar {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.artikel-isi {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
}
.artikel-isi p {
  margin-bottom: 1.2rem;
}

/* ================================================================
   BOOKING — form, status, upload
   ================================================================ */

/* ── Step bar (indikator langkah) ── */
.bk-steps-bar {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  padding: .9rem 0;
}
.bk-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}
.bk-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 4.5rem;
  text-align: center;
}
.bk-step-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  border: 2px solid var(--border);
  background: #fff;
}
.bk-step-done .bk-step-num {
  background: var(--status-kosong);
  border-color: var(--status-kosong);
  color: #fff;
}
.bk-step-active {
  color: var(--primary);
}
.bk-step-active .bk-step-num {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.bk-step-pending {
  opacity: .45;
}
.bk-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 2rem;
  max-width: 5rem;
  margin-bottom: 1.25rem;
}

/* ── Card dasar ── */
.bk-form-card,
.bk-summary-card,
.bk-upload-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.bk-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── Tabel ringkasan ── */
.bk-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.bk-summary-table th,
.bk-summary-table td {
  padding: .45rem .3rem;
  vertical-align: top;
  border-bottom: 1px solid var(--bg-light);
}
.bk-summary-table th {
  color: var(--text-secondary);
  font-weight: 500;
  width: 45%;
  white-space: nowrap;
}
.bk-summary-table td {
  color: var(--text);
}
.bk-row-harga td { color: var(--status-kosong); font-size: .95rem; }
.bk-row-fee   td { color: var(--primary); }
.bk-row-expired td strong { color: #B71C1C; }
.bk-expired-note {
  display: block;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── Rekening tujuan ── */
.bk-rekening {
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: .5rem;
}
.bk-rek-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(26,58,107,.1);
  font-size: .88rem;
}
.bk-rek-row:last-of-type { border-bottom: none; }
.bk-rek-label { color: var(--text-secondary); font-weight: 500; }
.bk-rek-value { font-weight: 600; color: var(--primary); text-align: right; }
.bk-rek-norek {
  font-size: 1rem;
  letter-spacing: .05em;
  font-family: monospace;
}
.bk-rek-nominal {
  margin-top: .75rem;
  text-align: center;
  font-size: .9rem;
  color: var(--text-secondary);
  border-top: 1px dashed var(--border);
  padding-top: .6rem;
}
.bk-rek-nominal strong {
  font-size: 1.15rem;
  color: var(--primary);
}
.bk-rek-note {
  font-size: .78rem;
  color: var(--text-secondary);
  margin-top: .6rem;
  display: flex;
  align-items: flex-start;
  gap: .35rem;
}
.bk-rek-note i { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* ── Kotak peringatan waktu ── */
.bk-warning-box {
  background: #FFF8E1;
  border: 1px solid #FFD54F;
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  color: #6D4C00;
}
.bk-warning-box i { color: #F9A825; font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.bk-warning-box p { margin: 0; }

/* ── Box simpan link status ── */
.bk-save-link-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-size: .875rem;
  color: #1B5E20;
}
.bk-save-link-icon {
  font-size: 1.5rem;
  color: #2E7D32;
  flex-shrink: 0;
  margin-top: .1rem;
}
.bk-save-link-body {
  flex: 1;
  min-width: 0;
  line-height: 1.6;
}
.bk-save-link-url {
  margin-top: .35rem;
}
.bk-save-link-url code {
  font-size: .75rem;
  background: rgba(0,0,0,.06);
  padding: .2rem .5rem;
  border-radius: 4px;
  word-break: break-all;
  color: #1B5E20;
}
.bk-save-link-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  flex-shrink: 0;
}
.bk-save-email-note {
  font-size: .75rem;
  color: #2E7D32;
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}
@media (max-width: 576px) {
  .bk-save-link-btns {
    flex-direction: row;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
  }
}

/* ── Checkbox persetujuan ── */
.bk-setuju-box {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.bk-setuju-box.bk-setuju-error {
  border-color: #dc3545;
  background: #FFF5F5;
}
.bk-setuju-list {
  margin: .5rem 0 0 0;
  padding-left: 1.2rem;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── Upload bukti ── */
.bk-bukti-preview {
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
}
.bk-bukti-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.bk-bukti-link:hover { text-decoration: underline; }

/* ── Bookmark reminder ── */
.bk-bookmark-box {
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .85rem;
  color: #3730A3;
}
.bk-bookmark-box i { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.bk-bookmark-box strong { display: block; margin-bottom: .2rem; }
.bk-bookmark-box p { margin: 0; font-size: .8rem; color: #4338CA; }
.bk-url-copy {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  word-break: break-all;
  background: rgba(255,255,255,.7);
  padding: .25rem .4rem;
  border-radius: 4px;
  color: #1E1B4B;
}

/* ── Badge status booking ── */
.bk-badge {
  display: inline-block;
  padding: .28em .7em;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
}
.bk-badge-pending   { background: #FFF8E1; color: #F57F17; border: 1px solid #FFD54F; }
.bk-badge-uploaded  { background: #E3F2FD; color: #1565C0; border: 1px solid #90CAF9; }
.bk-badge-ok        { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.bk-badge-ditolak    { background: #FFEBEE; color: #B71C1C; border: 1px solid #EF9A9A; }
.bk-badge-kadaluarsa { background: #FFF3E0; color: #E65100; border: 1px solid #FFCC80; }

/* ── Tombol batal ── */
.bk-batal-box {
  background: #FFF5F5;
  border: 1px solid #FED7D7;
  border-radius: var(--radius-sm);
  padding: 1rem;
  font-size: .88rem;
}

/* ── Status header (halaman status booking) ── */
.bk-status-header {
  padding: 2.5rem 0 2rem;
  text-align: center;
}
.bk-status-icon {
  font-size: 2.8rem;
  margin-bottom: .5rem;
  line-height: 1;
}
.bk-status-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: .3rem;
}
.bk-status-sub {
  font-size: .9rem;
  opacity: .85;
  margin: 0;
}

/* Variasi warna per status */
.bk-status-pending {
  background: linear-gradient(135deg, #F57F17 0%, #E65100 100%);
  color: #fff;
}
.bk-status-menunggu-verif {
  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
  color: #fff;
}
.bk-status-ok {
  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
  color: #fff;
}
.bk-status-ditolak {
  background: linear-gradient(135deg, #B71C1C 0%, #7F0000 100%);
  color: #fff;
}
.bk-status-kadaluarsa {
  background: linear-gradient(135deg, #E65100 0%, #BF360C 100%);
  color: #fff;
}

/* ── Ketentuan booking fee ── */
.bk-ketentuan-box {
  background: #FFFBF0;
  border: 1px solid #F0C040;
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.bk-ketentuan-judul {
  font-size: .82rem;
  font-weight: 700;
  color: #7A5000;
  margin: 0 0 .65rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bk-ketentuan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.bk-ketentuan-list li {
  font-size: .82rem;
  color: #4A3800;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.bk-ketentuan-list li i {
  flex: 0 0 1rem;   /* lebar tetap, tidak menyusut, tidak melebar */
  font-size: .95rem;
  margin-top: .15rem;
}
.bk-ketentuan-list li span {
  flex: 1;          /* span teks mengambil sisa ruang penuh */
  min-width: 0;     /* cegah overflow di flex container sempit */
}

/* ── Poin kritis di checkbox persetujuan ── */
.bk-setuju-item-kritis {
  color: #B71C1C !important;
  font-weight: 500;
}
.bk-setuju-item-kritis strong {
  color: #B71C1C;
}
.bk-setuju-sublist {
  list-style: disc;
  padding-left: 1.1rem;
  margin: .3rem 0 0;
  font-weight: 400;
  color: var(--text-secondary);
}
.bk-setuju-sublist li {
  margin-bottom: .2rem;
}

/* ── Progress kelengkapan dokumen ── */
.bk-dokumen-progress {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.bk-dokumen-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.bk-dokumen-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  border: 1px solid var(--border);
  transition: background .2s, border-color .2s;
}
.bk-dokumen-item.bk-dokumen-done {
  background: #F1FFF4;
  border-color: #A5D6A7;
}
.bk-dokumen-icon { font-size: 1.15rem; flex-shrink: 0; }
.bk-dokumen-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1.3;
}
.bk-dokumen-nama {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}
.bk-dokumen-keterangan {
  font-size: .75rem;
  color: var(--text-muted);
}
.bk-dokumen-done .bk-dokumen-keterangan { color: var(--status-kosong); }

/* ── Responsive: booking halaman ── */
@media (max-width: 575.98px) {
  .bk-form-card,
  .bk-summary-card,
  .bk-upload-card {
    padding: 1.1rem;
  }
  .bk-status-title { font-size: 1.3rem; }
  .bk-steps { gap: 0; }
  .bk-step  { font-size: .65rem; min-width: 3.5rem; }
  .bk-step-num { width: 1.7rem; height: 1.7rem; font-size: .7rem; }
  .bk-step-line { min-width: 1rem; }
}