body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body, html { height: 100%; margin: 0; } @media (max-width: 768px) { .col-md-2.bg-light { min-height: auto !important; /* jangan full tinggi */ border-right: none !important; /* hapus garis samping */ border-bottom: 1px solid #dee2e6; /* ganti garis bawah */ margin-bottom: .5rem; /* beri jarak kecil */ } } /* Navbar Top lebih tipis */ .navbar { font-size: 14px; height: 45px; } /* Sidebar Menu */ .list-group-item { border: none; border-radius: 6px; margin-bottom: 6px; } .list-group-item.active { background-color: #0d6efd; color: #fff; font-weight: 500; } .list-group-item:hover { background-color: #e9ecef; } /* Card hover effect */ .card { transition: transform 0.3s; } .card:hover { transform: translateY(-5px); } /* Bagian kiri (Hero) */ .left-side { background: #f8f9fa; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2rem; text-align: center; } /* Bagian kanan (Login) */ .right-side { background: url("../assets/image/gdn-logo.avif") no-repeat center center; background-size: contain; background-repeat: no-repeat; background-color: #3e3f41; position: relative; display: flex; justify-content: center; align-items: center; padding: 2rem; } /* Overlay blur di kanan */ .right-side::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(8px); } /* Card login */ .login-card { position: relative; z-index: 2; width: 100%; max-width: 380px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); } /* Hover effect khusus card akses cepat */ .hover-card { transition: transform 0.2s, box-shadow 0.2s; } .hover-card:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); } /* ---------------- RESPONSIVE ---------------- */ /* Tablet (<= 992px) */ @media (max-width: 992px) { .left-side, .right-side { padding: 1.5rem; } .login-card { max-width: 320px; } } /* Mobile (<= 768px) */ @media (max-width: 768px) { body, html { height: auto; /* biar tidak dipaksa 100% */ } .left-side, .right-side { flex: 1 1 100%; width: 100%; min-height: auto; } /* Stack jadi atas–bawah */ .container-flex { flex-direction: column; } .right-side { background-size: cover; /* biar logo tidak kepotong kecil */ } .login-card { max-width: 100%; } } /* Very small (<= 480px) */ @media (max-width: 480px) { .navbar { font-size: 12px; height: auto; padding: .5rem; } .left-side { padding: 1rem; } .login-card { padding: 1rem; } } 


.card-small {
  max-height: 320px;
  font-size: 0.9rem;
}

.card-small img {
  height: 150px;
  object-fit: cover;
}