/* ============================================================================
   BERANDA FRESH — gaya terpisah dari css/styles.css.
   Semua aturan berada di bawah .fh (isi beranda) atau body.home-fresh (elemen
   global saat beranda fresh tampil), sehingga halaman lain tidak terpengaruh.
   Memakai token warna & font situs, jadi otomatis mengikuti tema gelap.
   ========================================================================== */
.fh{--fh-radius:24px; --fh-shadow:0 20px 60px rgba(19,31,60,.12); background:var(--paper)}
.fh h1,.fh h2,.fh h3{font-family:var(--display); letter-spacing:-.035em; margin:0; color:inherit}
.fh p{margin:0}
.fh-shell{width:min(1180px, calc(100% - 40px)); margin-inline:auto}
.fh-muted{color:var(--muted); font-family:var(--body); font-weight:500; font-size:.86rem}

/* ---------- tombol ---------- */
.fh-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px;
  border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font:700 .86rem var(--body); text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s}
.fh-btn:hover{transform:translateY(-1px)}
.fh-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fh-btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent)}
.fh-btn-dark{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.fh-btn-ghost{background:var(--surface)}
.fh-btn-light{background:#fff; border-color:#fff; color:#111a33; white-space:nowrap; padding:14px 22px; position:relative; z-index:1}
.fh-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:700; color:var(--accent-ink); text-decoration:none}

/* ---------- hero ---------- */
/* hero penuh selebar layar (tanpa sudut membulat); isi tetap sejajar .fh-shell */
.fh-hero{position:relative; overflow:hidden; background:var(--navy); color:#fff}
.fh-hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,392px); align-items:center; gap:56px;
  min-height:640px; padding-block:64px}
.fh-hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%}
.fh-hero::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(9,18,39,.9) 0%, rgba(9,18,39,.62) 40%, rgba(9,18,39,.2) 66%, rgba(9,18,39,.34) 100%),
             linear-gradient(0deg, rgba(9,18,39,.45), transparent 50%)}
