/* Tema situs publik Royal Mulia (emas + biru tua). Dimuat setelah app.css dan menimpa variabel warnanya. */
:root{
  --green:#12283C; --green-2:#1D3D5B; --cream:#FBF8F1; --sand:#F4EDDD; --line:#E8DDC5;
  --terra:#B8892B; --terra-2:#9A7020; --ink:#1F2933; --muted:#667085; --white:#FFFFFF;
  --gold:#C9A13B; --gold-soft:#F3E6BF; --promo:#D62E2E;
}
h1,h2,h3{color:var(--green)}
.eyebrow{color:var(--terra)}
.btn{background:var(--terra);color:#fff} .btn:hover{background:var(--terra-2)}
.btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)} .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-wa{background:#1FA855;color:#fff} .btn-wa:hover{background:#178a45}
.btn-green{background:var(--green)} .btn-green:hover{background:var(--green-2)}
a{color:var(--terra-2)}
.topbar{background:var(--green)}
.topbar .wrap{min-height:60px}
.brand{display:flex;align-items:center}
.brand img{height:40px;width:auto;display:block}

/* hero dengan foto render */
.hero{position:relative;overflow:hidden;background:var(--green);padding:0;min-height:520px;display:flex;align-items:flex-end}
.hero>picture,.hero>img{position:absolute;inset:0;width:100%;height:100%}
.hero img.bg{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,40,60,.04) 0%,rgba(18,40,60,.30) 40%,rgba(18,40,60,.88) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:190px;padding-bottom:36px}
.hero h1{color:#fff;font-size:2.05rem;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero p{color:#EEF1F4;font-size:1.05rem;max-width:560px}
.hero .price{font:700 1.7rem var(--serif);color:var(--gold);margin:.3rem 0 1.1rem}
.hero .price small{font:500 .9rem var(--font);color:#E6EAEE;margin-left:.3rem}
.hero .eyebrow{color:var(--gold);text-shadow:0 1px 10px rgba(0,0,0,.75)}
.badge-promo{position:absolute;z-index:3;top:18px;left:14px;width:128px;height:128px;border-radius:50%;background:var(--promo);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-9deg);box-shadow:0 6px 18px rgba(0,0,0,.35);border:3px solid #fff;padding:8px;line-height:1.05}
.badge-promo b{font:800 .8rem var(--font);letter-spacing:.06em}
.badge-promo strong{font:800 1.55rem var(--font);margin:2px 0}
.badge-promo span{font:700 .68rem var(--font)}

/* strip promo */
.promo{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.promo div{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:14px 12px;text-align:center}
.promo strong{display:block;font:800 1.15rem var(--serif);color:var(--green)}
.promo span{font-size:.82rem;color:var(--muted)}
.note{font-size:.8rem;color:var(--muted);margin-top:12px}

/* kartu tipe */
.types{display:grid;gap:16px}
.type{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.type .plan{background:#fff;padding:12px;border-bottom:1px solid var(--line);text-align:center}
.type .plan img{max-height:340px;width:auto;max-width:100%;margin:0 auto;display:block}
.type .body{padding:16px 18px 18px}
.type h3{font-size:1.35rem;margin:0}
.type .lblt{color:var(--muted);font-size:.9rem;margin-bottom:.4rem}
.type .price-tag{font:800 1.4rem var(--serif);color:var(--terra-2);margin:.5rem 0 .2rem}
.type details{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.type summary{cursor:pointer;font-weight:700;color:var(--green);min-height:36px;display:flex;align-items:center}
.type dl{display:grid;grid-template-columns:1fr;gap:6px;margin:8px 0 0;font-size:.9rem}
.type dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:5px}
.type dt{color:var(--muted)} .type dd{margin:0;text-align:right;font-weight:600}

/* galeri & lokasi */
.gallery{display:grid;gap:12px}
.gallery img{width:100%;border-radius:14px;display:block}
.dist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.dist div{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px}
.dist strong{display:block;font:800 1.2rem var(--serif);color:var(--terra-2)}
.dist span{font-size:.85rem;color:var(--muted)}
.mapimg{border-radius:14px;border:1px solid var(--line);width:100%;height:auto;display:block;background:#fff}

.stickybar{background:#fff;border-top:1px solid var(--line)}
footer.site{background:var(--green)}

@media(min-width:760px){
  .hero{min-height:620px} .hero h1{font-size:2.7rem} .hero .wrap{padding-top:160px}
  .badge-promo{width:150px;height:150px;top:30px;left:32px} .badge-promo strong{font-size:1.85rem}
  .promo{grid-template-columns:repeat(4,1fr)}
  .types{grid-template-columns:repeat(3,1fr)} .type .plan img{max-height:300px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .dist{grid-template-columns:repeat(4,1fr)}
  .two.loc{align-items:start}
}

/* Galeri geser di HP, grid di desktop */
.gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}
.gallery img{flex:0 0 88%;width:88%;scroll-snap-align:center;height:auto}
@media(min-width:760px){.gallery{display:grid;overflow:visible;scroll-snap-type:none}.gallery img{width:100%}}
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:3px solid var(--gold,#B8892B);outline-offset:2px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,20,30,.94);display:flex;flex-direction:column;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;overflow:auto;-webkit-overflow-scrolling:touch}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;border-radius:6px}
.lb.is-zoom .lb-stage{align-items:flex-start;justify-content:flex-start}
.lb.is-zoom .lb-stage img{max-width:none;max-height:none;width:200%;cursor:zoom-out}
.lb-x{position:absolute;top:10px;right:12px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1}
.lb-cap{margin:0;padding:10px 16px 16px;color:#dfe6ee;font-size:.85rem;text-align:center}
html.lb-open{overflow:hidden}