/* =============================================
   Sales Rumah Gading Serpong — Elegant Redesign
   Glassmorphism Luxury Real Estate
   ============================================= */

/* === GOOGLE FONTS (injected via nginx) === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* === CSS VARIABLES === */
:root {
  --primary: #0F766E;
  --primary-light: #14B8A6;
  --primary-dark: #115E59;
  --accent: #0369A1;
  --accent-light: #0284C7;
  --gold: #C9A84C;
  --gold-light: #E8D48B;
  --bg: #F0FDFA;
  --bg-dark: #0F172A;
  --surface: #FFFFFF;
  --surface-glass: rgba(255,255,255,0.75);
  --surface-glass-dark: rgba(15,23,42,0.85);
  --text: #134E4A;
  --text-light: #5F8B88;
  --text-white: #F8FAFC;
  --border: #99F6E4;
  --border-glass: rgba(255,255,255,0.25);
  --shadow: 0 4px 24px rgba(15,118,110,0.08);
  --shadow-lg: 0 12px 48px rgba(15,118,110,0.12);
  --radius: 16px;
  --radius-lg: 24px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* === GLOBAL RESET === */
body {
  font-family: 'Josefin Sans', 'Inter', -apple-system, sans-serif !important;
  background: linear-gradient(135deg, #F0FDFA 0%, #ECFEFF 50%, #F8FAFC 100%) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}

* { box-sizing: border-box; }

/* === SMOOTH SCROLLBAR === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 4px; }

/* =============================================
   NAVBAR — Glass Overlay
   ============================================= */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: transparent !important;
  transition: all var(--transition) !important;
}

.navbar .container-navbar {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(15,118,110,0.12) !important;
  height: 72px !important;
  padding: 0 48px !important;
  box-shadow: 0 2px 20px rgba(15,118,110,0.06) !important;
  transition: all var(--transition) !important;
}

.navbar .container-navbar .logo {
  margin-left: 0 !important;
  width: auto !important;
}

.navbar .container-navbar .logo img {
  width: 180px !important;
  padding: 4px 0 !important;
  filter: brightness(1.05) !important;
}

.navbar .container-navbar .menus {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  margin-left: auto !important;
}

.navbar .container-navbar .menus a,
.navbar .container-navbar .menus li a {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  padding: 6px 0 !important;
  transition: color var(--transition) !important;
}

.navbar .container-navbar .menus a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--primary) !important;
  transition: width var(--transition) !important;
}

.navbar .container-navbar .menus a:hover {
  color: var(--primary) !important;
}

.navbar .container-navbar .menus a:hover::after {
  width: 100% !important;
}

/* Contact Us button */
.navbar button,
.navbar .container-navbar button {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: white !important;
  border: none !important;
  padding: 10px 28px !important;
  border-radius: 50px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  box-shadow: 0 4px 16px rgba(15,118,110,0.3) !important;
}

.navbar button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15,118,110,0.4) !important;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
}

@media(max-width:768px) {
  .navbar .container-navbar {
    padding: 0 20px !important;
    height: 64px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(255,255,255,0.82) !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
  }
  .navbar .container-navbar .logo img {
    width: 140px !important;
  }
}

/* =============================================
   HERO SECTION — Luxury Glass
   ============================================= */
.background-container {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 100vh !important;
  min-height: 600px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

.background-container::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(15,118,110,0.25) 0%,
    rgba(3,105,161,0.10) 50%,
    rgba(15,23,42,0.30) 100%
  ) !important;
  z-index: 1 !important;
}

.secondherocontainer {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}

.secondherocontainer .secondmiddle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
}

.secondherocontainer .secondmiddle .leftcontent {
  flex: 1 !important;
  max-width: 560px !important;
}

.secondherocontainer .secondmiddle .leftcontent .content-judul {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 52px !important;
  line-height: 1.2 !important;
  color: white !important;
  margin-bottom: 16px !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
  letter-spacing: -0.5px !important;
}

.secondherocontainer .secondmiddle .leftcontent h2,
.secondherocontainer .secondmiddle .leftcontent .content-judul + * {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 22px !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 24px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

.secondherocontainer .secondmiddle .leftcontent .contentdescription {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.75) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3) !important;
  max-width: 480px !important;
}

.secondherocontainer .secondmiddle .rightcontent {
  flex: 1 !important;
  max-width: 500px !important;
}

.secondherocontainer .secondmiddle .rightcontent .logo-about {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.15) !important;
}

.secondherocontainer .secondmiddle .rightcontent .logo-about img {
  width: 100% !important;
  border-radius: 12px !important;
  display: block !important;
}

.secondmiddle .leftcontent button,
.secondmiddle .leftcontent .buttonpenawaran {
  background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
  color: white !important;
  border: none !important;
  padding: 14px 36px !important;
  border-radius: 50px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  margin-top: 28px !important;
  transition: all var(--transition) !important;
  box-shadow: 0 8px 32px rgba(15,118,110,0.35) !important;
}
.secondmiddle .leftcontent button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(15,118,110,0.45) !important;
}

