html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

.homepage {
    --home-primary: #147d68;
    --home-primary-dark: #0d5d4e;
    --home-ink: #16221f;
    --home-muted: #66736f;
    --home-surface: #f4f7f5;
    --home-border: #dce5e1;
    color: var(--home-ink);
    background: #fff;
}

.public-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 12px rgba(13, 93, 78, .08);
}
.public-navbar .navbar-brand { color: #0d5d4e; letter-spacing: -.02em; }
.public-navbar .nav-link { position: relative; font-weight: 600; transition: color .2s ease; }
.public-navbar .nav-link.active { color: #0d5d4e !important; font-weight: 800; }
.public-navbar .nav-link.active::after {
    position: absolute;
    right: .5rem;
    bottom: .2rem;
    left: .5rem;
    height: 2px;
    border-radius: 999px;
    background: #147d68;
    content: '';
}
[id="beranda"],
[id="kamar-tersedia"],
[id="fasilitas"],
[id="kontak"] { scroll-margin-top: 80px; }
.homepage .btn { border-radius: .5rem; font-weight: 700; padding: .7rem 1.1rem; }
.homepage .btn-lg { padding: .85rem 1.35rem; }
.homepage .btn-primary { background: var(--home-primary); border-color: var(--home-primary); }
.homepage .btn-primary:hover,
.homepage .btn-primary:focus { background: var(--home-primary-dark); border-color: var(--home-primary-dark); }

.homepage-hero { min-height: 620px; display: flex; align-items: center; background-position: center; background-size: cover; color: #fff; }
.homepage-hero__content { padding-top: 5rem; padding-bottom: 5rem; }
.homepage-eyebrow,
.homepage-section-label { display: inline-block; margin-bottom: .75rem; color: var(--home-primary); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.homepage-eyebrow { color: #a9eadc; }
.homepage-hero h1 { max-width: 760px; margin-bottom: 1.25rem; font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.homepage-hero p { max-width: 620px; margin-bottom: 2rem; color: rgba(255,255,255,.88); font-size: 1.2rem; line-height: 1.7; }
.homepage-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.homepage-intro { padding: 4rem 0; border-bottom: 1px solid var(--home-border); }
.homepage-intro__copy { max-width: 760px; margin: 0; font-size: 1.35rem; line-height: 1.75; }
.homepage-availability { padding: 1.5rem; border-left: 4px solid var(--home-primary); background: var(--home-surface); }
.homepage-availability strong { display: block; color: var(--home-primary-dark); font-size: 2.5rem; line-height: 1; }
.homepage-availability span { display: block; margin-top: .5rem; color: var(--home-muted); }

.homepage-section { padding: 5.5rem 0; }
.homepage-section--muted { background: var(--home-surface); }
.homepage-section-heading { max-width: 680px; margin-bottom: 2.5rem; }
.homepage-section-heading h2,
.homepage-contact h2 { margin-bottom: .8rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.035em; }
.homepage-section-heading p { margin: 0; color: var(--home-muted); font-size: 1.05rem; line-height: 1.7; }
.homepage-room-group + .homepage-room-group { margin-top: 2.5rem; }
.homepage-room-group__title { margin-bottom: 1rem; }
.homepage-room-group__title h3 { font-size: 1.35rem; font-weight: 800; }
.homepage-room-group__title h3 span { color: var(--home-muted); font-size: 1rem; font-weight: 600; }

.homepage-room-card { height: 100%; overflow: hidden; border: 1px solid var(--home-border); border-radius: .85rem; background: #fff; box-shadow: 0 10px 30px rgba(30,55,48,.06); transition: transform .2s ease, box-shadow .2s ease; }
.homepage-room-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(30,55,48,.12); }
.homepage-room-card__image { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9eeec; }
.homepage-room-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.homepage-room-card:hover .homepage-room-card__image img { transform: scale(1.025); }
.homepage-room-card__badge { position: absolute; left: 1rem; bottom: 1rem; padding: .4rem .65rem; border-radius: 999px; color: #563c00; background: #ffe7a1; font-size: .75rem; font-weight: 800; }
.homepage-room-card__badge--ready { color: #075342; background: #bceedd; }
.homepage-room-card__body { padding: 1.25rem; }
.homepage-room-card__heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.homepage-room-card__heading span { color: var(--home-muted); font-size: .8rem; }
.homepage-room-card__heading h3 { margin: 0; font-size: 1.7rem; font-weight: 800; }
.homepage-room-card__type { padding: .3rem .55rem; border-radius: .35rem; background: var(--home-surface); color: var(--home-primary-dark) !important; font-weight: 700; }
.homepage-room-card__facility { min-height: 3rem; margin: 1rem 0; color: var(--home-muted); display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.homepage-room-card__price strong { color: var(--home-primary-dark); font-size: 1.2rem; }
.homepage-room-card__price span { color: var(--home-muted); font-size: .85rem; }
.homepage-room-card__actions { display: flex; gap: .65rem; padding: 0 1.25rem 1.25rem; }
.homepage-room-card__actions .btn { flex: 1; font-size: .88rem; }

.homepage-empty-state { padding: 3rem; border: 1px dashed #afc1bb; border-radius: .85rem; text-align: center; background: #fff; }
.homepage-empty-state h3 { font-weight: 800; }
.homepage-empty-state p { color: var(--home-muted); }
.homepage-facility { height: 100%; margin: 0; overflow: hidden; border-radius: .75rem; background: #fff; box-shadow: 0 8px 24px rgba(30,55,48,.07); }
.homepage-facility img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.homepage-facility figcaption { padding: 1rem; font-weight: 700; }
.homepage-video { overflow: hidden; border-radius: .75rem; background: #111; }

.homepage-contact { padding: 5.5rem 0; color: #fff; background: var(--home-ink); }
.homepage-contact .homepage-section-label { color: #7cdbc7; }
.homepage-contact__copy { padding: 2rem 2rem 2rem 0; }
.homepage-contact__copy p { color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.7; }
.homepage-social { display: flex; gap: 1rem; margin-top: 2rem; }
.homepage-social a { color: #a9eadc; font-weight: 700; }
.homepage-map { height: 100%; min-height: 360px; overflow: hidden; border-radius: .75rem; background: #293632; }
.homepage-map iframe { width: 100% !important; height: 100% !important; min-height: 360px; border: 0; }
.homepage-map__empty { display: grid; height: 100%; min-height: 360px; place-items: center; color: rgba(255,255,255,.55); }
.homepage-footer { padding: 1.5rem 0; color: #b9c5c1; background: #0d1613; }
.homepage-footer strong { color: #fff; }
.homepage-whatsapp { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30; display: flex; gap: .55rem; align-items: center; padding: .55rem 1rem .55rem .65rem; border-radius: 999px; color: #fff; background: #1eaa59; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-weight: 800; }
.homepage-whatsapp:hover { color: #fff; text-decoration: none; background: #178c49; }

@media (max-width: 767.98px) {
    .homepage-hero { min-height: 540px; }
    .homepage-hero__actions { display: grid; }
    .homepage-hero__actions .btn { width: 100%; }
    .homepage-intro, .homepage-section, .homepage-contact { padding: 4rem 0; }
    .homepage-contact__copy { padding: 0; }
    .homepage-footer span { display: block; margin-top: .4rem; }
    .homepage-whatsapp span { display: none; }
    .homepage-whatsapp { padding: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .homepage-room-card,
    .homepage-room-card__image img { transition: none; }
}