Lab. Telematika Transportasi Laut
Lab. Transportasi Laut dan Logistik
Lab. Infrastruktur dan Pelabuhan
/* VARIABEL WARNA & UTALITAS */
.org-chart-wrapper {
width: 100%;
overflow-x: auto;
background: transparent;
padding: 40px 10px;
}
.org-chart-container {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
min-width: 1000px;
margin: 0 auto;
text-align: center;
box-sizing: border-box;
}
/* TAMBAHAN UNTUK LINK NAMA */
.node-link {
text-decoration: none;
display: inline-block;
width: 100%;
}
.node-link:hover strong {
text-decoration: underline;
opacity: 0.85;
}
/* KOTAK KARTU STRUKTUR (NODE) */
.org-node {
display: inline-flex;
flex-direction: column;
align-items: center;
background: #ffffff;
border-radius: 12px;
padding: 0;
width: 250px;
box-shadow: 0 4px 15px rgba(148, 163, 184, 0.12);
border: 1px solid #e2e8f0;
overflow: hidden;
position: relative;
z-index: 5;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.org-node:hover {
transform: translateY(-4px);
box-shadow: 0 12px 25px rgba(15, 23, 42, 0.15);
border-color: #3b82f6;
}
/* WARNA TEMATIK JABATAN */
.node-prime {
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
border: none;
}
.node-prime .node-details strong { color: #ffffff; }
.node-prime .badge-title { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.node-sub-prime {
background: linear-gradient(135deg, #0f766e, #14b8a6);
border: none;
}
.node-sub-prime .node-details strong { color: #ffffff; }
.node-sub-prime .badge-title { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.node-staff {
border-left: 4px solid #3b82f6;
}
/* DETAIL TEKS KARTU */
.node-details {
padding: 12px 14px;
font-size: 12px;
color: #334155;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
width: 100%;
box-sizing: border-box;
}
.node-details strong {
font-size: 13px;
color: #1e293b;
font-weight: 600;
line-height: 1.4;
margin-bottom: 6px;
transition: all 0.2s ease;
}
.badge-title {
display: inline-block;
align-self: center;
padding: 3px 10px;
background: #f1f5f9;
color: #64748b;
border-radius: 20px;
font-size: 10.5px;
font-weight: 500;
margin-top: 2px;
}
/* SISTEM STRUKTUR GARIS MAINFRAME */
.org-level { position: relative; width: 100%; }
.line-v {
width: 2px;
height: 40px;
background: #94a3b8;
margin: 0 auto;
}
.middle-backbone {
position: relative;
width: 100%;
padding: 40px 0 65px 0;
}
.main-vertical-line {
position: absolute;
top: -40px;
bottom: 0;
left: 50%;
width: 2px;
background: #94a3b8;
transform: translateX(-50%);
z-index: 1;
}
/* TATA LETAK KHUSUS KASUBBAG */
.kasubbag-row {
display: flex;
justify-content: center;
margin-bottom: 45px;
position: relative;
}
.kasubbag-row::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 110px;
height: 2px;
background: #94a3b8;
z-index: 2;
}
.kasubbag-node { transform: translateX(235px); }
.kasubbag-node:hover { transform: translateX(235px) translateY(-4px); }
/* TATA LETAK KAPRODI */
.kaprodi-container { position: relative; margin-top: 10px; }
.kaprodi-row {
display: flex;
justify-content: space-between;
max-width: 650px;
margin: 0 auto;
position: relative;
padding-top: 25px;
}
.line-h-kaprodi {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 390px;
height: 2px;
background: #94a3b8;
z-index: 2;
}
.node-kaprodi::before {
content: "";
position: absolute;
top: -25px;
left: 50%;
width: 2px;
height: 25px;
background: #94a3b8;
z-index: 2;
}
.node-kaprodi::after {
content: "";
position: absolute;
bottom: -25px;
left: 50%;
width: 2px;
height: 25px;
background: #94a3b8;
z-index: 2;
}
/* TATA LETAK AREA LAB */
.branch-labs { position: relative; padding-top: 40px; }
.line-h-labs {
position: absolute;
top: 0;
left: 17%;
right: 16.8%;
height: 2px;
background: #94a3b8;
z-index: 2;
}
.lab-columns {
display: flex;
justify-content: space-between;
gap: 30px;
padding: 0 20px;
}
.lab-column { flex: 1; position: relative; }
.lab-column::before {
content: "";
position: absolute;
top: -40px;
left: 50%;
width: 2px;
height: 40px;
background: #94a3b8;
z-index: 2;
}
/* CARD LAYOUT HORIZONTAL (ANGGOTA LAB) */
.lab-title {
background: linear-gradient(135deg, #f8fafc, #edf2f7);
padding: 10px;
margin: 0 0 20px 0;
font-size: 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-weight: 700;
color: #1e293b;
box-shadow: inset 0 1px 0 #ffffff;
}
.lab-members {
display: flex;
flex-direction: column;
gap: 12px;
}
.node-horizontal {
flex-direction: row;
width: 100%;
border-left: 3px solid #0f766e;
}
.text-left { text-align: left; }
/* FOTO & HOVER INTERAKTIF */
.img-wrapper {
width: 80px;
height: 100px;
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
position: relative;
background: #ebebeb;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.img-wrapper:hover img {
transform: scale(1.08);
}
.img-wrapper::after {
content: '🔍';
position: absolute;
bottom: 4px; right: 4px;
font-size: 9px;
background: rgba(255,255,255,0.85);
padding: 2px 4px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* CSS MODAL LIGHTBOX POPUP */
.modal {
display: none;
position: fixed;
z-index: 999999;
padding-top: 60px;
left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(8px);
}
.modal-content-wrapper {
margin: auto;
display: block;
width: 85%;
max-width: 420px;
text-align: center;
background: #ffffff;
padding: 20px;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.modal-content {
width: 100%;
height: auto;
max-height: 65vh;
object-fit: contain;
border-radius: 8px;
}
#modalCaption {
margin-top: 15px;
color: #1e293b;
font-size: 15px;
font-weight: 700;
}
.close-btn {
position: absolute;
top: 20px; right: 35px;
color: #cbd5e1; font-size: 40px; font-weight: 300;
cursor: pointer;
transition: color 0.2s;
}
.close-btn:hover { color: #ffffff; }
/* LAYOUT RESPONSIVE ADVANCED (MOBILE SMARTPHONE) */
@media screen and (max-width: 1000px) {
.org-chart-container { min-width: 100%; padding: 0 10px; }
.lab-columns { flex-direction: column; gap: 35px; padding: 0; }
.line-v, .line-h-kaprodi, .line-h-labs, .kasubbag-row::before, .node-kaprodi::before, .node-kaprodi::after, .lab-column::before {
display: none !important;
}
.middle-backbone { padding: 20px 0; }
.main-vertical-line {
top: -40px;
bottom: -40px;
left: 25px;
}
.org-level::after {
content: "";
position: absolute;
bottom: -40px; left: 25px;
width: 2px; height: 40px;
background: #94a3b8;
}
.branch-labs::after { display: none; }
.org-node {
flex-direction: row;
width: calc(100% - 50px) !important;
margin-left: 50px !important;
transform: none !important;
text-align: left;
margin-bottom: 15px;
}
.node-horizontal { border-left: none; border-top: 3px solid #0f766e; }
.node-staff { border-left: none; border-top: 3px solid #3b82f6; }
.node-details { text-align: left; }
.badge-title { align-self: flex-start; }
.org-node::before {
content: "";
position: absolute;
top: 50%; left: -25px;
width: 25px; height: 2px;
background: #94a3b8;
}
.kasubbag-row { justify-content: flex-start; margin-bottom: 15px; }
.kaprodi-row { flex-direction: column; padding-top: 0; gap: 0; }
.lab-title {
width: calc(100% - 50px);
margin-left: 50px;
text-align: left;
box-sizing: border-box;
}
.lab-column::after {
content: "";
position: absolute;
top: 20px; left: 25px;
width: 25px; height: 2px;
background: #94a3b8;
}
}
// CONTROLLER POPUP MODAL LIGHTBOX
function openModal(element) {
var modal = document.getElementById("imageModal");
var modalImg = document.getElementById("imgModalTarget");
var captionText = document.getElementById("modalCaption");
var clickedImg = element.getElementsByTagName('img')[0];
var personName = clickedImg.getAttribute('alt');
modal.style.display = "block";
modalImg.src = clickedImg.src;
captionText.innerHTML = personName;
}
function closeModal() {
var modal = document.getElementById("imageModal");
modal.style.display = "none";
}
document.addEventListener('keydown', function(event) {
if (event.key === "Escape") {
closeModal();
}
});
