/* WKS Tim — tampilan gabungan B (komputer) + C (HP) */
:root {
  --latar: #F5F7FA;
  --kartu: #FFFFFF;
  --tinta: #172033;
  --redup: #5A6578;
  --garis: #E1E6ED;
  --garis-kuat: #C9D1DC;
  --aksen: #1F5FBF;
  --aksen-tua: #174A94;
  --aksen-muda: #E8F0FB;
  --telat: #B4370B;
  --telat-muda: #FDE4D8;
  --kuning-muda: #FFF3D6;
  --kuning-tua: #5C4300;
  --hijau: #1E7A4C;
  --hijau-muda: #DDF2E7;
  --staging: #C2410C;
  --radius: 12px;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--tinta);
  background: var(--latar);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--latar); font-size: 15px; line-height: 1.45; }
a { color: var(--aksen); }
a:hover { color: var(--aksen-tua); }
button, input, select, textarea { font-family: inherit; font-size: 15px; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 800; }
.redup { color: var(--redup); }
.kecil { font-size: 13px; }
[hidden] { display: none !important; }

/* Pita staging */
.pita-staging { background: var(--staging); color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 5px; }

/* Kerangka */
.kerangka { display: flex; min-height: 100vh; }
.samping {
  width: 232px; flex-shrink: 0; background: var(--kartu); border-right: 1px solid var(--garis);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 20px;
}
.merek { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--aksen); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.merek-nama { font-weight: 800; font-size: 16px; }
.merek-sub { font-size: 12px; color: var(--redup); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: #3A4558;
  padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600;
}
.menu a:hover { background: var(--latar); color: var(--tinta); }
.menu a.aktif { background: var(--aksen-muda); color: var(--aksen); }
.menu svg { flex-shrink: 0; }
.lencana { margin-left: auto; background: var(--staging); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 800; }
.akun-kecil { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--garis); font-size: 13px; text-decoration: none; color: var(--tinta); }
.isi { flex: 1; min-width: 0; padding: 26px 30px 90px; }
.wadah { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.bawah { display: none; }

/* HP */
@media (max-width: 899px) {
  .samping { display: none; }
  .isi { padding: 16px 14px 96px; }
  h1 { font-size: 22px; }
  .bawah {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--kartu); border-top: 1px solid var(--garis); padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 20;
  }
  .bawah a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px;
    text-decoration: none; color: var(--redup); font-size: 11px; font-weight: 700; position: relative;
  }
  .bawah a.aktif { color: var(--aksen); }
  .bawah a.aktif::before { content: ''; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 2px; background: var(--aksen); }
  .bawah .lencana { position: absolute; top: 4px; right: 18%; margin: 0; }
  .hanya-komputer { display: none !important; }
}
@media (min-width: 900px) { .hanya-hp { display: none !important; } }

/* Komponen */
.baris-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.baris-judul .kanan { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 20px; }
.kartu.rapat { padding: 0; overflow: hidden; }
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--garis-kuat); background: var(--kartu); color: var(--tinta);
  font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tombol:hover { border-color: var(--redup); }
