/* Royal Suites — tata letak mengikuti ritme sonder.com, warna dari identitas Royal Suites (navy royal + emas logo). */
@font-face{font-family:Prata;src:url(assets/fonts/prata-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
 --bg:#F4EFE6;--bg-2:#FBF8F2;--sand:#EAE2D2;--card:#FFFFFF;
 --ink:#13244D;--ink-2:#22386E;--royal:#194CA7;
 --gold:#A47C2C;--gold-2:#C9A24C;--gold-soft:#F3E9CF;--on-dark:#E6D7B3;
 --text:#2A3042;--muted:#686C78;--line:#E0D8C8;
 --serif:Prata,'Times New Roman',Georgia,serif;--sans:Inter,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
 --shadow:0 1px 2px rgba(19,36,77,.06),0 10px 28px rgba(19,36,77,.07);
 --gutter:clamp(20px,4.5vw,64px);--max:1706px;--sec:84px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--royal);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}
.section+.section:not(.dark){padding-top:0}
.dark+.section{padding-top:var(--sec)}
.eyebrow{margin:0 0 14px;font:600 11px/1.4 var(--sans);letter-spacing:2.2px;color:var(--gold);text-transform:uppercase}
.eyebrow-line{display:flex;align-items:center;gap:14px}
.eyebrow-line::before{content:"";width:30px;height:1px;background:var(--gold)}
h1,h2{font-family:var(--serif);font-weight:400;color:var(--ink);text-wrap:balance;margin:0}
h1 em,h2 em,blockquote em,.dlg-h em,.ft-tag em{font-style:normal;color:var(--gold)}
h2{font-size:clamp(32px,3.6vw,46px);line-height:1.06;letter-spacing:-.015em}
.muted{color:var(--muted)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(244,239,230,.94);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(224,216,200,.7)}
.hd{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand img{width:40px;height:auto}
.brand span{font:500 24px/1 var(--sans);letter-spacing:-.6px}
.brand i{font-style:normal;color:var(--gold-2)}
.nav{display:flex;gap:30px;font-size:14.5px;color:var(--ink)}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .25s}
.nav a:hover::after{transform:scaleX(1)}
.pill-beta{font:600 9px/1 var(--sans);letter-spacing:1px;background:var(--gold-soft);color:var(--gold);padding:4px 6px;border-radius:99px;margin-left:4px;vertical-align:2px}
.hd-actions{display:flex;align-items:center;gap:10px}
.btn-owner{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:8px;background:linear-gradient(135deg,#CDA654,#9E7726);color:#fff;font:600 13.5px/1 var(--sans);box-shadow:0 6px 18px rgba(158,119,38,.28);transition:filter .2s}
.btn-owner:hover{filter:brightness(1.06)}
.btn-owner svg{width:16px;height:16px}
.btn-square{width:42px;height:42px;border-radius:8px;border:0;background:var(--ink);color:#fff;display:grid;place-items:center}
.btn-square:hover{background:var(--ink-2)}
.menu-toggle{display:none}
.mobile-nav{display:grid;padding:8px var(--gutter) 18px;border-top:1px solid var(--line)}
.mobile-nav a{padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink)}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px;border-bottom:1px solid var(--line)}
.hero-copy{padding:72px 56px 64px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero h1{font-size:clamp(40px,4.1vw,58px);line-height:1.04;letter-spacing:-.015em;margin:4px 0 20px}
.hero h1 em{display:inline}
.hero-sub{max-width:44ch;color:var(--muted);margin:0 0 30px;font-size:16.5px}
.hero-tabs{display:flex;gap:22px;margin-bottom:14px}
.hero-tabs button{background:none;border:0;padding:0 2px 6px;font:600 12px/1.5 var(--sans);letter-spacing:.4px;color:#A59C8E;border-bottom:1.5px solid transparent}
.hero-tabs button.on{color:var(--ink);border-color:var(--gold)}
.search{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:10px;padding:6px;box-shadow:0 18px 40px rgba(19,36,77,.12);max-width:560px}
.search-field{flex:1;min-width:0}
.search select.legacy{width:100%;border:0;background:transparent;padding:18px 14px;font-size:16px;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2313244D' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.btn-navy{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:var(--ink);color:#FBF8F2;font:500 15px/1 var(--sans);padding:0 26px;height:48px;transition:background .2s}
.btn-navy:hover{background:var(--ink-2)}
.search-btn{height:60px;min-width:150px;font-size:16.5px}
.search-more{margin-top:14px;max-width:560px}
.search-more summary{cursor:pointer;font-size:13px;color:var(--muted);list-style:none}
.search-more summary::after{content:" +";color:var(--gold)}
.search-more[open] summary::after{content:" −"}
.search-more-grid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:10px;margin-top:12px}
.search-more-grid label{display:grid;gap:6px;font:600 11px/1.3 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.search-more-grid input,.search-more-grid select{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:11px 10px;font:400 14px var(--sans);text-transform:none;letter-spacing:0;color:var(--ink);min-width:0}
.hero-media{position:relative;overflow:hidden;background:var(--sand);min-height:420px}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease,transform 7s ease;transform:scale(1.04)}
.slide.on{opacity:1;transform:scale(1)}
.hero-dots{position:absolute;right:24px;bottom:22px;display:flex;gap:8px;z-index:2}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0}
.hero-dots button.on{background:#fff}

/* Trust strip */
.trust{background:var(--bg-2);border-bottom:1px solid var(--line);overflow:hidden;height:78px;display:flex;align-items:center}
.trust-track{display:flex;gap:64px;align-items:center;white-space:nowrap;animation:marquee 38s linear infinite;padding-left:64px}
.trust:hover .trust-track{animation-play-state:paused}
.t-serif{font:400 22px/1 var(--serif);color:#8E8676}
.t-serif i{font-style:italic}
.t-caps{font:600 12px/1 var(--sans);letter-spacing:2.4px;color:#A0978A;text-transform:uppercase}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Stays */
.stays h2{margin-bottom:28px}
.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{height:36px;padding:0 18px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 13.5px/1 var(--sans);transition:background .2s,color .2s,border-color .2s}
.pill:hover{border-color:var(--ink)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#FBF8F2}
.filter-tools{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.link-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--ink)}
.link-btn svg{width:15px;height:15px}
.link-btn[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
.link-btn[aria-pressed=true] svg{fill:currentColor}
.sort{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.sort select{border:0;background:transparent;color:var(--ink);font-size:13.5px;font-weight:500;padding:4px}
.result-count{font-size:13px;color:var(--muted);margin:6px 0 22px}
.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{background:var(--card);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(19,36,77,.06),0 18px 40px rgba(19,36,77,.12)}
.card-media{position:relative;aspect-ratio:1.5;overflow:hidden;background:var(--sand)}
.card-media>button:not(.fav){display:block;width:100%;height:100%;border:0;padding:0;background:none}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.card:hover .card-media img.ph{transform:scale(1.04)}
.badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(251,248,242,.95);color:#6E5422;font:600 11px/1 var(--sans);padding:7px 10px;border-radius:6px}
.badge svg{width:14px;height:14px}
.fav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(19,36,77,.45);color:#fff;display:grid;place-items:center}
.fav[aria-pressed=true]{background:#fff;color:#C0392B}
.fav[aria-pressed=true] svg{fill:currentColor}
.no-photo{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(150deg,#13244D,#22386E);color:var(--on-dark);font:600 11px/1 var(--sans);letter-spacing:2px;text-transform:uppercase}
.no-photo img{width:56px;height:auto;opacity:.95}
.card-body{padding:18px 18px 18px;display:flex;flex-direction:column;flex:1}
.card-type{font-size:12px;color:var(--muted);margin:0 0 6px}
.card h3{font:600 17px/1.35 var(--sans);color:var(--ink);margin:0 0 6px;letter-spacing:-.2px}
.card-loc{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);margin:0 0 12px}
.card-loc svg{width:14px;height:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:12px;color:#4A4F5E}
.chip svg{width:14px;height:14px}
.card-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.price small{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.price b{font:700 19px/1.1 var(--sans);color:var(--ink);letter-spacing:-.3px}
.price span{font-size:12px;color:var(--muted)}
.btn-unit{border:0;border-radius:6px;background:var(--ink);color:#fff;font:700 11.5px/1 var(--sans);letter-spacing:.6px;padding:12px 14px;white-space:nowrap}
.btn-unit:hover{background:var(--ink-2)}
.empty{text-align:center;padding:50px 0}
.empty h3{font:400 26px var(--serif);color:var(--ink);margin:0 0 6px}
.fineprint{font-size:12.5px;color:var(--muted);margin:26px 0 0;line-height:1.7}

/* Neighborhood */
.nb-panel{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;background:var(--sand);border-radius:12px;padding:32px}
.nb-panel>img{width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:8px}
.nb-copy h2{margin-bottom:22px}
.nb-copy h3{font:500 20px/1.3 var(--sans);color:var(--ink);margin:0 0 10px}
.nb-copy p:not(.eyebrow){color:var(--muted);font-size:15px;margin:0 0 22px;max-width:52ch}
.underlink{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);padding-bottom:6px;border-bottom:1px solid currentColor}
.underlink svg{width:14px;height:14px;transition:transform .2s}
.underlink:hover svg{transform:translateX(3px)}
.underlink.light{color:var(--on-dark)}

/* Standards */
.standards{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--line)}
.standards article{padding:30px 26px 6px 0;border-right:1px solid var(--line);margin-right:26px}
.standards article:last-child{border-right:0;margin-right:0}
.standards svg{width:26px;height:26px;color:var(--gold);stroke-width:1.3;margin-bottom:22px}
.standards h3{font:400 23px/1.2 var(--serif);color:var(--ink);margin:0 0 10px}
.standards p{font-size:14.5px;color:var(--muted);margin:0}

/* Destinations */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dest{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1.45;color:#fff;display:block}
.dest img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.dest:hover img{transform:scale(1.04)}
.dest::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,45,0) 40%,rgba(10,20,45,.72))}
.dest-copy{position:absolute;left:28px;right:28px;bottom:26px;z-index:1;display:grid;gap:4px}
.dest-copy small{font:600 11px/1 var(--sans);letter-spacing:2px;opacity:.85}
.dest-copy h3{font:400 40px/1.1 var(--serif);margin:2px 0}
.dest-count{font:600 11px/1 var(--sans);letter-spacing:1.6px;opacity:.85}
.dest-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;margin-top:12px}
.dest-cta svg{width:15px;height:15px}

/* Promise */
.promise{text-align:center;padding:var(--sec) var(--gutter)}
.promise blockquote{margin:0 auto;max-width:900px;font:400 clamp(28px,3.4vw,42px)/1.25 var(--serif);color:var(--ink);text-wrap:balance}
.promise-sub{margin:24px 0 0;font:600 11px/1 var(--sans);letter-spacing:3px;color:var(--muted)}

/* Collections (dark) */
.dark{background:var(--ink);color:#E9E4D8}
.dark h2{color:var(--on-dark)}
.dark h2 em{color:var(--gold-2)}
.dark .eyebrow{color:var(--gold-2)}
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.col-card{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:.92;display:block;color:#fff}
.col-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.col-card:hover img{transform:scale(1.05)}
.col-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,38,0) 45%,rgba(8,16,38,.78))}
.col-card div{position:absolute;left:24px;right:24px;bottom:22px;z-index:1}
.col-card h3{font:400 28px/1.15 var(--serif);margin:0 0 6px}
.col-card p{margin:0;font-size:14px;opacity:.85}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;margin-top:40px;align-items:start}
.faq-list{display:grid;border-top:1px solid var(--line)}
.faq-list button{text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:20px 4px;font:500 16px/1.4 var(--sans);color:var(--muted);display:flex;justify-content:space-between;gap:14px}
.faq-list button::after{content:"→";color:var(--gold);opacity:0;transition:opacity .2s}
.faq-list button[aria-selected=true]{color:var(--ink)}
.faq-list button[aria-selected=true]::after{opacity:1}
.faq-card{background:var(--card);border-radius:12px;padding:36px;box-shadow:var(--shadow);min-height:290px;display:flex;flex-direction:column}
.faq-num{font:600 11px/1 var(--sans);letter-spacing:2px;color:var(--gold)}
.faq-card h3{font:400 28px/1.2 var(--serif);color:var(--ink);margin:16px 0 14px}
.faq-card p{color:var(--muted);margin:0 0 24px;max-width:56ch}
.faq-nav{margin-top:auto;display:flex;gap:10px}
.faq-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center}
.faq-nav button:hover{border-color:var(--ink)}

/* Owner calculator */
.owner-calc{background:var(--sand);padding-block:var(--sec)}
.calc-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.calc-intro h2{margin-bottom:18px}
.calc-intro>p:not(.eyebrow){color:var(--muted);max-width:46ch;margin:0}
.calc-points{list-style:none;padding:0;margin:28px 0;border-top:1px solid #D2C7B1}
.calc-points li{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid #D2C7B1;font-size:14.5px;color:var(--text)}
.calc-points b{font:400 32px/1 var(--serif);color:var(--ink);min-width:78px;font-weight:400}
.calc{background:var(--card);border-radius:14px;padding:32px;box-shadow:0 24px 60px rgba(19,36,77,.12);display:grid;gap:22px;min-width:0}
.calc-label{display:flex;justify-content:space-between;align-items:baseline;font:600 11px/1.3 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.calc-label output{font:600 16px var(--sans);letter-spacing:0;color:var(--ink);text-transform:none}
.seg{display:flex;background:#F2EDE3;border-radius:9px;padding:4px;gap:4px}
.seg label{flex:1;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:11px 6px;border-radius:7px;font-size:14px;color:#4A4F5E;transition:background .2s,color .2s}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--royal);outline-offset:2px}
.calc input[type=range]{width:100%;accent-color:var(--ink)}
.calc-help{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.money-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;padding:0 14px}
.money-input span{color:var(--muted)}
.money-input input{border:0;padding:14px 8px;font-size:17px;width:100%;background:transparent;font-variant-numeric:tabular-nums;outline:0}
.calc-result{border-top:1px solid var(--line);padding-top:22px;display:grid;gap:12px}
.calc-main small{display:block;font:600 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.calc-main strong{display:block;font:400 clamp(36px,4vw,50px)/1.1 var(--serif);color:var(--ink);margin:10px 0 4px;font-variant-numeric:tabular-nums}
.calc-main span{font-size:14px;color:var(--muted)}
.calc-rows div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid #EEE8DC;font-size:14px;font-variant-numeric:tabular-nums}
.calc-rows small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.calc-rows .calc-total{font-weight:700;color:var(--ink);border-top:1.5px solid var(--ink)}
.calc-note{font-size:12px;color:var(--muted);margin:0}
.calc-cta{height:54px;font-size:15px}

/* Footer */
.footer{background:var(--ink);color:#C9CCD6;padding-block:90px 34px}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:60px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand.light{color:#fff}
.ft-tag{font:400 clamp(26px,2.8vw,36px)/1.25 var(--serif);color:var(--on-dark);margin:28px 0 0;max-width:16ch}
.ft-tag em{color:var(--gold-2)}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,.8fr)) minmax(0,1.4fr);gap:24px}
.ft-cols h3{font:600 11px/1 var(--sans);letter-spacing:2px;color:var(--gold-2);margin:0 0 18px}
.ft-cols a,.ft-text{display:block;font-size:14px;margin-bottom:11px;color:#C9CCD6;overflow-wrap:anywhere}
.ft-cols a:hover{color:#fff}
.ft-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:26px;font-size:12.5px;color:#9096A6}

/* Dialog */
dialog{border:0;border-radius:14px;padding:0;width:min(860px,94vw);max-height:92vh;background:var(--bg);color:var(--text);box-shadow:0 40px 100px rgba(8,16,38,.35)}
dialog::backdrop{background:rgba(10,18,40,.6);backdrop-filter:blur(4px)}
.dlg-close{position:sticky;top:14px;float:right;margin:14px 14px -56px 0;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow)}
.detail-media{height:320px;background:var(--sand);position:relative;overflow:hidden}
.detail-media img{width:100%;height:100%;object-fit:cover}
.detail-slider{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.detail-slider::-webkit-scrollbar{display:none}
.detail-slider img{flex:0 0 100%;scroll-snap-align:start}
.ds-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow);z-index:2}
.ds-nav.prev{left:14px}.ds-nav.next{right:14px}
.ds-nav svg{width:18px;height:18px}
.ds-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.ds-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.ds-dots span.on{background:#fff}
.detail-copy{padding:28px 36px 6px}
.detail-copy .eyebrow{margin-bottom:8px}
.detail-copy h2{font-size:34px}
.facts{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.facts li{display:grid;gap:4px;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--card);font-size:12px;color:var(--muted)}
.facts svg{color:var(--gold)}
.facts b{font:600 16px var(--sans);color:var(--ink)}
.about{font-size:15px;color:var(--text);margin:0 0 14px;max-width:62ch}
.features{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.features li{background:var(--gold-soft);color:#6E5422;border-radius:99px;padding:6px 12px;font-size:12.5px}
.rates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rates div{border-top:1.5px solid var(--ink);padding-top:10px}
.rates small{display:block;font:600 11px/1.3 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.rates strong{font:700 21px var(--sans);color:var(--ink)}
#booking-form{padding:24px 36px 34px;border-top:1px solid var(--line);margin-top:22px}
.dlg-h{font-size:30px;margin:0 0 20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:14px}
#booking-form label{display:grid;gap:7px;font-size:13.5px;color:var(--ink);font-weight:500}
#booking-form input:not([type=checkbox]),#booking-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:12px 13px;font:400 15px var(--sans);color:var(--ink)}
#booking-form textarea{min-height:76px;resize:vertical}
.estimate{margin:16px 0;padding:14px 16px;background:var(--card);border-radius:10px;font-size:14px;color:var(--muted)}
.est-row{display:flex;justify-content:space-between;gap:14px;padding:3px 0;color:var(--text);font-variant-numeric:tabular-nums}
.est-total{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;font-weight:700;color:var(--ink)}
.est-warn{color:#A23B2A;font-weight:600}
#booking-form .consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--text);margin-bottom:12px}
.consent input{margin-top:4px}
.demo-note{background:var(--gold-soft);color:#6E5422;border-radius:8px;padding:11px 14px;font-size:13px;margin:0 0 14px}
.full{width:100%;height:54px;font-size:15.5px}
#booking-status{font-size:14px;color:var(--ink);margin:12px 0 0}
.book-success{padding:48px 36px 40px;text-align:center}
.book-success .bs-icon{width:64px;height:64px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;margin:0 auto 18px}
.book-success .bs-icon svg{width:30px;height:30px}
.book-success .eyebrow{text-align:center}
.book-success .dlg-h{margin-bottom:10px}
.book-success .bs-msg{color:var(--muted);font-size:15px;line-height:1.65;max-width:420px;margin:0 auto 28px}
.book-success .bs-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.book-success .bs-actions .btn-wa-lg,.book-success .bs-actions .btn-ghost{width:100%;max-width:320px;justify-content:center}
@media(max-width:640px){.book-success{padding:36px 20px 30px}}

/* Reviews */
.reviews .head-row{margin-bottom:26px}
.rev-nav{display:flex;gap:10px}
.rev-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center}
.rev-nav button:hover{border-color:var(--ink);background:var(--card)}
.rev-scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:26px}
.score{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:10px;padding:18px 20px;box-shadow:var(--shadow);transition:transform .25s}
.score:hover{transform:translateY(-2px)}
.score>div{display:grid;gap:2px;min-width:74px}
.score b{font:400 34px/1 var(--serif);color:var(--ink)}
.score .stars{color:#C99A2E;font-size:13px;letter-spacing:1px}
.score-sub{font-size:11px;color:var(--muted);letter-spacing:.5px}
.score p{margin:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;min-width:0}
.score small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:3px}
.src{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--sans);color:#fff;flex:none}
.src-g{background:#4A7FE0}
.src-a{background:#E8505B}
.rev-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rev-track:focus-visible{outline-offset:6px}
.rev{margin:0;scroll-snap-align:start;background:var(--card);border-radius:12px;padding:26px 26px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:250px}
.rev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.rev-stars{color:#C99A2E;letter-spacing:2px;font-size:15px}
.rev-stars i{font-style:normal;color:#E3DCCD}
.rev .src{width:24px;height:24px;font-size:11px}
.rev blockquote{margin:0 0 22px;font:400 19px/1.45 var(--serif);color:var(--ink);flex:1}
.rev figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid #EEE8DC;padding-top:16px}
.rev-av{width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font:400 17px/1 var(--serif);flex:none}
.rev figcaption b{display:block;font-size:14px;color:var(--ink)}
.rev figcaption small{display:block;font-size:12px;color:var(--muted)}

/* Instagram */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.ig-head h2{margin-bottom:12px}
.ig-stats{margin:0;color:var(--muted);font-size:14.5px}
.ig-stats b{color:var(--ink)}
.ig-stats span{color:var(--gold);margin:0 4px}
.ig-btn svg{width:18px;height:18px}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ig-grid a{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;display:block}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.ig-grid a::after{content:"";position:absolute;inset:0;background:rgba(19,36,77,0);transition:background .3s}
.ig-grid a:hover img{transform:scale(1.06)}
.ig-grid a:hover::after{background:rgba(19,36,77,.25)}
@media(max-width:1100px){.rev-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media(max-width:900px){.rev-scores{grid-template-columns:1fr}.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.rev-track{grid-auto-columns:86%}.rev blockquote{font-size:17px}}

/* Detail unit: kepala tetap terlihat saat scroll */
.detail-head{position:sticky;top:0;z-index:2;background:var(--bg);padding:24px 36px 4px;border-bottom:1px solid var(--line)}
.detail-head .eyebrow{margin-bottom:8px}
.detail-head h2{font-size:34px}
.detail-head .facts{margin:18px 0 16px}
.detail-copy{padding-top:14px}
.book-cta{display:grid;gap:12px;margin-top:4px}
.book-ask{margin:0;font-size:14px;color:var(--muted)}
.book-ask b{color:var(--ink);font-weight:600}
.book-actions{display:flex;gap:10px}
.btn-wa-lg{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 20px;border-radius:8px;background:#1F8F55;color:#fff;font:600 15px/1 var(--sans);white-space:nowrap;transition:background .2s}
.btn-wa-lg:hover{background:#18784A}
.btn-wa-lg svg{width:22px;height:22px;stroke-width:1.5}
.btn-book{flex:1;height:54px;font-size:16px}
@media(max-width:640px){.detail-head{padding:18px 64px 2px 20px}.detail-head h2{font-size:26px}.detail-head .facts{grid-template-columns:repeat(4,1fr);gap:6px}.detail-head .facts li{padding:8px;font-size:11px}.detail-head .facts svg{display:none}.detail-head .facts b{font-size:14px}.btn-wa-lg span{display:none}.btn-wa-lg{width:54px;padding:0}}

/* S&K di form, kontak */
.foot-actions{display:flex;gap:8px;align-items:center}
.btn-wa{width:40px;height:40px;border-radius:6px;background:#1F8F55;color:#fff;display:grid;place-items:center;transition:background .2s}
.btn-wa:hover{background:#18784A}
.btn-wa svg{width:21px;height:21px;stroke-width:1.5}
.terms-list{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;color:var(--text)}
#booking-form .terms-box .consent{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;font-weight:600;color:var(--ink)}
.terms-box{display:grid;gap:10px;background:var(--card);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.terms-h{margin:0 0 2px;font:600 12px/1.4 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
#booking-form .terms-box .consent{margin:0;font-size:13.5px;line-height:1.5}
.terms-box a,.alt-book a{color:var(--royal);text-decoration:underline;text-underline-offset:2px}
.alt-book{font-size:13px;color:var(--muted);text-align:center;margin:14px 0 0}
.ft-bottom a{text-decoration:underline;text-underline-offset:3px}
.rev-av svg{width:17px;height:17px}
.wa-float{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 20px 0 16px;border-radius:99px;background:#1F8F55;color:#fff;font:600 14px/1 var(--sans);box-shadow:0 12px 30px rgba(14,70,40,.35);transition:transform .2s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:24px;height:24px;stroke-width:1.5}
@media(max-width:640px){.wa-float{padding:0;width:54px;justify-content:center}.wa-float span{display:none}}

/* Halaman S&K */
.terms-page{padding-block:56px 90px}
.terms-page h1{font-size:clamp(36px,4vw,52px);line-height:1.08;margin:6px 0 14px}
.terms-meta{color:var(--muted);font-size:14px;margin:0 0 34px}
.terms-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.terms-toc{position:sticky;top:110px;display:grid;gap:2px;font-size:13.5px}
.terms-toc a{padding:7px 0;color:var(--muted);border-bottom:1px solid var(--line)}
.terms-toc a:hover{color:var(--ink)}
.terms-body{max-width:72ch}
.terms-body section{padding:4px 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.terms-body h2{font-size:26px;margin:0 0 14px}
.terms-body h2 span{color:var(--gold);margin-right:10px}
.terms-body p,.terms-body li{font-size:15px;color:var(--text)}
.terms-body ul{padding-left:20px;margin:0}
.terms-body li{margin-bottom:8px}
.terms-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 40px}
.terms-key div{background:var(--card);border-radius:10px;padding:16px;box-shadow:var(--shadow)}
.terms-key small{display:block;font:600 11px/1.3 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.terms-key b{font:400 22px/1.2 var(--serif);color:var(--ink)}
@media(max-width:900px){.terms-layout{grid-template-columns:1fr}.terms-toc{position:static;grid-template-columns:1fr 1fr;column-gap:16px}.terms-key{grid-template-columns:1fr 1fr}}

/* ===== v4: komponen baru ===== */
.nav a[aria-current=page]{color:var(--gold)}
.nav a[aria-current=page]::after{transform:scaleX(1)}
/* Dropdown lokasi */
.search{position:relative;z-index:6}
.dd{position:relative;flex:1;min-width:0}
.dd-btn{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:12px 14px;text-align:left;border-radius:8px}
.dd-btn:hover{background:#FAF7F1}
.dd-pin{width:22px;height:22px;color:var(--gold)}
.dd-text{display:grid;flex:1;min-width:0}
.dd-val{font:500 16.5px/1.3 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-chev{width:18px;height:18px;color:var(--ink);transition:transform .25s}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-list{position:absolute;left:-6px;top:calc(100% + 14px);width:calc(100% + 180px);max-width:min(460px,86vw);margin:0;padding:8px;list-style:none;background:var(--card);border-radius:14px;box-shadow:0 30px 70px rgba(19,36,77,.22),0 2px 6px rgba(19,36,77,.08);animation:pop .18s ease-out;z-index:20}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-list li{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:10px;cursor:pointer;outline:0}
.dd-list li:hover,.dd-list li:focus{background:#F6F1E7}
.dd-list img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none}
.dd-list li span{display:grid;flex:1;min-width:0}
.dd-list b{font:600 15px/1.3 var(--sans);color:var(--ink)}
.dd-list small{font-size:12.5px;color:var(--muted)}
.dd-list .ck{width:18px;height:18px;color:var(--gold);opacity:0}
.dd-list li[aria-selected=true] .ck{opacity:1}
.dd-list li[aria-selected=true]{background:#F6F1E7}
/* Tanggal & tamu */
.search-extra{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;max-width:560px}
.pop-wrap{position:relative}
.chip-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink);font:500 14px/1 var(--sans)}
.chip-btn:hover,.chip-btn[aria-expanded=true]{border-color:var(--ink);background:#fff}
.chip-btn svg{width:17px;height:17px;color:var(--gold)}
.stepper{display:inline-flex;align-items:center;gap:4px;height:42px;padding:0 6px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.6);font:500 14px/1 var(--sans);color:var(--ink)}
.stepper span{min-width:60px;text-align:center}
.stepper button{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center}
.stepper button:hover{background:#EFE8DA}
.stepper svg{width:15px;height:15px}
.cal-pop{position:absolute;left:0;top:calc(100% + 12px);z-index:30;width:min(720px,92vw);background:var(--card);border-radius:16px;padding:22px 24px 18px;box-shadow:0 30px 80px rgba(19,36,77,.24),0 2px 6px rgba(19,36,77,.08);animation:pop .18s ease-out}
/* Kalender */
.rcal{font-family:var(--sans)}
.rc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.rc-sum{font-size:14px;color:var(--muted)}
.rc-sum b{color:var(--ink);font-weight:600}
.rc-nav{display:flex;gap:6px}
.rc-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;line-height:1;display:grid;place-items:center}
.rc-nav button:hover:not(:disabled){border-color:var(--ink)}
.rc-nav button:disabled{opacity:.35;cursor:default}
.rc-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px}
.rc-mname{font:400 20px/1.2 var(--serif);color:var(--ink);text-align:center;margin-bottom:12px}
.rc-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px}
.rc-dow{font:600 10.5px/1 var(--sans);letter-spacing:.8px;color:var(--muted);text-align:center;padding-bottom:8px;text-transform:uppercase}
.rc-dow.we{color:var(--gold)}
.rc-day{position:relative;height:46px;border:0;background:transparent;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--ink);font-variant-numeric:tabular-nums;transition:background .12s}
.rc-day .n{font:500 14.5px/1 var(--sans)}
.rc-day .p{font-size:9.5px;color:var(--muted);line-height:1}
.rc-day:hover:not(:disabled){background:#F3EDE1}
.rc-day:disabled{color:#C9C3B6;cursor:default;text-decoration:line-through;text-decoration-color:#D8D2C4}
.rc-day:disabled .p{display:none}
.rc-day.blk{background:#F7E6E4;color:#B3463E;text-decoration:line-through;text-decoration-color:#E3B2AC}
.rc-day.blk .n{color:#B3463E}
.rc-day.pend{background:#FDF1DC;color:#8A5A09}
.rc-day.pend .n{color:#8A5A09}
.rc-day.pend:hover:not(:disabled){background:#FBE7C4}
.rc-day.pend.s,.rc-day.pend.e,.rc-day.pend.in{background:var(--ink);color:#fff}
.rc-day.pend.s .n,.rc-day.pend.e .n{color:#fff}
.rc-day.pend.in{background:#EFE6D1;color:var(--ink)}
.rc-day .dot{position:absolute;top:6px;right:8px;width:5px;height:5px;border-radius:50%;background:#C0392B}
.rc-day.hol-intl .dot{background:var(--royal)}
.rc-day.hol .n{color:#B03A2E}
.rc-day.hol-intl .n{color:var(--ink)}
.rc-day.in{background:#EFE6D1;border-radius:0}
.rc-day.hv{background:#F3EDE1}
.rc-day.s,.rc-day.e{background:var(--ink);color:#fff}
.rc-day.s .n,.rc-day.e .n{color:#fff}
.rc-day.s .p,.rc-day.e .p{color:#C9CEDC}
.rc-day.s{border-radius:10px 0 0 10px}.rc-day.e{border-radius:0 10px 10px 0}
.rc-day.s:not(.in)+.rc-day:not(.in):not(.e){}
.rc-day.s.e{border-radius:10px}
.rc-day.s:hover,.rc-day.e:hover{background:var(--ink)}
.rc-foot{margin-top:14px;padding-top:12px;border-top:1px solid #EEE8DC;display:grid;gap:10px}
.rc-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.rc-legend .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#C0392B}
.rc-legend .dot.intl{background:var(--royal)}
.rc-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.rc-legend .sw.blk{background:#F7E6E4;border:1px solid #E3B2AC}
.rc-legend .sw.pend{background:#FDF1DC;border:1px solid #F0D6A8}
.rc-ph{margin-left:auto}
.rc-hols{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rc-hols li{font-size:12px;background:#F6F1E7;border-radius:99px;padding:5px 10px;color:var(--text)}
.rc-hols b{color:var(--ink);margin-right:4px}
.rc-hols em{font-style:normal;font-size:10px;font-weight:700;color:var(--royal);margin-left:2px}
.rc-nohol{margin:0;font-size:12px;color:var(--muted)}
.rc-actions{display:flex;justify-content:space-between}
.rc-actions button{border:0;background:none;font:600 13.5px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
.rc-actions .rc-done{background:var(--ink);color:#fff;text-decoration:none;border-radius:8px;padding:10px 20px}
/* Kalender di form */
.date-pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;margin-bottom:14px}
.date-box{display:grid;gap:3px;text-align:left;background:none;border:0;padding:12px 16px;color:var(--ink)}
.date-box+.date-box{border-left:1px solid var(--line)}
.date-box small{font:700 10.5px/1 var(--sans);letter-spacing:1.4px;color:var(--muted)}
.date-box span{font:500 15px var(--sans)}
.form-cal{background:var(--card);border-radius:12px;padding:18px 20px 14px;margin-bottom:14px}
.est-hol{margin:8px 0 0;font-size:12.5px;color:#8A4B12;background:#FBF0DC;border-radius:8px;padding:8px 10px}
/* Destinasi gaya sonder */
.city-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;grid-template-rows:300px 300px;gap:18px}
.city{position:relative;border-radius:10px;overflow:hidden;display:block;color:#fff}
.city.big{grid-row:1/3}
.city.wide{grid-column:2/4}
.city img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.city:hover img{transform:scale(1.04)}
.city::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,45,0) 45%,rgba(10,20,45,.72))}
.city-copy{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;display:grid;gap:3px}
.city-copy small,.city-copy>span:not(.city-cta){font:600 11px/1 var(--sans);letter-spacing:2px;opacity:.88}
.city-copy h3{font:400 38px/1.05 var(--serif);margin:2px 0}
.city-cta{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:10px;padding:8px 14px;border:1px solid rgba(255,255,255,.6);border-radius:99px;font:600 12.5px/1 var(--sans);backdrop-filter:none;background:rgba(10,20,45,.25)}
.city-cta svg{width:14px;height:14px}
.city-more{grid-column:2/4;background:var(--card);border-radius:10px;padding:20px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.city-more ul{list-style:none;margin:6px 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 16px}
.city-more li{display:flex;align-items:center;gap:10px;min-width:0}
.city-more img{width:44px;height:44px;border-radius:50%;flex:none}
.city-more li span{display:grid;min-width:0}
.city-more b{font:600 13.5px/1.3 var(--sans);color:var(--ink)}
.city-more small{font-size:12px;color:var(--muted)}
.btn-wa-sm{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;height:40px;padding:0 16px;border-radius:8px;background:#1F8F55;color:#fff;font:600 13.5px var(--sans)}
.btn-wa-sm svg{width:18px;height:18px}
/* Collections: panel gelap berbentuk daftar */
.col-panel{background:var(--ink);border-radius:16px;padding:56px clamp(22px,4vw,56px);color:#D7DAE3}
.col-panel h2{color:var(--on-dark)}
.col-panel h2 em{color:var(--gold-2)}
.col-panel .eyebrow{color:var(--gold-2)}
.col-list{display:grid;border-top:1px solid rgba(255,255,255,.12)}
.col-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 110px 48px;align-items:center;gap:28px;padding:22px 6px;border-bottom:1px solid rgba(255,255,255,.12);transition:padding .25s,background .25s}
.col-row:hover{padding-left:16px;background:rgba(255,255,255,.03)}
.col-row h3{font:400 clamp(24px,2.2vw,32px)/1.15 var(--serif);color:#EFE9DC;margin:0}
.col-row p{margin:0;font-size:14.5px;color:#AEB4C4}
.col-row img{width:110px;height:76px;object-fit:cover;border-radius:8px}
.col-go{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;transition:background .25s,border-color .25s}
.col-row:hover .col-go{background:var(--gold-2);border-color:var(--gold-2)}
/* FAQ gaya sonder */
.faq-shell{background:#FAF7F1;border:1px solid var(--line);border-radius:18px;padding:56px clamp(22px,4vw,60px);box-shadow:0 10px 40px rgba(19,36,77,.05)}
.faq-shell .faq{margin-top:36px}
.faq-shell .faq-card{background:var(--sand);box-shadow:none}
.faq-card p a{color:var(--royal);text-decoration:underline;text-underline-offset:2px}
.faq-card .faq-nav{justify-content:flex-end}
/* Band owner */
.owner-band{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;background:var(--ink);border-radius:16px;padding:52px clamp(22px,4vw,56px);color:#C9CCD6}
.owner-band h2{color:var(--on-dark);margin-bottom:12px}
.owner-band h2 em{color:var(--gold-2)}
.owner-band .eyebrow{color:var(--gold-2)}
.owner-band p:not(.eyebrow){margin:0;max-width:56ch}
.owner-band-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:8px;background:linear-gradient(135deg,#CDA654,#9E7726);color:#fff;font:600 15px/1 var(--sans)}
.btn-gold svg{width:16px;height:16px}
.btn-ghost{display:inline-flex;align-items:center;height:54px;padding:0 22px;border-radius:8px;border:1px solid var(--ink);color:var(--ink);font:600 15px/1 var(--sans)}
.btn-ghost:hover{background:var(--ink);color:#fff}
/* Footer gaya sonder */
.ft-cols{grid-template-columns:repeat(5,minmax(0,1fr))}
.ft-mid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-company{display:flex;align-items:center;gap:14px}
.ft-company b{display:block;color:#fff;font-size:15px}
.ft-company span{font-size:13px;color:#9096A6}
.ft-contact{display:flex;gap:10px;flex-wrap:wrap}
.ft-contact a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#E3E6EE;font-size:13.5px}
.ft-contact a:hover{border-color:var(--gold-2)}
.ft-contact svg{width:17px;height:17px}
.ft-legal{font-size:12px;line-height:1.7;color:#7E8597;max-width:110ch;margin:24px 0 0}
.ft-bottom{border-top:0}
/* Halaman */
.page-hero{padding-block:64px 8px}
.page-hero h1,.o-hero h1{font-size:clamp(38px,4.4vw,60px);line-height:1.04;margin:6px 0 16px;letter-spacing:-.015em}
.page-sub{font-size:17px;color:var(--muted);max-width:62ch;margin:0}
.page-hero+.section{padding-top:36px}
.help-band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--sand);border-radius:14px;padding:36px 40px}
.help-band h2{font-size:30px;margin-bottom:8px}
.help-band p{margin:0;color:var(--muted);max-width:60ch}
/* Owners */
.o-hero{padding-block:56px 20px}
.o-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.o-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.o-hero-media{position:relative}
.o-hero-media img{width:100%;aspect-ratio:1.3;object-fit:cover;border-radius:14px}
.o-stat-card{position:absolute;left:-26px;bottom:28px;display:flex;align-items:center;gap:14px;background:var(--card);border-radius:12px;padding:16px 20px;box-shadow:0 20px 50px rgba(19,36,77,.18)}
.o-stat-card b{font:400 40px/1 var(--serif);color:var(--ink)}
.o-stat-card span{font:600 14px/1.3 var(--sans);color:var(--ink)}
.o-stat-card small{font-weight:400;color:var(--muted);font-size:12px}
.o-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.o-stats div{padding:24px 20px;border-right:1px solid var(--line)}
.o-stats div:last-child{border-right:0}
.o-stats b{display:block;font:400 clamp(30px,3vw,42px)/1 var(--serif);color:var(--ink);margin-bottom:8px}
.o-stats span{font-size:13.5px;color:var(--muted)}
.pain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:36px}
.pain-grid article{background:var(--card);border-radius:12px;padding:26px;box-shadow:var(--shadow)}
.pain-grid svg{width:28px;height:28px;color:var(--gold);margin-bottom:18px;stroke-width:1.3}
.pain-grid h3{font:400 22px/1.2 var(--serif);color:var(--ink);margin:0 0 8px}
.pain-grid p{margin:0;font-size:14.5px;color:var(--muted)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.12);margin-top:36px;border-radius:12px;overflow:hidden}
.svc-grid div{background:var(--ink);padding:28px 26px}
.svc-grid b{font:600 12px var(--sans);letter-spacing:2px;color:var(--gold-2)}
.svc-grid h3{font:400 24px/1.2 var(--serif);color:#EFE9DC;margin:12px 0 8px}
.svc-grid p{margin:0;font-size:14.5px;color:#AEB4C4}
.flow{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;counter-reset:f}
.flow li{position:relative;background:var(--card);border-radius:12px;padding:20px 16px;font:500 15px/1.3 var(--sans);color:var(--ink);box-shadow:var(--shadow)}
.flow li span{display:block;font:400 26px/1 var(--serif);color:var(--gold);margin-bottom:10px}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:14px;z-index:1}
.split-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.split{background:var(--card);border-radius:12px;padding:26px;box-shadow:var(--shadow)}
.split small{font:600 11px var(--sans);letter-spacing:1.8px;color:var(--muted)}
.split-n{display:flex;align-items:baseline;gap:8px;margin:12px 0 14px;flex-wrap:wrap}
.split-n b{font:400 44px/1 var(--serif);color:var(--ink);font-weight:400}
.split-n span{font-size:13px;color:var(--muted)}
.split-n i{font-style:normal;color:var(--line);font-size:28px}
.split-bar{height:8px;border-radius:99px;background:#EEE6D5;overflow:hidden;margin-bottom:14px}
.split-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ink),#2C4A8C)}
.split p{margin:0;font-size:14px;color:var(--muted)}
.rule-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:26px;border-top:1px solid var(--line)}
.rule-grid div{padding:22px 22px 0 0;margin-right:22px;border-right:1px solid var(--line)}
.rule-grid div:last-child{border-right:0}
.rule-grid h3{font:600 15.5px/1.3 var(--sans);color:var(--ink);margin:0 0 6px}
.rule-grid p{margin:0;font-size:14px;color:var(--muted)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.two-col h2{margin-bottom:22px}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.check-list li{display:flex;gap:12px;font-size:15px;color:var(--text)}
.check-list svg{width:20px;height:20px;color:#1F8F55;margin-top:2px;stroke-width:2}
.kit{display:grid;gap:14px}
.kit div{background:var(--card);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow)}
.kit h3{font:400 22px/1.2 var(--serif);color:var(--ink);margin:0 0 6px}
.kit p{margin:0;font-size:14.5px;color:var(--muted)}
/* About */
.a-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.a-media{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}
.a-media img{width:100%;height:380px;object-fit:cover;border-radius:12px}
.lead{font-size:18px;line-height:1.65;color:var(--text);max-width:52ch}
.mission{margin:0;padding:0;list-style:none;counter-reset:m;display:grid;gap:14px}
.mission li{counter-increment:m;display:grid;grid-template-columns:44px 1fr;gap:8px;font-size:15.5px;color:var(--text);padding-bottom:14px;border-bottom:1px solid var(--line)}
.mission li::before{content:"0" counter(m);font:400 22px/1.2 var(--serif);color:var(--gold)}
.loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px}
.loc{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow)}
.loc img{width:68px;height:68px;border-radius:50%;flex:none}
.loc b{display:block;font:600 15px/1.3 var(--sans);color:var(--ink)}
.loc small{color:var(--muted);font-size:13px}
.contact-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;background:var(--ink);border-radius:16px;padding:52px clamp(22px,4vw,56px);color:#C9CCD6}
.contact-panel h2{color:var(--on-dark);margin-bottom:12px}
.contact-panel h2 em{color:var(--gold-2)}
.contact-panel .eyebrow{color:var(--gold-2)}
.contact-list{display:grid;gap:10px}
.contact-list>*{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid rgba(255,255,255,.14);border-radius:10px;color:#E3E6EE}
.contact-list a:hover{border-color:var(--gold-2)}
.contact-list svg{width:22px;height:22px;color:var(--gold-2)}
.contact-list b{display:block;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#9096A6;font-weight:600}
.terms-body.wide{max-width:80ch}
@media(max-width:1100px){
 .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
 .city-grid{grid-template-columns:1fr 1fr;grid-template-rows:280px 280px auto}
 .city.big{grid-row:auto;grid-column:1/2}.city.wide{grid-column:2/3}.city-more{grid-column:1/3}
 .city.big,.city.wide{height:340px}
 .flow{grid-template-columns:repeat(4,minmax(0,1fr))}.flow li::after{display:none}
 .pain-grid,.rule-grid{grid-template-columns:1fr 1fr}
 .svc-grid{grid-template-columns:1fr 1fr}
 .col-row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 48px}.col-row img{display:none}
}
@media(max-width:900px){
 .o-hero-grid,.a-hero,.two-col,.contact-panel{grid-template-columns:1fr;gap:32px}
 .o-stat-card{left:12px;bottom:12px}
 .o-stats{grid-template-columns:1fr 1fr}.o-stats div:nth-child(2){border-right:0}.o-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .a-media{grid-template-columns:1fr 1fr}.a-media img{height:240px}.a-media img:first-child{grid-column:1/-1}
 .loc-grid{grid-template-columns:1fr 1fr}
 .split-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
 .search-extra{flex-direction:column}
 .chip-btn,.stepper{width:100%;justify-content:center}
 .pop-wrap{width:100%}
 .cal-pop{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:80vh;overflow:auto;z-index:60}
 .dd-list{width:calc(100% + 12px);left:-6px}
 .rc-day{height:42px}
 .date-pair{grid-template-columns:1fr 1fr}
 .form-cal{padding:14px 10px}
 .city-grid{grid-template-columns:1fr;grid-template-rows:none}
 .city.big,.city.wide{grid-column:auto;height:300px}.city-more{grid-column:auto}
 .col-row{grid-template-columns:1fr 46px;gap:12px}.col-row p{grid-column:1/2;grid-row:2}.col-go{grid-row:1/3;grid-column:2}
 .faq-shell{padding:30px 18px}
 .ft-cols{grid-template-columns:1fr 1fr}
 .flow,.pain-grid,.rule-grid,.svc-grid,.loc-grid{grid-template-columns:1fr}
 .rule-grid div{border-right:0;margin-right:0;padding-right:0}
 .owner-band,.help-band{padding:32px 22px}
}

/* v5: grid 4 kolom seperti sonder */
.grid-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card-media{aspect-ratio:1.85}
.card-body{padding:16px 16px 16px}
.card h3{font-size:16.5px}
.rev-track{grid-auto-columns:calc((100% - 60px)/4)}
.rev blockquote{font-size:17.5px}
.long-stay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;background:var(--card);border-radius:16px;padding:44px clamp(22px,4vw,52px);box-shadow:var(--shadow)}
.long-stay h2{margin-bottom:14px}
.long-stay img{width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:12px}
.long-stay .check-list{margin:22px 0 26px}
@media(max-width:1400px){.grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.rev-track{grid-auto-columns:calc((100% - 40px)/3)}}
@media(max-width:900px){.long-stay{grid-template-columns:1fr}}

/* Responsive */
@media(max-width:1100px){
 .nav{gap:20px;font-size:13.5px}
 .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .standards{grid-template-columns:1fr 1fr}
 .standards article:nth-child(2){border-right:0;margin-right:0}
 .ft-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
 :root{--sec:60px}
 .nav{display:none}
 .menu-toggle{display:grid}
 .btn-owner span{display:none}
 .btn-owner{padding:0 12px}
 .hero{grid-template-columns:1fr}
 .hero-copy{padding:44px var(--gutter) 40px;margin:0;max-width:none}
 .hero-media{min-height:320px;order:-1}
 .nb-panel,.faq,.calc-wrap,.ft-top{grid-template-columns:1fr;gap:30px}
 .nb-panel{padding:18px}
 .col-grid{grid-template-columns:1fr 1fr}
 .col-grid .col-card:last-child{grid-column:1/-1;aspect-ratio:1.8}
}
@media(max-width:640px){
 .hd{height:68px}
 .brand span{font-size:20px}
 .brand img{width:32px}
 .hero h1{font-size:38px}
 .search{flex-direction:column;align-items:stretch;padding:8px}
 .search-btn{height:52px;width:100%}
 .search-more-grid{grid-template-columns:1fr 1fr}
 .search-more-grid label:last-child{grid-column:1/-1}
 .grid-cards,.dest-grid,.col-grid{grid-template-columns:1fr}
 .col-grid .col-card:last-child{aspect-ratio:.92}
 .standards{grid-template-columns:1fr}
 .standards article{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding:24px 0}
 .filter-tools{width:100%;justify-content:space-between}
 .dest-copy h3{font-size:32px}
 .faq-card{padding:24px}
 .calc{padding:20px}
 .seg span{font-size:13px;padding:10px 4px}
 .ft-cols{grid-template-columns:1fr 1fr}
 .detail-media{height:220px}
 .detail-copy,#booking-form{padding-inline:20px}
 .facts{grid-template-columns:1fr 1fr}
 .rates,.form-grid{grid-template-columns:1fr}
 .trust-track{gap:40px}
}
@media(prefers-reduced-motion:reduce){
 *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
 .slide{transform:none}
}

/* ===================== Tahap 3: akun tamu, Pesanan Saya, Kupon ===================== */
.btn-akun{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 6px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 13.5px/1 var(--sans);transition:border-color .2s,background .2s}
.btn-akun:hover{border-color:var(--ink)}
.btn-akun .av{width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;font:700 13px/1 var(--sans)}
.btn-akun .av svg{width:16px;height:16px}
.btn-akun.masuk .av{background:var(--ink);color:#FBF8F2}
@media(max-width:900px){.btn-akun span:not(.av){display:none}.btn-akun{padding:0 5px;width:42px;justify-content:center}}

/* halaman akun */
.akun-main{min-height:60vh}
.akun-wrap{max-width:1080px;margin:0 auto;padding-inline:var(--gutter)}
.akun-hero{padding-block:52px 18px}
.akun-hero h1{font-size:clamp(34px,4vw,52px);line-height:1.06;margin:4px 0 10px;letter-spacing:-.015em}
.akun-hero .page-sub{font-size:16px}
.akun-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 26px;border-bottom:1px solid var(--line);padding-bottom:14px}
.akun-tabs a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--line);color:var(--ink);font:500 14px/1 var(--sans);background:transparent}
.akun-tabs a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#FBF8F2}
.akun-tabs a .n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--gold-soft);color:#6E5422;font:700 11px/20px var(--sans);text-align:center}
.akun-tabs a[aria-current=page] .n{background:var(--gold-2);color:#13244D}
.akun-tabs .spacer{flex:1}
.akun-card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:24px clamp(18px,3vw,30px);margin-bottom:18px}
.akun-card h2{font-size:26px;margin:0 0 6px}
.akun-card h3{font:600 17px/1.3 var(--sans);color:var(--ink);margin:0 0 6px}
.akun-card p{margin:0 0 12px}
.akun-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 12px}
.akun-sec-h h2{font-size:24px}
.akun-sec-h small{color:var(--muted);font-size:13px}
.akun-kosong{text-align:center;padding:42px 20px}
.akun-kosong .ik{width:58px;height:58px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;margin:0 auto 14px}
.akun-kosong .ik svg{width:26px;height:26px}
.akun-kosong p{color:var(--muted);max-width:44ch;margin:0 auto 18px}
.akun-info{display:flex;gap:12px;align-items:flex-start;background:var(--gold-soft);color:#5B4519;border-radius:10px;padding:12px 16px;font-size:14px;margin-bottom:16px}
.akun-info svg{margin-top:2px;color:var(--gold)}
.akun-info.bad{background:#F8E4DF;color:#7A2A1C}
.akun-info.ok{background:#E2F1E8;color:#1D5B39}
.akun-info a{text-decoration:underline;text-underline-offset:2px}
.akun-loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:40px 0}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);animation:putar .8s linear infinite;display:inline-block}
@keyframes putar{to{transform:rotate(360deg)}}

/* login */
.login-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:start;padding-bottom:64px}
.login-card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:30px clamp(20px,3.4vw,40px)}
.login-card h2{font-size:30px;margin:0 0 8px}
.login-card .lead{color:var(--muted);margin:0 0 22px}
.btn-sosial{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#1F2430;font:600 15px/1 var(--sans);margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.btn-sosial:hover{border-color:#B8B0A0;box-shadow:0 2px 8px rgba(19,36,77,.08)}
.btn-sosial svg{width:20px;height:20px}
.btn-sosial.apple{background:#000;border-color:#000;color:#fff}
.btn-sosial.apple svg{fill:#fff;stroke:none}
.atau{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:16px 0}
.atau::before,.atau::after{content:"";flex:1;height:1px;background:var(--line)}
.form-akun{display:grid;gap:14px}
.form-akun label{display:grid;gap:7px;font-size:13.5px;color:var(--ink);font-weight:500}
.form-akun input,.form-akun textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px 13px;font:400 15px var(--sans);color:var(--ink)}
.form-akun input[readonly]{background:var(--bg-2);color:var(--muted)}
.form-akun .hint{font-weight:400;color:var(--muted);font-size:12.5px}
.form-akun .btn-navy{width:100%}
.form-akun .baris2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-pesan{font-size:14px;margin:4px 0 0;min-height:1.2em}
.form-pesan.bad{color:#A23B2A}.form-pesan.ok{color:#1D6B42}
.login-kecil{font-size:12.5px;color:var(--muted);margin:16px 0 0;text-align:center}
.login-kecil a{color:var(--royal);text-decoration:underline;text-underline-offset:2px}
.manfaat{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.manfaat li{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.manfaat .ik{width:40px;height:40px;border-radius:10px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;flex:none}
.manfaat b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.manfaat span{color:var(--muted);font-size:14px}
.cek-email{text-align:center}
.cek-email .ik{width:64px;height:64px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;margin:0 auto 16px}
.cek-email .ik svg{width:28px;height:28px}

/* pesanan */
.pesanan-list{display:grid;gap:14px}
.pesanan{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:18px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px}
.pesanan .p-atas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;grid-column:1/-1}
.pesanan .kode{font:600 13px/1 var(--sans);letter-spacing:.4px;color:var(--muted)}
.pesanan h3{font:600 18px/1.35 var(--sans);color:var(--ink);margin:4px 0 2px}
.pesanan .tgl{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14.5px;flex-wrap:wrap}
.pesanan .tgl svg{color:var(--gold)}
.pesanan .p-harga{text-align:right;align-self:end}
.pesanan .p-harga small{display:block;color:var(--muted);font-size:12px}
.pesanan .p-harga b{font:700 20px/1.2 var(--sans);color:var(--ink)}
.pesanan .p-harga s{color:var(--muted);font-size:13px;margin-right:6px}
.pesanan .kupon-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#6E5422;background:var(--gold-soft);border-radius:99px;padding:3px 10px;margin-top:6px}
.pesanan .kupon-tag svg{width:14px;height:14px}
.pesanan .p-aksi{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.pesanan .p-aksi .info{flex:1;min-width:200px;color:var(--muted);font-size:13px}
.st-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font:600 12px/1 var(--sans)}
.st-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-menunggu{background:#FBF0D6;color:#8A6416}
.st-terkonfirmasi{background:#E3EAF8;color:#1E4796}
.st-selesai{background:#E2F1E8;color:#1D6B42}
.st-dibatalkan{background:#F6E3DF;color:#9A3524}
.btn-kecil{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 13.5px/1 var(--sans)}
.btn-kecil:hover{border-color:var(--ink)}
.btn-kecil svg{width:16px;height:16px}
.btn-kecil.wa{background:#1F8F55;border-color:#1F8F55;color:#fff}
.btn-kecil.bahaya{color:#A23B2A;border-color:#E6C2BA}
.btn-kecil.bahaya:hover{background:#A23B2A;color:#fff;border-color:#A23B2A}
.btn-merah{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:#A23B2A;color:#fff;font:600 15px/1 var(--sans);padding:0 22px;height:48px}
.btn-merah:disabled{opacity:.45;cursor:not-allowed}
.klaim{margin-top:22px}
.klaim summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.klaim summary::-webkit-details-marker{display:none}
.klaim summary svg{transition:transform .2s;color:var(--gold)}
.klaim[open] summary svg{transform:rotate(180deg)}
.klaim .form-akun{margin-top:14px;grid-template-columns:1fr 1fr auto;align-items:end}

/* kupon */
.kupon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.tiket .btn-kecil{height:34px;padding:0 11px;font-size:13px}
.tiket{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);background:var(--card);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;min-height:150px}
.tiket .nilai{background:linear-gradient(160deg,var(--ink),#22386E);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 8px;border-right:2px dashed rgba(255,255,255,.35)}
.tiket .nilai b{font:400 30px/1 var(--serif);color:var(--gold-2)}
.tiket .nilai b.rp{font-size:20px}
.tiket .nilai small{font:600 10.5px/1.3 var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--on-dark);margin-top:6px}
.tiket .isi{padding:14px 16px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tiket h3{font:600 16px/1.3 var(--sans);color:var(--ink);margin:0}
.tiket .syarat{font-size:12.5px;color:var(--muted);margin:0}
.tiket .kode-baris{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.tiket .kode{font:700 13px/1 var(--sans);letter-spacing:1px;color:var(--ink);background:var(--bg);border:1px dashed var(--gold);border-radius:6px;padding:7px 10px}
.tiket.mati{opacity:.62}
.tiket.mati .nilai{background:#8D8F99}
.tiket .st{position:absolute;top:10px;right:10px}

/* kotak masuk */
.notif-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notif-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.notif-list li:last-child{border-bottom:0}
.notif-list .titik{width:9px;height:9px;border-radius:50%;background:var(--gold-2);margin-top:7px;flex:none}
.notif-list b{display:block;color:var(--ink);font-size:14.5px}
.notif-list span{color:var(--muted);font-size:13.5px}

/* profil & hapus akun */
.profil-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;align-items:start}
.zona-bahaya{border:1px solid #EBC9C1;background:#FFF9F7}
.zona-bahaya h2{color:#7A2A1C}
.zona-bahaya ul{margin:0 0 16px;padding-left:20px;color:var(--text);font-size:14px;display:grid;gap:6px}
dialog.akun-dialog{width:min(520px,94vw);padding:0}
.akun-dialog .ad-isi{padding:26px 26px 22px}
.akun-dialog h2{font-size:26px;margin:0 0 10px}
.akun-dialog p{color:var(--text);margin:0 0 14px;font-size:15px}
.akun-dialog .ad-aksi{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.akun-dialog .ad-aksi .btn-kecil{height:48px;padding:0 18px}
.akun-dialog .btn-navy{height:48px}

/* booking dialog: akun & kupon */
.akun-strip{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:13.5px;color:var(--text)}
.akun-strip .av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#FBF8F2;display:grid;place-items:center;font:700 13px/1 var(--sans);flex:none}
.akun-strip .av.tamu{background:var(--gold-soft);color:var(--gold)}
.akun-strip .av svg{width:16px;height:16px}
.akun-strip a{color:var(--royal);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.kupon-box{background:var(--card);border-radius:10px;padding:14px 16px;margin:0 0 14px}
.kupon-box .kb-h{display:flex;align-items:center;gap:8px;font:600 13.5px/1.3 var(--sans);color:var(--ink);margin:0 0 10px}
.kupon-box .kb-h svg{color:var(--gold)}
.kupon-box .kb-baris{display:flex;gap:8px}
#booking-form .kupon-box input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.5px}
.kupon-box .kb-btn{height:46px;padding:0 18px;border-radius:8px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:600 14px/1 var(--sans);white-space:nowrap}
.kupon-box .kb-btn:hover{background:var(--ink);color:#fff}
.kupon-box .kb-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kupon-box .kb-chips button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;border:1px dashed var(--gold);background:var(--gold-soft);color:#6E5422;font:600 12.5px/1 var(--sans)}
.kupon-box .kb-chips button[aria-pressed=true]{background:var(--ink);border-style:solid;border-color:var(--ink);color:#fff}
.kupon-box .kb-status{font-size:13.5px;margin:10px 0 0}
.kupon-box .kb-status.ok{color:#1D6B42}.kupon-box .kb-status.bad{color:#A23B2A}
.kupon-box .kb-hapus{background:none;border:0;color:var(--royal);text-decoration:underline;font-size:13px;padding:0;margin-left:6px}
.est-kupon{color:#1D6B42}
.bs-total{font:600 15px/1.4 var(--sans);color:var(--ink);margin:-14px auto 22px;max-width:420px}

@media(max-width:900px){
 .login-grid,.profil-grid{grid-template-columns:1fr}
 .manfaat{order:2}
}
@media(max-width:640px){
 .akun-hero{padding-block:34px 8px}
 .akun-tabs{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
 .akun-tabs::-webkit-scrollbar{display:none}
 .akun-tabs a{padding:0 12px;flex:none}
 .akun-tabs .spacer{display:none}
 .pesanan{grid-template-columns:1fr;padding:16px}
 .pesanan .p-harga{text-align:left}
 .klaim .form-akun,.form-akun .baris2{grid-template-columns:1fr}
 .tiket{grid-template-columns:96px minmax(0,1fr)}
 .tiket .nilai b{font-size:24px}
 .tiket .nilai b.rp{font-size:16px;white-space:nowrap}
 .kupon-grid{grid-template-columns:1fr}
 .akun-dialog .ad-aksi{flex-direction:column-reverse}
 .akun-dialog .ad-aksi>*{width:100%;justify-content:center}
}

/* v6: 4 kolom unit di layar laptop & desktop (permintaan Hengky 28 Okt 2026) */
@media(min-width:1101px){.grid-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cards .card-foot{flex-wrap:wrap;row-gap:12px}.grid-cards .card-foot>:first-child{flex:1 1 100%}.grid-cards .foot-actions{flex:1 1 100%;display:flex;gap:8px}.grid-cards .foot-actions .btn-unit{flex:1;text-align:center}}

/* ===================== Revisi 29 Okt 2026 ===================== */
/* bahasa ID · EN */
.lang-sw{display:inline-flex;align-items:center;gap:2px;height:42px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:var(--card);font:600 12.5px/1 var(--sans);color:#A59C8E}
.lang-sw button{border:0;background:none;padding:6px 6px;border-radius:6px;font:inherit;letter-spacing:.6px;color:#A59C8E}
.lang-sw button:hover{color:var(--ink)}
.lang-sw button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold-2)}
.lang-sw-menu{display:flex;height:auto;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:12px 0;gap:6px}
.lang-sw-menu .ls-lbl{flex:1;font:500 15px/1 var(--sans);color:var(--ink);letter-spacing:0}
.lang-sw-menu button{padding:8px 12px;border:1px solid var(--line);font-size:13px}
.lang-sw-menu button.on{background:var(--ink);color:#FBF8F2;border-color:var(--ink);box-shadow:none}
@media(max-width:640px){.hd-actions .lang-sw{display:none}}
html[lang=en] [data-lang-blok=id],html:not([lang=en]) [data-lang-blok=en]{display:none!important}

/* kotak pencarian: [Tipe kamar] | [Ke mana tujuanmu?] [Search] */
.search{display:grid;grid-template-columns:minmax(0,.9fr) auto minmax(0,1.15fr) auto;gap:4px;max-width:680px}
.search-sep{width:1px;height:38px;background:var(--line)}
.search-btn{min-width:132px}
.search-btn svg{width:18px;height:18px}
.dd-cap{font:600 10.5px/1.4 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold)}
.search-extra{max-width:680px}
.dd-ik{width:46px;height:46px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold)}
.dd-ik svg{width:20px;height:20px}
.dd-list li[aria-disabled=true]{cursor:not-allowed;opacity:.62}
.dd-list li[aria-disabled=true]:hover{background:transparent}
.dd-list li[aria-disabled=true] img{filter:grayscale(1)}
.dd-badge{font:600 10px/1 var(--sans);font-style:normal;letter-spacing:1px;text-transform:uppercase;color:#6E5422;background:var(--gold-soft);padding:6px 8px;border-radius:99px;white-space:nowrap}
.dd-list{max-height:min(540px,72vh);overflow:auto}
/* dropdown ringkas (lokasi & urutkan di atas daftar unit) */
.dd-compact{flex:none;min-width:0}
.dd-compact .dd-btn{height:40px;padding:0 12px;gap:8px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.dd-compact .dd-btn:hover{border-color:var(--ink);background:var(--card)}
.dd-compact .dd-text{display:flex;align-items:baseline;gap:6px}
.dd-compact .dd-cap{font:400 13px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.dd-compact .dd-val{font:600 13.5px/1 var(--sans);max-width:200px}
.dd-compact .dd-pin{width:16px;height:16px}
.dd-compact .dd-chev{width:15px;height:15px}
.dd-compact .dd-list{top:calc(100% + 8px);left:0;width:340px;max-width:min(340px,calc(100vw - 32px))}
.dd-sort .dd-list{left:auto;right:0;width:300px}
.dd-sort .dd-list li{padding:12px 14px}
.dd-sort .dd-list b{font-size:14px;font-weight:500}
.filter-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stepper-sm{height:40px;border-radius:8px;background:var(--card)}
.stepper-sm span{min-width:88px;font-size:13.5px}
.result-count{color:var(--ink)}
.empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.empty-actions .btn-navy{height:54px}
.empty p{color:var(--muted);max-width:52ch;margin:0 auto}

/* teks berjalan: info pemeliharaan website */
.trust-info{height:64px;background:linear-gradient(90deg,#FBF8F2,#F6EFE0 50%,#FBF8F2)}
.trust-info .trust-track{gap:38px;animation-duration:64s}
.trust-info .t-serif{font-size:20px;color:#7C735F}
.trust-info .t-serif i{color:var(--ink)}
.trust-info .t-caps{color:#9A8C70;letter-spacing:2.2px}
.t-star{color:var(--gold-2);font-size:13px}
.trust-hp{display:none}
@media(max-width:900px){
 .trust-hp{display:flex;order:-1;height:50px;border-top:0}
 .trust-info:not(.trust-hp){display:none}
 .trust-hp .t-serif{font-size:17px}
 .trust-hp .t-caps{font-size:11px}
}

/* lokasi lain yang kami kelola */
.city-grid{grid-template-rows:300px minmax(300px,auto)}
.city-more{padding:22px 24px}
.city-more ul.loc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 12px;margin:8px 0 16px}
.loc-list li{min-width:0}
.loc-list a,.loc-list li.soon{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;min-width:0;transition:background .2s}
.loc-list a:hover,.loc-list a:focus-visible{background:#F6F1E7}
.city-more .loc-list img,.loc-ik{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none}
.loc-ik{display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);font:400 20px/1 var(--serif)}
.loc-tx{display:grid;min-width:0;flex:1}
.loc-tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-go{width:15px;height:15px;color:var(--gold);opacity:.55;transition:transform .2s,opacity .2s}
.loc-list a:hover .loc-go{opacity:1;transform:translateX(3px)}
.loc-list li.soon{cursor:default}
.loc-list li.soon img,.loc-list li.soon .loc-ik{filter:grayscale(1);opacity:.6}
.loc-list li.soon b{color:var(--muted)}
.loc-badge{font:600 9.5px/1 var(--sans);font-style:normal;letter-spacing:1px;text-transform:uppercase;color:#6E5422;background:var(--gold-soft);padding:6px 8px;border-radius:99px;white-space:nowrap}
@media(max-width:1100px){.city-grid{grid-template-rows:280px auto}}
@media(max-width:640px){.city-grid{grid-template-rows:none}.city-more ul.loc-list{grid-template-columns:1fr}}

/* footer: lokasi segera hadir */
.ft-soon{color:#8F95A6}
.ft-soon small{font:600 10px/1 var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--gold-2);margin-left:4px}

/* detail unit: jam check-in / check-out */
.jam-unit{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 14px;padding:8px 14px;border-radius:8px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--text)}
.jam-unit svg{width:17px;height:17px;color:var(--gold)}
.jam-unit b{color:var(--ink)}
.jam-unit i{font-style:normal;color:var(--gold-2)}

/* tombol kembali ke atas */
.to-top{position:fixed;right:27px;bottom:calc(22px + 52px + 14px + env(safe-area-inset-bottom,0px));z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:var(--ink);color:#FBF8F2;display:grid;place-items:center;box-shadow:0 10px 26px rgba(19,36,77,.3);animation:pop .2s ease-out;transition:background .2s,transform .2s}
.to-top:hover{background:var(--ink-2);transform:translateY(-2px)}
.to-top svg{width:20px;height:20px;stroke-width:2}
@media(max-width:640px){.to-top{right:27px;bottom:calc(22px + 54px + 12px + env(safe-area-inset-bottom,0px))}}

/* HP: kotak pencarian bertumpuk */
@media(max-width:640px){
 .search{grid-template-columns:1fr;gap:2px}
 .search-sep{width:auto;height:1px;margin:0 12px}
 .search .dd-list{width:calc(100% + 12px);left:-6px;max-width:none}
 .filter-tools{width:100%;justify-content:flex-start}
 .dd-compact .dd-val{max-width:140px}
 .dd-sort{margin-left:auto}
}

/* penyesuaian setelah uji tampilan */
.dd-list li span.dd-ik{display:grid;flex:none;width:46px}
.search{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
.search .dd-btn{padding:12px 10px;gap:10px}
.city-grid{grid-template-columns:1.45fr 1fr 1fr;grid-template-rows:360px auto}
.city.big{grid-row:1/2}
.city.wide{grid-column:2/4}
.city-more{grid-column:1/4}
.city-more ul.loc-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media(max-width:1100px){.city-grid{grid-template-columns:1fr 1fr;grid-template-rows:300px auto}.city.big{grid-column:1/2}.city.wide{grid-column:2/3}.city-more{grid-column:1/3}}
@media(max-width:640px){
 .city-grid{grid-template-columns:1fr;grid-template-rows:none}.city.big,.city.wide,.city-more{grid-column:auto}
 .filter-bar .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter);width:calc(100% + var(--gutter) * 2)}
 .filter-bar .pills::-webkit-scrollbar{display:none}
 .filter-bar .pill{flex:none}
 .stepper.stepper-sm{width:auto}
 .filter-tools{gap:10px}
}
.search .dd-cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.9px}
.ft-soon small{display:block;margin:4px 0 0}

/* HP: kotak pencarian bertumpuk (harus setelah aturan grid di atas) */
@media(max-width:640px){.search{grid-template-columns:1fr}.search-sep{width:auto;height:1px}}

/* ---------- dialog tombol Portal Owner: Partner / Join Partner (revisi 29 Okt b) ---------- */
html.po-buka{overflow:hidden}
dialog.po-dlg{width:min(580px,calc(100vw - 32px));max-height:min(720px,calc(100dvh - 32px));border-radius:20px;background:var(--bg-2);color:var(--text);padding:0;overflow:auto;box-shadow:0 40px 100px rgba(8,16,38,.38);overscroll-behavior:contain}
dialog.po-dlg::backdrop{background:rgba(10,18,40,.62);backdrop-filter:blur(5px)}
dialog.po-dlg[open]{animation:po-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes po-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog.po-dlg[open]{animation:none}}
.po-in{position:relative;padding:44px 44px 38px}
.po-in::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#CDA654,#9E7726 60%,var(--ink))}
.po-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;transition:border-color .2s}
.po-x:hover{border-color:var(--ink)}
.po-x svg{width:18px;height:18px}
.po-step .eyebrow{margin-bottom:12px}
.po-step h2{font-size:clamp(28px,3.4vw,36px);line-height:1.12;margin:0 48px 10px 0}
.po-step h2 em{font-style:normal;color:var(--gold)}
.po-sub{margin:0 0 26px;color:var(--muted)}
.po-opsi{display:grid;gap:14px}
.po-card{display:flex;align-items:center;gap:18px;width:100%;text-align:left;padding:20px 20px 20px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(19,36,77,.05);transition:border-color .2s,box-shadow .2s,transform .2s}
.po-card:hover{border-color:var(--gold-2);box-shadow:0 12px 30px rgba(19,36,77,.10);transform:translateY(-1px)}
.po-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--ink);color:var(--on-dark)}
.po-ic-gold{background:linear-gradient(135deg,#CDA654,#9E7726);color:#fff}
.po-ic svg{width:24px;height:24px}
.po-tx{display:grid;gap:4px;min-width:0}
.po-tx b{font:400 22px/1.15 var(--serif);color:var(--ink)}
.po-tx small{font-size:14px;line-height:1.5;color:var(--muted)}
.po-arr{margin-left:auto;color:var(--gold);width:20px;height:20px;transition:transform .2s}
.po-card:hover .po-arr{transform:translateX(3px)}
.po-back{display:inline-flex;align-items:center;gap:6px;margin:-8px 0 18px;padding:6px 10px 6px 6px;border:0;border-radius:8px;background:none;color:var(--muted);font:500 14px/1 var(--sans)}
.po-back:hover{color:var(--ink);background:var(--sand)}
.po-teks{margin:0 0 26px;color:var(--text);line-height:1.7;white-space:pre-line}
.po-wa{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:10px;background:#1F8F55;color:#fff;font:600 16px/1 var(--sans);box-shadow:0 8px 22px rgba(31,143,85,.28);transition:background .2s}
.po-wa:hover{background:#18784A}
.po-wa svg{width:22px;height:22px;stroke-width:1.5}
.po-kontak{margin:12px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.po-more{display:flex;align-items:center;justify-content:center;gap:6px;margin:20px auto 0;width:max-content;font:600 12px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);border-bottom:1px solid currentColor;padding-bottom:4px}
.po-more svg{width:15px;height:15px}
@media(max-width:640px){
 dialog.po-dlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:calc(100dvh - 24px)}
 dialog.po-dlg[open]{animation-name:po-naik}
 @keyframes po-naik{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
 .po-in{padding:34px 20px calc(26px + env(safe-area-inset-bottom))}
 .po-x{top:12px;right:12px}
 .po-step h2{font-size:28px;margin-right:44px}
 .po-sub{margin-bottom:20px}
 .po-card{gap:14px;padding:16px 14px}
 .po-ic{width:44px;height:44px;border-radius:12px}
 .po-ic svg{width:21px;height:21px}
 .po-tx b{font-size:20px}
 .po-tx small{font-size:13.5px}
}

/* ==== Pita pengumuman "website sedang perbaikan" (rev 2026-10-29c) ====
   Paling atas halaman, di atas header (tidak menempel, jadi tidak menutupi header). Navy + emas, bisa ditutup. */
.rs-umum{position:relative;z-index:41;background:linear-gradient(90deg,#0F1D40,#13244D 50%,#0F1D40);color:#F3E9CF;border-bottom:1px solid rgba(201,162,76,.45);transition:opacity .2s,transform .2s}
.rs-umum::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);opacity:.8}
.rs-umum.tutup{opacity:0;transform:translateY(-6px)}
.rs-umum-in{max-width:var(--max);margin:0 auto;padding:9px var(--gutter);display:flex;align-items:center;gap:12px;min-height:46px}
.rs-umum-ik{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(201,162,76,.16);border:1px solid rgba(201,162,76,.5);color:var(--gold-2);flex:none}
.rs-umum-ik svg{width:15px;height:15px}
.rs-umum-tx{margin:0;flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.45;letter-spacing:.1px}
.rs-umum-wa{display:inline-flex;align-items:center;gap:7px;flex:none;height:32px;padding:0 14px;border-radius:99px;background:var(--gold-2);color:#13244D;font-size:12.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap;transition:background .2s}
.rs-umum-wa:hover,.rs-umum-wa:focus-visible{background:#D9B666}
.rs-umum-wa svg{width:15px;height:15px}
.rs-umum-x{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;border-radius:50%;background:transparent;color:#E6D7B3;margin-right:-6px}
.rs-umum-x:hover,.rs-umum-x:focus-visible{background:rgba(255,255,255,.1);color:#fff}
.rs-umum-x svg{width:16px;height:16px}
.rs-umum :focus-visible{outline-color:var(--gold-2)}
@media(max-width:640px){
 .rs-umum-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:5px 9px;padding:7px 12px 8px 16px;min-height:0}
 .rs-umum-ik{width:22px;height:22px;margin-top:1px}
 .rs-umum-ik svg{width:12px;height:12px}
 .rs-umum-tx{font-size:12px;line-height:1.4}
 .rs-umum-wa{grid-column:2;justify-self:start;height:26px;padding:0 11px;gap:6px;font-size:11.5px}
 .rs-umum-wa svg{width:13px;height:13px}
 .rs-umum-x{grid-column:3;grid-row:1;width:28px;height:28px;margin:-4px -4px 0 0}
}
@media(prefers-reduced-motion:reduce){.rs-umum{transition:none}}
@media print{.rs-umum{display:none}}
/* Lokasi kami (Tentang kami) dari data: 10 lokasi, bisa diklik ke daftar unit; "segera hadir" redup */
.loc-grid .loc-ik{width:68px;height:68px;border-radius:50%;font-size:26px}
a.loc{transition:transform .2s,box-shadow .2s}
a.loc:hover,a.loc:focus-visible{transform:translateY(-2px);box-shadow:0 2px 4px rgba(19,36,77,.08),0 14px 30px rgba(19,36,77,.1)}
.loc-soon{opacity:.72}
.loc-soon small{color:var(--gold)}
/* ---- revisi 30 Okt: kartu SOLD OUT (tanggal terpilih penuh) ---- */
.card.is-soldout{pointer-events:none;cursor:not-allowed;box-shadow:0 1px 3px rgba(19,36,77,.08);background:#F3F2EF}
.card.is-soldout:hover{transform:none;box-shadow:0 1px 3px rgba(19,36,77,.08)}
.card.is-soldout .card-ph,.card.is-soldout .card-media .badge,.card.is-soldout .fav,.card.is-soldout .card-body{filter:grayscale(1);opacity:.5}
.card-ph{width:100%;height:100%}
.card-ph img,.card-ph .no-photo{width:100%;height:100%;object-fit:cover}
.soldout-ribbon{position:absolute;left:-12%;right:-12%;top:50%;transform:translateY(-50%) rotate(-12deg);z-index:2;background:rgba(179,38,30,.92);color:#fff;text-align:center;font:700 clamp(18px,2.2vw,24px)/1 var(--sans);letter-spacing:.32em;padding:14px 0 14px .32em;box-shadow:0 6px 18px rgba(0,0,0,.22);border-top:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.card.is-soldout .btn-unit{background:#8B8F99}
.card.is-soldout .btn-wa{background:#9AA0A6}
.so-tx{color:#B3261E;font-weight:700}
@media(max-width:640px){.soldout-ribbon{font-size:20px;padding:12px 0 12px .32em}}

/* ---- revisi 30 Okt: fasilitas unit ber-ikon, dikelompokkan ---- */
.fasilitas{margin:4px 0 22px;padding:18px 0 4px;border-top:1px solid var(--line,#E7E1D6)}
.fas-judul{font:400 22px/1.2 var(--serif);margin:0 0 12px;color:var(--ink)}
.fas-grup{margin:0 0 18px}
.fas-grup h4{font:700 11px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--gold,#A88340);margin:0 0 8px}
.fas-grup ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 18px}
.fas-grup li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);min-width:0;line-height:1.3}
.fas-grup li span{min-width:0;overflow-wrap:anywhere}
.fas-ik{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.fas-grup ul{grid-template-columns:1fr 1fr;gap:8px 12px}.fas-grup li{font-size:13px;gap:8px}.fas-ik{width:18px;height:18px}}

/* rev 2026-10-30a */

/* ==== Uji ukuran layar HP/tablet + pembungkus aplikasi Android/iOS (rev 2026-11-02u) ====
   Safe area memakai env(); di browser biasa nilainya 0, jadi tampilan web tidak berubah. */
/* status bar aplikasi: konten tidak tampil di bawah jam/notch; header menempel di bawah status bar */
body{padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:#13244D;z-index:45;pointer-events:none}
.site-header{top:env(safe-area-inset-top,0px)}
/* sisi kiri/kanan saat landscape (notch / bar navigasi Android): seluruh halaman digeser masuk */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.footer{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
.wa-float{right:calc(22px + env(safe-area-inset-right,0px))}
.to-top{right:calc(27px + env(safe-area-inset-right,0px))}
/* dialog (detail unit, akun, portal owner) tidak masuk ke area notch / home indicator */
dialog{max-height:calc(100dvh - 2 * max(4vh,env(safe-area-inset-top,0px),env(safe-area-inset-bottom,0px)));max-width:calc(100vw - 2 * max(3vw,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))}
dialog.po-dlg{max-height:min(720px,calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)))}
@media(max-width:640px){.cal-pop{bottom:calc(12px + env(safe-area-inset-bottom,0px));max-height:calc(80vh - env(safe-area-inset-bottom,0px))}}
/* Ulasan tamu: aturan v5 (4/3 kolom) menimpa aturan HP/tablet -> kartu jadi sangat sempit. Dikembalikan: */
@media(max-width:1100px){.rev-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media(max-width:640px){.rev-track{grid-auto-columns:86%}}
/* Kontak (Tentang kami) di HP 320 px: email/alamat panjang tidak mendorong kotak keluar layar */
.contact-list>*>span{min-width:0;overflow-wrap:anywhere}
/* Tombol "Lihat unit" = aksi utama di kartu -> target sentuh ≥ 40 px */
.btn-unit{min-height:40px}
/* tablet 901–1023 px (mis. Android 10" landscape 962 px): menu teks berdesakan & logo tertimpa -> pakai tombol menu */
@media(min-width:901px) and (max-width:1023px){.nav{display:none}.menu-toggle{display:grid}}
/* menu HP/tablet terbuka: daftar bisa digulir (landscape HP 393 px tinggi -> tautan bawah tadinya tak terjangkau) */
.mobile-nav{max-height:calc(100dvh - 84px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media(max-width:640px){.mobile-nav{max-height:calc(100dvh - 68px - env(safe-area-inset-top,0px))}}
/* HP sangat kecil (320–360 px): logo "Royal Suites." tidak tertimpa tombol akun/owner/cari/menu */
@media(max-width:360px){.hd{gap:10px}.hd-actions{gap:6px}.hd-actions .btn-square{width:40px;height:40px}.brand{gap:8px;min-width:0}.brand img{width:28px}.brand span{font-size:17px}}
/* rev 2026-11-02u */

/* rev 2026-11-04a: unggah ulang dengan content-type text/css */