/* DESA55 modern emerald / champagne: scoped visual layer. */
:root { --desa-ink: #071d19; --desa-panel: #102e27; --desa-emerald: #146c50; --desa-gold: #e7c77c; --desa-text: #f4f7f2; --desa-muted: #c0d0c8; }
html, body { background: radial-gradient(ellipse at 68% 12%, #123c30 0%, #071d19 58%, #061510 100%) !important; }
body::before { background: linear-gradient(90deg, #257859, #e7c77c, #257859); box-shadow: 0 0 8px #e7c77c33; }
.vc-header { background: linear-gradient(180deg, #214437 0%, #102c24 48%, #0b201b 100%) !important; border-bottom: 1px solid #e7c77c55; box-shadow: inset 0 1px 0 #ffffff26, 0 8px 24px #00000026; }
.vc-header .m-header__search-field { background: #0a211b; color: #f4f7f2; border-color: #527661; }
.vc-header .input-group { background: #0a211b !important; border: 1px solid #6e8662; border-radius: 12px; overflow: hidden; }
.m-header__search-submit { background: #e7c77c !important; color: #071d19 !important; }
.m-header__search-submit svg { fill: #071d19; }
.m-explore-nav__link { border-radius: 12px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.m-explore-nav__link:hover, .m-explore-nav__link:focus-visible { background: linear-gradient(180deg, #ffffff18, #ffffff05); border-color: #e7c77c66; }
.n-columns-2 { gap: 12px; margin: 16px auto; padding: 0 16px; max-width: 1400px; }
.login, .register, .btn-x, .jt-popup-btn, .footer-btn-tgl { border-radius: 12px; text-shadow: none; letter-spacing: .6px; border: 1px solid #70957e; background: linear-gradient(180deg, #286c51, #134832); color: #f4f7f2; box-shadow: inset 0 1px 0 #ffffff26, 0 5px 14px #00000026; }
.register, .btn-x:first-child, .jt-popup-btn:first-child, .footer-btn-tgl.daftar { background: linear-gradient(180deg, #f2d999, #d6b265); color: #071d19; border-color: #f4dfaa; }
.login:hover, .register:hover, .btn-x:hover, .jt-popup-btn:hover, .footer-btn-tgl:hover { text-shadow: none; border-color: #f2d999; box-shadow: inset 0 1px 0 #ffffff40, 0 6px 18px #00000040; }
.register:hover, .btn-x:first-child:hover, .jt-popup-btn:first-child:hover, .footer-btn-tgl.daftar:hover { background: linear-gradient(180deg, #f8e6b5, #e7c77c); color: #071d19; }
h1.h__h1--sm { font-size: clamp(27px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -.8px; font-weight: 800; color: #f4f7f2; }
.m-design__price--regular { color: #e7c77c !important; text-shadow: none; }
p.PDq2pG_selectionAnchorContainer { color: #c0d0c8; text-align: left !important; font-size: 16px; line-height: 1.75; }
.tp-text-note { border-color: #65896c; border-radius: 12px; }
.DESA55-container { background: linear-gradient(135deg, #153b2f, #0b211b) !important; border: 1px solid #9e935e; border-radius: 20px; box-shadow: 0 18px 40px #00000026; }
.DESA55-container h2 { font-size: clamp(27px, 3vw, 36px); color: #e7c77c; text-shadow: none; letter-spacing: -.5px; }
.DESA55-container details { background: #0c241e !important; border: 1px solid #385b47; border-radius: 14px; padding: 22px 24px; box-shadow: inset 0 1px 0 #ffffff08; }
.DESA55-container summary, .DESA55-container summary::before { color: #e7c77c; text-shadow: none; }
.DESA55-container details p { color: #d2ded6; border-color: #e7c77c; }
.rb-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 16px; }
.rb-card { background: linear-gradient(145deg, #15372c, #0b241c) !important; border: 1px solid #55724f; border-radius: 18px; }
.rb-card::before { background: linear-gradient(135deg, #e7c77c70, #438e6640); }
.rb-text { color: #d2ded6; line-height: 1.8; }
.rb-footer, .rb-quote { color: #e7c77c; }
#jt-popup { background-color: #02100bc9 !important; }
#jt-popup-box { background: linear-gradient(155deg, #214735, #0b251c) !important; border-color: #b4a268; box-shadow: 0 24px 80px #00000099, inset 0 1px 0 #ffffff26; }
#jt-popup-img { box-shadow: 0 6px 20px #00000033; border-color: #b4a268; }
#jt-close { background: #e7c77c; color: #071d19; text-shadow: none; box-shadow: 0 4px 12px #00000055; }
.jt-popup-title { text-shadow: none; color: #f4f7f2; }
.footer-floating-tgl { width: calc(100% - 32px); max-width: 1200px; padding: 12px; gap: 10px; background: linear-gradient(180deg, #315440f2 0%, #163828f5 45%, #092419fa 100%) !important; border: 1px solid #afab7599; border-radius: 18px; box-shadow: inset 0 1px 0 #ffffff40, 0 12px 32px #00000066; }
.footer-btn-tgl { background: linear-gradient(180deg, #ffffff12, #ffffff02); min-height: 46px; }
.footer-btn-tgl img { filter: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #f2d999; outline-offset: 3px; }
@media (max-width: 780px) {
 .rb-wrap { grid-template-columns: minmax(0, 1fr); }
 .DESA55-container { margin: 28px 12px; padding: 30px 18px; }
 .DESA55-container details { padding: 18px 16px; }
 .DESA55-container summary { font-size: 16px; line-height: 1.5; }
 .footer-floating-tgl { flex-wrap: nowrap; width: calc(100% - 20px); gap: 5px; padding: 8px; bottom: 10px; }
 .footer-btn-tgl { flex: 1 1 0; flex-direction: column; gap: 5px; font-size: 9px; letter-spacing: 0; padding: 9px 2px; min-height: 54px; border-radius: 10px; }
 .footer-btn-tgl img { width: 18px; height: 18px; }
 h1.h__h1--sm { font-size: 28px; line-height: 1.16; }
}
@media (prefers-reduced-motion: reduce) {
 .DESA55-container, .DESA55-container::before, .DESA55-container::after, .DESA55-container h2, .rb-card::before, .footer-floating-tgl, .footer-floating-tgl::before, .footer-floating-tgl::after, .footer-btn-tgl, .star-rain * { animation: none !important; }
}
/* Keep the existing motion while bringing its colors into the same palette. */
@keyframes borderPulse {
 0% { border-color: #6e7952; box-shadow: 0 12px 34px #00000026; }
 100% { border-color: #b6a56d; box-shadow: 0 12px 34px #00000033; }
}
@keyframes titleGlow {
 0%, 100% { color: #e7c77c; text-shadow: 0 1px 0 #00000033; }
}
@keyframes borderPulseFooter {
 0% { border-color: #8d9468; box-shadow: inset 0 1px 0 #ffffff30, 0 12px 32px #00000066; }
 100% { border-color: #c5b782; box-shadow: inset 0 1px 0 #ffffff40, 0 12px 32px #00000066; }
}
@keyframes rbBorder { 0%, 100% { filter: none; } }
.rb-card::before { border-radius: inherit; }
.btn-x:first-of-type { background: linear-gradient(180deg, #f2d999, #d6b265); color: #071d19; border-color: #f4dfaa; }
.btn-x:first-of-type:hover { background: linear-gradient(180deg, #f8e6b5, #e7c77c); color: #071d19; }