:root {
  /* Biến màu được inject từ includes/partials/brand-vars.php */
}

body { min-width: 320px; text-wrap: pretty; }

h1, h2, h3, .font-display { text-wrap: balance; }
p, li, .dining-card p, .room-card p, .blog-card p,
.experience-card p, .feature-pill, .filter-btn { text-wrap: pretty; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

header.scrolled {
  background: rgba(255, 251, 245, .94);
  border-bottom: 1px solid rgba(var(--color-gold-rgb), .18);
  backdrop-filter: blur(18px);
}
header.scrolled nav,
header.scrolled #menuBtn { color: var(--color-ink); }
.site-logo { transition: filter .3s ease; }
header.scrolled a[href="#booking"] {
  border-color: rgba(var(--color-gold-rgb), .4);
  color: var(--color-gold-dark);
}

.hero-slider { position:absolute; inset:0; }
.hero-overlay { pointer-events:none; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease-in-out; pointer-events:none; }
.hero-slide.active { opacity:1; pointer-events:auto; z-index:1; }
.hero-slide img { height:100%; width:100%; object-fit:cover; }

.hero-foreground { pointer-events:none; }
.hero-foreground a,
.hero-foreground button,
.hero-foreground input,
.hero-foreground select,
.hero-foreground form,
.hero-foreground .hero-nav-btn { pointer-events:auto; }

.hero-titles { position:relative; min-height:9rem; }
@media (min-width:768px) { .hero-titles { min-height:12rem; } }
.hero-slide-title {
  position:absolute; inset:0 auto auto 0;
  width:100%; margin:0;
  opacity:0; transform:translateY(1.25rem);
  transition:opacity .8s ease, transform .8s ease;
  text-shadow:0 8px 40px rgba(10, 10, 10, .55);
  pointer-events:none;
}
.hero-slide-title.active {
  opacity:1; transform:translateY(0);
  position:relative; pointer-events:auto;
}

/* Cuộn xuống – con trỏ chuột */
.hero-scroll-hint {
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  margin:0 auto 10rem; width:fit-content;
  color:#fff; text-decoration:none;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:auto;
}
.hero-scroll-hint:hover { opacity:.85; transform:translateY(3px); }
.hero-scroll-label {
  font-size:.72rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.hero-scroll-mouse {
  display:block; width:1.55rem; height:2.35rem;
  border:2px solid rgba(255,255,255,.85);
  border-radius:999px; position:relative;
}
.hero-scroll-wheel {
  position:absolute; top:.45rem; left:50%;
  width:3px; height:.55rem;
  margin-left:-1.5px;
  border-radius:999px;
  background:var(--color-gold);
  animation:hero-scroll-wheel 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-wheel {
  0% { opacity:1; transform:translateY(0); }
  70% { opacity:.2; transform:translateY(.55rem); }
  100% { opacity:0; transform:translateY(.55rem); }
}

/* Nav dọc bên phải */
.hero-nav-rail {
  position:absolute; right:1.25rem; top:50%;
  z-index:20; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  color:#fff; pointer-events:auto;
}
@media (min-width:1024px) { .hero-nav-rail { right:2rem; } }
.hero-nav-current,
.hero-nav-total {
  font-size:.95rem; font-weight:700;
  letter-spacing:.12em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero-nav-track {
  position:relative; width:2px; height:5.5rem;
  background:rgba(255,255,255,.22);
  border-radius:999px; overflow:hidden;
}
.hero-nav-progress {
  position:absolute; top:0; left:0; width:100%;
  background:#fff; border-radius:999px;
  height:20%; transition:height .6s ease;
}
.hero-nav-arrows { display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.hero-nav-btn {
  display:grid; place-items:center;
  width:2rem; height:2rem;
  border:0; background:transparent;
  color:rgba(255,255,255,.9); cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.hero-nav-btn:hover { color:var(--color-gold-light); }
.hero-nav-btn:active { transform:scale(.92); }

.hero-booking { pointer-events:none; }
.hero-booking form { pointer-events:auto; }

.eyebrow {
  display:inline-flex; margin-bottom:1rem;
  font-size:.75rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--color-gold);
}

.room-card {
  overflow:hidden; border-radius:2rem;
  background:var(--color-pearl);
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(var(--color-gold-rgb), .12);
}
.room-card img { height:290px; width:100%; object-fit:cover; transition:transform .7s ease; }
.room-card:hover img { transform:scale(1.06); }
.room-card div { padding:1.5rem; }
.room-card span {
  color:var(--color-primary);
  font-size:.8rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
}
.room-card h3 {
  margin-top:.6rem;
  font-family:'Cormorant Garamond',serif;
  font-size:2rem; line-height:1.08; font-weight:700;
  color:var(--color-ink); text-wrap:balance;
}
.room-card p { margin-top:.75rem; color:var(--text-muted); line-height:1.65; text-wrap:pretty; }
.room-card.featured {
  background:var(--color-primary);
  border-color:rgba(var(--color-gold-rgb), .4);
  color:var(--color-ink);
}
.room-card.featured span { color:var(--color-ink); opacity:.72; }
.room-card.featured h3 { color:var(--color-ink); }
.room-card.featured p { color:rgba(15, 13, 10, .75); }

.feature-pill {
  display:block; width:100%; cursor:pointer; text-align:left;
  border-radius:1.25rem;
  background:var(--color-pearl);
  border:1px solid rgba(var(--color-gold-rgb), .2);
  padding:1rem 1.1rem;
  font-size:.9rem; font-weight:800; line-height:1.45;
  color:var(--color-ink);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.feature-pill:hover { border-color:rgba(var(--color-gold-rgb), .45); }
.feature-pill.active,
.feature-pill.experience-tab.active {
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-ink);
}

.experience-display-image { transition:opacity .45s ease; }
.experience-display-image.is-fading { opacity:0; }

/* Parallax sections */
.section-parallax { isolation:isolate; }
.section-parallax-bg {
  position:absolute; inset:-15% 0;
  background-size:cover; background-position:center;
  will-change:transform;
}
.section-parallax-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,.55), rgba(10,10,10,.78));
  pointer-events:none;
}
.section-parallax-overlay--dining {
  background:linear-gradient(135deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.48) 50%, rgba(10,10,10,.72) 100%);
}

.contact-panel { min-height:22rem; }
.contact-panel-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.contact-panel-overlay {
  position:absolute; inset:0;
  background:rgba(10, 10, 10, .68);
  pointer-events:none;
}

.dining-card {
  border:1px solid rgba(255, 255, 255, .22);
  border-radius:1.5rem;
  background:rgba(255, 255, 255, .1);
  backdrop-filter:blur(10px);
  padding:1.35rem 1.25rem; min-height:190px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.dining-card h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.35rem, 2vw, 2rem);
  font-weight:700; line-height:1.15;
  color:#fff; text-wrap:balance;
}
.dining-card p {
  margin-top:.4rem;
  font-size:.92rem; line-height:1.45;
  color:rgba(255, 255, 255, .85);
  text-wrap:balance;
}

