/* =================== Base =================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin:0; padding:0; width:100%; overflow-x:hidden; }
html{ background:#f3f4f6; }
body { margin:0; overflow-x:hidden; font-family:Arial, sans-serif; background:#f3f4f6; }
body.page-front{
  margin:0;
  padding:0;
  overflow-x:hidden;
  background:#f3f4f6;
  color:#111;
}
body.page-front.page-home{
  background:#4a0c0c;
}
body.page-front.page-home .page-main{
  background:#f3f4f6;
}
body.page-front.page-home .footerhome{
  background:#0e0d0d;
  color:#eee;
}

/* =================== TOPBAR / NAVBAR =================== */
.topbar{
  width:100%; background:#4a0c0c; color:#fff;
  position:sticky; top:0; z-index:9999;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  height:95px; display:flex; align-items:center;
}
.navbar{ width:100%; height:100%; padding:0; display:flex; align-items:center; justify-content:space-between; }
.navbar-brand{ padding-left:250px; display:flex; align-items:center; }
.logo-img{ max-height:80px; height:auto; width:auto; }

.navbar-nav{ flex-direction:row; gap:25px; margin-right:250px; align-items:center; }
.navbar-nav .nav-link{ color:#fff; font-weight:600; padding:6px 14px; border-radius:4px; transition:background-color .3s ease; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ background:#c0392b; }

/* Dropdown color + anim */
.navbar .dropdown-menu{ background:#6E171C; border:0; border-radius:4px; color:#ebddd5; }
.navbar .dropdown-menu .dropdown-item{ color:#ebddd5; border-radius:0; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item.active{ background:#b84326; color:#fff; }

/* Desktop: sejajarkan dropdown tepat di bawah tombol + animasi */
@media (min-width:992px){
  .navbar .nav-item.dropdown{ position:relative; }
  .navbar .dropdown-menu{
    left:0; right:auto; min-width:100%; margin-top:.5rem; box-shadow:0 10px 24px rgba(0,0,0,.18);
    display:block; visibility:hidden; opacity:0; transform:translateY(-10px);
    transition:transform .2s ease, opacity .2s ease, visibility 0ms linear .2s;
  }
  .navbar .dropdown.show .dropdown-menu,
  .navbar .dropdown-menu.show{ visibility:visible; opacity:1; transform:translateY(0); transition-delay:0ms; }
  .navbar .dropdown-toggle::after{ transition:transform .2s ease; }
  .navbar .dropdown.show .dropdown-toggle::after{ transform:rotate(180deg); }
}

/* Guard rails: pastikan desktop tidak kebawa gaya mobile */
@media (min-width:992px){
  .navbar-expand-lg .navbar-toggler{ display:none !important; }
  .navbar-expand-lg .navbar-collapse{ display:flex !important; flex-basis:auto !important; }
  .navbar-collapse{ background:transparent !important; padding:0 !important; margin-top:0 !important; border:0 !important; }
  .navbar-nav{ flex-direction:row !important; align-items:center !important; gap:25px !important; }
}

/* =================== SLIDER (Desktop default) =================== */
.slider-container{ position:relative; width:100%; height:500px; overflow:hidden; padding-bottom:0; margin-bottom:0; }
.slider-img{ width:100%; height:100%; object-fit:cover; }

/* HERO overlay (default: absolute) */
.slider-overlay{
  position:absolute; top:0%; right:250px; max-width:500px; height:350px;
  background:rgba(253,255,238,.85); color:#4b2c2c; padding:20px 25px; border-radius:10px; text-align:left;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.land-for-sale{ font-size:50px; font-weight:600; margin-bottom:10px; line-height:1.2; color:#4b2c2c; }
.detail-btn{ margin-top:50px; background:#c0392b; color:#fff; border:0; padding:10px 20px; cursor:pointer; border-radius:4px; display:block; margin-left:auto; margin-right:auto; }

/* =================== FILTER =================== */
.filter-bar-wrapper{
  max-width:1100px; position:relative; z-index:10; margin-top:-60px; margin-left:auto; margin-right:auto;
}
.search-btn-custom{
  max-width:200px; width:100%; height:100%; display:flex; justify-content:center; align-items:center;
  font-size:18px; padding:0 20px; background:#c0392b; color:#fff; transition:background-color .3s ease;
  margin-left:auto; margin-right:0; border-top-left-radius:0; border-bottom-left-radius:0;
}
.search-btn-custom:hover{ background:#a93226; }
.filter-item{ min-width:0; flex:1 1 0; }



/* =================== Responsive – Mobile/Tablet =================== */
@media (max-width:991.98px){
  /* NAV mobile */
  .navbar-collapse{ background:#4a0c0c; padding:10px 20px; text-align:center; margin-top:0; border-top:0; }
  .navbar-nav{ flex-direction:column !important; align-items:center; gap:0; padding:10px 12px; margin:0; width:100%; }
  .navbar-nav .nav-item{ width:120%; border-bottom:0; margin:0; }
  .navbar-nav .nav-link{ padding:0 20px; border-radius:0; text-align:center; width:100%; }
  .logo-img{ max-height:80px; }
  .navbar-brand{ padding:5px 0 5px 20px; }
  .navbar-toggler{ z-index:2000; margin:0 20px 0 0; padding:6px 10px; position:relative; }
  .topbar{ height:auto; padding:15px 20px; flex-direction:row; align-items:center; gap:10px; }

  /* Slider container boleh auto agar hero Home bisa keluar dari overlay */
  .slider-container{ height:auto !important; overflow:visible !important; padding-bottom:0 !important; margin-bottom:0 !important; }

  /* ===== Home-only (butuh body class="page-home") ===== */
  .page-home .hs-hero{ height:340px !important; } /* tinggi gambar slider */
  .page-home .slider-overlay{
    position:static !important; max-width:92vw !important; width:auto !important;
    margin:8px auto 6px !important; padding:14px 16px !important; min-height:unset !important; text-align:left;
  }
  .page-home .land-for-sale{ font-size:32px; line-height:1.2; margin-bottom:10px; }
  .page-home .detail-btn{ margin-top:12px; font-size:16px; padding:8px 16px; }

  /* Filter Home rapat di bawah hero */
  .page-home .filter-bar-wrapper{ padding:0; margin-top:8px !important; z-index:100 !important; }
  .page-home .filter-bar-wrapper form.row{ flex-direction:column !important; width:100%; margin:0 auto; }
  .page-home .filter-item{ width:100% !important; border-right:none !important; border-bottom:1px solid #eee; padding:15px !important; }
  .page-home .filter-item:last-of-type{ border-right:none; }
  .page-home .search-btn-custom{
    width:100% !important; max-width:100% !important; border-radius:0 0 10px 10px; font-size:16px; padding:12px 0;
  }

  /* animasi scroll */
  .animate-on-scroll{ opacity:0; transform:translateY(30px); transition:all .6s ease-out; }
  .animate-on-scroll.in-view{ opacity:1; transform:translateY(0); }
}

/* HP kecil: tambah “rapat” */
@media (max-width:575.98px){
  .page-home .hs-hero{ height:260px !important; }
  .page-home .slider-overlay{ margin:6px auto 4px !important; padding-bottom:10px !important; }
  .page-home .filter-bar-wrapper{ margin-top:6px !important; margin-bottom:0 !important; padding-bottom:0 !important; }

  /* Elemen pertama setelah filter—paksa rapat (Home) */
  .page-home .filter-bar-wrapper + *,
  .page-home .filter-bar-wrapper + section,
  .page-home .filter-bar-wrapper + .container,
  .page-home .filter-bar-wrapper + .wrap-postingan,
  .page-home .filter-bar-wrapper + .postingan{ margin-top:6px !important; }

  /* Layer slider (Home saja) */
  .page-home .hs-overlay{ z-index:2 !important; }
  .page-home .hs-nav, .page-home .hs-dots{ z-index:3 !important; }
}

/* Tidak ada rounded di slider */
.slider-container, .hs-hero, .hs-hero .hs-track, .hs-hero .hs-slide,
.slider-img, .hs-hero img, .hs-hero .hs-slide::before, .hs-hero .hs-slide::after{
  border-radius:0 !important;
}

/* Section awal lebih rapat (opsional) */
.postingan, .wrap-postingan.container{ margin-top:8px; }

/* Frontend page layout */
.page-front{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.page-front .page-main{
  flex:1 0 auto;
  display:block;
}
.page-front .footerhome{
  margin-top:auto;
}