html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font: 400 16px/1.65 var(--body);
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; }

.skip-link { position: absolute; top: -60px; left: var(--space-4); z-index: 5; background: var(--action);
  color: var(--action-text); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-3); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- kepala -- */
/* Kepala hanya memuat logo dan nama, jadi keduanya dipusatkan. Sebelumnya .brand berupa
   inline-flex dengan margin auto, yang tidak memusatkan apa pun sehingga logo menempel ke tepi kiri layar. */
.topbar { background: var(--bg-raised); border-bottom: 1px solid var(--border);
  display: flex; justify-content: center; padding: 0 var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 11px; padding: var(--space-3) 0; text-decoration: none; }
.brand-logo { display: block; width: 32px; height: 32px; border-radius: 7px; }
.brand-name { font: 700 17px/1.1 var(--display); letter-spacing: -.01em; }
.brand:hover .brand-name { text-decoration: underline; }

/* ----------------------------------------------------------------- tata -- */
.layout { width: min(100% - 40px, 1056px); margin: 0 auto; }
/* Blok judul pembuka dipusatkan sebagai satu blok; teks di dalamnya tetap rata kiri. */
.intro { margin: var(--space-7) auto var(--space-6); max-width: 62ch; }
h1 { font: 700 30px/1.22 var(--display); letter-spacing: -.02em; margin: 0 0 10px; }
.intro-text { margin: 0; color: var(--text-muted); }

.workspace { margin-bottom: var(--space-7); }

/* ------------------------------------------------------------- dropzone -- */
.dropzone { position: relative; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-surface); padding: var(--space-7) var(--space-4); text-align: center;
  display: grid; gap: 5px; transition: background-color .15s ease, border-color .15s ease; }
.dropzone.is-over { background: var(--bg-raised); border-color: var(--action); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-title { font: 700 16px var(--display); }
.drop-subtitle { font-size: 14px; color: var(--text-muted); }
.drop-limit { font-size: 13px; color: var(--text-dim); }
.text-button { font: inherit; color: var(--text-primary); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer; position: relative; z-index: 1; }

/* ---------------------------------------------------------------- kartu -- */
.results { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.file-card { background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px; }
.file-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-3); }
.file-name { font: 700 16px/1.3 var(--display); word-break: break-word; }
.file-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.risk { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font: 500 14px var(--body); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid; }
/* Tanpa opacity: .85 pada angka membuat lencana "Tinggi" hanya 3,92:1 (perlu 4,5:1). Pembedanya cukup bobot huruf. */
.risk .score { font-weight: 400; font-variant-numeric: tabular-nums; }
.risk.clean  { color: var(--ok);     border-color: var(--ok-line); }
.risk.low    { color: var(--low);    border-color: var(--low-line); }
.risk.medium { color: var(--warn);   border-color: var(--warn-line); }
.risk.high   { color: var(--high);   border-color: var(--high-line); }
.risk.danger { color: var(--danger); border-color: var(--danger-line); }

/* --------------------------------------------------------------- temuan -- */
.findings { display: grid; }
/* Kolom terakhir berlebar tetap. Dengan `auto`, lebar kolom bobot berbeda tiap baris
   ("30" vs "dipertahankan") sehingga kolom lain bergeser 2-8 px antar baris. */
.finding { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(110px, 1fr) 2fr 7rem;
  gap: var(--space-3); align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.finding:first-child { border-top: 0; padding-top: 0; }
.finding-label { color: var(--text-dim); font-size: 13px; word-break: break-word; }
.finding-field { color: var(--text-primary); }
.finding-value { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 13px;
  color: var(--text-muted); word-break: break-word; }
.finding-weight { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.empty-findings { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ----------------------------------------------------------------- aksi -- */
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: var(--space-4); }
.button { font: 500 14px var(--body); padding: 9px 16px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.button:hover { background: var(--bg-raised); }
.button-primary { background: var(--action); color: var(--action-text); border-color: var(--action); }
.button-primary:hover { background: #413c34; }
.button[disabled] { opacity: .55; cursor: default; }
.keep-color { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-muted); }

/* ----------------------------------------------------------- verifikasi -- */
.verify-result { display: flex; gap: 11px; align-items: flex-start; margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--ok-line); border-radius: var(--radius-md); }
.verify-result > span:first-child { color: var(--ok); font-weight: 700; }
.verify-result strong { display: block; font: 500 15px var(--body); }
.verify-result small { display: block; margin-top: 3px; font-size: 14px; color: var(--text-muted); }
.verify-result.fail { border-color: var(--danger-line); }
.verify-result.fail > span:first-child { color: var(--danger); }

.error-note { border: 1px solid var(--danger-line); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); color: var(--danger); font-size: 14px; background: var(--bg-surface); }
.results .error-note + .error-note { margin-top: var(--space-3); }

.batch-export { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-surface); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--space-3); }
.batch-export p { margin: 0; font-size: 15px; color: var(--text-muted); }