.experience-card {
  min-height:360px; border-radius:2rem; overflow:hidden;
  background-size:cover; background-position:center;
  padding:1.5rem; color:white;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; isolation:isolate;
}
.experience-card:before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10, 10, 10, .84), rgba(10, 10, 10, .15));
  z-index:-1;
}
.experience-card h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem; line-height:1.08; font-weight:700;
  color:var(--color-gold-light); text-wrap:balance;
}
.experience-card p { margin-top:.5rem; color:rgba(255, 255, 255, .8); text-wrap:pretty; line-height:1.5; }

.filter-btn {
  border-radius:999px;
  border:1px solid rgba(var(--color-gold-rgb), .35);
  padding:.8rem 1rem;
  font-size:.85rem; font-weight:800;
  color:var(--color-ink);
}
.filter-btn.active,
.filter-btn:hover {
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#0A0A0A;
}

.blog-card {
  border-radius:2rem; background:var(--color-pearl);
  border:1px solid rgba(var(--color-gold-rgb), .12);
  padding:1.5rem; min-height:280px;
  display:flex; flex-direction:column;
  box-shadow:0 16px 40px rgba(15, 13, 10, .08);
}
.blog-card span {
  color:var(--color-gold);
  font-size:.75rem; font-weight:900;
  letter-spacing:.15em; text-transform:uppercase;
}
.blog-card h3 {
  margin-top:.8rem;
  font-family:'Cormorant Garamond',serif;
  font-size:2rem; line-height:1.08; font-weight:700;
  color:var(--color-ink); text-wrap:balance;
}
.blog-card p { margin-top:.8rem; color:var(--text-muted); line-height:1.65; text-wrap:pretty; }
.blog-card a {
  margin-top:auto; padding-top:1.2rem;
  font-size:.9rem; font-weight:900;
  color:var(--color-primary);
}

