/* [BOOK_ENGINE_V2] book.theradenpatah.com — mengikuti bahasa visual situs resmi.
 *
 * V1 DIBUANG. Ia memakai kosakata visual panel administrasi — chip fasilitas,
 * strip harga seperti baris lajur, kartu, dan halaman yang dibuka dengan
 * FORMULIR. Untuk hotel itu salah kelas: yang dijual ruang dan bangunannya,
 * bukan tabel.
 *
 * Acuannya sekarang halaman `/room` dan `/about` situs resmi, dan tokennya
 * DISALIN dari `trph-room-v2.php` — bukan ditafsir ulang: eyebrow 12.5px
 * berspasi .28em dengan garis kuningan 34px, judul Cormorant 600, tabel
 * spesifikasi bergaris rambut dengan label kapital kecil, mozaik foto 1 besar +
 * sisanya, tombol kuningan kapital berspasi .16em, dan wash batik Semarangan.
 * Kalau `/room` berubah, berkas ini ikut — dua halaman yang mengaku situs yang
 * sama tidak boleh terlihat berbeda.
 *
 * CATATAN YANG DIWARISI DARI SUMBERNYA, dan sudah sekali menggigit di V1:
 * gunakan `padding-block`, JANGAN shorthand `padding`, pada elemen yang juga
 * ber-kelas `.b-wrap` — komponen mendatar pada shorthand menimpa padding 26px
 * milik wrap, dan di layar kecil teksnya menempel tepi.
 */

:root{
  --ink:#26201a; --paper:#efe7d7; --paper-2:#e8ddc8; --paper-3:#e2d4ba;
  --cream:#f6efe2; --teak:#43301f; --teak-2:#33241a; --night:#1a120b;
  --brass:#b0814b; --brass-deep:#8a6636; --brass-lt:#e9cfa6;
  --line:#cbbb9c; --muted:#726352; --oxblood:#7c3a2d;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Cabin',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --kawung:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%2343301f' stroke-width='1' opacity='0.13'><ellipse cx='36' cy='18' rx='8.5' ry='14'/><ellipse cx='36' cy='54' rx='8.5' ry='14'/><ellipse cx='18' cy='36' rx='14' ry='8.5'/><ellipse cx='54' cy='36' rx='14' ry='8.5'/><circle cx='36' cy='36' r='2.6'/><circle cx='0' cy='0' r='2.6'/><circle cx='72' cy='0' r='2.6'/><circle cx='0' cy='72' r='2.6'/><circle cx='72' cy='72' r='2.6'/></g></svg>");
  --kawung-brass:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'><g fill='none' stroke='%23b0814b' stroke-width='1' opacity='0.12'><ellipse cx='36' cy='18' rx='8.5' ry='14'/><ellipse cx='36' cy='54' rx='8.5' ry='14'/><ellipse cx='18' cy='36' rx='14' ry='8.5'/><ellipse cx='54' cy='36' rx='14' ry='8.5'/><circle cx='36' cy='36' r='2.6'/><circle cx='0' cy='0' r='2.6'/><circle cx='72' cy='0' r='2.6'/><circle cx='0' cy='72' r='2.6'/><circle cx='72' cy='72' r='2.6'/></g></svg>");
  --sema:url("https://www.theradenpatah.com/wp-content/mu-plugins/trph-batik/trph-batik-semarangan.webp");
  --hero:url("https://www.theradenpatah.com/wp-content/uploads/2026/07/trph-halaman-senja-1.webp");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper) var(--kawung) repeat;
  color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button,input,select{font:inherit; color:inherit}
