/* SMK Darul Mukminin — penampil foto 360° (dipakai halaman Tur 360° dan editor panah di dashboard admin) */
.pano { position: absolute; inset: 0; overflow: hidden; background: #0d2133; }
.pano-kanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline-offset: -3px; }
.pano-kanvas.menggeser { cursor: grabbing; }
.pano-kanvas.pano-masuk { animation: pano-masuk 0.55s ease-out both; }
@keyframes pano-masuk { from { opacity: 0.15; filter: brightness(1.35); } to { opacity: 1; filter: none; } }
.pano-status { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; text-align: center; color: #fff; font-size: 0.9rem; background: rgba(17, 17, 17, 0.82); }
.pano-status[hidden] { display: none; }
.pano-kontrol { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 6px; }
.pano-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(8, 24, 40, 0.55); color: #fff; font: 600 1.1rem/1 var(--font-isi, system-ui); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pano-btn:hover { background: rgba(8, 24, 40, 0.8); }
.pano-btn:focus-visible { outline: 3px solid var(--au-2, #e0b84d); outline-offset: 2px; }

/* panah pindah titik */
.pano-panah { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.pano-panah-btn { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 6px; padding: 0; transform: translate(-50%, -50%); border: 0; background: none; color: #fff; cursor: pointer; pointer-events: auto; font: 600 0.78rem/1.2 var(--font-isi, system-ui); }
.pano-panah-btn[hidden] { display: none; }
.pano-panah-btn::before { content: ""; position: absolute; left: 50%; top: 0; width: 64px; height: 64px; transform: translate(-50%, -8px); border-radius: 50%; } /* area ketuk besar */
.pano-panah-ikon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(8, 24, 40, 0.6); border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 16px rgba(8, 24, 40, 0.55); transition: transform 0.2s ease, background 0.2s ease; }
.pano-panah-ikon::before { content: ""; width: 13px; height: 13px; margin-top: 4px; border: solid #fff; border-width: 3.5px 0 0 3.5px; border-radius: 2px; transform: rotate(45deg); } /* tanda panah naik */
.pano-panah-ikon::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); animation: pano-denyut 2.2s ease-out infinite; pointer-events: none; }
@keyframes pano-denyut { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.55); opacity: 0; } }
.pano-panah-lantai .pano-panah-ikon { transform: perspective(240px) rotateX(58deg); }
.pano-panah-btn:hover .pano-panah-ikon, .pano-panah-btn:focus-visible .pano-panah-ikon { background: #0b1d2e; transform: scale(1.12); }
.pano-panah-lantai:hover .pano-panah-ikon, .pano-panah-lantai:focus-visible .pano-panah-ikon { transform: perspective(240px) rotateX(58deg) scale(1.12); }
.pano-panah-btn:focus-visible { outline: none; }
.pano-panah-btn:focus-visible .pano-panah-ikon { outline: 3px solid var(--au-2, #e0b84d); outline-offset: 3px; }
.pano-panah-label { max-width: 170px; padding: 3px 10px; border-radius: 99px; background: rgba(8, 24, 40, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.pano-panah-btn:hover .pano-panah-label, .pano-panah-btn:focus-visible .pano-panah-label { opacity: 1; transform: none; }
@media (hover: none) { .pano-panah-label { opacity: 1; transform: none; } }

/* layar penuh (cadangan untuk peramban tanpa Fullscreen API, mis. iPhone) */
.pano-penuh { position: fixed !important; inset: 0 !important; z-index: 2000; width: auto !important; height: auto !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; margin: 0 !important; }
html.pano-penuh-aktif, html.pano-penuh-aktif body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pano-kanvas.pano-masuk { animation: none; }
  .pano-panah-ikon::after { animation: none; opacity: 0.5; }
  .pano-panah-ikon, .pano-panah-label { transition: none; }
}