.prose-like h2 {
  margin-top:2rem;
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem; line-height:1.1; font-weight:700;
  color:var(--color-ink);
}
.prose-like p { margin-top:1rem; font-size:1.08rem; line-height:1.9; color:var(--text-muted-light); }
.prose-like a { color:var(--color-primary); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose-like ul { margin-top:1rem; padding-left:1.25rem; list-style:disc; }
.prose-like li { margin-top:.5rem; font-size:1.08rem; line-height:1.9; color:var(--text-muted-light); }

.cost-list { margin-top:1rem; }
.cost-list dt { margin-top:1rem; font-weight:800; color:var(--color-ink); }
.cost-list dd { margin-top:.35rem; font-size:1.08rem; line-height:1.9; color:var(--text-muted-light); }

.faq-item {
  margin-top:1rem; border-radius:1.25rem;
  background:var(--color-sand);
  border:1px solid rgba(var(--color-gold-rgb), .14);
  padding:1rem 1.25rem;
}
.faq-item summary { cursor:pointer; font-size:1.05rem; line-height:1.6; color:var(--color-ink); }
.faq-item p { margin-top:.75rem; }

/* Blog listing hero */
.blog-hero { isolation:isolate; }
.blog-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.blog-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,.48), rgba(10,10,10,.72));
  pointer-events:none;
}
.blog-hero nav,
.blog-hero nav a { color:rgba(255,255,255,.72); }
.blog-hero nav a:hover { color:#fff; }

/* Blog detail watermark */
.blog-detail-page { position:relative; }
.blog-detail-page > header,
.blog-detail-page > article,
.blog-detail-page > footer { position:relative; z-index:1; }
.blog-detail-watermark {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(520px, 78vw);
  height:min(320px, 45vh);
  background:center / contain no-repeat;
  opacity:.38;
  pointer-events:none;
  z-index:0;
}

/* Blog article CTA (outside .prose-like) */
.blog-cta h2 { margin-top:0; }
.blog-cta-btn {
  display:inline-block;
  border-radius:999px;
  padding:.75rem 1.75rem;
  text-align:center;
  font-size:.875rem;
  font-weight:700;
  text-decoration:none !important;
  transition:background .2s ease, border-color .2s ease;
}
.blog-cta-btn--primary {
  background:var(--color-primary);
  color:var(--color-ink);
}
.blog-cta-btn--primary:hover { background:var(--color-gold-light); }
.blog-cta-btn--outline {
  border:1px solid rgba(var(--color-gold-rgb), .45);
  color:var(--color-ink);
  background:#fff;
}
.blog-cta-btn--outline:hover {
  border-color:var(--color-primary);
  background:rgba(var(--color-gold-rgb), .08);
}

@media (max-width: 768px) {
  .hero-slide-title { font-size:4.4rem; }
  .hero-titles { min-height:7.5rem; }
  .hero-nav-rail { right:.75rem; gap:.65rem; }
  .hero-nav-track { height:4rem; }
  .room-card img { height:230px; }
}

/* Room card links */
.room-card h2,
.room-card h3 {
  margin-top:.6rem;
  font-family:'Cormorant Garamond',serif;
  font-size:2rem; line-height:1.08; font-weight:700;
  color:var(--color-ink); text-wrap:balance;
}
.room-card h2 a,
.room-card h3 a,
.blog-card h3 a {
  color:inherit;
  text-decoration:none;
}
.room-card h2 a:hover,
.room-card h3 a:hover,
.blog-card h3 a:hover { color:var(--color-primary); }
.room-card.featured h2,
.room-card.featured h3 { color:var(--color-ink); }
a.dining-card,
a.experience-card {
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease, border-color .25s ease;
}
a.dining-card:hover,
a.experience-card:hover { transform:translateY(-2px); }

/* Blog article layout */
.melaka-article-layout {
  display:grid;
  gap:1.75rem;
  grid-template-columns:1fr;
  align-items:start;
}
.melaka-share-rail { order:3; }
.melaka-article-main { order:1; min-width:0; }
.melaka-article-rail { order:2; }

.melaka-share-rail__inner {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  align-items:center;
}
.melaka-share-rail__label {
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-ink);
  opacity:.55;
  margin-right:.25rem;
}
.melaka-share-btn {
  width:2.5rem; height:2.5rem;
  border-radius:999px;
  border:1px solid rgba(var(--color-gold-rgb), .28);
  background:#fff;
  color:var(--color-ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.melaka-share-btn svg { width:1rem; height:1rem; }
.melaka-share-btn:hover,
.melaka-share-btn.is-copied {
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-ink);
}

.melaka-article-rail__sticky { display:grid; gap:1rem; }
.melaka-toc,
.melaka-side-gallery {
  border-radius:1.5rem;
  border:1px solid rgba(var(--color-gold-rgb), .18);
  background:rgba(255,255,255,.72);
  padding:1rem 1.1rem;
  backdrop-filter:blur(8px);
}
.melaka-toc__title,
.melaka-side-gallery__title {
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-ink);
  margin-bottom:.75rem;
}
.melaka-toc .ai-toc,
.melaka-toc .ai-sub-toc {
  list-style:none;
  margin:0;
  padding:0;
}
.melaka-toc .ai-sub-toc { padding-left:.9rem; margin-top:.25rem; }
.melaka-toc li a {
  display:block;
  padding:.35rem 0;
  color:rgba(15,13,10,.72);
  text-decoration:none;
  font-size:.92rem;
  line-height:1.45;
}
.melaka-toc li a:hover { color:var(--color-primary); }

