:root{
    --blue:#343a56;
    --gray:#8a8a8a;
    --bg:#eeeeee;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:"Segoe UI", Arial, sans-serif;
}

body{
    background:var(--bg);
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
}




/* ============================= */
/* NAVBAR CUSTOM                 */
/* ============================= */

.mbg-navbar {
  background-color: var(--blue);
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.logo-box {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* biar img nggak keluar kotak */
}

.logo-img {
  width: 80%;
  height: auto;
  object-fit: contain;
}

/* Brand Name */
.brand-name {
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  
}



/* CONTAINER */
.container{

    width:90vw;

    min-height:90vh; /* GANTI dari height */

    display:flex;
    align-items:center;
    justify-content:center;

    gap:20vw;

    position:relative;
}


/* CARD BIRU (VERTICAL DOMINANT) */
.card-left{

    width:45vw;
    height:85vh;

    background:var(--blue);

    border-radius:30px;

    padding:30px;

    color:white;

    position:relative;

    box-shadow:0 25px 50px rgba(0,0,0,0.3);

    overflow:hidden;
}

/* JUDUL */
.card-left h1{

     font-size: clamp(40px, 5vw, 160px);
    font-weight: 700;

    font-weight:bold;

    z-index:2;

    position:relative;
}

/* IMAGE PROBE BESAR */
/* default = DESKTOP → image di tengah container */
.probe-img{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-58%, -50%);

    height:110vh;

    max-height:900px;

    max-width:105vw;

    width:auto;

    object-fit:contain;

    z-index:10;

    pointer-events:none;
}


.probe-img2{
    display: none; /* default sembunyikan untuk desktop */
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    height:75vh;

    max-height:900px;

    max-width:130vw;

    width:auto;

    object-fit:contain;

    z-index:10;

    pointer-events:none;
}


/* STATUS */
.status{
    position:absolute;
    bottom:30px;
    left:40px;
    right:40px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
}



/* kiri */
.status-left{
    display:flex;
    align-items:center;
    gap:15px;
}

.status-text{
    font-size: clamp(12px, 2vw, 22px); /* lebih besar tapi tetap responsive */
    line-height:1.2;
}

.status-text small{
    display:block;
    font-size: clamp(10px, 0.9vw, 16px); /* online lebih kecil dari lokasi */
    opacity:0.8;
}

.status-right{
    display:flex;
    flex-direction:column;
    gap: clamp(2px, 0.5vw, 6px);
    font-size: clamp(8px, 0.8vw, 13px); /* responsive */
    font-weight:500;
}

/* tiap baris */
.mode-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width: clamp(120px, 15vw, 180px); /* responsive width */
}

/* label */
.mode-label{
    flex:1;
}

/* value */
.mode-value{
    margin-left:6px;
    font-weight:600;
}


.dot{

    width:18px;

    height:18px;

    background:#00e676;

    border-radius:50%;
}

.dot-offline{
    background:#ff3b3b;
}
/* CARD KANAN */
.card-right{

    width:20vw;
    height:85vh;

    background:var(--gray);

    border-radius:30px;

    padding:40px;

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    box-shadow:0 25px 50px rgba(0,0,0,0.3);
}

.label{

    font-size: clamp(24px, 1.2vw, 50px);
}

.value{

   font-size: clamp(28px, 1.2vw, 50px);

    font-weight:bold;
}

.detail{

    font-size: clamp(14px, 1vw, 20px);

    text-align:right;

    opacity:0.8;
}





/* MOBILE */
@media(max-width:900px){

    .container{

        flex-direction:column;
        gap:40px;
    }

    .card-left{

        margin:0 auto;
        width:95%;
        height:500px;

        position:relative; /* pastikan ini ada */
    }

    .card-right{

        width:95%;
        height:auto;
    }

   

    /* PINDAHKAN image ke dalam card-left */
    .probe-img{

        display: none;
        position:absolute;

        top:50%;
        left:50%;

        transform:translate(-50%, -50%);

        height:85%;

        max-width:80%;

        z-index:5;
    }

    .probe-img2{

        display: block;
    }


.value{

   margin-bottom: 30px;
}

}