.fh-hero-copy{position:relative; z-index:2; max-width:600px}
.fh-hero h1{font-size:clamp(2.4rem, 4.2vw, 3.6rem); line-height:1.05; font-weight:800; text-wrap:balance; max-width:15ch}
.fh-hero-copy > p:last-child{margin-top:22px; max-width:540px; color:#d5dbea; font-size:1.06rem; line-height:1.65}

.fh-search{position:relative; z-index:3; padding:14px;
  background:color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid color-mix(in srgb, #fff 60%, transparent); border-radius:20px; box-shadow:0 16px 42px rgba(6,15,36,.28); color:var(--ink)}
.fh-tabs{display:flex; gap:6px; padding:2px 2px 10px}
.fh-tab{border:0; background:transparent; padding:8px 14px; border-radius:10px; color:var(--muted); font:700 .84rem var(--body); cursor:pointer}
.fh-tab:hover{color:var(--ink)}
.fh-tab[aria-selected="true"]{background:var(--navy); color:var(--on-navy)}
.fh-tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fh-filters{display:grid; grid-template-columns:1fr; gap:8px}
.fh-field{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:9px 14px}
.fh-field:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.fh-field label{display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; margin-bottom:4px}
.fh-field select{width:100%; border:0; background:transparent; outline:none; color:var(--ink); font:600 .9rem var(--body); appearance:none; cursor:pointer; padding:0}
.fh-search-btn{min-height:54px; width:100%; margin-top:4px; padding-inline:22px; white-space:nowrap}

/* ---------- baris kepercayaan ---------- */
.fh-trust{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line)}
.fh-trust > div{display:flex; gap:14px; align-items:center; background:var(--surface); padding:26px 30px}
.fh-trust-icon{flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--accent-soft); color:var(--accent-ink)}
.fh-trust b{display:block; font:700 .92rem var(--display); color:var(--ink)}
.fh-trust small{display:block; margin-top:2px; font-size:.8rem; color:var(--muted); line-height:1.5}

/* ---------- bagian umum ---------- */
.fh-section{padding:92px 0}
.fh-section-alt{background:var(--surface)}
.fh-head{display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:32px}
.fh-head h2{font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.08; max-width:640px; font-weight:800}
.fh-head > div{max-width:440px}
.fh-head p{color:var(--muted); line-height:1.65}

/* ---------- kolase kawasan (asimetris) ---------- */
.fh-areas{display:grid; grid-template-columns:1.12fr 1fr 1fr; grid-template-rows:268px 268px; gap:16px}
.fh-area{position:relative; display:block; overflow:hidden; border-radius:22px; color:#fff; text-decoration:none; background:var(--navy)}
.fh-area.is-main{grid-row:1 / 3}
.fh-area img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.fh-area:hover img{transform:scale(1.035)}
.fh-area::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,16,35,.86) 0%, rgba(8,16,35,.28) 48%, transparent 72%)}
.fh-area:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.fh-area-copy{position:absolute; z-index:2; left:22px; right:22px; bottom:20px}
.fh-area-copy small{font-size:.76rem; color:#cad5ed}
.fh-area-copy h3{font-size:1.5rem; margin:4px 0 6px; font-weight:800}
.fh-area.is-main .fh-area-copy{left:28px; right:28px; bottom:26px}
.fh-area.is-main h3{font-size:2.1rem}
.fh-area-copy span{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:#e8edf7}

/* ---------- kartu gedung ---------- */
.fh-offices{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.fh-office{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface);
  transition:transform .25s, box-shadow .25s}
.fh-office:hover{transform:translateY(-4px); box-shadow:0 18px 42px rgba(20,31,57,.12)}
.fh-office-photo{position:relative; display:block; height:220px; background:var(--navy)}
.fh-office-photo .property-photo{position:absolute; inset:0}
.fh-office-photo img{width:100%; height:100%; object-fit:cover}
.fh-office-body{display:flex; flex-direction:column; flex:1; padding:20px}
.fh-office-top{display:flex; justify-content:space-between; gap:14px; align-items:start}
.fh-office-name h3{font-size:1.2rem; line-height:1.25; font-weight:800}
.fh-office-name h3 a{color:var(--ink); text-decoration:none}
.fh-office-name h3 a:hover{color:var(--accent-ink)}
.fh-office-name p{margin-top:5px; font-size:.8rem; color:var(--muted)}
.fh-grade{flex:none; padding:5px 9px; border-radius:8px; background:var(--accent-soft); color:var(--accent-ink); font-size:.7rem; font-weight:700; white-space:nowrap}
.fh-grade.is-empty{background:var(--surface-2); color:var(--muted); font-weight:600}
.fh-office-status{margin-top:14px}
.fh-facts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 18px; padding:16px 0; border-block:1px solid var(--line)}
.fh-facts dt{font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.fh-facts dd{margin:5px 0 0; font:700 .95rem var(--mono); color:var(--ink)}
.fh-facts dd small{font:500 .7rem var(--body); color:var(--muted); margin-left:2px}
.fh-office-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto}

/* ---------- proses ---------- */
.fh-process{display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:start}
.fh-process-copy{position:sticky; top:calc(var(--nav-h) + 40px)}
.fh-process-copy h2{font-size:clamp(2rem, 3.4vw, 2.8rem); line-height:1.08; font-weight:800}
.fh-process-copy p{margin-top:16px; color:var(--muted); line-height:1.7}
.fh-steps{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.fh-steps li{display:grid; grid-template-columns:64px 1fr; gap:22px; padding:30px 0; border-bottom:1px solid var(--line)}
.fh-num{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--on-navy); font:700 .95rem var(--display)}
.fh-steps h3{font-size:1.35rem; margin:4px 0 8px; font-weight:800}
.fh-steps p{color:var(--muted); line-height:1.65}

/* ---------- ajakan Pencari Kantor ---------- */
.fh-finder-wrap{padding-top:0}
.fh-finder{position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:40px;
  padding:56px 60px; border-radius:28px; background:var(--navy); color:var(--on-navy)}
.fh-finder::after{content:""; position:absolute; width:420px; height:420px; right:-120px; top:-190px; border-radius:50%; background:var(--accent); opacity:.55}
.fh-finder > div{position:relative; z-index:1}
.fh-finder h2{font-size:clamp(1.8rem, 3vw, 2.5rem); max-width:620px; font-weight:800}
.fh-finder p{margin-top:12px; max-width:600px; color:var(--on-navy-muted); line-height:1.65}

/* ---------- FAQ ---------- */
.fh-faq{display:grid; grid-template-columns:.75fr 1.25fr; gap:90px}
.fh-faq h2{font-size:clamp(2rem, 3.4vw, 2.75rem); font-weight:800}
.fh-faq-list{border-top:1px solid var(--line)}
.fh-faq details{border-bottom:1px solid var(--line); padding:20px 0}
.fh-faq summary{list-style:none; cursor:pointer; position:relative; padding-right:34px; font-weight:700; color:var(--ink)}
.fh-faq summary::-webkit-details-marker{display:none}
.fh-faq summary::after{content:"+"; position:absolute; right:4px; top:-4px; color:var(--accent-ink); font-size:1.4rem}
.fh-faq details[open] summary::after{content:"−"}
.fh-faq details p{margin:14px 34px 0 0; color:var(--muted); line-height:1.65}

/* ---------- tombol WhatsApp bulat (hanya saat beranda fresh tampil) ---------- */
body.home-fresh .floating-chat{min-height:0; padding:0; justify-content:center; border-radius:50%;
  background:#25D366; border:4px solid #fff; color:#fff; box-shadow:0 13px 35px rgba(25,61,43,.3)}
body.home-fresh .floating-chat:hover{background:#1fbe5b; color:#fff}
body.home-fresh .floating-chat span{display:none}

/* ---------- tablet ---------- */
@media (max-width:900px){
  /* panel pencarian bersusun di bawah teks, bukan menempel di dasar hero —
     supaya tidak pernah menutupi paragraf di lebar mana pun */
  .fh-hero-inner{grid-template-columns:1fr; gap:28px; min-height:0; padding-block:52px 32px}
  .fh-hero-copy{max-width:660px}
  .fh-filters{grid-template-columns:1fr 1fr}
  .fh-search-btn{grid-column:1 / -1}
  .fh-areas{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .fh-area{height:240px}
  .fh-area.is-main{grid-column:1 / -1; grid-row:auto; height:360px}
  .fh-offices{grid-template-columns:1fr 1fr}
  .fh-process, .fh-faq{grid-template-columns:1fr; gap:36px}
  .fh-process-copy{position:static}
}

/* ---------- tablet kecil: baris keunggulan jadi satu kolom ---------- */
@media (max-width:760px){
  .fh-trust{grid-template-columns:1fr}
  .fh-trust > div{padding:16px 20px}
}

/* ---------- ponsel ---------- */
@media (max-width:650px){
  .fh-shell{width:calc(100% - 24px)}
  .fh-hero-inner{padding-block:36px 20px; gap:22px}
  .fh-hero-copy{padding:0 4px}
  .fh-hero h1{font-size:clamp(2.05rem, 9vw, 2.6rem)}
  .fh-hero-copy > p:last-child{font-size:.95rem}
  .fh-tabs{display:grid; grid-template-columns:1fr 1fr}
  .fh-tab{padding:9px 6px; font-size:.8rem}
  .fh-filters{grid-template-columns:1fr}
  .fh-section{padding:64px 0}
  .fh-head{display:block}
  .fh-head > div{margin-top:14px}
  .fh-areas{grid-template-columns:1fr}
  .fh-area, .fh-area.is-main{height:260px}
  .fh-area.is-main{height:380px}
  .fh-offices{grid-template-columns:1fr}
  .fh-finder{display:block; padding:38px 24px}
  .fh-finder .fh-btn-light{margin-top:20px; width:100%}
  .fh-steps li{grid-template-columns:52px 1fr; gap:16px}
}