.melaka-side-gallery__grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.45rem;
}
.melaka-side-gallery__item {
  position:relative;
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:.85rem;
  background:var(--color-sand);
}
.melaka-side-gallery__item img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.melaka-side-gallery__item.is-hidden { display:none; }
.melaka-side-gallery__item.is-more .melaka-side-gallery__more {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.58);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
  padding:.35rem;
}

.prose-like .melaka-lg-item {
  display:block;
  margin:1.5rem auto;
  max-width:100%;
  text-align:center;
}
.prose-like .melaka-article-img,
.prose-like img {
  display:block;
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  height:auto;
  border-radius:1.25rem;
}
.prose-like figure { text-align:center; margin:1.5rem auto; }
.prose-like figcaption {
  margin-top:.5rem;
  font-size:.9rem;
  font-style:italic;
  color:var(--text-muted);
}

.melaka-table-scroll { width:100%; overflow-x:auto; margin:1.5rem 0; }
.prose-like table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid rgba(var(--color-gold-rgb), .22);
  border-radius:1rem;
  overflow:hidden;
}
.prose-like th,
.prose-like td {
  border:1px solid rgba(var(--color-gold-rgb), .18);
  padding:.7rem .85rem;
  text-align:left;
  vertical-align:top;
  font-size:1rem;
  line-height:1.55;
  color:var(--text-muted-light);
}
.prose-like th {
  background:rgba(var(--color-gold-rgb), .12);
  color:var(--color-ink);
  font-weight:700;
}
.prose-like tr:nth-child(even) td { background:rgba(var(--color-gold-rgb), .04); }

.room-booking-form #booking { margin-top:0; }
.room-booking-form #booking.relative { max-width:none; padding:0; }

@media (min-width: 1024px) {
  .melaka-article-layout {
    grid-template-columns:3.5rem minmax(0, 1fr) 17rem;
    gap:1.5rem;
    align-items:start;
  }
  .melaka-share-rail,
  .melaka-article-rail {
    order:0;
    position:sticky;
    top:6.5rem;
    align-self:start;
    z-index:1;
  }
  .melaka-article-main { order:0; }
  .melaka-share-rail__inner {
    position:static;
    flex-direction:column;
    align-items:center;
  }
  .melaka-share-rail__label {
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    margin:0 0 .35rem;
  }
  .melaka-article-rail__sticky {
    position:static;
    display:grid;
    gap:1rem;
  }
}

