/* ==========================================================================
   Penginapan Marcy — landing page
   Warna brand: #C8102E · Tipografi: Hanken Grotesk (self-hosted, variable)
   ========================================================================== */

/* --- Font ---------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* --- Token --------------------------------------------------------------- */

:root {
  --accent: #c8102e;
  --accent-deep: #a4161a;
  --ink: #1c1616;
  --ink-soft: #6e625c;
  --ink-mute: #8a7f79;
  --card: #fdfbfa;
  --surface: #ffffff;
  --line: #efe8e4;
  --line-strong: #e5dcd7;
  --tint: #f5f0ed;
  --footer: #2a0b0b;
  --footer-soft: #c9afaf;
  --footer-hover: #f3b4b4;

  /* Latar hero dan footer tetap selebar layar; isinya menyempit ke --hero-w
     dan --content-w. Nilai -min menjaga kotak tetap terpakai di layar sedang
     tanpa perlu breakpoint: 65% dari 900px hanya 585px, terlalu sempit. */
  --hero-w: 75%;
  --hero-min: 680px;
  --hero-max: 1600px;
  --content-w: 65%;
  --content-min: 600px;
  --content-max: 1400px;
  --pad-x: clamp(20px, 4vw, 36px);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 0.22s;

  --shadow-sm: 0 6px 18px rgba(60, 20, 20, 0.06);
  --shadow-md: 0 10px 26px rgba(60, 20, 20, 0.1);
  --shadow-lg: 0 18px 40px rgba(60, 20, 20, 0.16);
}

/* --- Dasar --------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--speed) ease;
}
a:hover { color: var(--accent); }

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* Teks untuk pembaca layar. top dan left disetel tegas, bukan dibiarkan
   pada posisi bawaan: elemen absolut tanpa keduanya diletakkan di tempat ia
   seharusnya berada dalam aliran, dan di dalam tata letak berkolom WebKit
   menghitung tempat itu seolah semua isi tersusun dalam satu kolom panjang.
   Empat belas label bintang di kolom ulasan karenanya jatuh sampai 760 piksel
   di bawah footer di Safari dan memanjangkan halaman dengan ruang kosong.
   Dengan offset tegas, posisinya selalu di pojok kotak induk terdekat yang
   berposisi, sekecil satu piksel dan terpangkas, jadi tidak pernah
   memengaruhi tinggi halaman di mesin peramban mana pun. */
.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Elemen berulang ----------------------------------------------------- */

.eyebrow {
  margin-bottom: 12px;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--speed) var(--ease), background var(--speed) ease,
    color var(--speed) ease, opacity var(--speed) ease;
}
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--accent); color: #fff; transform: scale(1.06); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { color: #fff; opacity: 0.92; transform: scale(1.06); }
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--block { display: flex; width: 100%; padding: 13px 0; font-weight: 700; }

.btn__arrow {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}
.btn--accent .btn__arrow,
.btn--block .btn__arrow { background: #fff; color: var(--accent); }

/* --- Kerangka halaman ---------------------------------------------------- */

.shell { width: 100%; background: var(--card); }

/* Lebar kotak isi. Rumusnya: pakai --*-w, jangan lebih sempit dari --*-min,
   jangan lebih lebar dari --content-max, dan selalu sisakan pinggiran
   --pad-x. Satu ekspresi ini menggantikan tangga breakpoint dan tidak
   meloncat saat layar diubah ukurannya. */
.hero__inner {
  width: min(
    100% - 2 * var(--pad-x),
    max(var(--hero-min), min(var(--hero-w), var(--hero-max)))
  );
  margin-inline: auto;
}

.about,
.rooms,
.route,
.ulasan,
.footer__inner {
  width: min(
    100% - 2 * var(--pad-x),
    max(var(--content-min), min(var(--content-w), var(--content-max)))
  );
  margin-inline: auto;
}

/* Isi section menyesuaikan lebar kotaknya sendiri, bukan lebar layar. Tanpa
   ini, kartu kamar tetap empat kolom di kotak selebar 700px. */
.hero__inner { container: hero / inline-size; }
.about { container: about / inline-size; }
.rooms { container: rooms / inline-size; }
.route { container: route / inline-size; }
.ulasan { container: ulasanbox / inline-size; }
.footer__inner { container: footerbox / inline-size; }

/* --- Navigasi ------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  padding-inline: max(
    var(--pad-x),
    calc((100% - max(var(--hero-min), min(var(--hero-w), var(--hero-max)))) / 2)
  );
  background: rgba(253, 251, 250, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav__brand { display: flex; align-items: center; }
/* Tinggi yang dikunci, lebar mengikuti rasio logo (267x128). */
.nav__logo { width: auto; height: 30px; }

.nav__links {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  font-size: 14px;
  font-weight: 500;
}

.nav__actions { display: flex; align-items: center; gap: 14px; }

.icon-link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: transform var(--speed) var(--ease), background var(--speed) ease,
    color var(--speed) ease, border-color var(--speed) ease;
}
.icon-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.14);
}
.icon-link--f { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 800; }