p{margin:0 0 1.05em}
.b-wrap{max-width:1180px; margin:0 auto; padding:0 26px}
.b-angka{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.b-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── Bilah identitas ─────────────────────────────────────────────────────── */
.b-top{position:relative; background:var(--night); color:var(--cream);
  background-image:var(--kawung-brass); background-repeat:repeat}
.b-top__baris{display:flex; align-items:center; justify-content:center;
  gap:18px; padding-block:16px 10px; position:relative}
.b-merek{text-align:center; text-decoration:none; color:inherit; display:block}
.b-merek__nama{display:block; font-family:var(--serif); font-weight:600; font-size:19px;
  letter-spacing:.34em; text-transform:uppercase; line-height:1.25; color:#fbf3e6}
.b-merek__sub{display:block; font-family:var(--serif); font-size:13px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--brass-lt); line-height:1.6}
.b-merek__kota{display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.44em;
  text-transform:uppercase; color:#b99a71; line-height:2}
.b-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:2px;
  padding-bottom:12px}
.b-nav a{font-family:var(--sans); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#d9c5a6; text-decoration:none;
  padding:11px 15px; min-height:44px; display:inline-flex; align-items:center}
.b-nav a:hover{color:#fbf3e6}
.b-nav a[aria-current]{color:#2a1c10; background:var(--brass)}
.b-nav a:focus-visible{outline:2px solid var(--brass); outline-offset:2px}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.b-hero{position:relative; min-height:clamp(360px,50vh,540px);
  display:flex; align-items:center; overflow:hidden}
.b-hero__media{position:absolute; inset:0; background:var(--hero) center 55%/cover no-repeat}
.b-hero__scrim{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(26,18,11,.62) 0%,rgba(26,18,11,.38) 45%,rgba(22,15,9,.74) 100%)}
.b-hero__frame{position:absolute; inset:22px; border:1px solid rgba(233,207,166,.32);
  pointer-events:none; z-index:2}
.b-hero__inner{position:relative; z-index:3; width:100%; max-width:1180px;
  margin:0 auto; padding:0 26px}
.b-hero__judul{font-family:var(--serif); font-weight:600; letter-spacing:.5px;
  color:#fbf4e8; font-size:clamp(34px,5.4vw,68px); line-height:1;
  margin:.04em 0 .2em; text-shadow:0 2px 34px rgba(0,0,0,.5)}
.b-hero__sub{font-family:var(--serif); font-size:clamp(17px,2vw,24px);
  font-style:italic; color:#f0e2cd; max-width:38ch; margin:0; line-height:1.4;
  text-shadow:0 1px 18px rgba(0,0,0,.45)}

/* ── Judul bagian ────────────────────────────────────────────────────────── */
.b-eyebrow{font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--brass-deep);
  margin:0 0 16px; display:flex; align-items:flex-start; gap:12px}
.b-eyebrow::before{content:""; width:34px; height:1px; background:var(--brass);
  flex:none; margin-top:.62em; align-self:flex-start}
.b-eyebrow--terang{color:var(--brass-lt)}
.b-eyebrow--terang::before{background:#c99a5f}
.b-h2{font-family:var(--serif); font-weight:600; letter-spacing:.4px;
  font-size:clamp(26px,3.4vw,42px); line-height:1.06; color:var(--teak-2); margin:0 0 .4em}

/* ── Panel pencarian ─────────────────────────────────────────────────────── */
.b-cari{position:relative; background:var(--paper-2)}
.b-cari::before{content:""; position:absolute; inset:0; background:var(--sema) center/440px repeat;
  opacity:.14; pointer-events:none}
.b-cari__isi{position:relative; padding-block:clamp(46px,6vw,74px) clamp(34px,4.5vw,52px)}
.b-form{display:grid; gap:18px 22px; grid-template-columns:1fr; margin-top:26px; max-width:920px}
.b-bidang{display:flex; flex-direction:column; gap:7px; min-width:0}
.b-label{font-family:var(--sans); font-weight:700; color:var(--brass-deep);
  text-transform:uppercase; letter-spacing:.14em; font-size:11px}
.b-input{appearance:none; -webkit-appearance:none; background:var(--cream);
  border:1px solid var(--line); border-radius:2px; padding:14px 15px;
  font-size:16px; color:var(--ink); min-height:52px; width:100%; min-width:0}
.b-input:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.b-btn{display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; padding:17px 40px; min-height:52px;
  border-radius:2px; cursor:pointer; transition:all .25s ease;
  background:var(--brass); color:#2a1c10; border:1px solid var(--brass)}
.b-btn:hover{background:var(--brass-deep); border-color:var(--brass-deep); color:#fff}
.b-btn:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.b-btn[disabled]{opacity:.55; cursor:not-allowed}
.b-btn--garis{background:transparent; color:var(--teak); border-color:var(--line)}
.b-btn--garis:hover{background:var(--teak-2); border-color:var(--teak-2); color:var(--cream)}
.b-nota{display:inline-block; margin-top:22px; padding:11px 18px;
  border-left:2px solid var(--brass); background:var(--paper-3);
  font-size:14.5px; color:var(--teak)}

/* ── Daftar kamar ────────────────────────────────────────────────────────── */
.b-hasil{position:relative; background:var(--paper);
  padding-block:clamp(48px,6vw,80px) clamp(60px,8vw,104px)}
/* Wash Semarangan 620px, meniru `.r-types` di halaman /room. Kawung 72px yang
   dipakai body sengaja TIDAK diteruskan ke sini: situs memilih kawung untuk
   band pendek (header/footer) justru karena tilenya kecil terbaca utuh di sana;
   di area isi sepanjang ini ia jadi ramai dan mengganggu tabel spesifikasi. */
.b-hasil::before{content:""; position:absolute; inset:0;
  background:var(--sema) center/620px repeat; opacity:.12; pointer-events:none}
.b-hasil > *{position:relative}
.b-tipe{padding-block:clamp(34px,4.5vw,56px); border-top:1px solid var(--line)}
.b-tipe:first-of-type{border-top:0; padding-top:clamp(8px,1.5vw,18px)}
.b-tipe__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start}
.b-tipe--penuh .b-tipe__kiri,
.b-tipe--penuh .b-foto{opacity:.55}
.b-tipe__nama{font-family:var(--serif); font-weight:600; letter-spacing:.3px;
  font-size:clamp(24px,3vw,36px); line-height:1.1; color:var(--teak-2); margin:0 0 8px}
.b-tipe__ringkas{color:var(--muted); font-size:15.5px; margin:0 0 18px}

.b-spec{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--line)}
.b-spec li{display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px}
.b-spec b{font-family:var(--sans); font-weight:700; color:var(--brass-deep);
  text-transform:uppercase; letter-spacing:.12em; font-size:11px;
  min-width:112px; padding-top:4px; flex:none}
.b-spec span{min-width:0}

.b-amen__label{font-family:var(--sans); font-weight:700; color:var(--brass-deep);
  text-transform:uppercase; letter-spacing:.14em; font-size:11px; margin:24px 0 10px}
.b-amen{list-style:none; margin:0; padding:0}
.b-amen li{position:relative; padding:5px 0 5px 22px; font-size:15.5px; line-height:1.55}
.b-amen li::before{content:""; position:absolute; left:2px; top:14px;
  width:8px; height:1px; background:var(--brass)}
.b-caveat{margin-top:20px; padding:13px 18px; border-left:2px solid var(--oxblood);
  background:#e9dcc6; font-size:14.5px; color:#5d3227}
.b-caveat p{margin:0}
.b-caveat p + p{margin-top:4px}

.b-foto{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.b-foto figure{margin:0; overflow:hidden; border-radius:2px; background:var(--teak-2); aspect-ratio:4/3}
.b-foto img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.b-foto figure:hover img{transform:scale(1.05)}
.b-foto figure:first-child{grid-column:span 2; aspect-ratio:16/10}

/* ── Tarif per malam & harga ─────────────────────────────────────────────── */
.b-malam{list-style:none; margin:22px 0 0; padding:0; max-width:440px;
  border-top:1px solid var(--line)}
.b-malam li{display:flex; align-items:baseline; gap:12px; padding:8px 0;
  border-bottom:1px solid var(--line); font-size:14.5px}
.b-malam__tgl{min-width:104px; flex:none; color:var(--teak)}
.b-malam__seb{color:var(--muted); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; flex:1; text-align:left}
.b-malam__seb--akhir{color:var(--brass-deep)}
.b-malam__seb--libur{color:var(--oxblood)}
.b-malam__rp{font-weight:600; color:var(--ink)}

.b-harga{margin-top:24px}
.b-harga__rp{font-family:var(--serif); font-weight:600; font-size:clamp(30px,3.4vw,40px);
  line-height:1.05; color:var(--teak-2)}
.b-harga__ket{font-size:14px; color:var(--muted); margin-top:2px}
.b-harga__total{font-size:15px; color:var(--teak); margin-top:8px}
.b-harga__total b{font-weight:700}
.b-sisa{margin-top:8px; font-size:14px; color:var(--oxblood)}
.b-penuh{margin-top:8px; font-size:15px; color:var(--muted); font-style:italic}
.b-aksi{margin-top:22px}

/* ── Rincian, formulir, konfirmasi ───────────────────────────────────────── */
.b-rinci{list-style:none; margin:22px 0 0; padding:0; max-width:440px;
  border-top:1px solid var(--line)}
.b-rinci li{display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:15.5px}
.b-rinci li span:first-child{color:var(--muted)}
.b-rinci li.b-rinci--total{font-size:19px; font-weight:700; color:var(--teak-2)}
.b-rinci li.b-rinci--total span:first-child{color:var(--teak-2)}

.b-galat{margin-top:20px; padding:13px 18px; border-left:2px solid var(--oxblood);
  background:#e9dcc6; font-size:14.5px; color:#5d3227}
.b-kabar{padding:clamp(28px,4vw,44px); border:1px solid var(--line);
  background:var(--cream); max-width:640px}
.b-kabar__kode{font-family:var(--serif); font-weight:600; font-size:clamp(32px,4vw,46px);
  letter-spacing:.06em; color:var(--teak-2); margin:4px 0 18px}
.b-memuat{padding:clamp(40px,6vw,72px) 0; color:var(--muted); font-size:15.5px}

/* ── Kaki ────────────────────────────────────────────────────────────────── */
.b-kaki{position:relative; background:var(--teak-2); color:#d9c5a6;
  background-image:var(--kawung-brass); background-repeat:repeat}
.b-kaki__isi{position:relative; padding-block:clamp(40px,5vw,62px) clamp(30px,4vw,46px)}
.b-kaki a{color:var(--brass-lt); display:inline-flex; align-items:center;
  min-height:44px; text-decoration:none}
.b-kaki a:hover{color:#fbf3e6}
.b-kaki__garis{border-top:1px solid rgba(203,187,156,.22); margin-top:26px;
  padding-top:20px; font-size:13.5px; color:#a8917a}

/* ── Lebar ───────────────────────────────────────────────────────────────── */
@media (min-width:700px){
  .b-form{grid-template-columns:1fr 1fr 1fr auto; align-items:end}
}
@media (max-width:900px){
  .b-tipe__grid{grid-template-columns:1fr}
  .b-foto{max-width:560px}
}
@media (max-width:560px){
  body{font-size:16px}
  .b-spec li{flex-direction:column; gap:2px}
  .b-spec b{min-width:0}
  .b-btn{padding:16px 28px; width:100%}
  .b-malam li{flex-wrap:wrap}
  .b-malam__seb{flex:1 0 100%; order:3}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}