/* ---- unggah.css : unggah berkas (js/unggah.js) ---- */
/* Dipakai bareng .dok / .dokg yang sudah ada di files.css. File ini cuma
   menambah elemen baru yang tidak ada di sana: thumbnail/ikon kartu berkas,
   tombol pilih berkas, progres unggah, dan peringatan rasio gambar. */

/* thumbnail foto di dalam kartu .dok (lihat kartuBerkas() di js/unggah.js) */
.berkas-thumb{
  display:block; width:100%; aspect-ratio:4/3; border-radius:7px; margin-bottom:6px;
  background-color:var(--card2); background-size:cover; background-position:center;
  border:1px solid var(--line);
}
/* ikon jenis berkas non-gambar (pdf/video/lainnya) — ukuran sama dgn thumbnail
   supaya grid tetap rapi walau isinya campur foto & dokumen */
.berkas-icon{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:4/3; border-radius:7px; margin-bottom:6px;
  background:var(--card2); font-size:28px; border:1px solid var(--line);
}
.berkas-kartu{cursor:pointer}

/* tombol pilih berkas — satu baris, ringkas (ikut aturan hemat tempat di HP) */
.unggah-tombol{
  display:inline-flex; align-items:center; gap:6px; border:1px dashed var(--line2);
  border-radius:9px; padding:7px 12px; font-size:13px; font-weight:600; color:var(--ink2);
  background:var(--card); cursor:pointer; white-space:nowrap;
}
.unggah-tombol:hover{border-color:var(--brand); color:var(--brand)}
.unggah-tombol[disabled]{opacity:.5; cursor:not-allowed}

/* progres unggah — garis tipis di bawah tombol/kartu yang sedang berjalan */
.unggah-progress{height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:4px}
.unggah-progress i{display:block; height:100%; background:var(--brand); width:0%; transition:width .2s; font-style:normal}

/* peringatan rasio gambar tidak cocok dgn resolusi layar tujuan (beo_screen.width/height) */
.unggah-warn{
  display:inline-block; margin-top:4px; font-size:11px; font-weight:700; color:var(--t-warn-fg);
  background:var(--t-warn-bg); border-radius:6px; padding:2px 6px;
}

/* pesan saat bisaUnggah() === false (mode demo atau bucket belum dibuat) */
.unggah-nonaktif{
  font-size:12.5px; color:var(--ink2); background:var(--card2); border:1px dashed var(--line2);
  border-radius:9px; padding:8px 10px;
}

/* ---- kotak unggah di dalam form ---- */
.unggah-box{border:1px dashed var(--line2);border-radius:9px;padding:10px;background:#fcfbf9}
.unggah-ada{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.unggah-ada img{width:76px;height:48px;object-fit:cover;border-radius:6px;background:#eceae3;flex:none}
.unggah-ikon{width:76px;height:48px;display:flex;align-items:center;justify-content:center;
  background:#141414;color:#fff;border-radius:6px;flex:none}
.unggah-info{flex:1 1 auto;min-width:0;font-size:13px}
.unggah-info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unggah-info span{display:block;font-size:11.5px;margin-top:1px}
.unggah-warn{color:var(--t-warn-fg);font-weight:600}
.unggah-err{color:var(--t-bad);font-size:12px;margin-top:6px;line-height:1.35}
.unggah-err:empty{display:none}

/* ---- galeri dokumentasi ---- */
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gal-i{margin:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card);cursor:pointer}
.gal-i:hover{border-color:var(--brand)}
.gal-i img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eceae3}
.gal-i figcaption{padding:6px 8px;font-size:11.5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-i figcaption span{display:block;font-size:10.5px}

/* alamat TV: monospace, bisa dipilih, tombol salin di sebelahnya */
.tv-url{display:flex;align-items:center;gap:8px;background:var(--card2);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:10px}
.tv-url code{flex:1 1 auto;min-width:0;font-size:12px;overflow-x:auto;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;user-select:all}