/* Poppins (SIL Open Font License, lihat assets/fonts/OFL-Poppins.txt) — disimpan di server sendiri */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
/* Absensi UNA — versi HP (/m). Satu file, tanpa framework. */
:root{
  /* Merah darah + emas (logo Universitas Asahan) */
  --hijau-tua:#5A0A0A; --hijau-2:#6E0505; --mint:#E2A72E; --emas-muda:#FFE6A8;
  --primer:#8B0000; --primer-tekan:#6E0000;
  --latar:#FAF6F5; --kartu:#fff; --garis:#EBDFDD; --garis-lembut:#F3ECEA; --isian:#D9C9C6;
  --teks:#221615; --teks-2:#6E5F5D;
  --ok-bg:#E4F3EA; --ok:#17643E; --info-bg:#E7EEF9; --info:#1D4E89;
  --warn-bg:#FCF0D9; --warn:#7A4E00; --bad-bg:#FDE7E5; --bad:#A1271B; --muted-bg:#F0EAE9; --muted:#5B4C4A;
  --gradasi:linear-gradient(170deg,#8B0000 0%,#6E0505 60%,#5A0A0A 100%);
  --aman-atas:env(safe-area-inset-top,0px); --aman-bawah:env(safe-area-inset-bottom,0px);
  --tinggi-tab:64px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--hijau-tua)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--latar);color:var(--teks);
  font:16px/1.55 "Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body.ada-nav{padding-bottom:calc(var(--tinggi-tab) + var(--aman-bawah) + 12px)}
h1,h2,h3{margin:0;line-height:1.25}
h2{font-size:17px}
p{margin:0}
a{color:var(--primer)}
.angka{font-variant-numeric:tabular-nums}
.redup{color:var(--teks-2)}
.kecil{font-size:13px}
.tengah{text-align:center}
[hidden]{display:none!important}