.melaka-post-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.melaka-post-tag {
  display:inline-flex; align-items:center;
  border-radius:999px;
  border:1px solid rgba(var(--color-gold-rgb), .28);
  background:#fff;
  padding:.35rem .85rem;
  font-size:.8rem; font-weight:700;
  color:var(--color-ink);
  text-decoration:none;
}
.melaka-post-tag:hover {
  background:rgba(var(--color-gold-rgb), .12);
  border-color:var(--color-primary);
}

.melaka-toc { position: relative; }
.melaka-toc__list {
  max-height: 14.5rem;
  overflow: hidden;
  position: relative;
}
.melaka-toc.is-collapsed .melaka-toc__list:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.25rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 70%);
  pointer-events: none;
}
.melaka-toc__more {
  display: none;
  width: 100%;
  margin-top: .65rem;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.melaka-toc.is-collapsed .melaka-toc__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.melaka-toc-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  visibility: hidden;
}
.melaka-toc-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.melaka-toc-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .42);
  opacity: 0;
  transition: opacity .22s ease;
}
.melaka-toc-drawer.is-open .melaka-toc-drawer__backdrop { opacity: 1; }
.melaka-toc-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(25vw, 22rem);
  min-width: 17rem;
  height: 100%;
  background: #fffdf8;
  border-left: 1px solid rgba(var(--color-gold-rgb), .22);
  box-shadow: -18px 0 50px rgba(15, 13, 10, .16);
  transform: translateX(104%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
}
.melaka-toc-drawer.is-open .melaka-toc-drawer__panel { transform: translateX(0); }
.melaka-toc-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid rgba(var(--color-gold-rgb), .18);
}
.melaka-toc-drawer__title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.melaka-toc-drawer__close {
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-gold-rgb), .28);
  background: #fff;
  color: var(--color-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.melaka-toc-drawer__body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.15rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.melaka-toc-drawer__body .ai-toc,
.melaka-toc-drawer__body .ai-sub-toc { list-style: none; margin: 0; padding: 0; }
.melaka-toc-drawer__body .ai-sub-toc { padding-left: .9rem; margin-top: .25rem; }
.melaka-toc-drawer__body li a {
  display: block;
  padding: .4rem 0;
  color: rgba(15,13,10,.76);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.45;
}
.melaka-toc-drawer__body li a:hover { color: var(--color-primary); }
@media (max-width: 1023px) {
  .melaka-toc-drawer__panel { width: min(86vw, 22rem); }
}

/* Page skeleton */
body.melaka-is-loading .melaka-page-skeleton {
  opacity: 1;
  visibility: visible;
}
.melaka-page-skeleton {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--color-pearl);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  pointer-events: none;
}
.melaka-page-skeleton__card {
  width: min(420px, 78vw);
  display: grid;
  gap: .85rem;
}
.melaka-skel {
  border-radius: 1rem;
  background: linear-gradient(90deg, rgba(232,170,64,.12), rgba(232,170,64,.22), rgba(232,170,64,.12));
  background-size: 200% 100%;
  animation: melaka-skel 1.2s ease-in-out infinite;
}
.melaka-skel--logo { height: 3.2rem; width: 9rem; margin: 0 auto; border-radius: 999px; }
.melaka-skel--line { height: .9rem; }
.melaka-skel--line-sm { height: .7rem; width: 70%; margin: 0 auto; }
@keyframes melaka-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
body.toc-drawer-open { overflow: hidden; }
body.toc-drawer-open #siteHeader { z-index: 40; }

/* Reveal / wow-like animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"] { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .melaka-skel { animation: none; }
}

.melaka-toc__title,
.melaka-side-gallery__title,
.melaka-toc-drawer__title {
  margin: 0 0 .75rem;
}


/* Room detail page */
.melaka-room-page {
  padding: 4rem 0 5rem;
}
.melaka-room-page__inner {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
}
.melaka-room-page__breadcrumb {
  margin-bottom: 1.25rem;
  font-size: .875rem;
  color: rgba(15,13,10,.5);
}
.melaka-room-page__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.melaka-room-page__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.melaka-room-page__breadcrumb a:hover {
  color: var(--color-primary);
}

