/* Gaya bersama untuk halaman simulasi Raden Studio. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #131722; background: #fff; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.wadah-demo { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.penanda-simulasi { position: fixed; z-index: 1000; inset: 0 0 auto; height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; background: #0b0d12; color: #fff; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 12px; }
.penanda-simulasi strong { color: #45c7ff; letter-spacing: .08em; text-transform: uppercase; }
.aksi-simulasi { display: flex; gap: 12px; }
.aksi-simulasi a { padding: 10px 14px; border: 1px solid rgba(255,255,255,.25); font-weight: 700; }
.aksi-simulasi a:last-child { background: #45c7ff; border-color: #45c7ff; color: #071018; }
.situs-demo { padding-top: 58px; }
.mode-pratinjau .penanda-simulasi { display: none; }
.mode-pratinjau .situs-demo { padding-top: 0; }
.catatan-fiktif { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }

/* Demo 01: Nusa Teknik -------------------------------------------------- */
.tema-nusa { background: #0e1115; color: #fff; }
.tema-nusa .kepala-nusa { position: absolute; z-index: 3; inset: 58px 0 auto; border-bottom: 1px solid rgba(255,255,255,.15); }
.mode-pratinjau.tema-nusa .kepala-nusa { top: 0; }
.tema-nusa .navigasi-nusa { height: 88px; display: flex; align-items: center; gap: 36px; }
.merek-nusa { margin-right: auto; font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.merek-nusa i { color: #f2a900; font-style: normal; }
.tema-nusa nav { display: flex; gap: 25px; font-size: 12px; font-weight: 700; }
.tema-nusa .tombol-nusa { padding: 13px 16px; background: #f2a900; color: #111; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.hero-nusa { position: relative; min-height: 760px; display: grid; align-items: center; overflow: hidden; background: linear-gradient(90deg, rgba(7,9,12,.96) 0 44%, rgba(7,9,12,.54) 72%, rgba(7,9,12,.2)), url('nusa-gedung.jpg') center/cover; }
.hero-nusa::after { content: ''; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(transparent, #0e1115); }
.isi-nusa { position: relative; z-index: 2; max-width: 690px; padding-top: 90px; }
.isi-nusa .kode { display: inline-flex; align-items: center; gap: 12px; color: #f2a900; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.isi-nusa .kode::before { content: ''; width: 42px; height: 2px; background: currentColor; }
.isi-nusa h1 { margin: 23px 0; max-width: 760px; font-size: clamp(54px, 7vw, 96px); line-height: .92; letter-spacing: -.055em; text-transform: uppercase; }
.isi-nusa p { max-width: 570px; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.75; }
.data-nusa { position: absolute; z-index: 3; right: 0; bottom: 42px; display: grid; grid-template-columns: repeat(3, 155px); background: #f2a900; color: #111; }
.data-nusa div { padding: 22px; border-left: 1px solid rgba(0,0,0,.18); }
.data-nusa strong { display: block; font-size: 28px; }
.data-nusa span { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.layanan-nusa { padding: 90px 0; background: #0e1115; }
.layanan-nusa h2 { max-width: 660px; font-size: 46px; text-transform: uppercase; }
.grid-nusa { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #343a42; }
.grid-nusa article { padding: 28px 30px 40px 0; border-right: 1px solid #343a42; }
.grid-nusa article + article { padding-left: 30px; }
.grid-nusa span { color: #f2a900; font-size: 11px; }
.grid-nusa h3 { margin-top: 50px; }
.grid-nusa p { color: #88919c; line-height: 1.7; }

/* Demo 02: Ruang Tata --------------------------------------------------- */
.tema-ruang { color: #1b2731; background: #f4f7f6; font-family: Georgia, 'Times New Roman', serif; }
.kepala-ruang { background: rgba(255,255,255,.92); border-bottom: 1px solid #dfe7e3; }
.navigasi-ruang { height: 92px; display: flex; align-items: center; gap: 34px; }
.merek-ruang { margin-right: auto; display: flex; align-items: center; gap: 12px; font: 800 20px Arial, sans-serif; }
.ikon-ruang { width: 36px; height: 36px; display: grid; place-items: center; background: #176b5d; color: #fff; border-radius: 50% 50% 50% 12px; }
.tema-ruang nav { display: flex; gap: 28px; font: 700 12px Arial, sans-serif; }
.tema-ruang .tombol-ruang { padding: 13px 18px; border-radius: 99px; background: #176b5d; color: #fff; font: 700 11px Arial, sans-serif; }
.hero-ruang { min-height: 690px; display: grid; grid-template-columns: 1.03fr .97fr; }
.isi-ruang { padding: 85px max(32px, calc((100vw - 1180px)/2)); padding-right: 50px; background: #edf2ef; }
.isi-ruang .label { color: #176b5d; font: 800 11px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.isi-ruang h1 { margin: 22px 0; font-size: clamp(58px, 6vw, 88px); line-height: .98; letter-spacing: -.055em; font-weight: 500; }
.isi-ruang h1 em { color: #176b5d; }
.isi-ruang p { max-width: 550px; color: #596a66; font: 16px/1.8 Arial, sans-serif; }
.aksi-ruang { display: flex; gap: 12px; margin-top: 34px; }
.aksi-ruang a { padding: 14px 18px; border: 1px solid #176b5d; font: 800 11px Arial, sans-serif; }
.aksi-ruang a:first-child { background: #176b5d; color: #fff; }
.foto-ruang { position: relative; min-height: 690px; background: linear-gradient(rgba(9,55,47,.08),rgba(9,55,47,.08)), url('ruang-tata-gedung.jpg') center/cover; }
.kartu-ruang { position: absolute; left: -60px; bottom: 45px; width: 270px; padding: 25px; background: #fff; box-shadow: 0 25px 60px rgba(30,55,48,.18); }
.kartu-ruang strong { display: block; color: #176b5d; font-size: 36px; }
.kartu-ruang span { font: 700 11px Arial, sans-serif; }
.bagian-dp-ruang { padding: 105px 0; overflow: hidden; background: radial-gradient(circle at 20% 90%, rgba(23,107,93,.08), transparent 32%), #fff; text-align: center; }
.isi-dp-ruang { display: grid; justify-items: center; }
.label-dp-ruang { color: #176b5d; font: 800 11px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.lingkaran-dp-ruang { --progres: 100; position: relative; width: min(330px, 72vw); aspect-ratio: 1; display: grid; place-items: center; margin: 42px auto 38px; border-radius: 50%; background: conic-gradient(#efb700 calc(var(--progres) * 1%), #e5eae8 0); box-shadow: 0 24px 70px rgba(34,67,59,.09); }
.lingkaran-dp-ruang::before { content: ''; position: absolute; inset: 7px; border-radius: inherit; background: #fff; }
.lingkaran-dp-ruang > div { position: relative; z-index: 1; display: flex; align-items: baseline; color: #1b2731; font-family: Arial, sans-serif; }
.lingkaran-dp-ruang strong { font-size: clamp(66px, 8vw, 94px); line-height: 1; letter-spacing: -.07em; }
.lingkaran-dp-ruang span { margin-left: 7px; color: #176b5d; font-size: 28px; font-weight: 800; }
.isi-dp-ruang > p { max-width: 640px; margin: 0 auto 22px; color: #596a66; font: 16px/1.8 Arial, sans-serif; }
.layanan-ruang { padding: 90px 0; background: #fff; }
.layanan-ruang .grid-ruang { display: grid; grid-template-columns: .8fr repeat(3,1fr); gap: 0; }
.layanan-ruang h2 { margin: 0; font-size: 42px; }
.layanan-ruang article { padding: 10px 25px 30px; border-left: 1px solid #dce5e1; }
.layanan-ruang article span { color: #176b5d; font: 800 11px Arial, sans-serif; }
.layanan-ruang article p { color: #6e7a76; font: 14px/1.65 Arial, sans-serif; }

/* Demo 03: Kissaten ----------------------------------------------------- */
.tema-kissaten { color: #35261f; background: #f4e7ce; font-family: Georgia, 'Times New Roman', serif; }
.kepala-kissaten { border-bottom: 2px solid #563627; background: #f4e7ce; }
.navigasi-kissaten { height: 86px; display: flex; align-items: center; }
.merek-kissaten { font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.merek-kissaten span { display: block; font: 9px Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; }
.tema-kissaten nav { margin-left: auto; display: flex; gap: 28px; font: 700 11px Arial, sans-serif; text-transform: uppercase; }
.hero-kissaten { position: relative; min-height: 700px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; }
.isi-kissaten { padding: 92px max(32px, calc((100vw - 1180px)/2)); padding-right: 40px; }
.isi-kissaten .aksara { color: #a8492c; font-size: 18px; letter-spacing: .15em; }
.isi-kissaten h1 { margin: 18px 0; font-size: clamp(70px, 9vw, 130px); line-height: .78; letter-spacing: -.08em; }
.isi-kissaten h1 em { display: block; margin-left: 90px; color: #a8492c; }
.isi-kissaten p { max-width: 520px; margin-top: 45px; color: #69554a; font: 15px/1.8 Arial, sans-serif; }
.isi-kissaten a { display: inline-block; margin-top: 24px; padding: 14px 20px; background: #563627; color: #fff; font: 800 11px Arial, sans-serif; text-transform: uppercase; }
.visual-kissaten { position: relative; display: grid; place-items: center; background: #b95434; }
.matahari-kissaten { width: 410px; height: 410px; display: grid; place-items: center; border-radius: 50%; background: #f5cf78; box-shadow: 0 0 0 28px rgba(87,43,30,.11); }
.cangkir-kissaten { position: relative; width: 230px; height: 160px; border-radius: 12px 12px 80px 80px; background: #f4e7ce; border: 8px solid #563627; box-shadow: inset 0 16px #35261f; }
.cangkir-kissaten::after { content: ''; position: absolute; top: 24px; right: -70px; width: 80px; height: 72px; border: 8px solid #563627; border-left: 0; border-radius: 0 50% 50% 0; }
.uap-kissaten, .uap-kissaten::before, .uap-kissaten::after { position: absolute; width: 20px; height: 90px; border-left: 5px solid #f4e7ce; border-radius: 50%; content: ''; }
.uap-kissaten { top: 85px; left: 46%; }
.uap-kissaten::before { left: -42px; top: 20px; }
.uap-kissaten::after { left: 36px; top: -14px; }
.menu-kissaten { padding: 85px 0; border-top: 2px solid #563627; }
.menu-kissaten h2 { font-size: 50px; }
.grid-menu-kissaten { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.grid-menu-kissaten article { padding: 28px; border: 2px solid #563627; }
.grid-menu-kissaten strong { color: #a8492c; float: right; }
.grid-menu-kissaten p { font: 13px/1.6 Arial, sans-serif; }

/* Demo 04: Arkana Glass ------------------------------------------------- */
.tema-kaca { min-height: 100vh; color: #fff; background: #07080d; font-family: Arial, sans-serif; }
.tema-kaca .situs-demo { min-height: 100vh; background: linear-gradient(145deg,#07080d 0%,#10121a 48%,#07080d 100%); }
.kepala-kaca { position: fixed; z-index: 8; inset: 74px 0 auto; }
.mode-pratinjau.tema-kaca .kepala-kaca { top: 16px; }
.navigasi-kaca { position: relative; height: 70px; display: flex; align-items: center; gap: 28px; padding: 0 18px 0 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.07), 0 24px 70px rgba(0,0,0,.34); backdrop-filter: blur(32px) saturate(185%); -webkit-backdrop-filter: blur(32px) saturate(185%); }
.navigasi-kaca::before { content: ''; position: absolute; inset: 0 42% 48% 4%; border-radius: inherit; background: linear-gradient(100deg,rgba(255,255,255,.2),transparent); filter: blur(8px); pointer-events: none; }
.merek-kaca { position: relative; margin-right: auto; font-size: 18px; font-weight: 900; letter-spacing: .12em; }
.merek-kaca span { color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.65); }
.tema-kaca nav { position: relative; display: flex; gap: 28px; color: rgba(255,255,255,.76); font-size: 12px; }
.tema-kaca .tombol-kaca { position: relative; padding: 13px 18px; border: 1px solid rgba(255,255,255,.27); border-radius: 999px; background: rgba(255,255,255,.13); box-shadow: inset 0 1px rgba(255,255,255,.32); backdrop-filter: blur(20px) saturate(170%); font-size: 11px; }
.hero-kaca { position: relative; min-height: 830px; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.hero-kaca::before { content: ''; position: absolute; z-index: -3; inset: 0; background: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(to bottom,transparent,#000 24%,#000 74%,transparent); }
.cairan-latar-kaca { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.cairan-latar-kaca i { position: absolute; display: block; border-radius: 45% 55% 61% 39% / 44% 38% 62% 56%; filter: blur(2px); opacity: .85; animation: aliran-kaca 13s ease-in-out infinite alternate; }
.cairan-latar-kaca i:nth-child(1) { width: 420px; height: 420px; top: 80px; right: 13%; background: radial-gradient(circle at 35% 25%,#ffe5a1,#ff7b63 42%,#784cff 78%); box-shadow: 0 0 130px rgba(125,80,255,.38); }
.cairan-latar-kaca i:nth-child(2) { width: 280px; height: 280px; right: -50px; bottom: 40px; background: radial-gradient(circle at 34% 30%,#9df9ff,#2d90ff 45%,#6444df 80%); animation-delay: -4s; }
.cairan-latar-kaca i:nth-child(3) { width: 240px; height: 240px; left: 8%; bottom: -95px; background: radial-gradient(circle at 35% 30%,#fff2a8,#ff9c55 52%,#ff5578); animation-delay: -7s; }
@keyframes aliran-kaca { from { transform: translate3d(-18px,-12px,0) rotate(-5deg) scale(.96); } to { transform: translate3d(30px,24px,0) rotate(12deg) scale(1.06); } }
.grid-kaca { position: relative; z-index: 1; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 72px; padding-top: 130px; }
.isi-kaca .label { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.isi-kaca h1 { margin: 22px 0; font-size: clamp(58px, 7vw, 94px); line-height: .92; letter-spacing: -.065em; }
.isi-kaca h1 em { color: #fff; font-style: normal; text-shadow: 0 0 28px rgba(255,255,255,.24); }
.isi-kaca p { max-width: 520px; color: rgba(255,255,255,.64); font-size: 16px; line-height: 1.75; }
.isi-kaca a { display: inline-block; margin-top: 28px; padding: 15px 21px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: linear-gradient(135deg,rgba(255,255,255,.23),rgba(255,255,255,.09)); box-shadow: inset 0 1px rgba(255,255,255,.4),0 18px 38px rgba(0,0,0,.2); color: #fff; backdrop-filter: blur(22px) saturate(180%); font-size: 12px; font-weight: 900; }
.susunan-kaca { position: relative; height: 520px; perspective: 1100px; }
.inti-kaca { position: absolute; z-index: 1; top: 78px; left: 50%; width: 280px; height: 280px; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(255,255,255,.31); border-radius: 38% 62% 55% 45% / 48% 41% 59% 52%; background: linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.075)); box-shadow: inset 12px 14px 24px rgba(255,255,255,.18),inset -14px -18px 30px rgba(12,14,26,.2),0 30px 90px rgba(0,0,0,.3); backdrop-filter: blur(38px) saturate(210%); -webkit-backdrop-filter: blur(38px) saturate(210%); transform: translateX(-50%) rotate(-4deg); animation: apung-kaca 6s ease-in-out infinite; }
.inti-kaca::before { content: ''; position: absolute; inset: 5px 20px 54% 16px; border-radius: 999px 999px 55% 55%; background: linear-gradient(115deg,rgba(255,255,255,.47),rgba(255,255,255,.03)); filter: blur(4px); }
.inti-kaca i { width: 48px; height: 48px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: radial-gradient(circle at 35% 25%,rgba(255,255,255,.9),rgba(255,255,255,.08) 55%); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.inti-kaca span { font-size: 22px; font-weight: 900; letter-spacing: .14em; }
.inti-kaca small { margin-top: 9px; color: rgba(255,255,255,.62); font-size: 9px; letter-spacing: .08em; }
@keyframes apung-kaca { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-4deg); } 50% { transform: translateX(-50%) translateY(-13px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .cairan-latar-kaca i, .inti-kaca { animation: none; }
}
.panel-kaca { position: absolute; z-index: 2; width: 300px; min-height: 360px; padding: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 34px; background: linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.32); backdrop-filter: blur(38px) saturate(195%); -webkit-backdrop-filter: blur(38px) saturate(195%); }
.panel-kaca::before { content: ''; position: absolute; inset: 0 18% 61% 0; border-radius: inherit; background: linear-gradient(120deg,rgba(255,255,255,.28),transparent 72%); filter: blur(5px); pointer-events: none; }
.panel-kaca-kiri { top: 105px; left: 5px; transform: rotate(-9deg) translateZ(18px); }
.panel-kaca-kanan { top: 55px; right: 0; transform: rotate(8deg) translateZ(42px); }
.panel-kaca span { position: relative; color: rgba(255,255,255,.75); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.panel-kaca h3 { position: relative; margin-top: 170px; font-size: 25px; }
.panel-kaca p { position: relative; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.6; }
.layanan-kaca { position: relative; padding: 100px 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 85% 20%,rgba(114,77,255,.25),transparent 26%),#0a0b11; }
.grid-layanan-kaca { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 24px; }
.grid-layanan-kaca article { padding: 32px; border: 1px solid rgba(255,255,255,.2); border-radius: 28px; background: linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.045)); box-shadow: inset 0 1px rgba(255,255,255,.24),0 20px 50px rgba(0,0,0,.2); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); }
.grid-layanan-kaca article h3 { margin-top: 38px; }
.grid-layanan-kaca article p { color: rgba(255,255,255,.58); line-height: 1.65; }

/* Demo 05: Arkana Metro ------------------------------------------------- */
.tema-metro { background: #0d73c7; color: #fff; font-family: 'Arial Narrow', Arial, sans-serif; }
.kepala-metro { background: #0b65b0; }
.navigasi-metro { min-height: 95px; display: flex; align-items: center; }
.merek-metro { font-size: 31px; font-weight: 300; }
.merek-metro strong { font-weight: 900; }
.tema-metro nav { margin-left: auto; display: flex; gap: 30px; font-size: 12px; text-transform: uppercase; }
.hero-metro { min-height: 700px; padding: 54px 0 76px; }
.judul-metro { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; }
.judul-metro h1 { max-width: 760px; margin: 0; font-size: clamp(55px, 7vw, 92px); line-height: .88; letter-spacing: -.055em; font-weight: 300; }
.judul-metro h1 strong { font-weight: 900; }
.judul-metro p { width: 330px; margin: 0; color: rgba(255,255,255,.75); line-height: 1.6; }
.ubin-metro { display: grid; grid-template-columns: repeat(6,1fr); grid-auto-rows: 145px; gap: 10px; }
.ubin-metro article { position: relative; padding: 18px; overflow: hidden; background: #129956; cursor: pointer; transform-origin: center; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.ubin-metro article:not(.ubin-balik-metro):hover { z-index: 3; filter: brightness(1.12); transform: scale(1.035) translateZ(18px); box-shadow: 0 18px 35px rgba(0,0,0,.22); }
.ubin-metro article:active { transform: scale(.95); }
.ubin-metro article:nth-child(1) { grid-column: span 2; grid-row: span 2; background: #ef7c16; }
.ubin-metro article:nth-child(2) { grid-column: span 2; background: #7a4bd1; }
.ubin-metro article:nth-child(3) { grid-column: span 2; background: #d7385e; }
.ubin-metro article:nth-child(4) { grid-column: span 3; background: #15995a; }
.ubin-metro article:nth-child(5) { grid-column: span 1; background: #00a5c8; }
.ubin-metro article:nth-child(6) { grid-column: span 2; background: #edb111; }
.ubin-metro span { display: block; font-size: 44px; font-weight: 200; }
.ubin-metro strong { position: absolute; left: 18px; bottom: 18px; font-size: 14px; text-transform: uppercase; }
.ubin-metro p { max-width: 240px; font-size: 13px; line-height: 1.5; opacity: .8; }
.ubin-metro .ubin-balik-metro { padding: 0; overflow: visible; background: transparent; perspective: 800px; perspective-origin: 50% 50%; }
.isi-balik-metro { position: relative; width: 100%; height: 100%; transition: transform .6s ease; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.ubin-balik-metro:hover .isi-balik-metro,
.ubin-balik-metro:focus .isi-balik-metro { transform: rotateY(180deg); }
.sisi-ubin-metro { position: absolute; inset: 0; padding: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sisi-depan-metro { transform: rotateY(0deg); }
.ubin-balik-metro:nth-child(1) .sisi-ubin-metro { background: #ef7c16; }
.ubin-balik-metro:nth-child(3) .sisi-ubin-metro { background: #d7385e; }
.sisi-belakang-metro { display: flex; flex-direction: column; justify-content: flex-end; transform: rotateY(180deg); }
.sisi-belakang-metro p { max-width: 320px; margin: 0; font-size: 14px; line-height: 1.55; opacity: .92; }
.sisi-belakang-metro small { margin-top: 12px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .68; }
.ubin-balik-metro:focus { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ubin-metro article, .isi-balik-metro { transition: none; }
}

@media (max-width: 800px) {
  .wadah-demo { width: min(100% - 36px, 1180px); }
  .penanda-simulasi { height: auto; min-height: 58px; padding: 10px 16px; }
  .penanda-simulasi > span { display: none; }
  .aksi-simulasi a { padding: 9px; font-size: 10px; }
  .tema-nusa nav, .tema-ruang nav, .tema-kissaten nav, .tema-kaca nav, .tema-metro nav { display: none; }
  .tema-nusa .tombol-nusa, .tema-ruang .tombol-ruang, .tema-kaca .tombol-kaca { display: none; }
  .hero-nusa, .hero-ruang, .hero-kissaten, .grid-kaca { grid-template-columns: 1fr; }
  .hero-nusa { min-height: 720px; }
  .isi-nusa h1 { font-size: 58px; }
  .data-nusa { left: 18px; right: 18px; grid-template-columns: repeat(3,1fr); }
  .data-nusa div { padding: 14px; }
  .data-nusa strong { font-size: 20px; }
  .grid-nusa, .layanan-ruang .grid-ruang, .grid-menu-kissaten, .grid-layanan-kaca { grid-template-columns: 1fr; }
  .foto-ruang { min-height: 400px; }
  .kartu-ruang { left: 20px; }
  .bagian-dp-ruang { padding: 78px 0; }
  .visual-kissaten { min-height: 430px; }
  .isi-kissaten h1 { font-size: 78px; }
  .isi-kissaten h1 em { margin-left: 30px; }
  .grid-kaca { padding-top: 150px; }
  .susunan-kaca { transform: scale(.78); transform-origin: top left; }
  .judul-metro { align-items: flex-start; flex-direction: column; gap: 24px; }
  .judul-metro p { width: auto; }
  .ubin-metro { grid-template-columns: repeat(2,1fr); grid-auto-rows: 130px; }
  .ubin-metro article, .ubin-metro article:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .ubin-metro article:nth-child(1) { grid-row: span 2; }
}