/* ---------- Kepala halaman ---------- */
.kepala{background:var(--gradasi);color:#fff;padding:calc(var(--aman-atas) + 22px) 20px 22px}
.kepala h1{font-size:24px}
.kepala p{color:#F2C9C2;font-size:14px;margin-top:4px}
.kepala .kembali{display:inline-block;color:#F2C9C2;text-decoration:none;font-size:14px;margin-bottom:8px;min-height:32px}

.hero{background:var(--hijau-tua);color:#fff;padding:calc(var(--aman-atas) + 18px) 20px 52px;
  background-image:radial-gradient(120% 80% at 100% 0%,rgba(226,167,46,.30) 0%,transparent 60%),var(--gradasi)}
.hero-atas{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero-nama{min-width:0}
.hero-nama small{color:#F2C9C2;font-size:13px}
.hero-nama h1{font-size:20px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hero-nama span{display:block;color:#F2C9C2;font-size:13px;margin-top:2px}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--emas-muda);color:var(--hijau-tua);box-shadow:0 0 0 2px var(--mint);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;text-decoration:none}
.jam-besar{margin:22px 0 16px}
.jam-besar b{display:block;font-size:52px;font-weight:700;letter-spacing:.01em;line-height:1}
.jam-besar span{display:block;color:#F2C9C2;font-size:14px;margin-top:8px}
.status-baris{display:flex;flex-wrap:wrap;gap:8px}
.status{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(255,255,255,.1)}
.status i{width:8px;height:8px;border-radius:50%}
.status-ok i{background:#5BE0A3;box-shadow:0 0 0 3px rgba(91,224,163,.25)}
.status-bad{background:rgba(255,120,100,.16);color:#FFD9D2}
.status-bad i{background:#FF8A75}

/* ---------- Isi ---------- */
.isi{padding:16px 16px 8px;max-width:560px;margin:0 auto}
.isi-hero{margin-top:-38px}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:18px;padding:18px;margin-bottom:14px}
.kartu>h2{margin-bottom:14px}
.kartu-judul{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.judul-bagian{margin:22px 4px 10px;font-size:15px;color:var(--teks-2);font-weight:600}
.kosong{text-align:center;color:var(--teks-2)}
.catatan{font-size:13px;color:var(--teks-2);margin:14px 0}
.layar-tengah{min-height:80vh;display:flex;align-items:center}
.layar-tengah .kartu{width:100%}

/* aksi utama */
.kartu-aksi{box-shadow:0 10px 30px rgba(14,59,48,.12);border:0}
.aksi-utama{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.label-kecil{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teks-2)}
.tombol-absen{width:100%;border:0;border-radius:18px;background:var(--primer);color:#fff;padding:22px 16px;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 8px 20px rgba(15,107,83,.35);transition:transform .08s}
.tombol-absen:active{transform:scale(.98);background:var(--primer-tekan)}
.tombol-absen[disabled]{background:#E3D3D0;box-shadow:none}
.tombol-absen svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;margin-bottom:4px}
.tombol-absen b{font-size:20px}
.tombol-absen small{font-size:13px;opacity:.85}

.keadaan{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 0}
.keadaan>b{font-size:17px}
.keadaan>p{color:var(--teks-2);font-size:14px}
.keadaan .tombol{margin-top:8px}
.keadaan-ikon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.keadaan-ikon.ok{background:var(--ok-bg);color:var(--ok)}
.keadaan-ikon.izin{background:var(--info-bg);color:var(--info)}
.keadaan-ikon.libur{background:var(--muted-bg);color:var(--muted)}
.keadaan-ikon.tunggu{background:var(--warn-bg);color:var(--warn)}
.keadaan-ikon.bad{background:var(--bad-bg);color:var(--bad)}

/* linimasa */
.linimasa{list-style:none;margin:0;padding:0}
.linimasa li{position:relative;display:flex;align-items:center;gap:14px;padding:12px 0;min-height:60px}
.linimasa li+li{border-top:1px solid var(--garis-lembut)}
.linimasa li>i{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--isian);background:#fff}
.linimasa li.selesai>i{border-color:var(--primer);background:var(--primer)}
.linimasa li.aktif>i{border-color:var(--primer);box-shadow:0 0 0 4px rgba(15,107,83,.18)}
.lm-teks{flex:1;min-width:0}
.lm-teks b{display:block;font-size:15px}
.lm-teks small{display:block;font-size:12.5px;color:var(--teks-2)}
.lm-jam{font-size:20px;font-weight:700}
.lm-jam.kosong{color:#C9BAB7;font-weight:600}

/* ---------- Badge ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-muted{background:var(--muted-bg);color:var(--muted)}

/* ---------- Form ---------- */
.medan{margin:0 0 14px;padding:0;border:0;min-width:0}
label,legend{display:block;font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=month],input[type=number],select,textarea{
  width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--isian);border-radius:12px;background:#fff;color:var(--teks);
  font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
input[type=date],input[type=time]{display:block}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primer);outline-offset:1px;border-color:var(--primer)}
.bantuan{font-size:12.5px;color:var(--teks-2);margin-top:6px}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sandi{position:relative}
.sandi input{padding-right:76px}
.lihat-sandi{position:absolute;right:6px;top:6px;bottom:6px;border:0;background:var(--muted-bg);border-radius:8px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;color:var(--teks)}
.pilihan{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pilihan label{margin:0}
.pilihan input{position:absolute;opacity:0;pointer-events:none}
.pilihan span{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid var(--isian);border-radius:12px;font-size:14px;font-weight:600;text-align:center;line-height:1.15;padding:4px}
.pilihan input:checked+span{background:var(--hijau-tua);border-color:var(--hijau-tua);color:#fff}
.pilihan input:focus-visible+span{outline:2px solid var(--primer);outline-offset:2px}

.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:12px;border:0;
  background:linear-gradient(180deg,#A30E0E,#8B0000);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 12px -6px rgba(139,0,0,.6)}
.tombol:active{background:var(--primer-tekan)}
.tombol[disabled]{background:#E3D3D0;color:#7A6764}
.tombol-2{background:#FFF6DF;color:#6B3A00;border:1px solid #EBC873;font-weight:600}
.tombol-2:active{background:#FFEDC2}
.tombol-hijau{background:#17703F;color:#fff}
.tombol-hijau:active{background:#0F5A31}
.tombol-bahaya{background:#FDECEA;color:#A1271B;border:1px solid #F0B4AC;font-weight:600}
.tombol-bahaya:active{background:#FAD7D2}
.tombol-kecil{min-height:38px;padding:0 14px;font-size:14px;border-radius:10px}
.tombol-besar{min-height:54px;font-size:17px}
.penuh{width:100%}
.dua-tombol{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- Izin ---------- */
.kartu-izin .kartu-judul{margin-bottom:4px}
.izin-tgl{font-size:14px;font-weight:600;margin-bottom:6px}
.kartu-izin p{font-size:14px;color:var(--teks);overflow-wrap:anywhere}
.kartu-izin form{margin-top:12px}
.catatan-kepala{margin-top:8px!important;padding:8px 10px;border-radius:10px;background:var(--latar);font-size:13px!important}

/* ---------- Akun ---------- */
.daftar{margin:0}
.daftar>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--garis-lembut)}
.daftar>div:last-child{border-bottom:0}
.daftar dt{color:var(--teks-2);font-size:14px;flex:none}
.daftar dd{margin:0;text-align:right;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.daftar-menu{padding:4px 0}
.daftar-menu>a,.daftar-menu>button{position:relative;display:block;width:100%;text-align:left;padding:15px 44px 15px 18px;min-height:52px;border:0;background:none;
  font:inherit;font-weight:600;color:var(--teks);text-decoration:none;cursor:pointer}
.daftar-menu>*+*{border-top:1px solid var(--garis-lembut)}
.daftar-menu small{display:block;font-weight:400;color:var(--teks-2);font-size:13px}
.daftar-menu>a::after,.daftar-menu>button::after{content:"›";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--teks-2);font-size:22px;line-height:1}

/* ---------- Login ---------- */
.layar-login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--latar)}
.login-kepala{background:var(--hijau-tua);color:#fff;padding:calc(var(--aman-atas) + 40px) 24px 56px;text-align:center;
  background-image:radial-gradient(120% 80% at 100% 0%,rgba(226,167,46,.30) 0%,transparent 60%),var(--gradasi)}
.login-kepala .lencana{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--mint),0 12px 30px rgba(0,0,0,.25)}
.login-kepala .lencana img{height:70px;width:auto}
.merek-kecil{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--emas-muda)}
.login-kepala h1{font-size:24px;margin-top:6px}
.login-kepala p{color:#F2C9C2;font-size:14px;margin-top:2px}
.login-form{background:#fff;margin:-32px 16px 0;padding:22px 18px 6px;border-radius:20px;box-shadow:0 10px 30px rgba(14,59,48,.12);max-width:440px;align-self:center;width:calc(100% - 32px)}
.tautan-web{display:block;text-align:center;margin:18px auto calc(24px + var(--aman-bawah));font-size:14px;color:var(--teks-2)}

.pasang{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px dashed var(--isian);border-radius:14px;
  padding:12px 14px;margin:16px 16px 0;max-width:440px;align-self:center;width:calc(100% - 32px)}
.isi .pasang{margin:0 0 14px;width:100%}
.pasang b{display:block;font-size:14px}
.pasang span{display:block;font-size:13px;color:var(--teks-2)}

/* ---------- Tab bawah ---------- */
.tab-bawah{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.97);border-top:1px solid var(--garis);padding-bottom:var(--aman-bawah);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tab-bawah a{height:var(--tinggi-tab);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--teks-2);text-decoration:none;font-size:12px;font-weight:600}
.tab-bawah svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab-bawah a[aria-current]{color:var(--primer)}
.tab-bawah a[aria-current] svg{stroke-width:2.3}

/* ---------- Kabar (flash) ---------- */
.kabar{position:fixed;left:12px;right:12px;top:calc(var(--aman-atas) + 10px);z-index:60;padding:13px 16px;border-radius:14px;
  font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:turun .25s ease-out;max-width:536px;margin:0 auto}
.kabar-ok{background:#E4F3EA;color:var(--ok)}
.kabar-error{background:#FDE7E5;color:var(--bad)}
.kabar.pergi{opacity:0;transform:translateY(-12px);transition:all .25s}
@keyframes turun{from{opacity:0;transform:translateY(-12px)}}

/* ---------- Lembar konfirmasi ---------- */
.lembar{position:fixed;inset:0;z-index:70;background:rgba(10,20,16,.55);display:flex;align-items:flex-end;justify-content:center}
.lembar-isi{background:#fff;width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:22px 18px calc(18px + var(--aman-bawah));animation:naik .2s ease-out}
.lembar-isi p{font-size:16px;margin-bottom:18px}
@keyframes naik{from{transform:translateY(40px);opacity:.4}}

/* ---------- Kamera ---------- */
.kamera-layar{position:fixed;inset:0;z-index:80;background:#140707;color:#fff;display:flex;flex-direction:column}
.kamera-atas{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(var(--aman-atas) + 10px) 12px 10px}
.kamera-atas h2{font-size:17px}
.kamera-atas span{min-width:44px;text-align:right;color:#F2C9C2;font-size:14px}
.tombol-ikon{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center}
.tombol-ikon svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.kamera{position:relative;width:min(calc(100vw - 32px),62vh);aspect-ratio:1/1;margin:auto;overflow:hidden;background:#2A1210}
.kamera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.kamera .oval{position:absolute;inset:9% 18%;border:3px dashed var(--mint);border-radius:50%;pointer-events:none}
.kamera-bawah{padding:14px 20px calc(18px + var(--aman-bawah));display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.kamera-bawah p{color:#C9A8A2}
.status-kamera{font-size:14px;font-weight:600;color:#FBEDEA;min-height:21px}
.hasil{width:100%;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:600}
.hasil.ok{background:#E4F3EA;color:var(--ok)}
.hasil.gagal{background:#FDE7E5;color:var(--bad)}
.rana{width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:transparent;padding:5px;cursor:pointer}
.rana span{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .1s,background .2s}
.rana:active span{transform:scale(.9)}
.rana[disabled]{opacity:.4}
.rana.proses span{background:var(--mint);animation:denyut 1s infinite}
@keyframes denyut{50%{transform:scale(.85)}}

@media (min-width:600px){
  .hero,.kepala{padding-left:calc(50vw - 260px);padding-right:calc(50vw - 260px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Panduan posisi wajah (kamera selfie) ---------- */
.panduan{position:absolute;inset:0;pointer-events:none;--warna-panduan:#F2C14E}
.panduan[data-keadaan=atur]{--warna-panduan:#FF9F43}
.panduan[data-keadaan=pas]{--warna-panduan:#3DDC84}
.panduan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.panduan .redup{fill:rgba(18,4,4,.52);transition:fill .3s}
.panduan[data-keadaan=pas] .redup{fill:rgba(6,30,16,.42)}
.panduan .cincin{fill:none;stroke:var(--warna-panduan);stroke-width:3;vector-effect:non-scaling-stroke;transition:stroke .3s;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.35))}
.panduan[data-keadaan=pas] .cincin{stroke-width:4;filter:drop-shadow(0 0 10px rgba(61,220,132,.75))}
.panduan .pindai{fill:none;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:14 86;opacity:.9;animation:pindai-oval 2.2s linear infinite}
.panduan[data-keadaan=pas] .pindai{opacity:0}
.panduan .bahu{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.panduan .mata{stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.panduan[data-keadaan=pas] .mata{opacity:0}
.panduan .sudut{fill:none;stroke:var(--warna-panduan);stroke-width:3.5;vector-effect:non-scaling-stroke;stroke-linecap:round;transition:stroke .3s}
.panduan-pesan{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);
  padding:7px 14px;border-radius:999px;background:rgba(20,6,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:13px;font-weight:600;line-height:1.3;text-align:left;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:background .3s}
.panduan-pesan i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--warna-panduan);box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.panduan[data-keadaan=cari] .panduan-pesan i{animation:kedip-panduan 1s ease-in-out infinite}
.panduan[data-keadaan=pas] .panduan-pesan{background:rgba(12,92,48,.88)}
@keyframes pindai-oval{to{stroke-dashoffset:-100}}
@keyframes kedip-panduan{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.panduan .pindai,.panduan-pesan i{animation:none}}
.kamera{border-radius:26px;box-shadow:0 0 0 3px rgba(226,167,46,.55),0 18px 40px rgba(0,0,0,.45)}
.rana.pas{border-color:#3DDC84;box-shadow:0 0 0 6px rgba(61,220,132,.25)}

/* v1.13: "Ingat saya" & ganti username */
.ingat{display:flex;align-items:flex-start;gap:12px;margin:4px 0 18px;font-size:15px;font-weight:500;color:var(--teks);cursor:pointer;-webkit-user-select:none;user-select:none}
.ingat input{width:22px;height:22px;accent-color:var(--primer);margin:0;flex:none}
.ingat small{display:block;font-size:12.5px;font-weight:400;color:var(--teks-2);margin-top:2px}
.username-kini{display:inline-block;font-weight:700;background:var(--latar);border:1px solid var(--garis);border-radius:8px;padding:2px 10px}
details.lipat{margin-top:12px}
details.lipat>summary{cursor:pointer;font-weight:600;color:var(--primer);list-style:none;padding:10px 0}
details.lipat>summary::-webkit-details-marker{display:none}
details.lipat>summary::before{content:"✎ "}
/* v1.14: lampiran izin & lembur (versi HP) */
.label-medan{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.opsional{font-weight:400;color:var(--teks-2)}
.unggah{position:relative}
.unggah input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.unggah-kotak{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px dashed var(--garis);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.unggah-kotak:hover,.unggah input:focus-visible+.unggah-kotak{border-color:var(--primer);background:#fff8f7}
.unggah-ikon{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#fbeceb;color:var(--primer)}
.unggah-teks{flex:1;min-width:0;display:flex;flex-direction:column}
.unggah-teks b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unggah-teks small{color:var(--teks-2);font-size:12px}
.unggah-aksi{flex:none;font-weight:600;font-size:13px;color:var(--primer);border:1px solid var(--primer);border-radius:999px;padding:4px 14px}
.unggah.terisi .unggah-kotak{border-style:solid;border-color:#1c8a4e;background:#f1faf4}
.unggah.terisi .unggah-ikon{background:#dcf3e5;color:#1c8a4e}
.unggah.terisi .unggah-teks small{color:#1c8a4e}
.unggah.terisi .unggah-aksi{margin-right:34px}
.unggah.salah .unggah-kotak{border-color:#b3261e}
.unggah-hapus{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:0;background:#fbeceb;color:#b3261e;font-weight:700;cursor:pointer}
.unggah-galat{margin-top:6px;color:#b3261e;font-size:13px;font-weight:500}
.lampiran-tautan{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;border-radius:999px;background:#f5efe6;border:1px solid var(--garis);font-size:12.5px;font-weight:600;color:var(--teks);text-decoration:none;max-width:100%}
.lampiran-tautan:hover{border-color:var(--primer);color:var(--primer)}
.lampiran-tautan span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}