/* =====================================================================
   Form komplain kamera mati (/complain) - melengkapi landing.css
   ===================================================================== */
.cf-card { margin-top: 18px; padding: 18px 16px; border-radius: 16px; background: rgba(255, 255, 255, .97); color: var(--secondary); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.cf-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cf-center h2 { margin: 14px 0 4px; font-size: 21px; }
.cf-center .result-icon { color: var(--ternary); }
.cf-center .status-card { box-shadow: none; border: 1px solid #e6eaef; }
.cf-center .btn-ghost { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.cf-intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #4b5563; }
.cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--secondary); position: relative; }
.cf-field input[type=text], .cf-field input[type=tel], .cf-field textarea {
    width: 100%; padding: 11px 12px; border-radius: 10px; border: 1.5px solid #d5dbe3; background: #fff; color: var(--secondary); font: 400 15px var(--font); resize: vertical; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(80, 91, 107, .18); }
.cf-field [aria-invalid=true] { border-color: var(--danger); }
.cf-count { position: absolute; right: 8px; top: 0; font-weight: 400; color: #8a93a0; font-size: 11.5px; }
.cf-error { color: var(--danger); font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.cf-form-error { background: #fdecee; border: 1px solid #f4c6cc; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }

.cf-photo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; border: 2px dashed #c5cdd8; border-radius: 12px; background: #f6f8fa; cursor: pointer; overflow: hidden; font-weight: 400; }
.cf-photo:hover, .cf-photo:focus-within { border-color: var(--primary); }
.cf-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cf-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; text-align: center; color: #4b5563; pointer-events: none; }
.cf-photo-icon { font-size: 30px; }
.cf-photo-empty small { color: #8a93a0; font-size: 11.5px; }
.cf-photo img { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #111; pointer-events: none; }
.cf-photo.has-photo { border-style: solid; }
.cf-photo-remove { align-self: flex-start; margin-top: 2px; background: none; border: 0; color: var(--primary); font: 600 12.5px var(--font); text-decoration: underline; cursor: pointer; padding: 2px 0; }

.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-submit { width: 100%; padding: 14px; border: 0; border-radius: 12px; background: var(--secondary); color: var(--ternary); font: 700 15.5px var(--font); cursor: pointer; }
.cf-submit:hover { background: var(--primary); }
.cf-submit[disabled] { opacity: .65; cursor: progress; }
.cf-privacy { margin: 10px 0 0; font-size: 11.5px; color: #6b7380; text-align: center; line-height: 1.45; }
.cf .lp-link { margin-top: 16px; }
.cf-center h2:focus { outline: none; }