/* ==========================================================================
   SAHABAT GADAI - Offical Stylesheet
   Design System: Professional, Clean, Trustworthy Financial Landing Page
   ========================================================================== */

/* 1. CSS Variables & Reset
   ========================================================================== */
:root {
  --primary-color: #0d6e52;
  --primary-dark: #0a5c44;
  --primary-light: #e8f5f2;
  --secondary-color: #0d6e52;
  --accent-color: #DEAC3C;
  --accent-hover: #d4963d;
  --warning-color: #ffc107;
  
  --text-dark: #212529;
  --text-muted: #6c757d;
  --text-light: #f8f9fa;
  
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;
  --border-color: #e9ecef;
  
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.12);
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 50px;
  
  --transition-fast: all 0.2s ease;
  --transition-normal: all 0.3s ease;

  /* Tinggi navbar. Dipakai bersama oleh tiga hal yang WAJIB sepakat: tinggi
     .navbar-container, padding-top body, dan posisi atas laci menu mobile.
     Sebelumnya angkanya ditulis ulang di tiap breakpoint (80/70/65px) di tiga
     tempat berbeda, jadi tiap kali salah satu diubah, laci menunya meleset
     beberapa piksel dari bawah navbar. */
  --navbar-h: 80px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-white);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100vw;
  max-width: 100%;
  padding-top: var(--navbar-h);
}

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

p, h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

ul {
  list-style: none;
}

/* Dulu reset ini datang dari reboot Bootstrap. Setelah Bootstrap dilepas,
   tombol dan input harus disuruh sendiri ikut font halaman — kalau tidak,
   browser memakai font bawaannya dan form terlihat beda sendiri. */
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

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

/* 2. Utility Classes & Container
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.section {
  padding: 80px 0;
  width: 100%;
  overflow-x: hidden;
}

.bg-light {
  background-color: var(--bg-light);
}

.section-title {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
}

.section-title .sub-title {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-title h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--secondary-color);
  margin-bottom: 15px;
}

.section-title p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-color), #0a5c44);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 15px 32px;
  font-size: 1.05rem;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--bg-white);
}

/* Catatan hover tombol:
   Setiap state :hover WAJIB menuliskan `color` sendiri, jangan mengandalkan
   warna dari kelas dasarnya. Selain lebih aman kalau nanti ada stylesheet lain
   ikut termuat, ini juga bikin kontras teks-vs-latar bisa dibaca sekali lihat
   di satu tempat. */
.btn-primary:hover {
  background-color: var(--primary-dark);
  color: var(--bg-white);
  box-shadow: 0 6px 15px rgba(13, 110, 82, 0.35);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background-color: var(--secondary-color);
  color: var(--bg-white);
}

/* Sebelumnya latarnya sama persis dengan state normal, jadi hover-nya tidak
   terasa apa-apa. Sekarang ikut menggelap seperti tombol lain. */
.btn-whatsapp:hover {
  background-color: var(--primary-dark);
  color: var(--bg-white);
  box-shadow: 0 6px 15px rgba(13, 110, 82, 0.35);
  transform: translateY(-2px);
}

.btn-outline {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--primary-color);
  color: var(--bg-white);
  border-color: var(--primary-color);
}

.btn-light {
  background-color: var(--bg-white);
  color: var(--secondary-color);
}

.btn-light:hover {
  background-color: var(--primary-light);
  color: var(--primary-dark);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* 3. Header & Navigation
   ========================================================================== */
.top-bar {
  background-color: var(--secondary-color);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-info {
  display: flex;
  gap: 20px;
}

.top-info span i {
  color: var(--primary-color);
  margin-right: 5px;
}

.top-badge i {
  color: var(--warning-color);
  margin-right: 4px;
}

.navbar {
  background-color: var(--bg-white);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: var(--transition-normal);
  width: 100%;
  overflow-x: hidden;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-h);
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.logo-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--secondary-color);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.nav-menu {
  display: flex;
  gap: 25px;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  position: relative;
  padding: 8px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-color);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 2001;
}

.hamburger {
  display: none !important;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  z-index: 2000;
  position: relative;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger:active,
.hamburger:focus {
  opacity: 0.9;
  outline: 2px solid var(--primary-color);
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: var(--secondary-color);
  border-radius: 2px;
  transition: var(--transition-fast);
  display: block;
  flex-shrink: 0;
}

/* 4. Hero Section
   ========================================================================== */
.hero-section {
  padding: 70px 0px 90px;
  background: linear-gradient(180deg, var(--primary-light) 0%, #ffffff 100%);
  position: relative;
  width: 100%;
  overflow-x: hidden;
  z-index: 1;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--primary-light);
  color: var(--primary-color);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-content h1 {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--secondary-color);
  margin-bottom: 20px;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 35px;
}

.hero-trust {
  display: flex;
  gap: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 25px;
}

.trust-item {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.trust-item i {
  color: var(--accent-color);
}

/* Quick Form Card */
.quick-form-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 35px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}

.form-header {
  margin-bottom: 25px;
}

.form-header h3 {
  font-size: 1.4rem;
  color: var(--secondary-color);
  font-weight: 700;
}

.form-header p {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition-fast);
  background-color: #fafafa;
}

.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  background-color: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(13, 110, 82, 0.18);
}

/* Validasi form: pesan tampil inline di bawah field, menggantikan alert()
   yang memblokir halaman dan malah menutupi field yang salah. */
.form-group input.is-invalid, .form-group select.is-invalid {
  border-color: #dc2626;
  background-color: #fef2f2;
}

