/* Web publik pencari kos */
body { background: #fff; }
.pub-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.pub-brand { font-weight: 800; font-size: 1.2rem; color: var(--ink); text-decoration: none; display: flex; gap: .5rem; align-items: center; }
.hero { background: var(--ink); color: #fff; border-radius: 0 0 28px 28px; padding: 3.5rem 0 4.5rem; position: relative; overflow: hidden; }
/* motif jendela kos: grid kotak-kotak samar di kanan */
.hero::after { content: ""; position: absolute; right: -40px; top: 30px; width: 420px; height: 300px;
  background-image: linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px);
  background-size: 52px 52px; transform: rotate(-6deg); pointer-events: none; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.1; max-width: 18ch; margin-bottom: .75rem; }
.hero p { color: #C9D2DC; max-width: 52ch; font-size: 1.05rem; }
.searchbar { background: #fff; border-radius: 14px; padding: .6rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: .5rem; margin-top: 1.75rem; max-width: 880px; position: relative; z-index: 1; }
.searchbar .form-select, .searchbar .form-control { border: 0; background-color: #F3F4EF; height: 48px; }
.searchbar .btn { height: 48px; padding: 0 1.5rem; }
@media (max-width: 767px) { .searchbar { grid-template-columns: 1fr; } }
.city-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; position: relative; z-index: 1; }
.city-chips a { color: #fff; border: 1px solid rgba(255,255,255,.25); padding: .3rem .8rem; border-radius: 99px; text-decoration: none; font-size: .85rem; }
.city-chips a:hover { background: rgba(255,255,255,.1); }
.city-chips small { color: var(--kunyit); margin-left: .25rem; }

.listing { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.lcard { text-decoration: none; color: inherit; display: block; }
.lcard .ph { aspect-ratio: 4/3; border-radius: 12px; background: #E9EBE4 center/cover no-repeat; position: relative; display: grid; place-items: center; color: #A8AE9F; font-size: 2rem; }
.lcard .tag { position: absolute; left: .6rem; top: .6rem; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; }
.lcard h3 { font-size: 1rem; margin: .7rem 0 .15rem; }
.lcard .loc { font-size: .85rem; color: var(--muted); }
.lcard .price { font-weight: 800; margin-top: .3rem; }
.lcard .price span { font-weight: 500; color: var(--muted); font-size: .85rem; }
.lcard:hover h3 { text-decoration: underline; }

.filter-panel { position: sticky; top: 1rem; }
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; border-radius: 14px; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.gallery .side-ph { display: grid; grid-template-rows: 1fr 1fr; gap: .5rem; }
.gallery .noph { aspect-ratio: 16/7; background: #E9EBE4; display: grid; place-items: center; color: #A8AE9F; font-size: 3rem; grid-column: 1 / -1; }
.book-box { border: 1px solid var(--garis); border-radius: 14px; padding: 1.25rem; position: sticky; top: 1rem; }
.book-box .big { font-size: 1.6rem; font-weight: 800; }
.fac-list { columns: 2; padding: 0; list-style: none; }
.fac-list li { padding: .25rem 0; }
.fac-list li i { color: var(--daun); margin-right: .4rem; }
.pub-foot { border-top: 1px solid var(--garis); margin-top: 4rem; padding: 2rem 0; color: var(--muted); font-size: .875rem; }