.tag { font-size: 12px; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 7px; }

/* ------------------------------------------------------- catatan privasi -- */
/* Catatan privasi selebar kolom konten, tidak lagi dibatasi 72ch: dengan batas itu teks berhenti
   di tengah kotak dan sisi kanan kosong sehingga tampak terpotong. */
.note { margin-bottom: var(--space-7); }
.note h2 { font: 700 20px/1.3 var(--display); letter-spacing: -.01em; margin: 0 0 var(--space-2); }
.note h3 { font: 700 15px var(--display); margin: var(--space-5) 0 var(--space-2); }
.note p { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: 15px; }
.note ul { margin: 0; padding-left: 20px; }
.note li { color: var(--text-muted); font-size: 15px; margin-bottom: 5px; }
.note em { font-style: italic; }

.footer { border-top: 1px solid var(--border); margin-top: var(--space-6); }
.footer span { display: block; width: min(100% - 40px, 1056px); margin: 0 auto;
  padding: var(--space-4) 0; font-size: 13px; color: var(--text-dim); text-align: center; }

/* ------------------------------------------------------ analisis mendalam -- */
.deep { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: 8px; background: var(--bg-base); }
.deep > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.deep-body { padding: 0 14px 14px; }
.deep-section { margin-top: var(--space-4); }
.deep-h { font-size: 15px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.deep-summary, .deep-list, .timeline { list-style: none; margin: 0; padding: 0; }
.deep-summary li, .deep-list li, .timeline li { padding: 5px 0; overflow-wrap: anywhere; }
.deep-note { margin: 4px 0; }
.deep-level { display: inline-block; min-width: 4.8em; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.deep-note.penting .deep-level { color: var(--danger); }
.deep-note.perhatian .deep-level { color: var(--warn); }
.deep-kind, .deep-src, .tl-src, .deep-hint { color: var(--text-muted); }
.deep-hint { font-size: 13px; margin: 6px 0; }
.tl-when { font-variant-numeric: tabular-nums; font-weight: 600; }
.deep-chain { font-weight: 600; overflow-wrap: anywhere; }
.deep-dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 2px 14px; margin: 8px 0; }
.deep-dl dt { color: var(--text-muted); overflow-wrap: anywhere; } .deep-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 680px) { .deep-dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .deep-dl dd { margin-bottom: 6px; } }
.coverage { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg-raised); }
.coverage-seg { display: block; min-width: 2px; }
.seg-piksel { background: #7f9a86; } .seg-struktur { background: #b8ad96; } .seg-warna { background: #a7b4c0; }
.seg-metadata { background: #c9a35f; } .seg-asal-usul { background: #8f7aa3; }
.seg-tidak-dikenali { background: #b9604a; } .seg-sisa { background: #6f675c; }
.coverage-legend { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--border-strong); }
.deep-parts { margin-top: 10px; }
.deep-parts > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
.deep-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.deep-table th, .deep-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.deep-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deep-table .row-unknown td:first-child { font-weight: 700; }

/* ---------------------------------------------------------------- layar -- */
@media (max-width: 680px) {
  body { font-size: 15px; }
  .layout { width: min(100% - 32px, 1056px); }
  .intro { margin: var(--space-6) auto var(--space-5); }
  h1 { font-size: 25px; }
  .dropzone { padding: var(--space-6) var(--space-3); }
  .finding { grid-template-columns: 1fr auto; grid-template-areas: "label label" "field weight" "value value";
    gap: 2px var(--space-3); padding: 8px 0; }
  .finding-label { grid-area: label; }
  .finding-field { grid-area: field; }
  .finding-value { grid-area: value; }
  .finding-weight { grid-area: weight; }
  .footer span { width: min(100% - 32px, 1056px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Atribut hidden harus selalu menang. Tanpa ini, .batch-export { display: flex } menampilkan
   kotak kosong di bawah area unggah sebelum ada berkas. */
[hidden] { display: none !important; }

.c2pa-manifest { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); }
.c2pa-h { font-size: 14px; margin: 0 0 6px; }

.audit-only { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 70ch; }