@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --gold:       #C9A84C;
  --gold-2:     #E8C97A;
  --gold-pale:  #FBF6EC;
  --navy:       #0B1F3A;
  --navy-2:     #162D52;
  --navy-3:     #1E3A6E;
  --cream:      #F8F5F0;
  --ink:        #1A1A2E;
  --muted:      #6B7280;
  --white:      #FFFFFF;
  --border:     rgba(201,168,76,0.2);
  --shadow-lux: 0 4px 30px rgba(11,31,58,0.10);
  --shadow-hover-lux: 0 12px 50px rgba(11,31,58,0.18);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', sans-serif;
  --r-card: 20px;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
}

/* ── NAVBAR ── */
.navbar {
  background: rgba(11,31,58,0.97) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.25);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.nav-logo-text { color: var(--white) !important; font-family: var(--font-display); letter-spacing:0.02em; }
.nav-logo-text span { color: var(--gold) !important; font-style:italic; }
.nav-btn { color: rgba(255,255,255,0.8) !important; }
.nav-btn:hover { background: rgba(201,168,76,0.15) !important; color: var(--gold) !important; }
.nav-badge { background: var(--gold) !important; color: var(--navy) !important; }
.navbar .nav-search { border-color: rgba(201,168,76,0.3) !important; background: rgba(255,255,255,0.08) !important; color: white !important; }
.navbar .nav-search::placeholder { color: rgba(255,255,255,0.4) !important; }
.navbar .nav-search:focus { border-color: var(--gold) !important; }

/* ── HERO ── */
.hero {
  background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1600&q=85') !important;
  background-size: cover !important;
  background-position: center !important;
  min-height: 680px !important;
}
.hero::before {
  background: linear-gradient(135deg, rgba(11,31,58,0.88) 0%, rgba(11,31,58,0.60) 60%, rgba(201,168,76,0.15) 100%) !important;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem,5vw,4rem) !important;
  font-weight: 700;
  line-height: 1.15;
  background: linear-gradient(135deg, #fff 30%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-label {
  color: var(--gold) !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.hero-sub { color: rgba(255,255,255,0.85) !important; font-size: 1.1rem !important; }

.hero-search-card {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(10px);
}
.hero-tab.active { color: var(--navy) !important; border-bottom-color: var(--gold) !important; font-weight:700; }
.hero-tab:hover { color: var(--gold) !important; }
.hero-search-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #B8860B 100%) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 15px rgba(201,168,76,0.4);
  transition: all 0.3s ease;
}
.hero-search-btn:hover {
  box-shadow: 0 8px 25px rgba(201,168,76,0.5);
  transform: translateY(-1px);
}
.hero-quick-pill {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.9) !important;
}
.hero-quick-pill:hover { background: rgba(201,168,76,0.2) !important; border-color: var(--gold) !important; color: var(--gold) !important; }
.hero-stats { color: rgba(255,255,255,0.8) !important; }
.hero-stat strong { color: var(--gold) !important; }

/* ── FILTER BAR ── */
.filter-bar {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.2) !important;
  box-shadow: 0 4px 20px rgba(11,31,58,0.06);
}
.chip {
  border-color: rgba(201,168,76,0.3) !important;
  font-weight: 500;
  color: var(--navy) !important;
}
.chip:hover { border-color: var(--gold) !important; color: var(--gold) !important; background: var(--gold-pale) !important; }
.chip.active { background: var(--navy) !important; border-color: var(--navy) !important; color: var(--gold) !important; }
.chip-clear { color: var(--gold) !important; }
.chip-dropdown { border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(11,31,58,0.15) !important; }
.chip-dropdown-item.selected { color: var(--gold) !important; }
.chip-dropdown-apply { background: linear-gradient(135deg, var(--gold), #B8860B) !important; color: var(--navy) !important; font-weight: 700; }
.sort-select { border-color: rgba(201,168,76,0.3) !important; color: var(--navy) !important; }
.view-btn.active { background: var(--navy) !important; }

/* ── SIDEBAR ── */
.sidebar {
  border-radius: var(--r-card) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lux) !important;
}
.sidebar-title { font-family: var(--font-display); color: var(--navy) !important; letter-spacing: 0.02em; }
.sidebar-section-title { color: var(--navy) !important; }
.sidebar-checkbox input { accent-color: var(--gold) !important; }
.sidebar-pill.active { background: var(--navy) !important; border-color: var(--navy) !important; color: var(--gold) !important; }
.sidebar-pill:hover:not(.active) { border-color: var(--gold) !important; color: var(--gold) !important; }
.sidebar-apply { background: linear-gradient(135deg, var(--navy), var(--navy-3)) !important; box-shadow: 0 4px 15px rgba(11,31,58,0.3); }
.sidebar-apply:hover { box-shadow: 0 6px 20px rgba(11,31,58,0.4); }
.sidebar-reset { color: var(--gold) !important; }
.sidebar-filter-count { background: var(--gold) !important; color: var(--navy) !important; }

/* ── PROPERTY CARDS ── */
.prop-card {
  border-radius: var(--r-card) !important;
  border: 1px solid transparent;
  box-shadow: var(--shadow-lux) !important;
  transition: all 0.35s cubic-bezier(0.2,0.8,0.2,1) !important;
  overflow: hidden;
}
.prop-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-hover-lux) !important;
  border-color: rgba(201,168,76,0.3);
}
.card-img-wrap img { transition: transform 0.6s ease !important; }
.prop-card:hover .card-img-wrap img { transform: scale(1.06) !important; }

