:root { --primary: #4f46e5; --primary-dark: #312e81; --ink: #172033; --muted: #64748b; --surface: #ffffff; }
html { scroll-behavior: smooth; }
body { font-family:'Segoe UI',Arial,sans-serif; color:var(--ink); background:#fff; }
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#11183d 0%,#30228d 52%,#5b45d6 100%); color:#fff; padding:92px 0 112px; }
.hero:after { content:""; position:absolute; left:-5%; right:-5%; bottom:-75px; height:130px; background:#fff; border-radius:50% 50% 0 0 / 100% 100% 0 0; }
.hero-content { position:relative; z-index:1; max-width:900px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:7px; background:#fff; color:#2563eb; padding:8px 15px; border-radius:999px; font-size:.86rem; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.12); margin-bottom:20px; }
.hero h1 { font-weight:800; letter-spacing:-1.8px; line-height:1.03; font-size:clamp(2.7rem,6vw,4.7rem); margin-bottom:20px; }
.hero .lead { max-width:720px; margin:0 auto 26px; color:rgba(255,255,255,.78); font-size:1.05rem; }
.hero-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.btn-hero-booking { background:#fff !important; color:#312e81 !important; border:2px solid #fff !important; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn-hero-booking:hover { background:#eef2ff !important; color:#3730a3 !important; transform:translateY(-1px); }
.section-title { font-weight:800; letter-spacing:-.5px; margin-bottom:30px; }
.section-kicker { display:inline-block; color:#4f46e5; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; }
.room-card { border:1px solid #e9edf5; border-radius:18px; overflow:hidden; box-shadow:0 8px 28px rgba(15,23,42,.07); transition:.22s; background:#fff; }
.room-card:hover { transform:translateY(-5px); box-shadow:0 18px 42px rgba(15,23,42,.12); }
.room-gallery, .room-gallery .carousel, .room-gallery .carousel-inner, .room-gallery .carousel-item { height:235px; }
.room-gallery { position:relative; background:#eef2f7; overflow:hidden; }
.room-gallery img { width:100%; height:235px; object-fit:cover; display:block; }
.room-gallery .carousel-control-prev, .room-gallery .carousel-control-next { width:42px; height:42px; top:50%; transform:translateY(-50%); margin:0 10px; border-radius:50%; background:rgba(15,23,42,.55); opacity:.95; }
.gallery-counter { position:absolute; right:12px; bottom:12px; background:rgba(15,23,42,.7); color:#fff; padding:5px 9px; border-radius:999px; font-size:.76rem; z-index:5; }
.badge-available { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; font-weight:700; }
.room-card .card-body { padding:20px; }
.room-card h6 { font-size:1.05rem; font-weight:750; }
.testimonial-card { border:none; border-radius:16px; background:#f8f9fc; }
.owner-contact-card, .owner-address { display:flex; align-items:center; gap:14px; min-height:82px; padding:17px 19px; border:1px solid #e6eaf1; border-radius:16px; background:#fff; text-decoration:none; color:var(--ink); box-shadow:0 7px 25px rgba(15,23,42,.05); transition:.2s; }
.owner-contact-card:hover { transform:translateY(-2px); border-color:#c7d2fe; box-shadow:0 12px 30px rgba(79,70,229,.12); color:var(--ink); }
.owner-contact-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; font-size:1.3rem; flex:none; }
.owner-contact-icon.whatsapp { background:#dcfce7; color:#16a34a; }
.owner-contact-icon.email { background:#eef2ff; color:#4f46e5; }
.owner-contact-card small, .owner-address small { display:block; color:var(--muted); font-size:.75rem; margin-bottom:2px; }
.owner-contact-card strong, .owner-address strong { display:block; font-size:.96rem; word-break:break-word; }
.owner-address { justify-content:flex-start; }
.owner-address > i { font-size:1.35rem; color:#4f46e5; margin-left:4px; }
.faq-item { border-bottom:1px solid #eee; padding:14px 0; }
@media (max-width: 767.98px) {
  .hero { padding:65px 0 95px; }
  .hero h1 { letter-spacing:-1px; }
  .room-gallery, .room-gallery .carousel, .room-gallery .carousel-inner, .room-gallery .carousel-item, .room-gallery img { height:220px; }
}

/* Booking page */
.booking-page-hero { background:linear-gradient(135deg,#11183d 0%,#30228d 55%,#5b45d6 100%); color:#fff; padding:62px 0 78px; }
.booking-page-hero-inner { max-width:780px; margin:0 auto; }
.booking-page-hero h1 { font-weight:850; letter-spacing:-1.4px; font-size:clamp(2.1rem,4vw,3.5rem); margin:18px 0 12px; }
.booking-page-hero p { color:rgba(255,255,255,.78); max-width:680px; margin:0 auto; font-size:1.03rem; line-height:1.7; }
.booking-section { background:#f7f8fc; padding:52px 0 70px; min-height:70vh; }
.booking-card { background:#fff; border:1px solid #e7eaf1; border-radius:24px; box-shadow:0 18px 55px rgba(15,23,42,.09); overflow:hidden; }
.booking-card-header { display:flex; align-items:center; gap:16px; padding:28px 32px; background:linear-gradient(180deg,#fff,#fafbff); border-bottom:1px solid #edf0f5; }
.booking-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:#eef2ff; color:#4f46e5; font-size:1.45rem; flex:none; }
.booking-card-header h2 { font-size:1.55rem; font-weight:800; letter-spacing:-.5px; }
.booking-form { padding:30px 32px 32px; }
.form-section-title { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.form-section-title > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#eef2ff; color:#4f46e5; font-size:.78rem; font-weight:800; }
.form-section-title strong { display:block; font-size:1rem; }
.form-section-title small { display:block; color:#64748b; margin-top:2px; }
.booking-form .form-label { font-weight:650; color:#263247; margin-bottom:7px; }
.booking-form .form-label > span { color:#dc2626; }
.booking-form .form-label small { color:#94a3b8; font-weight:500; }
.booking-form .form-control, .booking-form .form-select { border-color:#dce2ec; border-radius:11px; }
.booking-form .form-control:focus, .booking-form .form-select:focus { border-color:#818cf8; box-shadow:0 0 0 .2rem rgba(99,102,241,.12); }
.booking-form textarea.form-control { resize:vertical; min-height:115px; }
.form-divider { height:1px; background:#edf0f5; margin:28px 0; }
.booking-submit-wrap { margin-top:30px; padding-top:22px; border-top:1px solid #edf0f5; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.booking-note { display:flex; align-items:flex-start; gap:9px; color:#64748b; font-size:.82rem; line-height:1.5; max-width:430px; }
.booking-note i { color:#16a34a; font-size:1rem; margin-top:1px; }
.booking-submit { min-width:205px; border-radius:11px; font-weight:750; box-shadow:0 9px 20px rgba(79,70,229,.2); }
.booking-back { padding-top:22px; }
.booking-back a { color:#4f46e5; text-decoration:none; font-weight:650; }
.booking-back a:hover { text-decoration:underline; }
@media (max-width: 767.98px) {
  .booking-page-hero { padding:46px 0 58px; }
  .booking-page-hero h1 { letter-spacing:-.8px; }
  .booking-card-header { padding:22px 20px; align-items:flex-start; }
  .booking-card-header h2 { font-size:1.3rem; }
  .booking-form { padding:24px 20px; }
  .booking-submit-wrap { flex-direction:column; align-items:stretch; }
  .booking-submit { width:100%; }
}


/* Property maps */
.property-location-card{background:#fff;border:1px solid #e8eaf2;border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(30,35,90,.06)}
.property-map-public,.property-map-picker{position:relative;width:100%;height:300px;min-height:300px;border-radius:14px;overflow:hidden;border:1px solid #e6e8f0;z-index:1;background:#e8f1f5}
.property-map-public .leaflet-control-attribution{font-size:9px}
.property-map-picker{height:340px}
.leaflet-container{font:inherit;position:relative;overflow:hidden;background:#e8f1f5}.leaflet-container img{max-width:none!important;max-height:none!important}.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-map-pane svg,.leaflet-map-pane canvas{position:absolute}.leaflet-container a{color:inherit}
@media(max-width:576px){.property-map-public{height:250px}.property-map-picker{height:280px}}


/* Single main kost location */
.location-section-wrap{background:#f7f8fc;padding:72px 0 90px;margin-top:0}
.location-section{max-width:1120px;margin:0 auto}
.location-heading{margin-bottom:28px}
.location-subtitle{color:var(--muted);margin:0 auto;max-width:680px;line-height:1.65}
.location-card{background:#fff;border:1px solid #e7eaf1;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(15,23,42,.08)}
.location-info{display:flex;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid #edf0f5}
.location-pin{width:48px;height:48px;display:grid;place-items:center;flex:none;border-radius:14px;background:#eef2ff;color:#4f46e5;font-size:1.2rem}
.location-copy{min-width:0;flex:1}
.location-label{font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#4f46e5;margin-bottom:2px}
.location-copy h4{font-size:1.15rem;font-weight:800;margin:0 0 3px;letter-spacing:-.2px}
.location-copy p{margin:0;color:var(--muted);font-size:.92rem}
.location-google-btn{white-space:nowrap;border-radius:10px;font-weight:700}
.location-map-wrap{padding:14px;background:#fff}
.location-map-wrap .property-map-public{height:420px;border:0;border-radius:16px}
@media(max-width:767.98px){
  .location-section-wrap{padding:56px 0 68px}
  .location-info{align-items:flex-start;flex-wrap:wrap;padding:18px}
  .location-copy{flex-basis:calc(100% - 64px)}
  .location-google-btn{width:100%;margin-top:2px}
  .location-map-wrap{padding:10px}
  .location-map-wrap .property-map-public{height:320px}
}


/* Production-style landing interactions */
:root { --header-height: 72px; }
html { scroll-padding-top: calc(var(--header-height) + 16px); }
body { overflow-x:hidden; }
.scroll-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#4f46e5,#7c3aed,#06b6d4);z-index:2000;box-shadow:0 1px 8px rgba(79,70,229,.35);transition:width .08s linear}
.navbar{min-height:var(--header-height);transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
.navbar.navbar-scrolled{background:rgba(255,255,255,.92)!important;box-shadow:0 8px 28px rgba(15,23,42,.08)!important;backdrop-filter:blur(14px)}
.navbar .nav-link{position:relative;font-weight:600;color:#475569;transition:color .2s ease}
.navbar .nav-link:hover,.navbar .nav-link.active{color:#4f46e5}
.navbar .nav-link.active::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:.2rem;height:2px;border-radius:99px;background:#4f46e5}
section[id]{scroll-margin-top:calc(var(--header-height) + 18px)}

.scroll-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.scroll-reveal.is-visible{opacity:1;transform:none}
.room-card.scroll-reveal:nth-child(2),.testimonial-card.scroll-reveal:nth-child(2){transition-delay:.08s}
.room-card.scroll-reveal:nth-child(3),.testimonial-card.scroll-reveal:nth-child(3){transition-delay:.16s}
.room-card.scroll-reveal:nth-child(4),.testimonial-card.scroll-reveal:nth-child(4){transition-delay:.24s}

.hero{min-height:clamp(560px,72vh,760px);display:flex;align-items:center}
.hero-content{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-actions .btn{transition:transform .2s ease,box-shadow .2s ease}
.hero-actions .btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.15)}

.container.py-5{padding-top:clamp(58px,7vw,92px)!important;padding-bottom:clamp(58px,7vw,92px)!important}
.section-title{font-size:clamp(1.65rem,3vw,2.2rem);line-height:1.15}
.section-kicker{margin-bottom:10px}

.room-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.room-card:hover{transform:translateY(-7px);border-color:#d9ddf7}
.room-gallery img{transition:transform .5s ease}
.room-card:hover .room-gallery img{transform:scale(1.025)}
.testimonial-card{transition:transform .25s ease,box-shadow .25s ease}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,23,42,.08)}
.contact-owner{background:linear-gradient(145deg,#fff,#f8f9ff);border:1px solid #e8eaf3;border-radius:24px;padding:clamp(24px,4vw,42px);box-shadow:0 18px 50px rgba(15,23,42,.06)}

.location-section-wrap{position:relative}
.location-section-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#e2e8f0,transparent)}
.location-card{transition:transform .25s ease,box-shadow .25s ease}
.location-card:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(15,23,42,.10)}

.back-to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border:1px solid #e2e8f0;border-radius:50%;background:rgba(255,255,255,.94);color:#4f46e5;box-shadow:0 10px 28px rgba(15,23,42,.14);display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:1050}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:#4f46e5;color:#fff;transform:translateY(-2px)}

.accordion-item{border:1px solid #e7eaf1!important;border-radius:14px!important;overflow:hidden;margin-bottom:10px;box-shadow:0 4px 18px rgba(15,23,42,.03)}
.accordion-button{font-weight:650;padding:18px 20px}
.accordion-button:not(.collapsed){color:#312e81;background:#f5f6ff;box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 .2rem rgba(99,102,241,.1)}

footer{border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:767.98px){
  :root{--header-height:64px}
  .navbar .nav-link.active::after{display:none}
  .navbar-collapse{padding:10px 0 14px}
  .navbar .btn{margin-left:0!important;margin-top:6px;width:100%}
  .hero{min-height:620px}
  .hero:after{bottom:-65px}
  .contact-owner{border-radius:20px;padding:24px 18px}
  .back-to-top{right:15px;bottom:15px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .scroll-reveal{opacity:1;transform:none}
}


/* Smooth elevated / floating production effect */
.scroll-reveal{
  opacity:0;
  transform:translate3d(0,42px,0) scale(.985);
  filter:blur(1.5px);
  will-change:transform,opacity,filter;
  transition:
    opacity .78s cubic-bezier(.16,1,.3,1),
    transform .78s cubic-bezier(.16,1,.3,1),
    filter .78s cubic-bezier(.16,1,.3,1);
}
.scroll-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

.room-card,.testimonial-card,.contact-owner,.location-card,.accordion-item{
  --lift-focus:.25;
  transform:translate3d(0, calc((.5 - var(--lift-focus)) * 8px), 0) scale(calc(.995 + var(--lift-focus) * .005));
  box-shadow:0 calc(10px + var(--lift-focus) * 14px) calc(30px + var(--lift-focus) * 28px) rgba(15,23,42,calc(.055 + var(--lift-focus) * .055));
  transition:
    transform .18s ease-out,
    box-shadow .25s ease,
    border-color .25s ease;
  will-change:transform,box-shadow;
}
.scroll-reveal.is-visible.room-card,
.scroll-reveal.is-visible.testimonial-card,
.scroll-reveal.is-visible.contact-owner,
.scroll-reveal.is-visible.location-card,
.scroll-reveal.is-visible.accordion-item{
  /* Saat reveal selesai, scroll-driven lift mengambil alih. */
  transform:translate3d(0, calc((.5 - var(--lift-focus)) * 8px), 0) scale(calc(.995 + var(--lift-focus) * .005));
}
.room-card:hover,.testimonial-card:hover,.contact-owner:hover,.location-card:hover{
  transform:translate3d(0,-7px,0) scale(1.008);
  box-shadow:0 24px 55px rgba(15,23,42,.13);
}

/* Ruang antar section dibuat terasa seperti layer yang muncul dari bawah. */
#kamar,#testimoni,#faq,#kontak,.location-section-wrap{
  position:relative;
}
#kamar::before,#testimoni::before,#faq::before,#kontak::before,.location-section-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(86%,980px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.22),transparent);
  pointer-events:none;
}

/* Subtle depth on gallery while card rises. */
.room-card .room-gallery{transform:translateZ(0);}
.room-card .room-gallery img{transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s ease;}
.room-card:hover .room-gallery img{transform:scale(1.045);filter:saturate(1.04);}

@media(max-width:767.98px){
  .scroll-reveal{transform:translate3d(0,28px,0) scale(.99);filter:none;}
  .room-card,.testimonial-card,.contact-owner,.location-card,.accordion-item{
    transform:translate3d(0,0,0) scale(1);
  }
  .room-card:hover,.testimonial-card:hover,.contact-owner:hover,.location-card:hover{
    transform:translate3d(0,-3px,0) scale(1.002);
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-reveal,.scroll-reveal.is-visible,
  .room-card,.testimonial-card,.contact-owner,.location-card,.accordion-item,
  .scroll-reveal.is-visible.room-card,.scroll-reveal.is-visible.testimonial-card,
  .scroll-reveal.is-visible.contact-owner,.scroll-reveal.is-visible.location-card,
  .scroll-reveal.is-visible.accordion-item{
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    box-shadow:0 8px 28px rgba(15,23,42,.07)!important;
  }
}