/* ============ The Oso — Exact CSS ============ */
.leaflet-container { background:#0d0b06 !important; font-family:'Manrope',sans-serif; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:#17120a; color:#f3ead6; border:1px solid rgba(201,162,75,.3); }
.leaflet-popup-content { font-size:13px; margin:12px 14px; }
.leaflet-bar a { background:#17120a; color:#e6bd54; border-color:rgba(201,162,75,.3); }
.leaflet-bar a:hover { background:#241b0c; }
.leaflet-control-attribution { background:rgba(13,11,6,.7) !important; color:#7a6b48 !important; }
.leaflet-control-attribution a { color:#a88f4f !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0d0b06; color: #f3ead6; font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #c9a24b; color: #0d0b06; }
a { color: #e6bd54; text-decoration: none; }
a:hover { color: #f3ead6; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0d0b06; }
::-webkit-scrollbar-thumb { background: #4a3b18; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #6b5320; }

@keyframes osoReveal { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: translateY(0); } }
@keyframes osoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-28px); } }
@keyframes osoSpin { to { transform: rotate(360deg); } }
@keyframes osoSweep { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(280%) skewX(-18deg); } }
@keyframes osoPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes osoScrollDot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }

.oso-h { font-family: 'Cormorant Garamond', serif; font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; }
.oso-kick { font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; color: #b8944a; font-weight: 600; margin: 0; }
.oso-filter-btn {
  padding: 10px 20px;
  border-radius: 40px;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: all .3s;
  border: 1px solid rgba(201,162,75,.28);
  background: transparent;
  color: #cdbf9d;
}
.oso-filter-btn.active, .oso-filter-btn:hover {
  border-color: #e6bd54;
  background: linear-gradient(100deg, #e6bd54, #c9a24b);
  color: #0d0b06;
}

/* Interactive Hover States */
.oso-hover-gold-btn:hover { background: #c9a24b !important; color: #0d0b06 !important; }
.oso-hover-gold-border:hover { border-color: #e6bd54 !important; background: rgba(201,162,75,.08) !important; }
.oso-cluster-card { transition: transform .5s, border-color .5s; }
.oso-cluster-card:hover { transform: translateY(-6px) !important; border-color: rgba(230,189,84,.55) !important; }
.oso-cluster-link-btn:hover { background: rgba(201,162,75,.12) !important; }
.oso-poi-btn:hover { border-color: rgba(230,189,84,.5) !important; background: rgba(201,162,75,.06) !important; }
.oso-facility-card { transition: all .4s; }
.oso-facility-card:hover { border-color: rgba(230,189,84,.5) !important; transform: translateY(-5px) !important; }

/* Image placeholder styling */
.oso-img-placeholder {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1f1a10 0%, #120f08 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a764d;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 10px;
}

@media (max-width: 1024px) {
  #about > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 40px !important; }
  #cluster-grid { grid-template-columns: 1fr !important; }
  #lokasi > div > div { grid-template-columns: 1fr !important; }
  #fasilitas-grid { grid-template-columns: repeat(2,1fr) !important; }
  #invest-grid { grid-template-columns: repeat(2,1fr) !important; }
  #testi-grid { grid-template-columns: 1fr !important; }
  #kontak > div > div { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  #oso-nav { padding: 14px 20px !important; }
  #oso-nav > div > div:first-child { display: none !important; }
  #top > div[style*="max-width:1200px"] { padding: 0 20px !important; }
  #about, #cluster, #siteplan, #lokasi, #fasilitas, #galeri, #investasi, #testimoni, #faq, #kontak { padding-left: 20px !important; padding-right: 20px !important; }
  #fasilitas-grid { grid-template-columns: 1fr !important; }
  #invest-grid { grid-template-columns: 1fr !important; }
  #gallery-grid { grid-template-columns: repeat(2,1fr) !important; grid-auto-rows: 160px !important; }
  #poi-grid { grid-template-columns: 1fr !important; }
}