.card-badge { border-radius: 8px !important; letter-spacing: 0.05em; font-size: 11px !important; }
.card-badge.unggulan { background: linear-gradient(135deg, var(--gold), #B8860B) !important; color: var(--navy) !important; }
.card-badge.baru { background: var(--navy) !important; }
.card-badge.eksklusif { background: linear-gradient(135deg, #1A1A2E, #2D3561) !important; }

.card-status-badge.dijual { background: rgba(11,31,58,0.9) !important; color: var(--gold) !important; backdrop-filter: blur(10px); border-radius: 8px !important; }
.card-status-badge.disewakan { background: rgba(30,58,110,0.9) !important; color: #7dd3fc !important; backdrop-filter: blur(10px); border-radius: 8px !important; }

.card-price { color: var(--navy) !important; font-family: var(--font-display); font-size: 1.25rem !important; }
.card-title { color: var(--ink) !important; font-size: 0.9375rem !important; line-height: 1.4; }
.card-location i { color: var(--gold) !important; }

.card-tag { background: var(--gold-pale) !important; color: var(--navy) !important; border: 1px solid rgba(201,168,76,0.2); border-radius: 6px !important; }

.btn-wa { background: linear-gradient(135deg, #16a34a, #15803d) !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(22,163,74,0.25); }
.btn-detail { background: var(--gold-pale) !important; color: var(--navy) !important; border: 1px solid var(--border); border-radius: 8px !important; }
.btn-detail:hover { background: var(--gold) !important; color: var(--navy) !important; }
.btn-card-action { background: rgba(255,255,255,0.95) !important; }
.btn-card-action:hover { color: var(--gold) !important; }
.btn-card-action.saved { color: var(--gold) !important; }

.agent-avatar { background: linear-gradient(135deg, var(--navy), var(--navy-3)) !important; }
.agent-name { color: var(--navy) !important; }

/* ── STATISTIK ── */
.statistik-section { border: 1px solid var(--border); box-shadow: var(--shadow-lux) !important; }
.statistik-section .section-header h2 { font-family: var(--font-display); color: var(--navy) !important; }
.stat-card { background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important; color: white; border-radius: var(--r-card) !important; }
.stat-card i { color: var(--gold) !important; }
.stat-value { color: var(--gold) !important; }
.stat-label { color: rgba(255,255,255,0.7) !important; }
.bar-fill { background: linear-gradient(90deg, var(--gold), #B8860B) !important; }

/* ── KPR SECTION ── */
.kpr-section { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%) !important; border-radius: var(--r-card) !important; border: none; }
.kpr-section .section-header h2 { font-family: var(--font-display); color: var(--white) !important; }
.kpr-section .section-header p { color: rgba(255,255,255,0.7) !important; }
.kpr-label { color: rgba(255,255,255,0.85) !important; }
.kpr-result { border-left-color: var(--gold) !important; box-shadow: var(--shadow-lux); }
.kpr-cicilan { color: var(--gold) !important; font-family: var(--font-display); }
.kpr-progress-pokok { background: var(--gold) !important; }
.kpr-wa-btn { background: linear-gradient(135deg, #16a34a, #15803d) !important; }

/* ── AGEN CARDS ── */
.agen-card { border-radius: var(--r-card) !important; border: 1px solid var(--border); box-shadow: var(--shadow-lux) !important; }
.agen-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-hover-lux) !important; }
.agen-section .section-header h2 { font-family: var(--font-display); color: var(--navy) !important; }
.agen-avatar { background: linear-gradient(135deg, var(--navy), var(--navy-3)) !important; box-shadow: 0 4px 15px rgba(11,31,58,0.3); }
.agen-title { background: var(--gold-pale) !important; color: var(--navy) !important; border: 1px solid var(--border); }
.agen-btn-listing { background: linear-gradient(135deg, var(--navy), var(--navy-3)) !important; }
.agen-btn-wa { background: linear-gradient(135deg, #16a34a, #15803d) !important; }
.agen-card .agen-stats i { color: var(--gold) !important; }

/* ── TIPS CARDS ── */
.tip-card { border-radius: var(--r-card) !important; border: 1px solid var(--border); box-shadow: var(--shadow-lux) !important; }
.tip-card:hover { transform: translateY(-6px) !important; }
.tips-section .section-header h2 { font-family: var(--font-display); color: var(--navy) !important; }
.tip-icon { color: var(--gold) !important; }
.tip-cta { color: var(--gold) !important; }
.tip-cta:hover { color: var(--navy) !important; }

/* ── FOOTER ── */
.footer { background: linear-gradient(180deg, var(--navy) 0%, #060F1D 100%) !important; border-top: 2px solid rgba(201,168,76,0.3); }
.footer-logo span { color: var(--white) !important; font-family: var(--font-display); }
.footer-logo span em { color: var(--gold) !important; }
.footer-divider { border-top-color: rgba(201,168,76,0.2) !important; }
.footer-col h4 { color: var(--gold) !important; letter-spacing: 0.05em; }
.footer-col ul li a:hover { color: var(--gold) !important; }
.footer-bottom a:hover { color: var(--gold) !important; }

/* ── MODAL ── */
.modal-overlay { background: rgba(11,31,58,0.7) !important; }
.modal-detail { border-radius: 28px !important; }
.modal-price { color: var(--navy) !important; font-family: var(--font-display); }
.modal-title { font-family: var(--font-display); color: var(--ink) !important; }

/* ── FLOATING BUTTONS ── */
.wa-float { background: linear-gradient(135deg, #16a34a, #15803d) !important; box-shadow: 0 4px 20px rgba(22,163,74,0.4) !important; }
.back-top { background: var(--navy) !important; color: var(--gold) !important; }

/* ── AGENT BANNER ── */
.agent-banner { background: var(--gold-pale) !important; border-left-color: var(--gold) !important; }
.agent-banner-avatar { background: linear-gradient(135deg, var(--navy), var(--navy-3)) !important; }

/* ── EMPTY STATE ── */
.empty-state button { background: linear-gradient(135deg, var(--navy), var(--navy-3)) !important; }

/* ── SKELETON ── */
.skel { background: linear-gradient(90deg, #e8e0d0 25%, #f5f0e8 50%, #e8e0d0 75%) !important; }

/* ── TOOLBAR COUNT ── */
.toolbar-count strong { color: var(--navy) !important; }
.sidebar-title { font-family: var(--font-display); font-size: 1.25rem; }

/* ── SEARCH SUGGESTIONS ── */
.nav-search-suggestions { box-shadow: 0 10px 40px rgba(11,31,58,0.2) !important; border: 1px solid var(--border); }
.suggestion-group-title { color: var(--gold) !important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── RESPONSIVE & MOBILE MENU ── */
.nav-menu-btn {
  display: none !important;
}
.nav-mobile-menu {
  display: none !important;
}

@media(max-width:767px) {
  .hero h1 { font-size: 2.2rem !important; }
  .hero { min-height: 500px !important; }

  .nav-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 20px !important;
    transition: all 0.2s ease;
  }
  .nav-menu-btn:hover {
    background: rgba(201,168,76,0.15) !important;
    color: var(--gold) !important;
    border-color: var(--gold) !important;
  }

  .nav-mobile-menu {
    display: none !important;
    width: 100%;
    background: rgba(11,31,58,0.98) !important;
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(201,168,76,0.2) !important;
    padding: var(--s4) 0 !important;
    margin-top: var(--s2);
  }
  .nav-mobile-menu.active {
    display: flex !important;
    flex-direction: column;
    gap: var(--s3);
  }

  .nav-mobile-menu .nav-search-wrap {
    padding: 0 var(--s3);
  }
  .nav-mobile-menu .nav-search {
    border-color: rgba(201,168,76,0.3) !important;
    background: rgba(255,255,255,0.08) !important;
    color: white !important;
  }

  .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: 0 var(--s3);
  }
  .nav-mobile-actions .nav-btn {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s3);
    padding: var(--s3) var(--s4) !important;
    border-radius: var(--r-card) !important;
    background: rgba(255,255,255,0.05) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    font-size: var(--text-sm) !important;
  }
  .nav-mobile-actions .nav-btn:hover {
    background: rgba(201,168,76,0.15) !important;
    color: var(--gold) !important;
    border-color: var(--gold) !important;
  }
  .nav-mobile-actions .nav-btn span {
    display: inline !important;
  }
}