.melaka-room-detail {
  display: grid;
  gap: 2rem;
}
.melaka-room-detail__main {
  min-width: 0;
}
.melaka-room-header__title {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-ink);
  text-wrap: balance;
}
.melaka-room-header__rating {
  margin-top: .85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-size: .95rem;
}
.melaka-room-header__stars {
  letter-spacing: .06em;
  color: rgba(15,13,10,.25);
}
.melaka-room-header__stars .is-on {
  color: var(--color-primary);
}
.melaka-room-header__lead {
  margin-top: 1.25rem;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-muted);
  text-wrap: pretty;
}
.melaka-room-cover {
  margin: 1.75rem 0 0;
}
.melaka-room-cover img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 420px);
  object-fit: cover;
  border-radius: 2rem;
}

.melaka-room-gallery {
  margin-top: 2rem;
}
.melaka-room-gallery__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.melaka-room-gallery__head h2,
.melaka-room-reviews h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-ink);
}
.melaka-room-gallery__head p {
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-muted);
}
.melaka-room-gallery__mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 110px;
  gap: .55rem;
}
.melaka-room-gallery__mosaic.is-single {
  grid-template-columns: 1fr;
  grid-auto-rows: 280px;
}
.melaka-room-gallery__mosaic.is-two {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 220px;
}
.melaka-room-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1.1rem;
  background: var(--color-sand);
}
.melaka-room-gallery__item.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.melaka-room-gallery__item.is-hidden {
  display: none;
}
.melaka-room-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.melaka-room-gallery__item:hover img {
  transform: scale(1.04);
}
.melaka-room-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,.55);
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.melaka-room-body {
  margin-top: 2rem;
}
.melaka-room-reviews {
  margin-top: 2.5rem;
}
.melaka-room-reviews__list {
  margin-top: 1.25rem;
  display: grid;
  gap: 1rem;
}
.melaka-room-review {
  border-radius: 1.5rem;
  border: 1px solid rgba(var(--color-gold-rgb), .18);
  background: #fff;
  padding: 1.15rem 1.25rem;
}
.melaka-room-review__head {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.melaka-room-review__avatar {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.melaka-room-review__avatar.is-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-gold-rgb), .16);
  color: var(--color-ink);
  font-weight: 800;
}
.melaka-room-review__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
}
.melaka-room-review__meta {
  margin: .2rem 0 0;
  font-size: .86rem;
  color: var(--text-muted);
}
.melaka-room-review__stars {
  margin: .35rem 0 0;
  letter-spacing: .08em;
  color: rgba(15,13,10,.28);
}
.melaka-room-review__stars .is-on {
  color: var(--color-primary);
}
.melaka-room-review__content {
  margin: .85rem 0 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-muted-light);
}

.melaka-room-booking__card {
  border-radius: 1.5rem;
  border: 1px solid rgba(var(--color-gold-rgb), .22);
  background: var(--color-pearl);
  padding: 1rem 1.05rem 1.05rem;
}
.melaka-room-booking__card h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-ink);
}
.melaka-room-booking__card > p {
  margin: .4rem 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.melaka-room-booking .room-booking-form {
  margin-top: .85rem;
}
.melaka-room-booking__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.melaka-room-booking__field {
  display: block;
  margin: 0;
  border-radius: 1rem;
  background: var(--color-sand);
  padding: .7rem .85rem;
  font-size: .875rem;
}
.melaka-room-booking__field.is-span,
.melaka-room-booking__submit {
  grid-column: 1 / -1;
}
.melaka-room-booking__field-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.melaka-room-booking__control {
  display: block;
  width: 100%;
  margin-top: .35rem;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: var(--color-ink);
  outline: none;
}
.melaka-room-booking__submit {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 1rem;
  background: var(--color-gold);
  color: #000;
  font-size: .875rem;
  font-weight: 700;
  padding: .95rem 1.25rem;
  cursor: pointer;
}
.melaka-room-booking__submit:hover {
  background: var(--color-gold-light, #e8c98a);
}
.melaka-room-booking__fallback {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: .5rem;
  border-radius: 1rem;
  background: var(--color-primary);
  color: var(--color-ink);
  font-size: .875rem;
  font-weight: 700;
  padding: .95rem 1.25rem;
  text-decoration: none;
}
.melaka-room-booking__hotline {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--text-muted);
}
.melaka-room-booking__hotline a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .melaka-room-detail {
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, .78fr);
    gap: 2rem;
    align-items: start;
  }
  .melaka-room-booking {
    position: sticky;
    top: 6.5rem;
    align-self: start;
    z-index: 5;
  }
  .melaka-room-gallery__mosaic {
    grid-auto-rows: 128px;
  }
}

