/* ══════════════════════════════════════════════
   FLOAT-IN untuk halaman PUBLIK mandiri (form/survei, gerbang akses, dst)
   Seragam dengan label mengambang di seluruh aplikasi (layout.css + float-label.js), tapi
   TANPA bergantung pada layout.css / float-label.js — murni CSS, jadi aman dipakai di iframe embed.

   Markup:
     <div class="aq-fi">
       <label for="x">Nama <span class="req">*</span></label>
       <input id="x" placeholder="">        <!-- input/textarea: placeholder WAJIB ada (boleh " ") -->
     </div>
     <div class="aq-fi"><label for="y">Kota</label><select id="y"><option value="">Pilih...</option>…</select></div>
        <!-- select: opsi pertama value="" = kosong -->

   Label istirahat DI DALAM field saat kosong & tak fokus, melayang ke garis tepi saat fokus/terisi.
   Tanpa dukungan :has, label tetap di garis tepi (tidak pernah menimpa isi field).
   date/time/file selalu "terisi" (label tetap di garis tepi) karena tak punya placeholder.
   Variabel: --brand (warna fokus), --aqfi-scale (ukuran-field / ukuran-label; default .95rem/.68rem = 1.397).
   ══════════════════════════════════════════════ */
.aq-fi { position: relative; margin-top: 8px; --aqfi-scale: 1.397; }
.aq-fi > :is(input, textarea, select) {
  display: block; width: 100%; padding: 13px 14px 11px;
  border: 1.5px solid var(--glass-field-border, rgba(0,0,0,.10)); border-radius: var(--glass-field-radius, var(--radius-md, 8px));
  background: var(--surface, #fff); color: inherit;
  font-size: var(--text-md, .95rem); line-height: 20px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.aq-fi > textarea { resize: vertical; min-height: 96px; }
.aq-fi > :is(input, textarea, select):focus {
  outline: none; border-color: var(--brand, #008060); box-shadow: var(--focus-ring-lg, 0 0 0 4px rgba(0,0,0,.06));
}
.aq-fi > label {
  position: absolute; z-index: 1; left: 13px; top: 0; margin: 0; padding: 0 6px; max-width: calc(100% - 26px);
  height: 14px; line-height: 14px; font-size: var(--text-2xs, .68rem); font-weight: 700; color: var(--text-muted, #6d7175);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  /* separuh bawah "memotong" garis tepi field, separuh atas transparan (aman di latar embed apa pun) */
  background: linear-gradient(to bottom, transparent 50%, var(--surface, #fff) 50%);
  transform: translateY(-7px); transform-origin: left center;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), color .22s, font-weight .22s;
}
.aq-fi:focus-within > label { color: var(--brand, #008060); }
.aq-fi:has(> :is(input, textarea):placeholder-shown:not(:focus)) > label,
.aq-fi:has(> select:not(:focus) option:checked[value=""]) > label {
  transform: translate(-3.5px, 17.5px) scale(var(--aqfi-scale));
  max-width: calc((100% - 26px) / var(--aqfi-scale));
  background: transparent; color: var(--text-faint, #6b7280); font-weight: 500;
}
/* placeholder asli disembunyikan selama label beristirahat (tidak bertumpuk), muncul saat label naik */
.aq-fi > :is(input, textarea)::placeholder { transition: color .22s; }
.aq-fi > :is(input, textarea):placeholder-shown:not(:focus)::placeholder { color: transparent; }
.aq-fi:has(> select:not(:focus) option:checked[value=""]) > select { color: transparent; }
.aq-fi > select option { color: #1a1a1a; }
.aq-fi > label .req { color: var(--color-danger, #dc2626); }
.aq-fi.aq-fi-invalid > label { color: var(--color-danger-text, #dc2626); }
.aq-fi.aq-fi-invalid > :is(input, textarea, select) { border-color: #dc2626; }
@media (prefers-reduced-motion: reduce) { .aq-fi > label { transition: none; } }