/* ============================================================
   Tampilan halaman KIRIM (/app) dan KLAIM (/claim).
   Bahasa desainnya sama dengan halaman depan: hitam, putih,
   satu merah. Bedanya halaman ini boleh di-scroll dan tidak
   memakai 3D sama sekali — supaya ringan dan cepat dibuka.
   ============================================================ */
:root{
  --bg:#000000;
  --ink:#ffffff;
  --ink-soft:#ffffffb0;
  --ink-dim:#ffffff6e;
  --line:#ffffff24;
  --line-2:#ffffff12;
  --glass:#ffffff08;
  --accent:#8cd003;   /* HIJAU LIMAU — diambil dari logo, warna brand */
  --warn:#ff3b30;     /* MERAH — HANYA untuk bahaya/peringatan */
  --ok:#ffffff;
  --disp:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--disp);
  -webkit-font-smoothing:antialiased;line-height:1.55;
  min-height:100vh;
}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
/* Tanpa baris ini, tombol memakai gaya bawaan browser: kotak abu terang
   dengan teks putih di atasnya — praktis tidak terbaca di tema gelap. */
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
a:hover{border-color:var(--ink)}
code{font-family:var(--mono);font-size:.92em}

/* garis pindai tipis, sama seperti halaman depan */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,#ffffff0d 0 1px,transparent 1px 3px);
}

/* ---------- header ---------- */
header{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px clamp(18px,5vw,40px);border-bottom:1px solid var(--line-2);
}
header .brand{
  display:flex;align-items:center;gap:9px;border:0;
  font-weight:900;font-size:18px;letter-spacing:-.04em;text-transform:uppercase;
}
header .brand img{height:21px;width:auto;flex:none;display:block}
header .atas{margin-left:auto;display:flex;align-items:center;gap:18px}
header .atas a{
  border:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8cd003b8;            /* hijau agak redup */
}
header .atas a:hover{color:var(--accent)}
.lencana{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--warn);color:var(--warn);
}

/* ---------- isi ---------- */
.bungkus{
  position:relative;z-index:1;
  max-width:620px;margin:0 auto;padding:48px clamp(18px,5vw,40px) 80px;
}
h1{
  font-weight:900;text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(30px,6vw,48px);line-height:.94;margin-bottom:14px;
}
.sub{color:var(--ink-soft);font-size:15px;max-width:52ch;margin-bottom:32px}

.kartu{border:1px solid var(--line);padding:26px clamp(18px,4vw,28px);margin-bottom:20px;background:var(--glass)}
label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px;
}
input{
  width:100%;background:#000;border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:16px;padding:14px 15px;outline:none;
  transition:border-color .2s;
}
input:focus{border-color:var(--ink)}
input::placeholder{color:var(--ink-dim)}
.bantuan{font-size:13px;color:var(--ink-dim);margin-top:11px;line-height:1.55}

/* ---------- tombol ---------- */
.tombol-baris{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--ink);cursor:pointer;background:none;color:var(--ink);
  transition:background .2s,color .2s,border-color .2s;
}
.btn-utama{background:var(--ink);color:#000;font-weight:700}
.btn-utama:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.btn-hantu{border-color:var(--line);color:var(--ink-soft)}
.btn-hantu:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.btn:disabled{opacity:.34;cursor:not-allowed}

/* ---------- kotak tautan klaim ---------- */
.kotak-link{
  font-family:var(--mono);font-size:12.5px;line-height:1.7;word-break:break-all;
  border:1px solid var(--line);padding:15px;background:#000;color:var(--ink-soft);
}

/* ---------- baris data ---------- */
.baris-data{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:12px;
}
.baris-data span:first-child{color:var(--ink-dim);letter-spacing:.06em}
.baris-data a{border-bottom-color:var(--line)}

/* ---------- angka besar di halaman klaim ---------- */
.jumlah{
  font-weight:900;letter-spacing:-.05em;line-height:1;
  font-size:clamp(48px,13vw,84px);
}

/* ---------- pesan ---------- */
.pesan{
  border-left:2px solid var(--line);padding:2px 0 2px 15px;margin:20px 0;
  font-size:14px;color:var(--ink-soft);line-height:1.6;
}
.pesan b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);margin-bottom:7px;font-weight:500;
}
.pesan.gagal{border-left-color:var(--warn)}
.pesan.gagal b{color:var(--warn)}
.pesan.sukses{border-left-color:var(--ink)}