.form-group input.is-invalid:focus, .form-group select.is-invalid:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-group .field-error {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #dc2626;
}

.form-group .field-error::before {
  content: "\26A0";
  margin-right: 5px;
}

/* Gerbang izin lokasi (#geoGate).

   Panel ini menggantikan perilaku lama di mana form yang gagal membaca lokasi
   diam-diam dilempar ke nomor CS pusat. Sengaja tampil menyatu di bawah tombol
   submit, bukan sebagai modal: yang sedang terjadi masih bagian dari pengisian
   form yang sama, dan modal justru menutupi isian yang baru saja diketik. */
.geo-gate {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--primary-light);
}

.geo-gate[hidden] {
  display: none;
}

.geo-gate-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.geo-gate-title i {
  margin-right: 6px;
}

.geo-gate-title.geo-gate-warn {
  color: #b45309;
}

.geo-gate-text {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Nama cabang tujuan. Ditampilkan sebelum pengunjung diteruskan ke WhatsApp
   supaya dia tahu dia sedang dihubungkan ke siapa — bukan sekadar "terkirim". */
.geo-gate-branch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.geo-gate-branch span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* 5. Stats Section
   ========================================================================== */
.stats-section {
  background-color: var(--secondary-color);
  color: white;
  padding: 40px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.stat-box {
  padding: 15px;
}

.stat-number {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--primary-color);
  display: inline-block;
}

.stat-percent, .stat-unit {
  font-size: 1.8rem;
  font-weight: 800;
  display: inline-block;
  color: var(--primary-color);
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  margin-top: 5px;
}

/* 6. Barang Jaminan Categories
   ========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
}

.category-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 30px;
  transition: var(--transition-normal);
  position: relative;
  display: flex;
  flex-direction: column;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.card-image {
  width: 100%;
  height: 300px;
  margin: -30px -30px 20px -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

.card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s ease;
}

.category-card:hover .card-image img {
  transform: scale(1.08);
}

.card-icon {
  width: 55px;
  height: 55px;
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.category-card h3 {
  font-size: 1.2rem;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.category-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
  flex-grow: 1;
}

.category-card .tag {
  align-self: flex-start;
  background-color: var(--primary-light);
  color: var(--accent-color);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* 7. Keunggulan Section
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  background-color: var(--bg-white);
  padding: 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.feature-icon {
  width: 70px;
  height: 70px;
  min-width: 70px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.feature-body h3 {
  font-size: 1.15rem;
  color: var(--secondary-color);
  margin-bottom: 8px;
}

.feature-body p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 8. Tim Profesional Section
   ========================================================================== */
.team-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* Container Foto Utama */
.team-photo-box {
  width: 370px;
  height: 420px;
  position: relative; /* Penting: menjadi patokan posisi absolute foto */
  overflow: hidden;   /* Memotong area di luar 220x270 */
  border-radius: 16px;
  border: 3px solid #00a651;
  background-color: var(--primary-light);
}

/* Mengunci Semua Foto Agar Menumpuk Tepat di 1 Titik */
.team-photo-box img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0;
  animation: slideshowThreeImages 9s infinite;
}

/* Pengaturan Urutan Tampil Foto */
.team-photo-box img:nth-child(1) {
  animation-delay: 0s;
}

.team-photo-box img:nth-child(2) {
  animation-delay: 3s;
}

.team-photo-box img:nth-child(3) {
  animation-delay: 6s;
}

/* Keyframe Animasi Masing-Masing Foto (Tampil 3 Detik) */
@keyframes slideshowThreeImages {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1; /* Transisi muncul */
  }
  33.33% {
    opacity: 1; /* Foto aktif/terlihat */
  }
  43.33% {
    opacity: 0; /* Transisi menghilang */
  }
  100% {
    opacity: 0;
  }
}

.team-content h3 {
  font-size: 1.6rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 15px;
}

.team-content h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--primary-color);
}

.team-description {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 30px;
  line-height: 1.6;
}

.team-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.team-feature-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.feature-check {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background-color: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 1.1rem;
}

.feature-text {
  padding-top: 3px;
}

.feature-text strong {
  color: var(--text-dark);
  font-size: 0.95rem;
}

.team-section-title {
  font-size: 1.4rem;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

/* 9. Calculator Section
   ========================================================================== */
.calculator-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  background: linear-gradient(135deg, var(--secondary-color), #022c1d);
  border-radius: var(--radius-lg);
  padding: 50px;
  color: white;
}

.calculator-info h2 {
  color: white;
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.calculator-info p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 30px;
}

.calc-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
}

.hl-item i {
  color: var(--warning-color);
}

.calculator-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 35px;
  color: var(--text-dark);
}

.calc-group {
  margin-bottom: 25px;
}

.calc-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 8px;
}

.range-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 10px;
}

input[type=range] {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #e2e8f0;
  outline: none;
  accent-color: var(--primary-color);
}

.range-limits {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 5px;
}

.tenor-options {
  display: flex;
  gap: 10px;
}

