/* ===== ADMIN CANVAS (preview) ===== */
.hero-preview-stage{
  position:relative; min-height:520px; border:2px dashed #e97e7e;
  border-radius:10px; background:#f7f9fb; overflow:hidden;
}

.hero-title{ margin-bottom:12px; }
.hero-sub{ margin:8px 0 16px 0; }
.hero-price{ margin:0 0 8px 0; }

.hero-phone{ display:inline-flex; align-items:center; gap:8px; margin:6px 0 14px 0; }
.hero-phone .phone-icon{ line-height:0; display:inline-flex; }
.hero-phone .phone-link{ color:inherit; text-decoration:none; }

/* ===== HERO CARD (overlay) ===== */
.slider-overlay{
  position:absolute; 
  top:0%; 
  right:250px; 
  max-width:500px; 
  min-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); 
  display:flex; 
  flex-direction:column;
}
.hs-hero .slider-overlay{ /* untuk komponen slider di halaman home */
  position:absolute; top:0%; right:250px; max-width:500px; min-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); display:flex; flex-direction:column;
}

.slider-overlay h1,
.slider-overlay h2,
.slider-overlay h3,
.slider-overlay p{ margin-top:0; margin-bottom:8px; line-height:1.25; }

/* Judul utama hero (gunakan weight besar supaya “condensed bold” terasa) */
.land-for-sale{ font-size:50px; font-weight:800; margin-bottom:10px; line-height:1.2; color:#4b2c2c; }

.detail-btn{
  background:#c0392b; color:#fff; border:0; padding:10px 20px; cursor:pointer; border-radius:4px;
  align-self:center; margin-top:auto; display:inline-block;
}

/* ===== KONTEN 01–03 ===== */
.postingan{ max-width:1200px; margin:0 auto; margin-top:25px; padding:0 !important; }
.wrap-postingan.container{ padding-left:0 !important; padding-right:0 !important; }
.postingan{ padding-left:0 !important; padding-right:0 !important; }
.postingan h2, .postingan .konten{ margin-left:0 !important; }
.konten{ white-space:pre-line; }
.container{ margin:1px auto !important; padding:20px auto; }

#home-featured-detail { scroll-margin-top: 90px; }

/* === Tombol DETAIL: gaya anchor jadi tombol === */
.slider-overlay .detail-btn {
  display: inline-block;
  text-decoration: none !important;  /* hilangkan underline */
  background: #c0392b;
  color: #fff !important;
  border: 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  /* kalau kamu pakai sticky di mobile, ini tetap oke */
}

.slider-overlay .detail-btn:hover {
  background: #a93226;
  transform: translateY(-1px);
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.slider-overlay .detail-btn:active {
  transform: translateY(0);
  background: #922b21;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.slider-overlay .detail-btn:focus-visible {
  outline: 2px solid rgba(192,57,43,.45);
  outline-offset: 3px;
  text-decoration: none !important;
}

/* pastikan state link/visited juga tanpa underline */
.slider-overlay .detail-btn:link,
.slider-overlay .detail-btn:visited {
  text-decoration: none !important;
  color: #fff !important;
}

/* === HERO phone: lebih besar & tebal === */
.slider-overlay .hero-phone{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;                                   /* tebal */
  font-size: clamp(15px, 2.5vw, 20px) !important;     /* lebih besar, responsif */
  line-height: 1.2;
}

.slider-overlay .hero-phone .phone-icon svg{
  width: 28px; height: 28px;
}

.slider-overlay .hero-phone .phone-link{
  text-decoration: none !important;  /* hilangkan underline */
  color: inherit;
  font-weight: inherit;               /* ikut 800 */
  letter-spacing: .2px;
  padding: 2px 4px;                   /* biar mudah di-tap */
  border-radius: 4px;
}

.slider-overlay .hero-phone .phone-link:hover,
.slider-overlay .hero-phone .phone-link:focus{
  text-decoration: none;
  outline: 0;
}

/* ===== Responsive ===== */
/* ==== HOTFIX: mobile hero card supaya tidak meluber ==== */
@media (max-width: 991.98px){

  /* pastikan container punya konteks */
  .hs-hero{ position: relative; }

  /* JANGAN bergantung pada .page-home */
  .hs-hero .slider-overlay,
  .slider-overlay{
    position: static !important;   /* lepas dari absolute */
    width: auto !important;
    max-width: 94vw !important;
    margin: 10px auto 6px !important;
    padding: 14px 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;

    /* batasi tinggi agar tak melewati layar/hero */
    max-height: 60vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  /* tombol CTA tetap terlihat saat konten digulung */
  .hs-hero .slider-overlay .detail-btn,
  .slider-overlay .detail-btn{
    position: sticky; bottom: 0; z-index: 1;
    margin-top: auto;
  }

  /* judul lebih jinak di HP */
  .land-for-sale{ font-size: clamp(28px, 6vw, 36px) !important; line-height: 1.2; }
}

#home-featured-detail { scroll-margin-top: 70px; }

@media (max-width: 575.98px){
  .hs-hero .slider-overlay,
  .slider-overlay{
    max-height: 65vh !important;
    margin: 8px auto 6px !important;
    padding: 12px 14px !important;
  }
  
  .slider-overlay .hero-phone{
    font-size: clamp(20px, 5vw, 28px) !important;
  }

}