/* Kotak "Saya bukan robot" — halaman login (palet PalmGo: navy, biru, hijau) */
.hc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.hc-box {
    --hc-navy: #1a2b5e; --hc-blue: #2ba9e0; --hc-green: #43a047; --hc-red: #e5484d; --hc-border: #e2e8f0;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 12px; cursor: pointer; user-select: none; outline: none;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1.5px solid var(--hc-border);
    box-shadow: 0 1px 2px rgba(16, 29, 69, .05);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.hc-box:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(16, 29, 69, .08); }
.hc-box:focus-visible { border-color: var(--hc-blue); box-shadow: 0 0 0 4px rgba(43, 169, 224, .18); }

/* kotak centang */
.hc-check {
    position: relative; flex: none; width: 30px; height: 30px; border-radius: 8px;
    border: 2px solid #94a3b8; background: #fff; display: grid; place-items: center;
    transition: border-color .2s, background .2s, transform .2s;
}
.hc-box:hover .hc-check { border-color: var(--hc-blue); }
.hc-spinner {
    display: none; width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid rgba(43, 169, 224, .25); border-top-color: var(--hc-blue);
    animation: hc-spin .7s linear infinite;
}
.hc-tick { display: none; width: 18px; height: 18px; }
.hc-tick path { stroke: #fff; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }

/* teks */
.hc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hc-text b { font-size: 14px; font-weight: 600; color: var(--hc-navy); }
.hc-status { font-size: 12px; color: #64748b; margin-top: 2px; transition: color .2s; }

/* logo kanan */
.hc-brand { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 12px; border-left: 1px solid var(--hc-border); }
.hc-brand svg { width: 22px; height: 22px; }
.hc-brand small { font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #94a3b8; text-transform: uppercase; line-height: 1.1; text-align: center; }

/* ---- state: sedang memverifikasi ---- */
.hc-box[data-state="busy"] { cursor: progress; border-color: rgba(43, 169, 224, .5); }
.hc-box[data-state="busy"] .hc-check { border-color: transparent; background: transparent; }
.hc-box[data-state="busy"] .hc-spinner { display: block; }
.hc-box[data-state="busy"] .hc-status { color: var(--hc-blue); }

/* ---- state: terverifikasi ---- */
.hc-box[data-state="done"] { cursor: default; border-color: rgba(67, 160, 71, .55); background: linear-gradient(180deg, #ffffff 0%, #f1f9f0 100%); }
.hc-box[data-state="done"] .hc-check { border-color: var(--hc-green); background: var(--hc-green); transform: scale(1.04); box-shadow: 0 4px 12px rgba(67, 160, 71, .35); }
.hc-box[data-state="done"] .hc-tick { display: block; }
.hc-box[data-state="done"] .hc-tick path { animation: hc-draw .35s ease-out forwards; }
.hc-box[data-state="done"] .hc-status { color: #2e7d32; font-weight: 600; }

/* ---- state: perlu dicentang / kedaluwarsa / gagal ---- */
.hc-box[data-state="need"], .hc-box[data-state="error"] { border-color: rgba(229, 72, 77, .55); background: #fffafa; }
.hc-box[data-state="need"] .hc-check, .hc-box[data-state="error"] .hc-check { border-color: var(--hc-red); }
.hc-box[data-state="need"] .hc-status, .hc-box[data-state="error"] .hc-status { color: var(--hc-red); font-weight: 600; }
.hc-box[data-state="expired"] { border-color: rgba(239, 125, 0, .5); }
.hc-box[data-state="expired"] .hc-status { color: #c2410c; font-weight: 600; }

.hc-shake { animation: hc-shake .4s ease; }

@keyframes hc-spin  { to { transform: rotate(360deg); } }
@keyframes hc-draw  { to { stroke-dashoffset: 0; } }
@keyframes hc-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
    .hc-spinner { animation-duration: 1.5s; }
    .hc-shake { animation: none; }
    .hc-box[data-state="done"] .hc-tick path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 400px) {
    .hc-box { gap: 10px; padding: 10px 12px; }
    .hc-brand { padding-left: 8px; }
}