/* Ruang tunggu + ruang pelayanan "Lobi Senja Gahar" (adegan foto) + fallback diorama SVG 2.5D. Lihat docs/DESAIN-RUANG-TUNGGU.md */
.kantor { position: relative; background: radial-gradient(520px 260px at 80% -10%, rgba(255,122,61,.18), transparent 70%), radial-gradient(600px 300px at 50% 0, #1d1a19, #0b0b0d); border: 1px solid var(--garis); border-radius: var(--r-besar); overflow: hidden; box-shadow: var(--bayang); }
.kantor svg { display: block; width: 100%; height: auto; }

/* ---------- fallback SVG 2.5D (ruang-kantor-svg.js) ---------- */
.k-nama { font: 700 11px var(--huruf); fill: #f4f1ec; paint-order: stroke; stroke: #0b0b0d; stroke-width: 3px; }
.k-nama-saya { fill: #ffd79a; }
.k-nama-agen { font-size: 15px; }
.k-nama-agen[data-status="sibuk"] { fill: #ffb067; }
.k-nama-agen[data-status="offline"] { fill: #a39b91; }
.k-tokoh { transition: transform 1.5s linear; }
.k-cincin { stroke: var(--bekerja); }
.k-cs[data-status="sibuk"] .k-cincin { stroke: var(--menunggu); }
.k-cs[data-status="offline"] .k-cincin { stroke: #8a847c; }
.k-napas > .k-badan { animation: napas 3.2s ease-in-out infinite; }
.k-jalan > .k-badan { animation: langkah .32s ease-in-out infinite; }
.k-bicara .k-mulut { animation: mulut .28s steps(2, jump-none) infinite; transform-box: fill-box; transform-origin: center; }
.k-ketik .k-lengan { animation: ketik .2s ease-in-out infinite alternate; }
@keyframes napas { 50% { transform: translateY(-1.5px); } }
@keyframes langkah { 50% { transform: translateY(-3px); } }
@keyframes mulut { from { transform: scaleY(.4); } to { transform: scaleY(2.2); } }
@keyframes ketik { to { transform: translateY(-1.5px); } }

/* ---------- gelembung CS (dipakai kedua mode) ---------- */
.gelembung { position: absolute; z-index: 6; max-width: min(300px, calc(100% - 12px)); min-width: 120px; display: flex; flex-direction: column; background: var(--gelembung); color: var(--gelembung-teks); border-radius: 14px; padding: 10px 12px 8px; box-shadow: 0 10px 26px rgba(0,0,0,.45); font-size: 14px; line-height: 1.45; }
.gelembung::after { content: ""; position: absolute; left: var(--ekor, 50%); bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--gelembung); }
.gelembung-teks { margin: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.gelembung-nav { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; font-size: 12px; color: #5e554c; }
.gelembung-nav button { width: 40px; height: 32px; border-radius: 8px; border: 1px solid #d8cfc4; background: #fff; color: #1d1712; font-size: 18px; line-height: 1; cursor: pointer; }
.gelembung-nav button:disabled { opacity: .4; cursor: default; }
.gelembung.tanpa-ekor::after { display: none; }
.gelembung.ekor-kanan::after { left: auto; right: -8px; bottom: auto; top: var(--ekor-y, 20px); margin: 0; border: 8px solid transparent; border-right: 0; border-left-color: var(--gelembung); }
.gelembung.ekor-kiri::after { left: -8px; right: auto; bottom: auto; top: var(--ekor-y, 20px); margin: 0; border: 8px solid transparent; border-left: 0; border-right-color: var(--gelembung); }
.gelembung.ekor-atas::after { bottom: auto; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--gelembung); }
.gelembung-nav[hidden] { display: none; }
.gelembung.ringkas { font-size: 13px; line-height: 1.35; padding: 7px 10px; min-width: 0; }
.gelembung.ringkas .gelembung-nav { display: none; }

/* ---------- adegan foto ---------- */
.ruang-foto { background: #140e0a; isolation: isolate; max-width: 100%; min-width: 0; }
.ruang-adegan, .ruang-tata > * { min-width: 0; }
.rf-gulir { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.rf-gulir::-webkit-scrollbar { display: none; }
.rf-panggung { position: relative; overflow: hidden; aspect-ratio: 16 / 9; width: 100%; background: #140e0a center / cover no-repeat; contain: layout paint; }
.rf-isi, .rf-depan { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.rf-isi { transform: scale(1.03); transform-origin: 50% 50%; }
.rf-isi picture, .rf-latar { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.rf-latar { opacity: 0; transition: opacity .5s ease; color: transparent; }
.rf-siap .rf-latar { opacity: 1; }
.rf-dunia { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(var(--s, .5)); }
.rf-dunia > * { position: absolute; }
.rf-depan { pointer-events: none; z-index: 2; }
.rf-vinyet { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.5)); }
.rf-sinar { position: absolute; left: 38%; top: -10%; width: 30%; height: 80%; background: linear-gradient(180deg, rgba(255,200,140,.09), transparent 70%); transform: skewX(-8deg); mix-blend-mode: screen; }
.rf-oklusi { display: block; pointer-events: none; user-select: none; }

/* HP: panggung setinggi layar, bisa digeser; desktop: penuh 16:9 */
@media (max-width: 699px) {
  .mode-tunggu .rf-panggung { width: auto; height: min(118vw, 62svh); }
  .mode-layanan .rf-panggung { width: auto; height: min(64vw, 36svh); }
}

/* tokoh */
.rf-org { left: 0; top: 0; will-change: transform; transition: opacity .5s; }
.rf-gbr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 100%; transition: opacity .35s; user-select: none; -webkit-user-drag: none; }
/* cermin pakai properti `scale` (bukan transform) agar animasi napas/langkah tidak membatalkannya (P5) */
.rf-gbr.rf-balik, .rf-hadap-kiri .rf-gbr { scale: -1 1; }
.rf-hadap-kiri .rf-gbr.rf-balik { scale: 1 1; }
.rf-gbr.rf-sembunyi { opacity: 0; }
/* P7: bayangan kontak ketat di bawah telapak + oklusi ambien lembut menjauhi sumber cahaya (--arah) */
.rf-bayang { position: absolute; left: 16%; right: 16%; bottom: -1%; height: 2.4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(6,3,1,.82), rgba(6,3,1,0)); }
.rf-bayang::after { content: ""; position: absolute; left: -55%; right: -55%; top: -120%; bottom: -170%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8,4,2,.42), rgba(8,4,2,0)); transform: translateX(calc(var(--arah, 1) * 16%)); }
.rf-tekan { position: absolute; left: 6%; right: 10%; top: 50%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(12,4,2,.5), rgba(12,4,2,0)); }
.mode-tunggu .rf-cs .rf-bayang { display: none; }
.rf-org.rf-jalan .rf-gbr:not(.rf-sembunyi) { animation: rf-langkah .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes rf-langkah { from { transform: translateY(0) rotate(-.8deg); } to { transform: translateY(-1.6%) rotate(.8deg); } }
.rf-cs .rf-gbr { animation: rf-napas 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
.rf-tamu .rf-gbr { animation: rf-napas 5.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes rf-napas { 50% { transform: scaleY(1.008); } }
.rf-cs[data-status="offline"] { opacity: 0; }
/* O2: sprite CS lobi diselaraskan dengan cahaya senja dinding (lebih hangat & sedikit redup) */
.mode-tunggu .rf-cs .rf-gbr { filter: sepia(.12) brightness(.92); }
.rf-cs::after { content: ""; position: absolute; left: 50%; top: 4%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,170,90,.35), transparent); opacity: 0; transition: opacity .3s; mix-blend-mode: screen; pointer-events: none; }
.rf-cs.rf-bicara::after { opacity: 1; animation: rf-denyut 1.2s ease-in-out infinite; }
.rf-label { position: absolute; left: 50%; bottom: calc(100% + 10px); white-space: nowrap; transform: translateX(-50%) scale(var(--si, 2)); transform-origin: 50% 100%;
  font: 700 12px/1 var(--huruf); color: #1a0c04; background: var(--grad); padding: 6px 10px; border-radius: 999px; box-shadow: 0 6px 16px rgba(255,122,61,.45); }
.rf-label::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #ff8f45; }
.mode-layanan .rf-label { bottom: 103%; }

/* cahaya & suasana */
.rf-cahaya { border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.rf-gantung { width: 220px; height: 220px; margin: -110px 0 0 -110px; background: radial-gradient(closest-side, rgba(255,170,90,.5), rgba(255,130,50,.16) 45%, transparent); animation: rf-kedip 7s ease-in-out infinite; z-index: 3; }
.rf-gantung.b { animation-delay: -3s; }
@keyframes rf-kedip { 0%, 100% { opacity: .85; } 45% { opacity: 1; } 52% { opacity: .78; } 60% { opacity: .95; } }
.rf-lampu-meja { width: 1000px; height: 120px; margin: -60px 0 0 -500px; background: radial-gradient(closest-side, rgba(255,150,60,.55), transparent); opacity: .35; z-index: 12; transition: opacity .8s; }
.rf-dipanggil .rf-lampu-meja { opacity: .95; animation: rf-denyut 1.3s ease-in-out 4; }
@keyframes rf-denyut { 50% { opacity: .4; } }
.rf-lampu-konsul { width: 640px; height: 520px; margin: -260px 0 0 -320px; background: radial-gradient(closest-side, rgba(255,190,110,.32), rgba(255,140,60,.1) 50%, transparent); animation: rf-kedip 9s ease-in-out infinite; z-index: 3; }
.rf-led-konsul { left: 440px; top: 360px; width: 880px; height: 130px; border-radius: 40%; background: radial-gradient(closest-side, rgba(255,150,60,.28), transparent); animation: rf-kedip 11s ease-in-out infinite; z-index: 2; }
.rf-langit { left: 0; top: 0; width: 392px; height: 560px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 2s; }
[data-waktu="malam"] .rf-langit { opacity: .5; background: linear-gradient(180deg, #0a1030, #1b1f3d 60%, transparent); mix-blend-mode: multiply; }
[data-waktu="siang"] .rf-langit { opacity: .35; background: linear-gradient(180deg, #b8dcff, #e6f2ff 70%, transparent); mix-blend-mode: soft-light; }
[data-waktu="pagi"] .rf-langit { opacity: .3; background: linear-gradient(180deg, #ffe2b8, #fff1dc 70%, transparent); mix-blend-mode: soft-light; }
.rf-kota-wadah, .rf-debu-wadah { left: 0; top: 0; width: 0; height: 0; z-index: 4; }
.rf-kota { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd79a; box-shadow: 0 0 8px #ffb547; animation: rf-kelip var(--d, 4s) ease-in-out infinite; animation-delay: var(--t, 0s); }
[data-waktu="siang"] .rf-kota { display: none; }
@keyframes rf-kelip { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.rf-debu { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,226,180,.85); box-shadow: 0 0 6px rgba(255,200,140,.8); opacity: 0; animation: rf-melayang var(--d, 9s) linear infinite; animation-delay: var(--t, 0s); }
@keyframes rf-melayang { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: .75; } 85% { opacity: .55; } 100% { transform: translate(var(--x, 20px), 260px); opacity: 0; } }
.rf-uap-wadah { width: 0; height: 0; }
.rf-uap { position: absolute; left: -23px; top: -80px; width: 46px; height: 110px; background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); border-radius: 50%; animation: rf-uap 4.5s ease-out infinite; opacity: 0; }
.rf-uap.b { animation-delay: -1.5s; } .rf-uap.c { animation-delay: -3s; }
@keyframes rf-uap { 0% { transform: translate(0, 30px) scale(.5); opacity: 0; } 30% { opacity: .75; } 100% { transform: translate(12px, -90px) scale(1.3); opacity: 0; } }

/* papan nama menyala */
.rf-papan { left: 805px; top: 126px; width: 420px; text-align: center; pointer-events: none; z-index: 3; }
.rf-papan-huruf { font: 800 92px/1 var(--display); letter-spacing: .05em; background: linear-gradient(180deg, #ffe0b0, #ffb547 40%, #c8682a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,140,60,.5)) drop-shadow(0 6px 4px rgba(0,0,0,.6)); }
.rf-papan-sub { font: 600 19px/1 var(--mono); letter-spacing: .42em; color: #f5d7b0; margin-top: 14px; text-shadow: 0 0 12px rgba(255,150,70,.6); }
.rf-papan-tag { font: 500 18px/1.3 var(--huruf); color: rgba(244,241,236,.7); margin-top: 14px; font-style: italic; }
.rf-papan-halo { position: absolute; inset: -60px -80px; background: radial-gradient(closest-side, rgba(255,140,60,.2), transparent); z-index: -1; }

/* layar antrean di TV (dipetakan matrix3d) */
.rf-layar { left: 0; top: 0; width: 400px; height: 250px; transform-origin: 0 0; overflow: hidden; z-index: 3; padding: 18px 22px; color: #fff; font-family: var(--display);
  background: linear-gradient(160deg, #151019, #0b0a0d); box-shadow: inset 0 0 40px rgba(255,122,61,.18); }
.rf-layar-atas { display: flex; justify-content: space-between; align-items: center; font: 600 18px/1 var(--mono); letter-spacing: .12em; color: #ffb98a; }
.rf-jam { font: 800 30px/1 var(--mono); letter-spacing: .02em; color: #fff1df; text-shadow: 0 0 10px rgba(255,170,90,.55); }
.rf-layar-besar { font: 800 76px/1.05 var(--display); letter-spacing: -.02em; margin-top: 8px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.rf-dipanggil .rf-layar-besar { font-size: 58px; margin: 22px 0 6px; }
.rf-layar-ket { font: 600 20px/1.2 var(--huruf); color: #e9e2d8; margin-top: 4px; }
.rf-layar-bawah { position: absolute; left: 22px; right: 22px; bottom: 16px; display: flex; justify-content: space-between; font: 600 16px/1 var(--mono); color: #cfc6ba; border-top: 1px solid #2a2a31; padding-top: 12px; }
.rf-layar-bawah b { color: var(--menunggu); }
.rf-dipanggil .rf-layar { animation: rf-kilat .5s steps(2) 6; }
@keyframes rf-kilat { 50% { background: #4a200c; } }
.rf-pantul-layar { left: 1450px; top: 150px; width: 520px; height: 420px; background: radial-gradient(closest-side, rgba(255,130,60,.16), transparent); mix-blend-mode: screen; pointer-events: none; z-index: 3; }
/* papan nama kecil + titik status per CS (bibir meja resepsionis) */
.rf-papan-cs { z-index: 12; transform: translateX(-50%); padding: 5px 14px 6px; border-radius: 8px; background: linear-gradient(180deg, #2b1e15, #160f0a); border: 2px solid rgba(255,190,120,.35); box-shadow: 0 6px 12px rgba(0,0,0,.55); text-align: center; white-space: nowrap; pointer-events: none; transition: border-color .3s, opacity .3s; }
.rf-papan-cs b { display: block; font: 700 24px/1.1 var(--huruf); color: #f7e6cf; }
.rf-papan-ai { display: block; margin-top: 2px; font: 700 15px/1.1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ffb98a; }
.rf-st-baris { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 3px; font: 600 18px/1.1 var(--mono); letter-spacing: .05em; color: #d2c0aa; }
.rf-st { width: 13px; height: 13px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px rgba(61,220,132,.8); }
.rf-papan-cs[data-status="sibuk"] .rf-st { background: #ff9f43; box-shadow: 0 0 10px rgba(255,159,67,.8); }
.rf-papan-cs[data-status="offline"] { opacity: .78; }
.rf-papan-cs[data-status="offline"] .rf-st { background: #7d756c; box-shadow: none; }
.rf-papan-cs.rf-aktif { border-color: rgba(255,181,71,.85); }
.rf-tanda-offline { transform: translateX(-50%); white-space: nowrap; z-index: 12; padding: 10px 20px; border-radius: 10px; background: #1d1712; border: 2px solid #8a6a4a; color: #f5d7b0; font: 700 26px/1 var(--huruf); box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.rf-tanda-offline[hidden] { display: none; }
.mode-layanan .rf-tanda-offline { font-size: 50px; padding: 18px 34px; border-width: 3px; border-radius: 16px; }
.rf-lain { padding: 10px 18px; border-radius: 999px; background: rgba(17,17,20,.85); border: 1px solid #3a3a44; color: var(--teks); font: 600 26px/1 var(--huruf); }
.rf-lain[hidden] { display: none; }

/* titik interaktif */
.rf-titik { border: 0; background: transparent; cursor: pointer; padding: 0; z-index: 50; transform: translate(-50%, -50%); min-width: calc(44px * var(--si, 1)); min-height: calc(44px * var(--si, 1)); }
/* P4: cincin lebih redup & kecil agar tidak mendominasi foto; terang saat hover/fokus */
.rf-cincin { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 2px solid rgba(255,196,120,.6); box-shadow: 0 0 8px rgba(255,140,60,.3); animation: rf-cincin 3.2s ease-out infinite; transform: scale(var(--si, 1)); opacity: .7; transition: opacity .2s; }
.rf-cincin::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: rgba(255,196,120,.75); }
.rf-titik:hover .rf-cincin, .rf-titik:focus-visible .rf-cincin { opacity: 1; border-color: rgba(255,181,71,.95); }
@keyframes rf-cincin { 0% { transform: scale(calc(var(--si, 1) * .85)); opacity: .75; } 70% { transform: scale(calc(var(--si, 1) * 1.1)); opacity: .4; } 100% { transform: scale(calc(var(--si, 1) * .85)); opacity: .75; } }
.rf-titik-label { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(var(--si, 1)); transform-origin: 50% 100%; white-space: nowrap; background: rgba(17,17,20,.92); border: 1px solid #3a3a44; color: var(--teks); padding: 6px 10px; border-radius: 999px; font: 600 13px/1 var(--huruf); opacity: 0; transition: opacity .2s; pointer-events: none; }
.rf-titik:hover .rf-titik-label, .rf-titik:focus-visible .rf-titik-label { opacity: 1; }
.rf-titik:focus-visible { outline: calc(3px * var(--si, 1)) solid var(--merek-2); outline-offset: 6px; border-radius: 12px; }

/* HUD di atas adegan */
.rf-chip { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(17,17,20,.86); border: 1px solid var(--garis); color: var(--redup); font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.rf-chip span { white-space: nowrap; }
.rf-chip b { white-space: nowrap; font: 800 22px/1 var(--display); letter-spacing: -.02em; text-transform: none; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-chip[hidden] { display: none; }
.rf-dipanggil .rf-chip { border-color: rgba(61,220,132,.5); }
@media (min-width: 700px) { .mode-tunggu .rf-chip { display: none; } }
.rf-kontrol { position: absolute; right: 8px; bottom: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.rf-kontrol-isi { display: flex; gap: 6px; margin-left: auto; }
@media (max-width: 699px) { .rf-kontrol { position: static; padding: 6px 8px; background: #0f0c0a; border-top: 1px solid var(--garis); min-width: 0; } .rf-kontrol .rf-chip { position: static; box-shadow: none; padding: 6px 10px; min-width: 0; flex: 0 1 auto; overflow: hidden; } .rf-kontrol-isi { flex: none; } .rf-chip span { overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 699px) { .mode-layanan .rf-kontrol { position: absolute; right: 6px; bottom: 6px; padding: 0; background: none; border: 0; } }
@media (max-width: 419px) { .rf-chip-ket { display: none; } .rf-chip { gap: 6px; } .rf-kontrol-btn { padding: 6px 10px; min-width: 48px; } }
.rf-kontrol-btn { min-width: 44px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--garis-terang, #3a3a44); background: rgba(17,17,20,.8); color: var(--redup); font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rf-kontrol-btn[aria-pressed="true"] { color: var(--teks); border-color: rgba(255,122,61,.6); }
.rf-kontrol-btn:focus-visible { outline: 2px solid var(--merek-2); outline-offset: 2px; }
.rf-ketik { position: absolute; z-index: 6; display: flex; gap: 4px; padding: 9px 12px; border-radius: 999px; background: var(--gelembung); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.rf-ketik[hidden] { display: none; }
.rf-ketik i { width: 7px; height: 7px; border-radius: 50%; background: #8a7a6a; animation: rf-titik3 1.2s infinite; }
.rf-ketik i:nth-child(2) { animation-delay: .2s; } .rf-ketik i:nth-child(3) { animation-delay: .4s; }
@keyframes rf-titik3 { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .4; } }
.rf-toast { position: absolute; left: 50%; top: 10px; z-index: 7; max-width: calc(100% - 24px); transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: .3s; background: var(--kartu-2); border: 1px solid var(--garis); padding: 9px 14px; border-radius: 14px; font-size: 14px; color: var(--teks); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.rf-toast.rf-tampil { opacity: 1; transform: translate(-50%, 0); }

/* dialog portofolio */
.rf-dialog { border: 1px solid var(--garis); border-radius: var(--r-besar, 22px); background: var(--panel); color: var(--teks); padding: 20px; width: min(560px, 92vw); }
.rf-dialog::backdrop { background: rgba(0,0,0,.6); }
.rf-dialog h2 { margin: 0 0 4px; font-size: 1.25rem; }
.rf-karya-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
.rf-karya { display: grid; gap: 4px; text-decoration: none; color: var(--teks); }
.rf-karya img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; border: 1px solid var(--garis); }
.rf-karya b { font-size: 14px; } .rf-karya span { font-size: 12px; color: var(--redup); }

/* mode diam / ringan / jeda */
.rf-diam *, .rf-diam *::before, .rf-diam *::after { animation: none !important; transition: none !important; }
.rf-diam .rf-debu, .rf-diam .rf-uap, .rf-ringan .rf-debu, .rf-ringan .rf-uap, .rf-ringan .rf-kota, .rf-ringan .rf-sinar { display: none; }
.rf-diam .rf-cincin { transform: scale(var(--si, 1)); }
.rf-titik[hidden] { display: none; }
.rf-jeda *, .rf-jeda-tab * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ruang-foto *, .ruang-foto *::before, .ruang-foto *::after { animation: none !important; transition: none !important; }
  .rf-debu, .rf-uap { display: none; }
}

/* ---------- tata halaman ruang ---------- */
.ruang-tata { display: grid; gap: 16px; padding: 8px 0 40px; }
@media (min-width: 980px) { .ruang-tata { grid-template-columns: minmax(0, 1.4fr) minmax(340px, .6fr); align-items: start; } .ruang-tata .lekat { position: sticky; top: 72px; } }
.statistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.statistik div { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 12px 8px; text-align: center; }
.statistik b { display: block; font: 800 1.5rem/1.2 var(--display); }
.statistik span { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.posisi-besar { font: 800 clamp(2.8rem, 13vw, 4.4rem)/1 var(--display); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.titik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bekerja); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(61,220,132,.2); }
.titik.sibuk { background: var(--menunggu); box-shadow: 0 0 0 3px rgba(242,201,76,.2); }
.titik.offline { background: #8a847c; box-shadow: none; }
.ruang-adegan h1 { margin: 6px 0 2px; font-size: clamp(1.3rem, 4.4vw, 1.9rem); letter-spacing: -.02em; }
.ruang-adegan .lead-ruang { margin: 0 0 12px; color: var(--redup); font-size: 15px; }
.jejak-ruang { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.jejak-ruang li { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--garis); color: var(--redup); }
.jejak-ruang li[aria-current] { color: #1a0c04; background: var(--grad); border-color: transparent; }
.karya-strip { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.karya-strip li { min-width: 0; }
.karya-strip a { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--garis); color: var(--teks); text-decoration: none; aspect-ratio: 3 / 4; background: var(--kartu); }
.karya-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karya-strip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; font: 600 12px/1.2 var(--huruf); background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.karya-strip a:focus-visible { outline: 2px solid var(--merek-2); outline-offset: 2px; }
.judul-kecil { font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--redup); margin: 16px 0 0; }

/* Chat */
.chat { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--garis); border-radius: var(--r-besar); overflow: hidden; box-shadow: var(--bayang); }
.chat-kepala { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--garis); background: linear-gradient(90deg, rgba(255,122,61,.08), transparent 60%); }
.chat-kepala .avatar { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px rgba(255,122,61,.5); }
/* Label jujur "Asisten AI" + jalur bantuan manusia (pemeriksaan akhir kontrak CS ganda) */
.label-ai { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(255,181,71,.55); background: rgba(255,122,61,.12); color: #ffd3a8; font: 700 11px/1.3 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.chat-manusia { margin: 2px 0 0; font-size: 13px; color: var(--redup, #b9b2a8); }
.chat-manusia a { color: #ffc58f; }
.catatan-ai { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--redup, #b9b2a8); }
.catatan-ai .label-ai { margin: 0 4px 0 0; }
.chat-log { padding: 14px; overflow-y: auto; max-height: 52vh; min-height: 220px; display: flex; flex-direction: column; gap: 10px; }
.psn { max-width: 88%; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.psn.agen { background: var(--kartu-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.psn.pengguna { background: #3a2316; border: 1px solid rgba(255,122,61,.3); align-self: flex-end; border-bottom-right-radius: 4px; }
.psn.sistem { align-self: center; background: transparent; color: var(--redup); font-size: 13px; text-align: center; }
.psn.galat { align-self: center; background: #2a1414; color: #ffb3b3; border: 1px solid rgba(255,107,107,.35); font-size: 14px; }
.psn .draf { margin-top: 8px; border-top: 1px solid var(--garis); padding-top: 8px; display: grid; gap: 6px; white-space: normal; }
.saran { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.saran button { border: 1px solid var(--garis-terang); background: var(--kartu); color: var(--teks); border-radius: 999px; padding: 7px 12px; font: 14px var(--huruf); cursor: pointer; min-height: 40px; }
.saran button:hover { border-color: var(--merek); }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--garis); }
.chat-form textarea { min-height: 44px; height: 44px; max-height: 140px; resize: none; }
.mengetik::after { content: attr(data-mengetik); }
@media (max-width: 979px) {
  .tata-layanan > div:first-child { display: contents; }
  .tata-layanan .ruang-adegan { order: 1; }
  .tata-layanan .chat { order: 2; }
  .tata-layanan #pesan { order: 3; margin-top: 0 !important; }
  .tata-layanan .chat-log { max-height: 46vh; }
}

/* ---------- CLS: tinggi cadangan #kantor sebelum JS mengisi adegan (sama dengan tinggi akhir) ---------- */
.ruang-adegan #kantor:empty { display: block; aspect-ratio: 16 / 9; background: #140e0a; border: 1px solid var(--garis); border-radius: var(--r-besar); }
@media (max-width: 699px) {
  .ruang-adegan #kantor:empty { aspect-ratio: auto; height: calc(min(118vw, 62svh) + 55px); }
  .tata-layanan .ruang-adegan #kantor:empty { height: calc(min(64vw, 36svh) + 2px); }
}

/* a11y: tombol WhatsApp di halaman ruang, kontras teks putih >= 4,5:1 */
.ruang-tata .tombol.wa { background: #127a3a; border-color: #127a3a; }
.ruang-tata .tombol.wa:hover { background: #0f6a31; border-color: #0f6a31; }