.tombol.utama { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.tombol.utama:hover { background: var(--aksen-tua); }
.tombol.bahaya { color: var(--telat); }
.tombol.penuh { width: 100%; }
.tombol:disabled { opacity: .55; cursor: default; }
.tombol-ikon { width: 44px; padding: 0; }
.cip {
  min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--garis-kuat); background: var(--kartu);
  font-weight: 700; font-size: 13px; cursor: pointer; color: #3A4558;
}
.cip.aktif { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.label-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--latar); color: #3A4558; white-space: nowrap; }
.label-status.telat { background: var(--telat-muda); color: #8A2E0A; }
.label-status.batal { background: #ECEEF1; color: #4A5464; }
.label-status.selesai { background: var(--hijau-muda); color: #135235; }
.label-status.kuning { background: var(--kuning-muda); color: var(--kuning-tua); }
.inisial { width: 30px; height: 30px; border-radius: 50%; background: var(--aksen-muda); color: var(--aksen); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kosong { text-align: center; padding: 36px 16px; color: var(--redup); }

/* Ringkasan beranda */
.ubin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ubin a, .ubin div { border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.ubin .angka { font-size: 30px; font-weight: 800; line-height: 1; }
.ubin .ket { font-size: 13px; font-weight: 700; }
.ubin .u1 { background: var(--kuning-muda); color: var(--kuning-tua); }
.ubin .u2 { background: var(--telat-muda); color: #8A2E0A; }
.ubin .u3 { background: var(--aksen-muda); color: var(--aksen-tua); }
@media (max-width: 899px) { .ubin { gap: 8px; } .ubin a, .ubin div { padding: 12px; } .ubin .angka { font-size: 24px; } .ubin .ket { font-size: 12px; } }

/* Daftar proyek */
.tabel-wadah { overflow-x: auto; }
.tabel { min-width: 860px; }
.tabel-kepala, .tabel-baris {
  display: grid; grid-template-columns: 100px minmax(0, 2fr) minmax(0, 2.2fr) 130px 120px; gap: 16px; padding: 12px 18px; align-items: center;
}
.tabel-kepala { font-size: 12px; font-weight: 800; color: var(--redup); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--garis); }
.tabel-baris { border-bottom: 1px solid #EEF1F5; text-decoration: none; color: var(--tinta); }
.tabel-baris:hover { background: #FAFBFD; }
.tabel-baris:last-child { border-bottom: 0; }
.kode { font-size: 13px; font-weight: 700; color: var(--redup); }
.nama-proyek { font-weight: 800; font-size: 15px; }
.ruas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ruas span { height: 8px; border-radius: 4px; background: var(--garis); }
.ruas span.sudah { background: var(--aksen); }
.ruas span.kini { background: #7FA7E3; }
.ruas span.kini.telat { background: #D9541E; }
.ruas.batal span { background: #E4E7EB !important; }
.kartu-proyek { display: flex; flex-direction: column; gap: 8px; padding: 14px; text-decoration: none; color: var(--tinta); background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; }
.daftar-kartu { display: flex; flex-direction: column; gap: 10px; }

/* Detail */
.dua-kolom { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.kolom-kiri { flex: 1 1 290px; min-width: 0; }
.kolom-kanan { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.timeline { display: flex; flex-direction: column; margin-top: 14px; }
.langkah { display: flex; gap: 12px; }
.langkah .tiang { display: flex; flex-direction: column; align-items: center; width: 26px; }
.langkah .bulat { width: 26px; height: 26px; border-radius: 50%; background: #F0F2F5; color: var(--redup); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.langkah .tali { flex-grow: 1; width: 2px; background: var(--garis); min-height: 14px; }
.langkah:last-child .tali { display: none; }
.langkah .teks { padding-bottom: 14px; display: flex; flex-direction: column; }
.langkah.sudah .bulat { background: var(--aksen); color: #fff; }
.langkah.kini .bulat { background: var(--aksen-muda); color: var(--aksen); box-shadow: 0 0 0 2px var(--aksen); }
.langkah.kini.telat .bulat { background: var(--telat-muda); color: var(--telat); box-shadow: 0 0 0 2px var(--telat); }
.grid-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.grid-data .lbl { font-size: 12px; color: var(--redup); font-weight: 700; }
.grid-data .nil { font-size: 15px; font-weight: 800; }
@media (max-width: 599px) { .grid-data { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.galeri figure { margin: 0; position: relative; }
.galeri img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: var(--latar); }
.galeri button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(23,32,51,.75); color: #fff; cursor: pointer; font-size: 16px; }
.riwayat { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.riwayat li { display: flex; flex-direction: column; font-size: 14px; }
.riwayat time { font-size: 12px; color: var(--redup); }

/* Formulir */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form .penuh { grid-column: 1 / -1; }
@media (max-width: 599px) { .form { grid-template-columns: minmax(0, 1fr); } }
.isian { display: flex; flex-direction: column; gap: 6px; }
.isian label { font-size: 13px; font-weight: 700; color: #3A4558; }
.isian input, .isian select, .isian textarea {
  min-height: 46px; border: 1px solid var(--garis-kuat); border-radius: 10px; padding: 10px 12px; background: #fff; width: 100%;
}
.isian textarea { min-height: 96px; resize: vertical; }
.isian input:focus, .isian select:focus, .isian textarea:focus { outline: 2px solid var(--aksen); outline-offset: 1px; border-color: var(--aksen); }
.isian .bantu { font-size: 12px; color: var(--redup); }
.dengan-satuan { display: flex; align-items: center; gap: 8px; }
.dengan-satuan span { font-size: 13px; color: var(--redup); font-weight: 700; min-width: 24px; }
.aksi-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.pesan { padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.pesan.galat { background: var(--telat-muda); color: #8A2E0A; }
.pesan.ok { background: var(--hijau-muda); color: #135235; }

/* Masuk */
.halaman-masuk { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.kotak-masuk { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }

/* Dialog */
.tirai { position: fixed; inset: 0; background: rgba(23,32,51,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.dialog { background: #fff; border-radius: 14px; padding: 22px; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }

/* Versi */
.versi-dalam { font-size: 12px; color: var(--redup); padding: 0 8px; }
.samping .versi-dalam { margin-top: -12px; }
.versi { position: fixed; right: 12px; bottom: 10px; font-size: 12px; color: var(--redup); background: var(--kartu); padding: 4px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.1); z-index: 10; }

@media (max-width: 899px) {
  .baris-judul .kanan { margin-left: 0; width: 100%; }
  .baris-judul .kanan > * { flex: 1 1 auto; min-width: 0 !important; }
}