/* =====================================================================
   3. CINCIN PERALATAN 3D — berputar sendiri
   ===================================================================== */
/* Tinggi panggung = 24px (top .cincin) + tinggi kartu (±289px) × 1,18 (pembesaran kartu depan,
   lihat aturCincin di 17-cincin-peralatan.js) ≈ 365px, dibulatkan ke atas. */
.orbit{position:relative;height:376px;margin:6px -22px 0;overflow-x:clip;
  perspective:2000px;perspective-origin:50% 44%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);}
.cincin{position:absolute;left:50%;top:24px;width:0;height:0;transform-style:preserve-3d;
  animation:putarCincin 36s linear infinite;}
@keyframes putarCincin{to{transform:rotateY(-360deg);}}
.orbit:hover .cincin,.orbit.jeda .cincin{animation-play-state:paused;}

.kartu-orbit{position:absolute;left:-115px;top:0;width:230px;cursor:pointer;
  border:1px solid var(--line);border-radius:15px;background:var(--panel);overflow:hidden;
  backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5);
  animation:sorot 36s linear infinite;}
.orbit:hover .kartu-orbit,.orbit.jeda .kartu-orbit{animation-play-state:paused;}
/* Kartu di sisi jauh diredupkan sampai hampir hilang. Digabung dengan
   backface-visibility, pergantiannya tidak pernah terlihat "meloncat". */
@keyframes sorot{
  0%  {filter:brightness(1)   saturate(1);}
  22% {filter:brightness(.62) saturate(.75);}
  50% {filter:brightness(.3)  saturate(.5);}
  78% {filter:brightness(.62) saturate(.75);}
  100%{filter:brightness(1)   saturate(1);}
}
.kartu-orbit:hover{border-color:var(--accent);}
.kartu-orbit.terkunci{cursor:not-allowed;}

/* Bingkai 4:3 (230×172) untuk SEMUA kartu — foto unit dari kamera/HP umumnya 4:3, jadi muat utuh. */
.bingkai{position:relative;height:172px;overflow:hidden;border-bottom:1px solid var(--line);}
.bingkai .adegan{display:block;width:100%;height:100%;}
/* Foto pengenal unit menutup ilustrasi di bawahnya (ilustrasi tetap ada sebagai cadangan kalau
   berkas fotonya gagal dimuat); lampu dan gembok (z-index 2) tetap di atas. */
.bingkai .foto-unit{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.bingkai .lampu{position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;z-index:2;}
.lampu.hijau{background:var(--ok);box-shadow:0 0 12px var(--ok);}
.lampu.kuning{background:var(--warn);box-shadow:0 0 12px var(--warn);animation:denyut 2s infinite;}
.lampu.merah{background:var(--fail);box-shadow:0 0 12px var(--fail);animation:denyut 1.1s infinite;}
@keyframes denyut{50%{opacity:.28;}}
.bingkai .gembok{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  background:rgba(4,7,11,.62);color:#cfe2ef;}
.bingkai .tanda-ilus{position:absolute;left:8px;bottom:7px;z-index:2;font-family:var(--font-mono);
  font-size:8.5px;letter-spacing:.1em;color:rgba(255,255,255,.62);
  background:rgba(0,0,0,.4);border-radius:4px;padding:2px 6px;}
.kartu-orbit .isi{padding:11px 13px 13px;}
.kartu-orbit .nama{font-family:var(--font-display);font-size:13.5px;font-weight:600;line-height:1.25;}
.kartu-orbit .alat{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;min-height:31px;}
.kartu-orbit .kaki{display:flex;gap:6px;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
.cip{font-family:var(--font-mono);font-size:10px;padding:2px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted);}
.cip.bahaya{color:var(--fail);border-color:var(--fail);}
.cip.awas{color:var(--warn);border-color:var(--warn);}
.cip.aman{color:var(--ok);border-color:var(--ok);}
/* Cip yang menuju formulirnya di E-Logbook. Dibedakan dari cip biasa supaya
   tidak ada yang menekan cip MINGGUAN dan mengira dashboardnya rusak: yang
   bisa ditekan berpanah, berubah warna waktu disentuh, dan berkursor tangan. */
a.cip{text-decoration:none;cursor:pointer;transition:color .15s,border-color .15s;}
a.cip::after{content:' \2197';font-size:9px;opacity:.75;}
a.cip:hover{color:var(--ink);border-color:var(--ink);}

.kendali-orbit{display:flex;justify-content:center;gap:9px;align-items:center;margin-top:2px;}
.kendali-orbit .ket{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);}