/* ══════════════════════════════════════════
   UI CORE SETTINGS
   ══════════════════════════════════════════ */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    color: #1E1B16;
}

/* ══════════════════════════════════════════
   FLOATING LABEL IMPROVED
   ══════════════════════════════════════════ */
.fl {
    position: relative;
}

/* INPUT / TEXTAREA / SELECT */
.fl>input,
.fl>textarea,
.fl>select {
    padding-top: 32px !important;
    /* ✅ jarak ideal dari label */
    padding-bottom: 10px !important;
    padding-left: 12px;
    padding-right: 12px;

    color: #1E1B16 !important;
    font-weight: 500 !important;

    border: 1.5px solid #ECEAE2 !important;
    border-radius: 8px;
    background-color: #FFFFFF !important;

    transition: all 0.2s ease;
}

/* FOCUS EFFECT (lebih modern & clean) */
.fl>input:focus,
.fl>textarea:focus,
.fl>select:focus {
    border-color: #C9A84C !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
    outline: none;
}

/* placeholder hide */
.fl>input::placeholder,
.fl>textarea::placeholder {
    color: transparent;
}

/* LABEL */
.fl>label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 13px;
    font-weight: 500;
    color: #928C7C;

    pointer-events: none;
    transition: all 0.2s ease;
}

/* FLOATING STATE */
.fl>input:focus~label,
.fl>input:not(:placeholder-shown)~label,
.fl>textarea:focus~label,
.fl>textarea:not(:placeholder-shown)~label,
.fl>select:focus~label,
.fl>select:not([value=""])~label {
    top: 8px;
    /* ✅ posisi atas label */
    transform: scale(0.82);
    transform-origin: left;

    font-weight: 600;
    color: #8C6E27;
}

/* ══════════════════════════════════════════
   EXTRA POLISH
   ══════════════════════════════════════════ */

/* KTP Input lebih tajam */
#ktp_no {
    letter-spacing: 0.15em;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600 !important;
}

/* Toast */
.toast-item {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 14px 24px;
    border: 1px solid rgba(201, 168, 76, 0.3);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
}

.toast-item p {
    color: #1E1B16 !important;
    font-weight: 600;
}

/* Spinner */
.spinner {
    border: 3px solid #F5F4EF;
    border-top: 3px solid #C9A84C;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 0.8s ease infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}