.tenor-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.tenor-btn.active, .tenor-btn:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.calc-result-box {
  background-color: var(--primary-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.result-row.total {
  border-top: 1px dashed #cbd5e1;
  padding-top: 10px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 1rem;
}

.result-row.total strong {
  color: var(--primary-color);
  font-size: 1.2rem;
}

.calc-note {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
}

/* 9. Steps / How it Works
   ========================================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step-card {
  background-color: var(--bg-white);
  padding: 30px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  position: relative;
  text-align: center;
}

.step-number {
  width: 50px;
  height: 50px;
  background-color: var(--primary-color);
  color: white;
  font-weight: 800;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.step-card h3 {
  font-size: 1.1rem;
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.step-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* 10. Branches / Lokasi Section
   ========================================================================== */
.branch-controls {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.branch-controls select {
  padding: 12px 24px 12px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 25px;
}

.branch-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.branch-card > p {
  margin: 0 !important;
  flex-grow: 0;
}

.branch-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3px;
}

.branch-header h3 {
  font-size: 1.05rem;
  color: var(--secondary-color);
  font-weight: 700;
  margin: 0;
}

.badge-open {
  background-color: var(--primary-light);
  color: var(--secondary-color);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.branch-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.branch-card p i {
  color: var(--primary-color);
  margin-top: 3px;
  flex-shrink: 0;
  min-width: 16px;
}

.branch-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}

.branch-card .btn {
  flex: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-maps {
  background-color: var(--primary-color);
  color: white;
  border: 1px solid var(--primary-color);
}

.btn-maps:hover {
  background-color: var(--primary-dark);
  color: white;
  border-color: var(--primary-dark);
}

.btn-wa {
  background-color: #25d366;
  color: white;
  border: 1px solid #25d366;
}

.btn-wa:hover {
  background-color: #20ba5a;
  color: white;
  border-color: #20ba5a;
}

/* 11. Testimonials
   ========================================================================== */
.testimonial-slider {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 35px 30px;
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.testimonial-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.testimonial-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.testimonial-card.slide {
  animation: slideInFade 0.5s ease-in-out;
}

@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.testimonial-card::before {
  display: none;
}

.stars {
  display: none;
}

.testi-text {
  display: none;
}

.testi-author {
  display: none;
}

.testi-author strong {
  display: block;
  font-size: 0.88rem;
  color: var(--secondary-color);
  margin-bottom: 2px;
  font-weight: 700;
}

.testi-author span {
  font-size: 0.75rem;
  color: var(--primary-color);
  font-weight: 500;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.dot.active {
  background-color: var(--primary-color);
  width: 28px;
  border-radius: 6px;
}

.testimonial-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.slide-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: all;
  box-shadow: var(--shadow-md);
}

.slide-btn:hover {
  background-color: var(--primary-dark);
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.slide-btn:active {
  transform: scale(0.95);
}

/* 12. FAQ Accordion
   ========================================================================== */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--bg-white);
}

.faq-question {
  width: 100%;
  padding: 20px;
  text-align: left;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
}

/* Barisnya bisa diklik tapi dulu tidak memberi tanda apa pun saat disorot. */
.faq-question:hover {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

.faq-question i {
  transition: var(--transition-fast);
  color: var(--primary-color);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #fafafa;
}

.faq-answer p {
  padding: 0 20px 20px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

/* 13. CTA Banner
   ========================================================================== */
.cta-section {
  background: linear-gradient(135deg, #0d6e52 0%, #0a5c44 50%, #073d35 100%);
  color: white;
  padding: 60px 0;
  width: 100%;
  overflow: hidden;
}

.cta-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  position: relative;
  z-index: 1;
}

.cta-content h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

/* 14. Footer
   ========================================================================== */
.footer {
  background-color: var(--secondary-color);
  color: rgba(255, 255, 255, 0.75);
  padding-top: 70px;
  width: 100%;
  overflow-x: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 50px;
}

.footer-logo {
  color: white;
  margin-bottom: 15px;
}

.footer-brand p {
  font-size: 0.88rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.ojk-note {
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  color: var(--warning-color);
  border-left: 3px solid var(--warning-color);
}

.footer-links h4, .footer-contact h4 {
  color: white;
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}

/* Latar footer memakai --secondary-color yang nilainya sama persis dengan
   --primary-color, jadi hover ke primary bikin tulisannya lenyap ditelan
   latar. Hover-nya sekarang ke putih penuh + garis bawah tipis, jelas terlihat
   di atas hijau tua. */
.footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-contact p {
  font-size: 0.88rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Ikon dikunci selebar 16px supaya kolom teks email dan sosial media mulai di
   titik horizontal yang sama. */
.footer-contact p i,
.social-links a i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.social-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* biar garis bawah hover selebar teks, bukan sekolom */
  gap: 12px;
  margin-top: 0;
}

.social-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

.social-links a:hover {
  color: #ffffff;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tombol pengaduan (kolom Kontak Pusat, paling bawah).
   Gayanya ghost/outline, bukan tombol berwarna penuh: di atas hijau tua footer
   ia tetap terbaca sebagai tombol, tapi tidak berebut perhatian dengan tombol
   WhatsApp yang memang jalur utama. Radius, ketebalan huruf, dan transisinya
   ikut .btn supaya sebentuk dengan tombol lain di halaman ini — kelas .btn
   sendiri tidak dipakai karena warnanya semua dirancang untuk latar terang. */
.footer-complaint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  transition: var(--transition-normal);
}

/* Ikon depan dikunci 16px seperti ikon email & Instagram di atasnya supaya
   teksnya mulai di titik horizontal yang sama. */
.footer-complaint > i:first-child {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--accent-color);
}

/* Penanda "link ini keluar dari situs" — sengaja kecil dan pudar, hanya
   isyarat, bukan bagian dari label. */
.footer-complaint-ext {
  font-size: 0.65rem;
  opacity: 0.6;
}

.footer-complaint:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-dark);
  box-shadow: 0 6px 15px rgba(222, 172, 60, 0.25);
  transform: translateY(-2px);
}

/* Saat hover latarnya jadi emas, jadi ikon emas harus ikut berubah gelap —
   kalau tidak, ikonnya hilang ditelan latarnya sendiri. */
.footer-complaint:hover > i:first-child {
  color: var(--text-dark);
}

.footer-complaint:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  font-size: 0.82rem;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.legal-links {
  display: flex;
  gap: 20px;
}

.legal-links a {
  color: rgba(255, 255, 255, 0.75);
}

.legal-links a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 15. Floating WhatsApp & Widgets
   ========================================================================== */
.floating-wa {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: var(--transition-normal);
}

.floating-wa:hover {
  transform: scale(1.1);
}

.wa-tooltip {
  position: absolute;
  right: 70px;
  background-color: var(--secondary-color);
  color: white;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-fast);
  pointer-events: none;
}

.floating-wa:hover .wa-tooltip {
  opacity: 1;
  visibility: visible;
}

/* 16. Responsive Breakpoints
   ========================================================================== */

/* Tablet & Smaller Desktop (992px and below) */
/*
 | Navigasi jadi mode mobile mulai 1200px ke bawah.
 |
 | Menunya tujuh item plus tombol "Chat WA" di sebelah logo. Di lebar 1000-1200px
 | semuanya masih dipaksa berjajar satu baris, dan itu yang bikin navbar terlihat
 | rusak — bukan karena layarnya kecil, tapi karena isinya memang tidak muat.
 | Ambang mobile-nya dinaikkan supaya menu keburu dilipat sebelum berdesakan.
 |
 | Blok ini SENGAJA cuma berisi navigasi. Sisa tata letak mobile (ukuran font
 | hero, grid jadi satu kolom, dan seterusnya) tetap di 768px ke bawah: di layar
 | 1100px yang bermasalah cuma navbarnya, bukan seluruh halaman.
 */
@media (max-width: 1200px) {
  .nav-menu {
    position: fixed !important;
    /* Menempel tepat di bawah navbar, berapa pun tinggi navbar di breakpoint
       yang sedang berlaku. */
    top: var(--navbar-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--bg-white) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    gap: 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease-in-out !important;
    z-index: 5000 !important;
    box-sizing: border-box !important;
  }

  .nav-menu.active {
    max-height: calc(100vh - var(--navbar-h)) !important;
    overflow-y: auto !important;
  }

  .nav-link {
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
    color: var(--text-dark) !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .nav-link:hover,
  .nav-link.active {
    background-color: var(--primary-light) !important;
  }

  .hamburger {
    display: flex !important;
    z-index: 2000 !important;
    position: relative !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .hamburger span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background-color: var(--secondary-color) !important;
    flex-shrink: 0 !important;
  }

  .hamburger:focus,
  .hamburger:active {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2001;
    position: relative;
  }
}

@media (max-width: 992px) {
  .section {
    padding: 60px 0;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .calculator-wrapper {
    grid-template-columns: 1fr;
    padding: 40px;
  }

  .calculator-info h2 {
    font-size: 1.8rem;
  }

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

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

  .testimonial-slider {
    padding: 28px 20px;
    max-width: 650px;
  }

  .testimonial-card {
    padding: 22px 24px;
  }

  .testimonial-nav {
    padding: 0 5px;
  }

  .slide-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .testi-text {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .stars {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .dot {
    width: 10px;
    height: 10px;
  }

  .dot.active {
    width: 24px;
  }

  .testimonial-dots {
    margin-top: 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .cta-container {
    flex-direction: column;
    text-align: center;
  }

  .section-title h2 {
    font-size: 1.8rem;
  }
}

/* Mobile: Tablets (768px and below) */
@media (max-width: 768px) {
  /* Universal Mobile Fixes */
  html {
    font-size: 14px;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100vw;
    overflow-x: hidden;
  }

  * {
    max-width: 100%;
  }

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

  .container {
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .section {
    padding: 50px 0;
    width: 100%;
    overflow-x: hidden;
  }

  /* Universal Grid/Flex Fixes (kecualikan elemen internal Leaflet) */
  [class*="grid"]:not([class*="leaflet"]),
  [class*="flex"]:not([class*="leaflet"]),
  div[class*="wrapper"]:not([class*="leaflet"]),
  div[class*="container"]:not([class*="leaflet"]) {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* All Cards */
  [class*="card"] {
    width: 100%;
    box-sizing: border-box;
  }

  /* All Forms */
  form {
    width: 100%;
  }

  input, select, textarea {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }

  button {
    max-width: 100%;
  }

  /* Gap Optimization for Mobile */
  [class*="grid"] {
    gap: 12px !important;
  }

  [class*="flex"] {
    gap: 10px !important;
  }

  /* Navigation
     Laci menu & hamburger-nya sudah diurus blok 1200px di atas; di sini tinggal
     tinggi navbar dan ukuran identitas mereknya yang menyesuaikan layar kecil. */
  :root {
    --navbar-h: 70px;
  }

  .brand-title {
    font-size: 1rem;
  }

  .brand-subtitle {
    font-size: 0.6rem;
  }

  .logo-img {
    width: 44px;
    height: 44px;
  }

  .btn-whatsapp {
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  .btn {
    max-width: 100%;
    word-wrap: break-word;
  }

  .btn-lg {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .btn-block {
    width: 100%;
  }

  /* Hero Section */
  .hero-section {
    padding: 50px 0 60px;
    width: 100%;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
  }

  .hero-content {
    width: 100%;
  }

  .hero-content h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .hero-desc {
    font-size: 0.95rem;
  }

  /* Gap Optimization for Mobile */
  [class*="grid"] {
    gap: 10px !important;
  }

  [class*="flex"] {
    gap: 8px !important;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-trust {
    flex-direction: column;
    gap: 8px;
    padding-top: 15px;
    width: 100%;
  }

  .hero-card-wrapper {
    width: 100%;
  }

  .trust-item {
    font-size: 0.8rem;
  }

  .quick-form-card {
    padding: 20px;
    width: 100%;
    overflow-x: hidden;
  }

  .form-header h3 {
    font-size: 1.2rem;
    word-wrap: break-word;
  }

  .form-header p {
    word-wrap: break-word;
  }

  .form-group {
    margin-bottom: 14px;
  }

  .form-group label {
    font-size: 0.8rem;
    display: block;
    word-wrap: break-word;
  }

  .form-group input, .form-group select {
    padding: 10px 12px;
    font-size: 0.9rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .quick-form-card button {
    width: 100%;
    box-sizing: border-box;
  }

  #quickGadaiForm button {
    width: 100%;
    box-sizing: border-box;
  }

  /* Section Titles */
  .section-title {
    margin-bottom: 35px;
    padding: 0 10px;
    word-wrap: break-word;
    overflow-x: hidden;
  }

  .section-title h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    word-wrap: break-word;
  }

  .section-title p {
    font-size: 0.95rem;
    word-wrap: break-word;
  }

  /* Category Cards */
  .category-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .category-card {
    padding: 20px;
  }

  .card-image {
    height: 220px;
    margin: -20px -20px 15px -20px;
    padding: 15px;
  }

  .card-icon {
    width: 45px;
    height: 45px;
    font-size: 1.4rem;
  }

  .category-card h3 {
    font-size: 1.05rem;
  }

  .category-card p {
    font-size: 0.85rem;
  }

  /* Features Grid */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-box {
    padding: 20px;
    gap: 15px;
  }

  .feature-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    font-size: 1.5rem;
  }

  .feature-body h3 {
    font-size: 1rem;
  }

  .feature-body p {
    font-size: 0.85rem;
  }

  /* Team Section */
  .team-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

/* Container Foto */
/* Container Foto Utama */
.team-photo-box {
  width: 370px;
  height: 420px;
  position: relative; /* Penting: menjadi patokan posisi absolute foto */
  overflow: hidden;   /* Memotong area di luar 220x270 */
  border-radius: 16px;
  border: 3px solid #00a651;
  background-color: var(--primary-light);
}

/* Mengunci Semua Foto Agar Menumpuk Tepat di 1 Titik */
.team-photo-box img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0;
  animation: slideshowThreeImages 9s infinite;
}

/* Pengaturan Urutan Tampil Foto */
.team-photo-box img:nth-child(1) {
  animation-delay: 0s;
}

.team-photo-box img:nth-child(2) {
  animation-delay: 3s;
}

.team-photo-box img:nth-child(3) {
  animation-delay: 6s;
}

/* Keyframe Animasi Masing-Masing Foto (Tampil 3 Detik) */
@keyframes slideshowThreeImages {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1; /* Transisi muncul */
  }
  33.33% {
    opacity: 1; /* Foto aktif/terlihat */
  }
  43.33% {
    opacity: 0; /* Transisi menghilang */
  }
  100% {
    opacity: 0;
  }
}

  .team-content h3 {
    font-size: 1.3rem;
  }

  .team-description {
    font-size: 0.9rem;
  }

  .team-features {
    grid-template-columns: 1fr;
  }

  .feature-check {
    width: 25px;
    height: 25px;
    font-size: 0.9rem;
  }

  .feature-text strong {
    font-size: 0.9rem;
  }

  /* Calculator */
  .calculator-wrapper {
    padding: 20px;
    border-radius: var(--radius-md);
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  .calculator-info {
    margin-bottom: 25px;
    width: 100%;
  }

  .calculator-info h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    word-wrap: break-word;
  }

  .calculator-info p {
    font-size: 0.9rem;
    word-wrap: break-word;
  }

  .calc-highlights {
    gap: 10px;
  }

  .hl-item {
    font-size: 0.85rem;
  }

  .calculator-card {
    padding: 20px;
  }

  .calc-group {
    margin-bottom: 20px;
  }

  .calc-group label {
    font-size: 0.8rem;
  }

  .range-value {
    font-size: 1.4rem;
    margin-bottom: 8px;
  }

  input[type=range] {
    height: 6px;
  }

  .range-limits {
    font-size: 0.7rem;
  }

  .tenor-options {
    gap: 8px;
  }

  .tenor-btn {
    padding: 8px;
    font-size: 0.85rem;
  }

  .calc-result-box {
    padding: 15px;
    margin-bottom: 15px;
  }

  .result-row {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }

  .result-row.total {
    font-size: 0.95rem;
  }

  .result-row.total strong {
    font-size: 1rem;
  }

  .calc-note {
    font-size: 0.7rem;
  }

  #btnAjukanSimulasi {
    padding: 12px;
    font-size: 0.9rem;
  }

  /* Steps */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .step-card {
    padding: 20px 15px;
  }

  .step-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .step-card h3 {
    font-size: 0.95rem;
  }

  .step-card p {
    font-size: 0.8rem;
  }

  /* Branch Section */
  .branch-controls {
    margin-bottom: 20px;
  }

  .branch-controls select {
    padding: 12px 24px 12px 24px;
    font-size: 0.95rem;
  }

  .branch-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .branch-card {
    padding: 18px;
  }

  .branch-header {
    margin-bottom: 12px;
  }

  .branch-header h3 {
    font-size: 0.95rem;
  }

  .branch-card p {
    font-size: 0.8rem;
    margin-bottom: 6px;
  }

  .branch-card-actions {
    gap: 8px;
  }

  .branch-card .btn {
    min-height: 36px;
    font-size: 0.75rem;
    padding: 8px 10px;
  }

  .branch-card .btn {
    margin-top: 10px;
  }

  /* Testimonials */
  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .testimonial-card {
    padding: 20px;
  }

  .testi-text {
    font-size: 0.85rem;
    margin-bottom: 15px;
  }

  .testi-author strong {
    font-size: 0.9rem;
  }

  .testi-author span {
    font-size: 0.75rem;
  }

  /* FAQ */
  .faq-accordion {
    margin: 0;
  }

  .faq-item {
    border-radius: var(--radius-sm);
  }

  .faq-question {
    padding: 15px;
    font-size: 0.9rem;
  }

  .faq-answer p {
    padding: 0 15px 15px;
    font-size: 0.85rem;
  }

  /* CTA Section */
  .cta-section {
    padding: 40px 0;
  }

  .cta-content h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .cta-content p {
    font-size: 0.9rem;
  }

  .cta-actions {
    margin-top: 15px;
  }

  /* Footer */
  .footer {
    padding-top: 50px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
  }

  .footer-brand p {
    font-size: 0.85rem;
  }

  .footer-links h4, .footer-contact h4 {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  .footer-links a {
    font-size: 0.85rem;
  }

  .footer-contact p {
    font-size: 0.85rem;
  }

  /* Di layar sempit kolomnya jadi satu lajur penuh; tombolnya tetap selebar
     teksnya sendiri (inline-flex) supaya tidak melar sepanjang layar. */
  .footer-complaint {
    margin-top: 18px;
    font-size: 0.82rem;
  }

  .footer-bottom-content {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .legal-links {
    gap: 15px;
    font-size: 0.8rem;
  }

  .footer-bottom {
    font-size: 0.75rem;
  }

  /* Floating WA */
  .floating-wa {
    width: 55px;
    height: 55px;
    bottom: 20px;
    right: 20px;
    font-size: 1.8rem;
  }

  .wa-tooltip {
    font-size: 0.75rem;
    padding: 5px 10px;
    right: 65px;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .stat-box {
    padding: 12px;
  }

  .stat-number {
    font-size: 2rem;
  }

  .stat-percent, .stat-unit {
    font-size: 1.4rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }
}

/* Mobile: Small Phones (480px and below) */
@media (max-width: 480px) {
  /* Universal Small Phone Fixes */
  html {
    font-size: 13px;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100vw;
    overflow-x: hidden;
  }

  * {
    max-width: 100%;
  }

  /* Universal Grid/Flex Fixes (kecualikan elemen internal Leaflet) */
  [class*="grid"]:not([class*="leaflet"]),
  [class*="flex"]:not([class*="leaflet"]),
  div[class*="wrapper"]:not([class*="leaflet"]),
  div[class*="container"]:not([class*="leaflet"]) {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden !important;
  }

  /* All Cards */
  [class*="card"] {
    width: 100%;
    box-sizing: border-box;
  }

  /* All Forms */
  form {
    width: 100%;
  }

  input, select, textarea {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
  }

  button {
    max-width: 100%;
  }

  .container {
    padding: 0 12px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .section {
    padding: 35px 0;
    width: 100%;
    overflow-x: hidden;
  }

  /* Navbar */
  :root {
    --navbar-h: 65px;
  }

  .navbar-container {
    padding: 0 12px;
  }

  .nav-menu {
    padding: 10px !important;
  }

  .brand-title {
    font-size: 0.9rem;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-subtitle {
    display: none;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .btn-whatsapp {
    padding: 8px 12px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .btn-whatsapp i {
    font-size: 1rem;
  }

  /* Hero Section */
  .hero-section {
    padding: 40px 0 50px;
    width: 100%;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
  }

  .hero-content {
    width: 100%;
  }

  .hero-card-wrapper {
    width: 100%;
  }

  .hero-content h1 {
    font-size: 1.4rem;
  }

  .badge-tag {
    font-size: 0.75rem;
    padding: 5px 12px;
  }

  .hero-buttons {
    gap: 10px;
  }

  .btn-lg {
    padding: 12px 20px;
    font-size: 0.85rem;
  }

  .hero-desc {
    font-size: 0.9rem;
  }

  .quick-form-card {
    padding: 18px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .quick-form-card button,
  #quickGadaiForm button {
    width: 100%;
    box-sizing: border-box;
  }

  .form-header h3 {
    font-size: 1.1rem;
  }

  .form-header p {
    font-size: 0.8rem;
  }

  /* Sections */
  .section-title {
    margin-bottom: 25px;
  }

  .section-title .sub-title {
    font-size: 0.75rem;
  }

  .section-title h2 {
    font-size: 1.3rem;
  }

  .section-title p {
    font-size: 0.9rem;
  }

  /* Cards */
  .category-card {
    padding: 18px;
  }

  .card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .category-card h3 {
    font-size: 1rem;
  }

  .category-card p {
    font-size: 0.8rem;
  }

  /* Feature Box */
  .feature-box {
    padding: 18px;
    gap: 12px;
  }

  .feature-body h3 {
    font-size: 0.95rem;
  }

  .feature-body p {
    font-size: 0.8rem;
  }

  /* Team Section */
  .team-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .team-photo-box {
    width: 180px;
    height: 220px;
  }

  .team-content h3 {
    font-size: 1.1rem;
  }

  .team-description {
    font-size: 0.85rem;
  }

  /* Calculator */
  .calculator-wrapper {
    padding: 20px;
  }

  .calculator-info h2 {
    font-size: 1.3rem;
  }

  .calc-group label {
    font-size: 0.75rem;
  }

  .range-value {
    font-size: 1.2rem;
  }

  .range-limits {
    font-size: 0.65rem;
  }

  .tenor-btn {
    font-size: 0.8rem;
    padding: 7px;
  }

  .calc-result-box {
    padding: 12px;
  }

  .result-row {
    font-size: 0.8rem;
  }

  /* Steps */
  .step-card {
    padding: 18px 12px;
  }

  .step-number {
    width: 35px;
    height: 35px;
    font-size: 0.95rem;
    margin-bottom: 15px;
  }

  .step-card h3 {
    font-size: 0.9rem;
  }

  .step-card p {
    font-size: 0.75rem;
  }

  /* Branch */
  .branch-card {
    padding: 15px;
  }

  .branch-header h3 {
    font-size: 0.9rem;
  }

  .branch-card p {
    font-size: 0.75rem;
  }

  /* Testimonials */
  .testimonial-slider {
    padding: 22px 18px;
    max-width: 95%;
  }

  .testimonial-card {
    padding: 18px 20px;
  }

  .stars {
    font-size: 0.85rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
  }

  .testi-text {
    font-size: 0.85rem;
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .testi-author strong {
    font-size: 0.8rem;
  }

  .testi-author span {
    font-size: 0.7rem;
  }

  .slide-btn {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }

  .dot {
    width: 10px;
    height: 10px;
  }

  .dot.active {
    width: 22px;
  }

  .testimonial-dots {
    margin-top: 20px;
    gap: 8px;
  }

  .testimonial-card::before {
    font-size: 1.8rem;
    top: 6px;
    left: 12px;
  }

  .stars {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  .testi-text {
    font-size: 0.8rem;
  }

  /* FAQ */
  .faq-question {
    padding: 12px;
    font-size: 0.85rem;
  }

  .faq-answer p {
    padding: 0 12px 12px;
    font-size: 0.8rem;
  }

  /* CTA */
  .cta-content h2 {
    font-size: 1.2rem;
  }

  .cta-content p {
    font-size: 0.85rem;
  }

  .btn.btn-lg {
    padding: 12px 16px;
  }

  /* Footer */
  .footer {
    padding-top: 35px;
  }

  .footer-brand p {
    font-size: 0.8rem;
  }

  .footer-links h4, .footer-contact h4 {
    font-size: 0.95rem;
  }

  .footer-links a {
    font-size: 0.8rem;
  }

  .footer-contact p {
    font-size: 0.8rem;
  }

  .social-links {
    gap: 10px;
  }

  .social-links a {
    font-size: 0.8rem;
  }

  .footer-complaint {
    margin-top: 16px;
    padding: 9px 16px;
    font-size: 0.78rem;
  }

  /* Floating WA */
  .floating-wa {
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
  }

  .wa-tooltip {
    display: none;
  }

  /* Stats */
  .stat-number {
    font-size: 1.6rem;
  }

  .stat-percent, .stat-unit {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }
}

/* Map Section Styles */
.map-section {
  padding: 60px 0;
}

.map-wrapper {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  margin-top: 40px;
  min-height: 600px;
}

.map-container {
  width: 100%;
  height: 600px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background-color: white;
  position: relative;
}

/* Critical: Leaflet container must fill parent completely */
.map-container .leaflet-container {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  background-color: white !important;
  z-index: 1 !important;
}

#mapContainer {
  width: 100%;
  height: 100%;
  display: block;
  background-color: white;
}

/* Leaflet panes - force visibility */
.leaflet-pane {
  z-index: 400;
  opacity: 1 !important;
  visibility: visible !important;
}

.leaflet-tile-pane {
  z-index: 2 !important;
  opacity: 1 !important;
  display: block !important;
}

/* Basemap dibikin pucat.
   Peta ini dulu memakai basemap "light_all" milik CartoDB yang memang sudah
   abu-abu muda, supaya pin cabang berwarna hijau langsung menonjol. CartoDB
   kini mewajibkan API key, jadi sumbernya pindah ke OpenStreetMap standar yang
   jauh lebih ramai warna — jalan oranye, hutan hijau, air biru pekat — dan pin
   hijaunya jadi tenggelam. Filter ini mengembalikan tampilan pucat itu tanpa
   perlu berlangganan penyedia ubin mana pun.
   Sengaja hanya di dalam .map-container: pin, popup, dan kontrol zoom ada di
   pane lain, jadi warnanya tidak ikut luntur. */
.map-container .leaflet-tile-pane {
  filter: grayscale(0.75) brightness(1.06) contrast(0.94);
}

.leaflet-tile {
  opacity: 1 !important;
  display: block !important;
}

.leaflet-overlay-pane {
  z-index: 400;
  opacity: 1 !important;
}

.leaflet-shadow-pane {
  z-index: 500;
  opacity: 1 !important;
}

.leaflet-marker-pane {
  z-index: 600;
  opacity: 1 !important;
}

.leaflet-tooltip-pane {
  z-index: 650;
  opacity: 1 !important;
}

.leaflet-popup-pane {
  z-index: 700;
  opacity: 1 !important;
}

.map-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--bg-light);
  padding: 20px;
  border-radius: var(--radius-lg);
  height: fit-content;
  max-height: 600px;
  overflow-y: auto;
}

.map-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: white;
  padding: 10px 15px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(13, 110, 82, 0.1);
}

.search-box i {
  color: white;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.9rem;
  background: transparent;
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* Tombol kirim pencarian.
   Daftar cabang tetap tersaring hidup saat mengetik, tapi pencariannya baru
   DICATAT ke analytics waktu tombol ini (atau Enter) ditekan. Sebelumnya tiap
   ketukan huruf terkirim sebagai satu baris pencarian tersendiri, sehingga
   mengetik "cirebon" meninggalkan tujuh baris sampah di database dan angka
   "Total Pencarian Lokasi" di dashboard jadi tidak ada artinya. */
.search-submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--primary-color);
  color: #fff;
  cursor: pointer;
  transition: var(--transition-fast);
}

.search-submit:hover {
  filter: brightness(1.1);
}

.search-submit:active {
  transform: scale(0.95);
}

/* Menggantikan kelas utility Bootstrap (.form-text .d-flex .text-warning ...)
   yang dulu dipakai di sini. Bootstrap-nya sudah dilepas dari index.html. */
.search-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.search-tip i {
  color: var(--accent-color);
  margin-top: 3px;
  flex-shrink: 0;
}

.search-tip strong {
  color: var(--text-dark);
}

.branch-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.branch-list-container h3 {
  font-size: 1rem;
  color: var(--secondary-color);
  margin-bottom: 15px;
  font-weight: 700;
}

.branch-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.branch-list::-webkit-scrollbar {
  width: 6px;
}

.branch-list::-webkit-scrollbar-track {
  background: transparent;
}

.branch-list::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.branch-card-map {
  background-color: white;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}

.branch-card-map:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.branch-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.branch-card-map h4 {
  font-size: 0.95rem;
  color: var(--secondary-color);
  margin: 0;
  font-weight: 700;
  flex: 1;
}

.branch-address {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 8px;
}

.branch-phone {
  font-size: 0.85rem;
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: 12px;
}

.branch-buttons {
  display: flex;
  gap: 8px;
}

.branch-buttons .btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.75rem;
  min-height: 36px;
}

.btn-maps {
  background-color: var(--primary-color);
  color: white;
  border: none;
}

.btn-maps:hover {
  background-color: var(--primary-dark);
  color: white;
}

/* Pin marker styling is handled via SVG in JavaScript */
.leaflet-div-icon-custom {
  background: none;
  border: none;
}

.leaflet-marker-icon:hover {
  filter: drop-shadow(0 0 6px rgba(13, 110, 82, 0.4));
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
  margin: 0;
  padding: 12px;
}

.popup-city-name {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.popup-branch-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.popup-link {
  display: inline-block;
  background-color: var(--primary-color);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.popup-link:hover {
  background-color: var(--primary-dark);
  color: white;
}

.distance-badge {
  display: inline-block;
  background-color: var(--accent-color);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 8px;
}

.no-results {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .map-wrapper {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .map-container {
    height: 400px;
    width: 100%;
  }

  .map-sidebar {
    max-height: none;
    height: auto;
  }
}

@media (max-width: 768px) {
  .map-wrapper {
    grid-template-columns: 1fr;
    gap: 15px;
    min-height: auto;
  }

  .map-container {
    height: 350px;
    width: 100%;
    min-height: 350px;
  }

  .map-container .leaflet-container {
    height: 100% !important;
    width: 100% !important;
  }

  /* Sidebar TIDAK dibatasi tingginya di layar sempit.

     Isinya berurutan: kotak cari, tips, tombol "Cari Cabang Terdekat", BARU
     daftar cabang. Dengan max-height + overflow-y:auto, kontrolnya saja sudah
     memenuhi kotaknya — hasil pencarian tergambar di luar area yang terlihat,
     di dalam scroll container yang mudah tidak disadari karena halamannya juga
     bisa di-scroll. Pengunjung menyimpulkan "cabang terdekat tidak ketemu"
     padahal datanya sudah ada di DOM.

     Di layar sempit, halaman itu sendiri sudah jadi area scroll-nya; yang
     dibatasi cukup daftar cabangnya saja (.branch-list di bawah). */
  .map-sidebar {
    padding: 15px;
    max-height: none;
    overflow-y: visible;
  }

  .branch-list {
    max-height: 60vh;
  }

  .branch-card-compact {
    padding: 10px;
  }
}
@media (max-width: 480px) {
  .map-wrapper {
    grid-template-columns: 1fr;
    gap: 15px;
    min-height: auto;
  }

  .map-container {
    height: 250px;
    width: 100%;
    min-height: 250px;
  }

  .map-container .leaflet-container {
    height: 100% !important;
    width: 100% !important;
  }

  /* max-height: 200px di sini adalah versi paling parah dari masalah yang
     dijelaskan di breakpoint 768px: kotak cari + tips + tombol saja sudah
     sekitar 200px, jadi daftar cabangnya praktis tidak pernah terlihat sama
     sekali di HP. */
  .map-sidebar {
    padding: 10px;
    max-height: none;
    overflow-y: visible;
  }

  .branch-list {
    max-height: 65vh;
  }

  .branch-card-compact {
    padding: 10px;
  }
}



/* ==========================================================================
   FIX: Proteksi elemen internal Leaflet dari rule universal mobile.
   Rule seperti div[class*="container"] { width:100%; overflow-x:hidden }
   sebelumnya ikut mengenai .leaflet-tile-container sehingga semua tile
   ter-clip (peta tampak kotak kosong, hanya marker yang terlihat).
   ========================================================================== */
.leaflet-container .leaflet-pane,
.leaflet-container .leaflet-tile-container {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

.leaflet-container .leaflet-tile,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container .leaflet-marker-pane img {
  max-width: none !important;
  max-height: none !important;
}