/* style_eyd.css */

/* -------------------------------------------------------------------------- */
/* application */
/* ucapan */
#ucapan {
white-space: nowrap;       /* cegah wrap ke baris baru */
overflow: hidden;          /* sembunyikan yang melebihi lebar */
text-overflow: ellipsis;   /* tambahkan "..." kalau kepotong */
}

/* jam */
body, nav {
margin: 0;
padding: 0;
}
.navbar-text {
font-size: 18px;
color: #333;
display: inline-flex;
align-items: center;
}
.navbar-text i {
margin-right: 5px;
}

/* khusus untuk logo header application */
.app-header {
    margin: 0;
    padding: 0;
    height: 100%;
}

.app-header .container-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
}

.app-header .container-logo img {
    width: 230px;
    height: auto;
    margin-bottom: 4px;
}

.app-header .small-text {
    font-weight: bold;
    color: #000;
    font-size: 18px;
    text-align: center;
    margin: 0;
}

.app-header .big-text {
    font-weight: bold;
    color: #000;
    font-size: 30px;
    text-align: center;
    margin: 0;
    line-height: 1;
}

/* -------------------------------------------------------------------------- */
/* logo kekuatan ganti kata sandi*/
#passwordStrength {
    height: 6px;
    width: 100%;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}
.strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}
.strength-weak { background-color: red; }
.strength-medium { background-color: orange; }
.strength-strong { background-color: green; }

/* -------------------------------------------------------------------------- */
/* user list*/
.fade-in { opacity:0; transition:opacity 0.5s ease; }
.fade-in.show { opacity:1; }
.rotate { display:inline-block; transition:transform 0.3s ease; }
.rotate.active { transform:rotate(90deg); }
.selectProduct { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.selectProduct:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.card-img-wrapper { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; background: #fff; }
.card-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: cover; }
.card-body { padding: 5px; text-align: center; }
.card-title { font-size: 0.85rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-footer { padding: 5px; text-align: center; }