.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--speed) var(--ease), opacity var(--speed) ease;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ''; position: relative; }
.nav__toggle-bars::before { top: -5px; }
.nav__toggle-bars::after { top: 3px; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after { transform: translateY(-3px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: 44px 0 76px;
}

.hero__inner { display: flex; align-items: center; min-height: clamp(400px, 34vw, 560px); }
.hero__grid { max-width: min(560px, 46cqi); }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Fallback bila foto latar gagal dimuat (mis. tanpa koneksi internet). */
  background: linear-gradient(150deg, #dfe9e6 0%, #cfe0dd 45%, #e8ded6 100%);
}
.hero__bg picture { display: contents; }

.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Papan nama pada foto ada di kanan-tengah, area yang sebagian tertutup
     kartu foto kamar. Posisi ini membuat papannya mengintip di celah antar
     kartu dan di tepi kanan, dan menempatkan papan di jendela pandang ponsel
     yang sempit. */
  object-position: 66% 38%;
}
.hero__bg-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Dua lapis. Yang mendatar menjaga kolom teks di kiri tetap terbaca; yang
     menurun meredam bagian atas supaya navigasi tidak bertabrakan dengan
     foto. Sisi kanan sengaja dibiarkan paling bening karena di sanalah
     pemandangan pulaunya terlihat. */
  background:
    linear-gradient(
      to right,
      var(--card) 0%,
      var(--card) 30%,
      rgba(253, 251, 250, 0.9) 42%,
      rgba(253, 251, 250, 0.35) 55%,
      rgba(253, 251, 250, 0.05) 70%,
      rgba(253, 251, 250, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(253, 251, 250, 0.55) 0%,
      rgba(253, 251, 250, 0.18) 12%,
      rgba(253, 251, 250, 0) 30%
    );
}
.hero__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rating-pill__star {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
}
/* Grid, bukan <br>: line-height 1.5 dari body membuat dua barisnya renggang. */
.rating-pill__text { display: grid; gap: 1px; }
.rating-pill__value { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.rating-pill__meta { font-size: 11.5px; line-height: 1.2; color: var(--ink-soft); }

.hero__title {
  margin: 22px 0 18px;
  font-size: clamp(34px, 4.4cqi, 52px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.hero__lead {
  max-width: 380px;
  margin-bottom: 24px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

/* --- Tentang ------------------------------------------------------------- */

.about { padding: clamp(56px, 5vw, 88px) 0 56px; }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: stretch;
}
/* Setengah lebar section. Tingginya mengikuti kolom teks di sebelahnya,
   bukan rasio tetap: dengan lebar sebesar ini rasio potret akan membuat
   fotonya jauh lebih jangkung daripada teksnya. */
.about__figure {
  position: relative;
  margin: 0;
  width: 100%;
  min-height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--tint);
}
.about__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.about__title {
  margin-bottom: 14px;
  max-width: 22ch;
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
/* Lebar kolomnya sendiri yang membatasi panjang baris, jadi tepi kanan
   paragraf sejajar dengan judul dan daftar fasilitas. */
.about__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

/* auto-fit menyesuaikan jumlah kolom dengan lebar kolom teks, jadi daftar
   ini selalu mengisi sampai tepi kanan tanpa perlu breakpoint sendiri. */
.unggulan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.unggul {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.unggul__ikon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 9px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--accent);
}
.unggul__ikon svg { width: 18px; height: 18px; }

.unggul__judul { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.unggul__teks {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- Foto ukuran penuh --------------------------------------------------- */

/* Penanda bahwa fotonya bisa dibuka; kelasnya dipasang JavaScript sehingga
   tanpa JavaScript tidak ada isyarat yang menjanjikan sesuatu yang tidak
   akan terjadi. */
.gallery__slide img.is-dapat-diklik { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(8px, 4vw, 48px);
  background: rgba(24, 12, 12, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: min(1000px, 100%);
  max-height: 86vh;
  object-fit: contain;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox__tutup,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background var(--speed) ease, transform var(--speed) var(--ease);
}
.lightbox__tutup:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.08); }
.lightbox__tutup svg,
.lightbox__nav svg { width: 20px; height: 20px; }

.lightbox__tutup { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lightbox__nav--prev { left: clamp(8px, 2.5vw, 28px); }
.lightbox__nav--next { right: clamp(8px, 2.5vw, 28px); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }

.lightbox__hitung {
  position: absolute;
  bottom: clamp(12px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 13px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .lightbox__img { max-height: 74vh; }
  .lightbox__nav { top: auto; bottom: clamp(12px, 4vw, 28px); transform: none; }
  .lightbox__nav:hover { transform: scale(1.08); }
  .lightbox__nav--prev { left: 22%; }
  .lightbox__nav--next { right: 22%; }
  .lightbox__hitung { bottom: calc(clamp(12px, 4vw, 28px) + 12px); }
}

/* Halaman di belakang tidak ikut menggulir saat foto terbuka. */
body.is-terkunci { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox__tutup,
  .lightbox__nav { transition: none; }
}

/* --- Akomodasi ----------------------------------------------------------- */

.rooms { padding: 24px 0 56px; }

.rooms__head { text-align: center; margin-bottom: 28px; }
.rooms__title {
  margin: 0;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.panel { display: flex; flex-direction: column; gap: 18px; }

.room {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "media intro fitur"
    "media fakta fitur"
    "media aksi  aksi";
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 18px 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.room__media { grid-area: media; }
.room__intro { grid-area: intro; }
.room__facts { grid-area: fakta; }
/* Dipusatkan terhadap tinggi kolom di sebelahnya (jenis kamar + Informasi
   Kamar), jadi tidak menggantung di atas dan tidak jatuh ke bawah. */
.room__fitur-list { grid-area: fitur; align-self: center; }

/* Baris penutup: harga di kiri, tombolnya di kanan, keduanya rata tengah. */
.room__aksi {
  grid-area: aksi;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.room__harga { flex: none; }
.room__aksi .btn--block { width: auto; min-width: 200px; padding-inline: 26px; }

.room__media {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 100%;
  min-height: 360px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tint);
}

/* Karosel scroll-snap: geser dan sentuh sudah jalan tanpa JavaScript.
   main.js hanya menambahkan tombol panah dan penghitung foto. */
.gallery {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }

.gallery__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* Absolut supaya rasio asli foto tidak ikut menentukan tinggi baris grid. */
.gallery__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(253, 251, 250, 0.92);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(60, 20, 20, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--speed) ease, background var(--speed) ease;
}
.gallery__nav--prev { left: 8px; }
.gallery__nav--next { right: 8px; }
.gallery__nav svg { width: 15px; height: 15px; }
.gallery__nav:hover { background: #fff; }

/* Panah muncul saat kartu disentuh kursor atau ada fokus keyboard di
   dalamnya; di layar sentuh panah selalu tampak karena hover tidak ada. */
.room:hover .gallery__nav,
.room:focus-within .gallery__nav { opacity: 1; }
@media (hover: none) {
  .gallery__nav { opacity: 1; }
}

.gallery__count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(28, 22, 22, 0.72);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.room__intro { padding: 6px 0; }
/* Sebutan kelas kamar mengikuti nama tipenya, dibedakan dengan lambang
   pemisah supaya tetap terbaca sebagai satu judul. */

.room__kicker {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.room__tagline { margin-bottom: 8px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.room__desc { color: var(--ink-mute); font-size: 13px; line-height: 1.6; }
.room__facts { padding: 6px 0; }
/* Harga dijadikan kotak tersendiri: bidang berwarna menariknya keluar dari
   arus teks jauh lebih kuat daripada sekadar memperbesar angkanya. */
.room__price {
  margin: 0;
  color: var(--accent);
  font-size: 32.5px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.room__price span { font-size: 14px; font-weight: 600; color: var(--ink-mute); letter-spacing: 0; }
.room__price-note { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }
.room__facts-title {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}
.room__specs { display: grid; gap: 7px; margin: 0; font-size: 13px; }
.room__spec { display: flex; justify-content: space-between; gap: 12px; }
.room__spec dt { color: var(--ink-mute); }
.room__spec dd { margin: 0; font-weight: 600; text-align: right; }

.room__fitur-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 16px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.room__fitur { display: grid; gap: 7px; }

.room__fitur-ikon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tint);
  color: var(--accent);
}
.room__fitur-ikon svg { width: 17px; height: 17px; }

.room__fitur-nama { display: block; font-size: 13px; font-weight: 700; }
.room__fitur-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* --- Rute ---------------------------------------------------------------- */

.route { padding: 0 0 56px; }
.route__inner { padding-top: 40px; border-top: 1px solid var(--line); }
.route__head { max-width: 520px; margin-bottom: 30px; }
.route__title {
  margin-bottom: 12px;
  font-size: clamp(26px, 3.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.route__lead { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

.route__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.route__steps::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12%;
  right: 12%;
  height: 2px;
  opacity: 0.45;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    var(--accent) 0 8px,
    transparent 8px 16px
  );
}

.step {
  position: relative;
  padding: 24px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
/* --- Ilustrasi rute ------------------------------------------------------ */
/* Banner memenuhi lebar kartu, jadi padding kartunya ditiadakan lewat margin
   negatif alih-alih membungkus ulang isinya. */
.step__illo {
  position: relative;
  margin: -24px -20px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.step__illo--pesawat { background: linear-gradient(170deg, #edf3f7 0%, #f7f2ef 100%); }
.step__illo--kapal { background: linear-gradient(170deg, #e9f2f2 0%, #f7f2ef 100%); }
.step__illo--mobil { background: linear-gradient(170deg, #f3efec 0%, #f9f4f1 100%); }

.illo { display: block; width: 100%; height: auto; }
.illo__vehicle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.illo__cloud { fill: #fff; opacity: 0.85; }
.illo__hill { fill: #e6ded8; }
.illo__wave {
  fill: none;
  stroke: #c3d6d6;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.illo__wave--far { stroke: #d8e5e5; }
.illo__dash {
  fill: none;
  stroke: #d9cec7;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
}

/* Latar bergeser satu periode pola lalu mengulang, sehingga sambungannya
   tidak terlihat. Pola awan, ombak, dan bukit sama-sama berulang tiap 120. */
@keyframes illo-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-120px); }
}
@keyframes illo-dash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -32px; }
}
@keyframes illo-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}
@keyframes illo-rock {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}

.illo__drift { animation: illo-drift 14s linear infinite; }
.illo__dash { animation: illo-dash 1.6s linear infinite; }
.illo__bob { animation: illo-bob 3.4s ease-in-out infinite; }
.illo__bob--rock {
  transform-box: fill-box;
  transform-origin: center;
  animation: illo-rock 3.8s ease-in-out infinite;
}

/* --- Kartu langkah ------------------------------------------------------- */

.step__num {
  position: absolute;
  top: 12px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(60, 20, 20, 0.18);
}
.step:last-child .step__num { background: var(--ink); }
.step__mode {
  margin-bottom: 8px;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.step__route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 20.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.step__arrow { color: var(--accent); font-size: 16px; }
.step__text { color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.step__time { margin-top: 14px; font-size: 13px; font-weight: 700; }

.mapcard {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.mapcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.mapcard__name { font-size: 14px; font-weight: 700; }
.mapcard__addr { font-size: 13px; color: var(--ink-mute); }
.mapcard iframe { display: block; width: 100%; height: 340px; border: 0; }

/* --- Ulasan ------------------------------------------------------------- */

.ulasan { padding: 0 0 60px; }
.ulasan__inner { padding-top: 40px; border-top: 1px solid var(--line); }

.ulasan__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.ulasan__title {
  margin: 0;
  font-size: clamp(24px, 3cqi, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ulasan__ringkas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}
.ulasan__nilai { font-size: 21.5px; font-weight: 700; line-height: 1; }
.ulasan__bintang { color: #e8a400; letter-spacing: 0.04em; }
.ulasan__sisa { color: #d8cfca; }
.ulasan__jumlah { color: var(--ink-soft); }

.ulasan__tautan { color: var(--accent); font-weight: 600; white-space: nowrap; }
.ulasan__tautan:hover { color: var(--accent-deep); }

/* Kolom masonry sederhana: kartu mengalir mengikuti tingginya masing-masing,
   jadi ulasan pendek tidak menyisakan ruang kosong seperti pada grid. */
.ulasan__grid {
  column-count: 3;
  column-gap: 18px;
}

.ulasan__item {
  /* Kartu menjadi acuan posisi bagi isinya sendiri, sehingga label bintang
     yang absolut di dalamnya diukur dari kartu, bukan dari kolom, dan tidak
     terjebak pada perhitungan kolom WebKit yang keliru. */
  position: relative;
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ulasan__kepala {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

/* Warna avatar berselang-seling seperti di Google, diambil dari palet merek
   supaya tidak memasukkan warna asing ke halaman. */
.ulasan__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.ulasan__avatar--1 { background: #C8102E; }
.ulasan__avatar--2 { background: #1F3A5F; }
.ulasan__avatar--3 { background: #A4161A; }
.ulasan__avatar--4 { background: #2F6B4F; }
.ulasan__avatar--5 { background: #8A5A2B; }

.ulasan__nama { font-size: 14.5px; font-weight: 700; }
.ulasan__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 12px;
}
.ulasan__meta .ulasan__bintang { font-size: 13px; }

.ulasan__teks { margin: 0; font-size: 14px; line-height: 1.6; }

/* Tombol muat lebih. Disembunyikan secara bawaan: di layar lebar semua kartu
   memang muat, dan tanpa JavaScript tombolnya tidak akan berfungsi — di
   kedua keadaan itu kartunya tampil semua, jadi tombolnya tidak diperlukan. */
.ulasan__lagi { display: none; margin-top: 4px; text-align: center; }

.ulasan__tombol {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--speed) ease, transform var(--speed) var(--ease);
}
.ulasan__tombol:hover { border-color: var(--accent); transform: scale(1.03); }

.ulasan__tombol-panah {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  transition: transform var(--speed) var(--ease);
}
.ulasan__tombol[aria-expanded="true"] .ulasan__tombol-panah { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .ulasan__tombol,
  .ulasan__tombol-panah { transition: none; }
}

/* --- Footer -------------------------------------------------------------- */

/* Latar footer tetap penuh; isinya mengikuti lebar section. */
.footer {
  padding: 44px 0 28px;
  background: var(--footer);
  color: #fff;
}
.footer a { color: #fff; }
.footer a:hover { color: var(--footer-hover); }

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.footer__brand { display: flex; align-items: center; margin-bottom: 16px; }
/* Varian terang: biru tua pada logo hanya 1,02:1 di atas latar footer. */
.footer__logo { width: auto; height: 34px; }
.footer__about { max-width: 280px; color: var(--footer-soft); font-size: 13px; line-height: 1.7; }

.footer__col { display: grid; gap: 10px; align-content: start; font-size: 14px; }

.footer__follow-title { margin: 22px 0 10px; }
.footer__social { display: flex; gap: 10px; margin: 0; }

.social {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  transition: transform var(--speed) var(--ease), background var(--speed) ease,
    border-color var(--speed) ease, color var(--speed) ease;
}
.social svg { width: 16px; height: 16px; }
.social:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.12);
}

.footer__contact { display: flex; align-items: center; gap: 9px; }
.footer__contact-icon { flex-shrink: 0; width: 17px; height: 17px; color: var(--footer-soft); }
.footer__contact:hover .footer__contact-icon { color: var(--footer-hover); }
.footer__col-title {
  margin-bottom: 4px;
  color: var(--footer-soft);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer__note { color: var(--footer-soft); font-size: 13px; line-height: 1.6; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--footer-soft);
  font-size: 12px;
}
.footer__bottom a { color: var(--footer-soft); text-decoration: underline; }

/* --- Halaman informasi --------------------------------------------------- */

.doc {
  width: min(
    100% - 2 * var(--pad-x),
    max(var(--content-min), min(var(--content-w), var(--content-max)))
  );
  margin-inline: auto;
  padding: 52px 0 64px;
}

.doc__title {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.03em;
}
.doc__lead { max-width: 60ch; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }

.doc__section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.doc__heading {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.doc__subheading { margin: 26px 0 10px; font-size: 15px; font-weight: 700; }

.doc p { max-width: 68ch; margin: 0 0 12px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; }
.doc p:last-child { margin-bottom: 0; }
.doc strong { color: var(--ink); font-weight: 700; }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.doc__list { max-width: 68ch; margin: 0; padding-left: 18px; }
.doc__list li {
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.75;
}
.doc__list li::marker { color: var(--accent); }

.doc__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 20px;
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.doc__facts dt { margin-bottom: 3px; color: var(--ink-mute); font-size: 12px; }
.doc__facts dd { margin: 0; font-size: 15px; font-weight: 700; }

.doc > .doc__updated {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 13px;
}

/* --- Responsif ----------------------------------------------------------- */

/* Lebar kotak isi diatur rumus di bagian Kerangka, jadi tidak ada tangga
   breakpoint untuk lebar. Yang tersisa di sini: navigasi, yang memang
   bergantung pada lebar layar, dan isi section, yang bergantung pada lebar
   kotaknya sendiri lewat @container. */

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }

  .nav { flex-wrap: wrap; padding-block: 14px; }
  .nav__toggle { display: grid; place-items: center; order: 3; }
  .nav__actions { order: 2; margin-left: auto; }
  .nav__links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 16px;
  }
  .nav__links a { padding: 8px 0; }
  .js .nav__links[data-collapsed='true'] { display: none; }
}

@media (max-width: 640px) {
  .mapcard iframe { height: 280px; }
}

/* Hero menumpuk saat kotaknya menyempit ke 820px, yang terjadi di sekitar
   lebar layar 1090px (820 dibagi --hero-w 75%). Di bawah itu teks memenuhi
   lebar, sehingga gradien mendatar tidak lagi melindunginya dan selubungnya
   harus menurun: pekat di bagian teks, menipis di bagian kartu foto.
   Dipakai media query, bukan container query, karena .hero__bg-veil berada
   di luar .hero__inner yang menjadi container. */
@media (max-width: 1090px) {
  .hero__bg-veil {
    background: linear-gradient(
      to bottom,
      var(--card) 0%,
      var(--card) 64%,
      rgba(253, 251, 250, 0.5) 74%,
      rgba(253, 251, 250, 0.06) 84%,
      rgba(253, 251, 250, 0) 92%
    );
  }
  /* Tanpa kartu foto, ruang di bawah teks inilah panggung fotonya. */
  .hero { padding-bottom: clamp(240px, 60vw, 380px); }
  .hero__inner { min-height: 0; }
  .hero__grid { max-width: none; }

  /* Di layar sempit, object-fit cover selalu menampilkan seluruh tinggi
     foto sehingga papan namanya terkunci di zona teks. Sebagai gantinya
     dipakai potongan foto khusus (source di atas) yang ditambatkan ke dasar
     hero dengan rasio aslinya, sehingga papan MARCY jatuh di zona jernih. */
  .hero__bg-img {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: min(100%, 540px);
    height: auto;
  }
}

/* --- Isi section mengikuti lebar kotaknya -------------------------------- */

@container about (max-width: 880px) {
  .unggulan { grid-template-columns: 1fr; }
}

@container about (max-width: 700px) {
  .about__grid { grid-template-columns: 1fr; gap: 0; }
  .about__figure { display: none; }
}

/* Judul dan deskripsi melebar di baris atas, sementara informasi kamar dan
   fasilitas tetap berdampingan. Tanpa ini baris spesifikasi meregang terlalu
   jauh antara label dan nilainya. */
/* Kolom tombol tersendiri sudah terlalu sempit di sini: tombolnya turun ke
   bawah fasilitas, selebar kolom teks. */
/* Kolom judul dan Informasi Kamar tidak lagi muat berdampingan di sini;
   keduanya ditumpuk jadi satu kolom tengah, tombol tetap di kanan. */
@container rooms (max-width: 1100px) {
  .room__media {
    height: auto;
    min-height: 0;
    max-width: 100%;
    aspect-ratio: 3 / 4;
  }
}

/* Foto masih di samping, tetapi kolom teksnya tinggal satu. */
@container rooms (max-width: 780px) {
  .room {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    grid-template-areas:
      "media intro"
      "media fakta"
      "media fitur"
      "media aksi";
  }
  .room__fitur-list { align-self: start; }
  .room__aksi {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .room__aksi .btn--block { width: 100%; min-width: 0; padding-inline: 0; }
}

@container rooms (max-width: 560px) {
  .room {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "intro" "fakta" "fitur" "aksi";
  }
  .room__media {
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin: -16px -16px 4px;
    aspect-ratio: 4 / 3;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 10px 10px;
  }
}

@container ulasanbox (max-width: 900px) {
  .ulasan__grid { column-count: 2; }
}

@container ulasanbox (max-width: 560px) {
  .ulasan__grid { column-count: 1; }
  .ulasan__head { align-items: flex-start; }

  .js .ulasan__grid:not(.is-terbuka) .ulasan__item:nth-child(n + 4) { display: none; }
  .js .ulasan__lagi { display: block; }
}

@container route (max-width: 620px) {
  .route__steps { grid-template-columns: 1fr; }
  .route__steps::before { display: none; }
}

@container footerbox (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@container footerbox (max-width: 440px) {
  .footer__top { grid-template-columns: 1fr; gap: 26px; }
  .footer__bottom { flex-direction: column; }
}

/* Peramban tanpa dukungan @container (sebelum 2023) tidak menerima aturan di
   atas, jadi grid utama ditumpuk berdasarkan lebar layar sebagai cadangan. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .about__grid,
    .room,
    .route__steps,
    .footer__top { grid-template-columns: 1fr; }
    .room__media { justify-self: center; max-width: 220px; height: auto; min-height: 0; aspect-ratio: 3 / 4; }
    .route__steps::before { display: none; }
    .hero__lead { max-width: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery { scroll-behavior: auto; }
  /* Ilustrasinya tetap terbaca dalam keadaan diam. */
  .illo__drift,
  .illo__dash,
  .illo__bob { animation: none !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .nav, .hero__bg, .mapcard iframe, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* deploy 317393f4 */