/* lingkaran berputar penanda sedang bekerja */
.putar{
  display:inline-block;width:11px;height:11px;flex:none;
  border:1px solid var(--line);border-top-color:var(--ink);border-radius:50%;
  animation:putar .7s linear infinite;
}
@keyframes putar{to{transform:rotate(360deg)}}

/* ---------- kaki halaman ---------- */
footer{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:52px;padding-top:20px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);
}
footer a{border:0;color:var(--ink-dim)}
footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){ .putar{animation:none} }

/* ============================================================
   TAMBAHAN: PIN, QR, dan halaman vault
   ============================================================ */

/* ---------- pengukur kekuatan PIN ---------- */
.kuat{display:flex;align-items:center;gap:5px;margin-top:10px}
.kuat i{flex:1;height:2px;background:var(--line);display:block}
.kuat i.isi.n1{background:var(--warn)}      /* lemah = bahaya */
.kuat i.isi.n2{background:#ff8a3d}
.kuat i.isi.n3{background:var(--ink-soft)}
.kuat i.isi.n4{background:var(--accent)}    /* kuat = hijau brand */
.kuat b{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;min-width:52px;text-align:right;
}

/* ---------- lencana kecil di sebelah label ---------- */
.mini-tag{
  display:inline-block;margin-left:8px;padding:2px 7px;
  border:1px solid var(--accent);color:var(--accent);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
}

/* ---------- kode QR ----------
   Sengaja dicetak hitam di atas putih. Kamera pemindai butuh
   kotak gelap di latar terang — QR putih di hitam sering gagal. */
.qr{
  background:#fff;padding:16px;margin:20px auto 8px;
  width:fit-content;max-width:100%;line-height:0;
}
.qr svg{width:200px;height:200px;display:block}
.qr svg path{fill:#000}          /* JANGAN sentuh <rect> — itu latar putihnya */
.qr svg{shape-rendering:crispEdges}

/* ---------- halaman vault ---------- */
.ringkas-vault{
  display:flex;gap:26px;flex-wrap:wrap;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--line-2);
}
.ringkas-vault div{display:flex;flex-direction:column;gap:5px}
.ringkas-vault b{font-weight:900;font-size:28px;letter-spacing:-.03em;line-height:1}
.ringkas-vault span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);
}
.ringkas-vault div.sorot b{color:var(--warn)}   /* masih menunggu = butuh tindakan */

.drop{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 0;border-top:1px solid var(--line-2);
}
.drop:last-child{border-bottom:1px solid var(--line-2)}
.drop .jml{font-weight:900;font-size:17px;letter-spacing:-.02em;min-width:96px}
.drop .alamat{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);flex:1;min-width:120px}
.drop .kapan{font-family:var(--mono);font-size:10px;color:var(--ink-dim);letter-spacing:.08em}
.drop .aksi{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.qr-baris{padding:4px 0 18px;border-top:1px solid var(--line-2)}
.drop .aksi button{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--line);color:var(--ink-soft);
  transition:color .2s,border-color .2s;
}
.drop .aksi button:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}
.drop .aksi button.utama{border-color:var(--accent);color:var(--accent)}
.drop .aksi button.utama:hover:not(:disabled){background:var(--accent);color:#fff}
.drop .aksi button:disabled{opacity:.3;cursor:not-allowed}
.keadaan-drop{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap;
}
.keadaan-drop.nunggu{color:var(--ink);border-color:var(--ink)}
.keadaan-drop.diambil{color:var(--ink-dim)}
.keadaan-drop.terkunci{color:var(--accent);border-color:var(--accent)}
.kosong-vault{
  border:1px solid var(--line);padding:34px 26px;text-align:center;color:var(--ink-dim);
}

/* ---------- kotak tanya PIN ---------- */
.tanya{
  position:fixed;inset:0;z-index:80;background:#000000e8;
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.tanya[hidden]{display:none}
.tanya .isi{border:1px solid var(--line);background:#000;padding:28px;width:min(400px,100%)}
.tanya h3{
  font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:22px;margin-bottom:8px;
}