@media (max-width: 767px) {
  .melaka-room-gallery__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 120px;
  }
  .melaka-room-gallery__item.is-featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Google reviews trigger + drawer (homepage intro) */
.melaka-google-reviews-trigger {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--color-ink);
}
.melaka-google-reviews-trigger__stars {
  display: inline-flex;
  gap: .08rem;
  color: rgba(var(--color-gold-rgb), .35);
  font-size: 1.05rem;
  line-height: 1;
}
.melaka-google-reviews-trigger__stars .is-on {
  color: var(--color-gold);
}
.melaka-google-reviews-trigger__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .55rem;
  font-size: .92rem;
}
.melaka-google-reviews-trigger__meta strong {
  font-weight: 700;
}
.melaka-google-reviews-trigger__tag {
  color: var(--color-primary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.melaka-google-reviews-trigger:hover .melaka-google-reviews-trigger__tag {
  color: var(--color-ink);
}

.melaka-reviews-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  visibility: hidden;
}
.melaka-reviews-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.melaka-reviews-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .42);
  opacity: 0;
  transition: opacity .22s ease;
}
.melaka-reviews-drawer.is-open .melaka-reviews-drawer__backdrop { opacity: 1; }
.melaka-reviews-drawer__panel {
  position: absolute;
  top: 0; right: 0;
  width: min(35vw, 35rem);
  min-width: 17rem;
  height: 100%;
  background: #fffdf8;
  border-left: 1px solid rgba(var(--color-gold-rgb), .22);
  box-shadow: -18px 0 50px rgba(15, 13, 10, .16);
  transform: translateX(104%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
}
.melaka-reviews-drawer.is-open .melaka-reviews-drawer__panel { transform: translateX(0); }
.melaka-reviews-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid rgba(var(--color-gold-rgb), .18);
}
.melaka-reviews-drawer__title {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.melaka-reviews-drawer__summary {
  margin: .35rem 0 0;
  font-size: .86rem;
  color: var(--text-muted);
}
.melaka-reviews-drawer__close {
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-gold-rgb), .28);
  background: #fff;
  color: var(--color-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.melaka-reviews-drawer__body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.15rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.melaka-reviews-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.melaka-reviews-drawer__item {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--color-gold-rgb), .14);
}
.melaka-reviews-drawer__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.melaka-reviews-drawer__author {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .55rem;
}
.melaka-reviews-drawer__author img,
.melaka-reviews-drawer__avatar-fallback {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.melaka-reviews-drawer__avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sand);
  color: var(--color-ink);
  font-weight: 700;
}
.melaka-reviews-drawer__author strong {
  display: block;
  font-size: .92rem;
  color: var(--color-ink);
}
.melaka-reviews-drawer__item-stars {
  display: inline-flex;
  gap: .05rem;
  color: rgba(var(--color-gold-rgb), .3);
  font-size: .82rem;
}
.melaka-reviews-drawer__item-stars .is-on { color: var(--color-gold); }
.melaka-reviews-drawer__item p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-muted-light);
}
.melaka-reviews-drawer__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: .95rem;
}
.melaka-reviews-drawer__more {
  display: inline-flex;
  margin-top: 1.25rem;
  color: var(--color-primary);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.melaka-reviews-drawer__more:hover { text-decoration: underline; }
body.google-reviews-drawer-open { overflow: hidden; }
@media (max-width: 1023px) {
  .melaka-reviews-drawer__panel { width: min(86vw, 22rem); }
}