@media(max-width:768px) {
  .background-container {
    height: 100vh !important;
    min-height: 100vh !important;
  }
  .secondherocontainer {
    padding: 0 24px !important;
    padding-top: 80px !important;
  }
  .secondherocontainer .secondmiddle {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .secondherocontainer .secondmiddle .leftcontent {
    max-width: 100% !important;
    text-align: center !important;
  }
  .secondherocontainer .secondmiddle .leftcontent .content-judul {
    font-size: 32px !important;
  }
  .secondherocontainer .secondmiddle .leftcontent .contentdescription {
    max-width: 100% !important;
    font-size: 14px !important;
  }
  .secondherocontainer .secondmiddle .rightcontent {
    max-width: 100% !important;
  }
}

/* =============================================
   SECTION TITLES
   ============================================= */
h1, .judul, [class*="judul"] {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  color: var(--primary-dark) !important;
  letter-spacing: -0.3px !important;
}

/* =============================================
   PRODUCT CARDS — Glass Design
   ============================================= */
.cluster-card,
.cluster-cardapart,
.cardhome-containerf,
.cardrumahdetail,
.cardrumahdetail1 {
  background: var(--surface-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.cluster-card:hover,
.cluster-cardapart:hover,
.cardhome-containerf:hover,
.cardrumahdetail:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(15,118,110,0.3) !important;
  background: rgba(255,255,255,0.88) !important;
}

.cluster-image img {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}

.cluster-card:hover .cluster-image img {
  transform: scale(1.05) !important;
}

/* Product name */
.nama-rumahviola,
[class*="nama-rumah"] {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--primary-dark) !important;
}

/* Price */
.startfrom,
.ket, .ket1, .ket2, .ket3,
.cicilanviola {
  font-family: 'Josefin Sans', sans-serif !important;
  color: var(--text-light) !important;
}

.cicilanviola {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* Product detail specs */
.gridspek {
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 500 !important;
}

/* WhatsApp button */
.container-wa button,
.containerwa button,
.tombolwa,
.cluster-whatsappviola button {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: white !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.3) !important;
}

.container-wa button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4) !important;
}

/* More Info button */
.cluster-button .cluster-whatsappviola {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: white !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.3) !important;
}
.cluster-button .cluster-whatsappviola:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4) !important;
}

.cluster-button button,
.buttonpenawaran {
  background: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  padding: 10px 28px !important;
  border-radius: 50px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
}

.cluster-button button:hover,
.buttonpenawaran:hover {
  background: var(--primary) !important;
  color: white !important;
}

/* =============================================
   PROMO SECTION
   ============================================= */
.promolist1, .promolist2, .promolist3 {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 16px rgba(15,118,110,0.2) !important;
  transition: all var(--transition) !important;
}

.penawaranpoin {
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
}

/* =============================================
   BENEFITS / FACILITIES
   ============================================= */
.benefit-list li,
.container-benefit {
  font-family: 'Josefin Sans', sans-serif !important;
  color: var(--text) !important;
}

/* =============================================
   ABOUT SECTION
   ============================================= */
.containerabout {
  background: linear-gradient(135deg, var(--bg), white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 48px !important;
  border: 1px solid var(--border) !important;
}

.containerabout .gambarabout img {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}

.aboutproduk {
  font-family: 'Josefin Sans', sans-serif !important;
  line-height: 1.8 !important;
  color: var(--text) !important;
}

/* =============================================
   LOCATION / MAP SECTION
   ============================================= */
.map-section {
  background: var(--bg-dark) !important;
  padding: 64px 0 !important;
}

.map-section .judul {
  color: white !important;
}

.maps-lokasi {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
}

/* =============================================
   RESIDENTIAL SECTION
   ============================================= */
.container-rumah {
  padding: 80px 48px !important;
}

.container-rumah .judul {
  text-align: center !important;
  margin-bottom: 12px !important;
}

/* =============================================
   FOOTER
   ============================================= */
.containerfooter {
  background: linear-gradient(180deg, var(--bg-dark), #020617) !important;
  padding: 64px 48px 0 !important;
  color: white !important;
}

.footerup {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 48px !important;
  justify-content: space-between !important;
}

.footer {
  text-align: center !important;
  padding: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  margin-top: 40px !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
}

.copyright {
  color: rgba(255,255,255,0.4) !important;
}

/* Nginx-injected footer */
.nginx-footer {
  background: linear-gradient(180deg, #0F172A, #020617) !important;
}

/* =============================================
   GLOBAL ACCENTS
   ============================================= */
/* Gold accent divider */
.devider {
  background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent) !important;
  height: 2px !important;
  border: none !important;
}

/* Navigation dots */
.slick-dots li button::before {
  color: var(--primary) !important;
  opacity: 0.4 !important;
}
.slick-dots li.slick-active button::before {
  color: var(--primary) !important;
  opacity: 1 !important;
}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cluster-card,
.cluster-cardapart,
.cardrumahdetail {
  animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* Stagger cards */
.cluster-card:nth-child(1) { animation-delay: 0.1s !important; }
.cluster-card:nth-child(2) { animation-delay: 0.2s !important; }
.cluster-card:nth-child(3) { animation-delay: 0.3s !important; }
.cluster-card:nth-child(4) { animation-delay: 0.4s !important; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px) {
  .container-rumah {
    padding: 60px 24px !important;
  }
}

@media(max-width:768px) {
  .container-rumah {
    padding: 48px 16px !important;
  }

  .containerabout {
    padding: 32px 20px !important;
  }

  /* Mobile navbar glass */
  .navbar .container-navbar {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
  }

  /* Mobile cards */
  .cluster-card,
  .cluster-cardapart,
  .cardrumahdetail {
    margin: 8px !important;
  }

  .nama-rumahviola {
    font-size: 18px !important;
  }
}

@media(max-width:480px) {
  .secondherocontainer .secondmiddle .leftcontent .content-judul {
    font-size: 28px !important;
  }
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media(prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}