.header{

  text-align:center;

  margin-bottom:30px;

}

.header h1{

  margin:0;

  color:#1e293b;

  font-size:32px;

  font-weight:700;

}

.header p{

  margin-top:10px;

  color:#64748b;

  font-size:15px;

}

.menu-bar{

  display:flex;

  gap:10px;

  margin-bottom:25px;

}

.menu-btn{

  flex:1;

  padding:15px;

  border:none;

  border-radius:12px;

  background:#ffffff;

  color:#334155;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  transition:.25s;

  box-shadow:
    0 4px 10px
    rgba(0,0,0,.08);

}

.menu-btn:hover{

  background:#eff6ff;

}

.menu-btn.active{

  background:#2563eb;

  color:#ffffff;

}
/* ===========================
   FORM GRID
=========================== */

.page-footer{

  margin-top:35px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:#64748b;

  font-size:13px;

}
/* =============================
   MOBILE
============================= */

.logo-header{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:20px 0 10px;
}

.app-logo{
    display:block;
    width:420px;      /* ubah jadi 450px kalau mau lebih besar */
    max-width:90%;
    height:auto;
}
/* =====================================
   MATCHING PAGE
===================================== */

#matchingPage .matching-container,

#matchingPage .header-logo{
    width:85px;
    height:85px;
    object-fit:contain;
    flex-shrink:0;
}

#matchingPage .header-text{
    text-align:left;
}

#matchingPage .header-text h1{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#1f2937;
    line-height:1.2;
}

#matchingPage .header-text p{
    margin-top:6px;
    color:#6b7280;
    font-size:15px;
}

.datetime-box{

  text-align:center;

  margin-bottom:20px;

}

/* ==========================
   DATE TIME
========================== */

.datetime-box{

display:flex;

align-items:center;

gap:10px;

font-size:17px;

font-weight:600;

color:#444;

}

#currentDate{

white-space:nowrap;

}

#currentTime{

white-space:nowrap;

color:#2563eb;

font-weight:700;

}

.dot-separator{

color:#999;

font-weight:700;

}
/* ===========================
   LOGIN
===========================*/

#loginPage{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

background:#f5f7fb;

}

.login-card{

width:420px;
max-width:95%;
background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 10px 35px rgba(0,0,0,.08);

text-align:center;

}

.login-logo{

width:120px;

margin-bottom:25px;

}

.login-card h2{

margin:0;

font-size:28px;

color:#1f2937;

}

.login-subtitle{

margin:12px 0 30px;

color:#6b7280;

}

.login-card input{

width:100%;

padding:14px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

box-sizing:border-box;

}

.login-card button{

width:100%;

padding:14px;

border:none;

border-radius:10px;

background:#2563eb;

color:#fff;

font-size:16px;

font-weight:bold;

cursor:pointer;

}

.login-card button:hover{

background:#1d4ed8;

}

.top-info{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

flex-wrap:wrap;

}

.user-panel{

display:flex;

align-items:center;

gap:12px;

padding:10px 14px;

background:#ffffff;

border-radius:12px;

box-shadow:0 4px 10px rgba(0,0,0,.08);

}

.user-name{

font-weight:600;

color:#374151;

}

.logout-btn{

background:#2563eb;

color:#fff;

border:none;

padding:10px 16px;

border-radius:8px;

cursor:pointer;

font-weight:600;

}

.logout-btn:hover{

background:#1d4ed8;

}
/* ==========================================
   LABEL TOM & JERRY 121
========================================== */