/* Import Font Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

/* Terapkan Poppins ke Seluruh Elemen Tanpa Terkecuali */
* {
    font-family: 'Poppins', sans-serif !important;
}

body {
    background-color: #eeeeee; 
    color: #4f5d75; /* Warna teks abu-abu tua yang elegan */
    -webkit-font-smoothing: antialiased;
}

/* Mengatur Ketegasan Judul */
h1, h2, h3, h4, h5, h6, .brand-text-af {
    font-weight: 700 !important;
    color: #2d3436;
    letter-spacing: -0.01em;
}

/* Mengatur Font di Tabel (Penting untuk Laporan) */
table thead th {
    font-weight: 600 !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

table tbody td {
    font-weight: 400;
    font-size: 0.9rem;
}

/* Mengatur Font di Tombol */
.btn {
    font-weight: 500 !important;
    letter-spacing: 0.3px;
}

/* Pastikan angka di form input tetap jelas */
input, select, textarea {
    font-weight: 400 !important;
}

.card {
    border: none !important;
    box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2) !important; 
    border-radius: 12px;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 12px 18px 0 rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-1px);
}

.sidebar {
    border-right: none !important; 
    box-shadow: 5px 0 18px 0 rgba(0, 0, 0, 0.2) !important;
    z-index: 1000; 
}

.sidebar:hover {
    box-shadow: 8px 0 24px 0 rgba(0, 0, 0, 0.3) !important;
}

.btn {
    border: none !important; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
    transition: all 0.2s ease-in-out; 
    border-radius: 8px; 
}

.btn:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
    transform: translateY(-1px); 
}

.btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
    transform: translateY(1px); 
}

.btn-primary {
    box-shadow: 0 4px 10px rgba(93, 156, 236, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 6px 15px rgba(93, 156, 236, 0.35);
}

.pos {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
    border-radius: 2px !important;
    opacity: 85%;
    background-color: #ebf1f5;
}
.pos:hover {
    transform: scale(1.05); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3) !important;
}


.text-responsive {
    font-size: 1rem;
}
@media (max-width: 576px) {
    .text-responsive {
        font-size: 10px !important;
    }
    .text-responsive-title {
        font-size: 16px !important;
    }
}


#webcam_nya {
    width: 100% !important;
    max-width: 640px; /* Batas maksimal desktop */
    height: auto !important;
    aspect-ratio: 4/3; /* Menjaga kotak tetap proporsional */
    background: #eee;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#webcam_nya video {
    position: relative !important; /* Paksa video jadi normal */
    width: 100% !important;        /* Penuhi kotak abu-abu */
    height: auto !important;
    border-radius: 8px;
}

#imageeditcamcrop {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Memastikan seluruh gambar terlihat tanpa distorsi */
}