/* Brankas: baja dingin + aksen kuningan; satu huruf (IBM Plex Sans); ciri khas = dial kunci kombinasi */
@font-face { font-family: 'Plex'; src: url(fonts/plex-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url(fonts/plex-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex'; src: url(fonts/plex-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --latar: #e9edf0; --panel: #f6f8f9; --kartu: #fff; --tinta: #172026; --redup: #5b6873;
  --garis: #d8dee3; --garis-kuat: #b4bec6; --hover: rgba(23, 32, 38, .06); --sampul: #edf0f2;
  --kuningan: #c8973a; --kuningan-teks: #855f14; --kuningan-tipis: rgba(200, 151, 58, .16); --pada-kuningan: #1c1405;
  --bahaya: #b3412f; --bayang: 0 12px 32px rgba(18, 28, 36, .16), 0 2px 6px rgba(18, 28, 36, .08);
  --j-folder: #a87a22; --j-gambar: #b9532f; --j-video: #7b4fa3; --j-audio: #23867a; --j-pdf: #b3412f;
  --j-dokumen: #2f68a8; --j-teks: #4f5d68; --j-arsip: #855f14; --j-lain: #5b6873;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    color-scheme: dark;
    --latar: #11161a; --panel: #171d22; --kartu: #1d252b; --tinta: #e3e9ed; --redup: #97a4ae;
    --garis: #2a343b; --garis-kuat: #3e4a53; --hover: rgba(227, 233, 237, .07); --sampul: #242d34;
    --kuningan: #d6a84e; --kuningan-teks: #e2bb6c; --kuningan-tipis: rgba(214, 168, 78, .16);
    --bahaya: #e0735c; --bayang: 0 14px 36px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    --j-folder: #d6a84e; --j-gambar: #e08463; --j-video: #b08ad6; --j-audio: #5cc0b2; --j-pdf: #e0735c;
    --j-dokumen: #77a7e0; --j-teks: #a9b6bf; --j-arsip: #e2bb6c; --j-lain: #97a4ae;
  }
}
:root[data-tema="gelap"] {
  color-scheme: dark;
  --latar: #11161a; --panel: #171d22; --kartu: #1d252b; --tinta: #e3e9ed; --redup: #97a4ae;
  --garis: #2a343b; --garis-kuat: #3e4a53; --hover: rgba(227, 233, 237, .07); --sampul: #242d34;
  --kuningan: #d6a84e; --kuningan-teks: #e2bb6c; --kuningan-tipis: rgba(214, 168, 78, .16);
  --bahaya: #e0735c; --bayang: 0 14px 36px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  --j-folder: #d6a84e; --j-gambar: #e08463; --j-video: #b08ad6; --j-audio: #5cc0b2; --j-pdf: #e0735c;
  --j-dokumen: #77a7e0; --j-teks: #a9b6bf; --j-arsip: #e2bb6c; --j-lain: #97a4ae;
}

*, ::before, ::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--latar); color: var(--tinta);
  font: 400 14px/1.45 'Plex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--kuningan-teks); }
:focus-visible { outline: 2px solid var(--kuningan-teks); outline-offset: 2px; }
.redup { color: var(--redup); }
.kecil { font-size: 12.5px; }
.galat { color: var(--bahaya); font-size: 13px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: var(--sampul); padding: 2px 6px; border-radius: 6px; user-select: all; }

.ik { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ik.besar { width: 44px; height: 44px; stroke-width: 1.25; }
.ik.raksasa { width: 76px; height: 76px; stroke-width: 1; }
.j-folder { --jc: var(--j-folder); } .j-gambar { --jc: var(--j-gambar); } .j-video { --jc: var(--j-video); }
.j-audio { --jc: var(--j-audio); } .j-pdf { --jc: var(--j-pdf); } .j-dokumen { --jc: var(--j-dokumen); }
.j-teks { --jc: var(--j-teks); } .j-arsip { --jc: var(--j-arsip); } .j-lain { --jc: var(--j-lain); }
.ik.jenis { color: var(--jc, var(--redup)); }
.j-folder .ik.jenis, .pemilih .ik.jenis { color: var(--j-folder); fill: var(--j-folder); fill-opacity: .22; }

/* ---------- tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--garis-kuat); border-radius: 10px; background: var(--kartu); color: var(--tinta);
  font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tombol:hover { background: var(--sampul); }
.tombol.utama { background: var(--kuningan); border-color: transparent; color: var(--pada-kuningan); }
.tombol.utama:hover { background: color-mix(in srgb, var(--kuningan) 88%, #000); }
.tombol.utama.bahaya { background: var(--bahaya); color: #fff; }
.tombol.polos { background: transparent; border-color: transparent; }
.tombol.polos:hover { background: var(--hover); }
.tombol.kecil { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.tombol.kecil .ik { width: 17px; height: 17px; }
.tombol.penuh { width: 100%; }
.tombol:disabled { opacity: .5; cursor: not-allowed; }
.bahaya:not(.utama) { color: var(--bahaya); }
.ikon-saja {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--redup); cursor: pointer; text-decoration: none;
}
.ikon-saja:hover { background: var(--hover); color: var(--tinta); }
.ikon-saja:disabled { opacity: .45; cursor: default; background: none; }
.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; margin-left: 4px;
  border: 0; border-radius: 50%; background: var(--tinta); color: var(--latar); font-weight: 600; cursor: pointer;
}

/* ---------- dial ---------- */
.dial line { stroke: var(--garis-kuat); stroke-width: 2.4; stroke-linecap: round; transition: stroke .3s; }
.dial line.isi { stroke: var(--kuningan); }
.hampir-penuh .dial line.isi { stroke: var(--bahaya); }
.dial-cincin { fill: none; stroke: var(--garis); stroke-width: 1.5; }
.dial-poros { fill: var(--kuningan); }

/* ---------- kerangka aplikasi ---------- */
.app { height: 100dvh; overflow: hidden; }
.kerangka { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100dvh; }
.bagi .kerangka { grid-template-columns: minmax(0, 1fr); }
.samping { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 14px 12px 10px; overflow-y: auto; }
.merek { display: flex; align-items: center; gap: 10px; padding: 6px 10px; color: var(--tinta); font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.merek .ik { width: 26px; height: 26px; stroke-width: 2; color: var(--kuningan); }
.baru { align-self: flex-start; height: 48px; padding: 0 22px 0 16px; border-radius: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(18, 28, 36, .18); }
.navigasi { display: flex; flex-direction: column; gap: 2px; }
.navigasi a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 20px; color: var(--tinta); font-weight: 500; text-decoration: none; }
.navigasi a:hover { background: var(--hover); }
.navigasi a[aria-current] { background: var(--kuningan-tipis); color: var(--kuningan-teks); font-weight: 600; }
.meteran { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 10px 8px; }
.dial-kecil { width: 64px; height: 64px; flex-shrink: 0; }
.meteran p { display: flex; flex-direction: column; margin: 0; }
.meteran strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meteran span { color: var(--redup); font-size: 12.5px; }

.isi-utama { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 8px 8px 8px 0; overflow: hidden; background: var(--panel); border: 1px solid var(--garis); border-radius: 18px; }
.bagi .isi-utama { margin: 8px; }
.atas { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px 16px; }
.atas .merek { padding-left: 4px; }
.cari { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; max-width: 720px; height: 46px; padding: 0 6px 0 16px; background: var(--latar); border: 1px solid transparent; border-radius: 23px; color: var(--redup); }
.cari:focus-within { background: var(--kartu); border-color: var(--garis-kuat); }
.cari input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--tinta); font-size: 15px; outline: none; }
.cari select { max-width: 140px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--redup); font-size: 13px; cursor: pointer; }
.cari select:hover { background: var(--hover); }
.atas-aksi { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu-hp, .fab { display: none; }

.bilah { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 56px; padding: 4px 12px 4px 14px; }
.bilah h1, .bilah-judul { margin: 0; padding: 6px 10px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.jejak { flex: 1; min-width: 0; }
.jejak ol { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.jejak li { display: flex; align-items: center; flex-shrink: 0; }
.jejak a { padding: 6px 10px; border-radius: 8px; color: var(--redup); font-size: 18px; text-decoration: none; }
.jejak a:hover { background: var(--hover); color: var(--tinta); }
.jejak li > .ik { width: 16px; height: 16px; color: var(--garis-kuat); }
.bilah-aksi { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.bilah.pilih { margin: 4px 12px 8px; padding: 4px 8px; min-height: 48px; background: var(--kuningan-tipis); border-radius: 14px; }
.bilah.pilih .bilah-judul { font-size: 15px; padding: 0 4px; }
.bilah.pilih .ikon-saja { color: var(--tinta); }
.bilah-catatan { flex-basis: 100%; margin: -4px 0 4px 10px; color: var(--redup); font-size: 13px; }

/* ---------- daftar file ---------- */
.daftar { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 0 20px 96px; outline: none; }
.daftar[aria-busy] { cursor: progress; }
.daftar[aria-busy] .grup-isi { opacity: .6; transition: opacity .2s .15s; }
.grup-judul { margin: 14px 0 10px; color: var(--redup); font-size: 13px; font-weight: 500; }
.item { position: relative; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: default; }
.item:focus-visible { outline: 2px solid var(--kuningan-teks); outline-offset: 2px; }
.label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nama-wadah { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nama { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sub { display: none; color: var(--redup); font-size: 12px; font-variant-numeric: tabular-nums; }
.ik.tanda { width: 15px; height: 15px; color: var(--redup); }
.ik.tanda.bintang { color: var(--kuningan); fill: currentColor; }
.opsi { width: 34px; height: 34px; opacity: 0; }
.opsi .ik { width: 18px; height: 18px; }
.item:hover .opsi, .item:focus-within .opsi, .item[aria-selected="true"] .opsi { opacity: 1; }
@media (hover: none) { .opsi { opacity: 1; } }
.meta { overflow: hidden; color: var(--redup); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tujuan { outline: 2px dashed var(--kuningan) !important; outline-offset: 2px; background: var(--kuningan-tipis) !important; }

/* kisi: folder = keping ringkas, file = kartu bersampul */
.kisi .grup-isi { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; }
.kisi .item { display: flex; flex-direction: column; overflow: hidden; background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; }
.kisi .item:hover { border-color: var(--garis-kuat); }
.kisi .item[aria-selected="true"] { background: color-mix(in srgb, var(--kuningan) 14%, var(--kartu)); border-color: var(--kuningan); }
.kisi .sampul { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 6px 6px 0; overflow: hidden; background: var(--sampul); border-radius: 8px; color: var(--jc); }
.kisi .sampul img { width: 100%; height: 100%; object-fit: cover; }
.kisi .folder .sampul { display: none; }
.kisi .label { height: 48px; padding: 0 42px 0 12px; }
.kisi .opsi { position: absolute; right: 4px; bottom: 7px; }
.kisi .meta { display: none; }

/* daftar baris */
.baris .grup-judul { display: none; }
.kepala-kolom, .baris .item { display: grid; grid-template-columns: minmax(0, 1fr) 0 110px 90px 40px; align-items: center; column-gap: 12px; }
.dengan-lokasi .kepala-kolom, .dengan-lokasi.baris .item { grid-template-columns: minmax(0, 1fr) 160px 110px 90px 40px; }
.baris .lokasi { visibility: hidden; }
.dengan-lokasi .lokasi { visibility: visible; }
.kepala-kolom { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 8px; background: var(--panel); border-bottom: 1px solid var(--garis); color: var(--redup); font-size: 13px; font-weight: 500; }
.baris .item { height: 48px; padding: 0 8px; border-bottom: 1px solid var(--garis); }
.baris .item:hover { background: var(--hover); }
.baris .item[aria-selected="true"] { background: var(--kuningan-tipis); box-shadow: inset 3px 0 var(--kuningan); }
.baris .sampul { display: none; }
.baris .label { gap: 12px; }

.kosong { display: flex; flex-direction: column; align-items: center; padding: 72px 16px; color: var(--redup); text-align: center; }
.kosong .raksasa { margin-bottom: 14px; color: var(--garis-kuat); }
.kosong-judul { margin: 0 0 4px; color: var(--tinta); font-size: 17px; font-weight: 600; }
.kosong p { max-width: 42ch; margin: 0; }

/* ---------- lapisan: seret, unggahan, toast, menu ---------- */
.seret { position: fixed; inset: 8px; z-index: 40; display: grid; place-items: end center; padding-bottom: 36px; pointer-events: none; background: var(--kuningan-tipis); border: 2px dashed var(--kuningan); border-radius: 18px; }
.seret > div { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--tinta); color: var(--latar); border-radius: 12px; box-shadow: var(--bayang); }
.seret p { margin: 0; }

.antrean { position: fixed; right: 24px; bottom: 24px; z-index: 25; width: min(380px, calc(100vw - 32px)); overflow: hidden; background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; box-shadow: var(--bayang); }
.antrean header { display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 16px; background: var(--tinta); color: var(--latar); }
.antrean header strong { flex: 1; font-weight: 500; }
.antrean header .ikon-saja { width: 36px; height: 36px; color: inherit; }
.antrean header .ikon-saja:hover { background: rgba(127, 127, 127, .2); }
.antrean.ciut ul { display: none; }
.antrean.ciut [data-antrean-ciut] .ik { transform: rotate(180deg); }
.antrean ul { max-height: 40vh; margin: 0; padding: 4px 0; overflow: auto; list-style: none; }
.antrean li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 32px; align-items: center; column-gap: 8px; padding: 6px 6px 6px 14px; }
.antrean li .ik.jenis { color: var(--redup); }
.antrean li .ikon-saja { width: 32px; height: 32px; }
.u-nama { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.u-status { max-width: 150px; overflow: hidden; color: var(--redup); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
[data-status="gagal"] .u-status { color: var(--bahaya); }
[data-status="selesai"] .ikon-saja { color: var(--j-audio); }
.antrean progress { grid-column: 2 / -1; width: 100%; height: 3px; margin-top: 4px; border: 0; border-radius: 2px; background: var(--sampul); -webkit-appearance: none; appearance: none; }
.antrean progress::-webkit-progress-bar { background: var(--sampul); }
.antrean progress::-webkit-progress-value { background: var(--kuningan); }
.antrean progress::-moz-progress-bar { background: var(--kuningan); }
[data-status="selesai"] progress, [data-status="batal"] progress, [data-status="antre"] progress { display: none; }

.toast-wadah { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: var(--tinta); color: var(--latar); border-radius: 10px; box-shadow: var(--bayang); animation: muncul .18s ease-out; }
.toast > span { flex: 1; }
.toast .ik { color: var(--kuningan); }
.toast.galat .ik { color: var(--bahaya); }
.toast .tombol.polos { color: var(--kuningan); }
.toast .tombol.polos:hover { background: rgba(127, 127, 127, .2); }
@keyframes muncul { from { opacity: 0; transform: translateY(8px); } }

.menu { position: fixed; z-index: 60; min-width: 232px; max-width: calc(100vw - 16px); padding: 6px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; box-shadow: var(--bayang); }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta); text-align: left; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--hover); outline: none; }
.menu button .ik { width: 18px; height: 18px; color: var(--redup); }
.menu button.bahaya, .menu button.bahaya .ik { color: var(--bahaya); }
.menu button.aktif { font-weight: 600; }
.menu .ik.ujung { margin-left: auto; color: var(--kuningan-teks); }
.menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--garis); }
.menu.lembar { inset: auto 0 0; min-width: 0; max-width: none; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 0 0 100vmax rgba(8, 12, 15, .45); animation: naik .2s ease-out; }
.menu.lembar button { height: 48px; font-size: 15px; }
@keyframes naik { from { opacity: .6; transform: translateY(30%); } }

/* ---------- dialog ---------- */
dialog::backdrop { background: rgba(8, 12, 15, .5); }
.dialog { width: min(460px, calc(100vw - 32px)); padding: 0; background: var(--kartu); color: var(--tinta); border: 1px solid var(--garis); border-radius: 16px; box-shadow: var(--bayang); }
.dialog.lebar { width: min(620px, calc(100vw - 32px)); }
.dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.dialog header { display: flex; align-items: center; gap: 8px; padding: 14px 10px 4px 22px; }
.dialog h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.dialog-isi { padding: 4px 22px 8px; overflow: auto; }
.dialog-isi > p:first-child { margin-top: 4px; }
.dialog .galat { margin: 0 22px; }
.dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; }
.isian { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.isian > span { color: var(--redup); font-size: 13px; font-weight: 500; }
.isian input, .isian select { height: 42px; padding: 0 12px; background: var(--panel); border: 1px solid var(--garis-kuat); border-radius: 10px; }
.isian input:focus, .isian select:focus { border-color: var(--kuningan); outline: 2px solid var(--kuningan-tipis); outline-offset: 0; }
.centang { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.centang input { width: 18px; height: 18px; accent-color: var(--kuningan); }
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pemilih-jejak { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 32px; margin-bottom: 8px; }
.pemilih-jejak .ik { width: 14px; height: 14px; color: var(--garis-kuat); }
.tautan-teks { padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--kuningan-teks); cursor: pointer; }
.tautan-teks:hover { background: var(--hover); }
.pemilih ul { height: 280px; margin: 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--garis); border-radius: 10px; }
.pemilih li button { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--garis); background: transparent; text-align: left; cursor: pointer; }
.pemilih li button:hover { background: var(--hover); }
.pemilih li button:disabled { opacity: .45; cursor: not-allowed; }
.pemilih li button span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pemilih .ik.ujung { width: 16px; height: 16px; color: var(--redup); }
.pemilih li.redup, .pemilih li.galat { padding: 14px; }

.tautan-daftar { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; padding: 0; list-style: none; }
.tautan-baris { display: flex; align-items: center; gap: 6px; }
.tautan-baris input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; background: var(--panel); border: 1px solid var(--garis); border-radius: 8px; font-size: 13px; }
.tautan-daftar p { margin: 4px 0 0; }
.tautan-baru { margin: 0; padding: 2px 16px 8px; border: 1px solid var(--garis); border-radius: 12px; }
.tautan-baru legend { padding: 0 6px; font-weight: 600; }

.info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 6px 0; }
.info dt { color: var(--redup); }
.info dd { margin: 0; overflow-wrap: anywhere; }
.akun-nama { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; font-size: 16px; }
.akun-nama .avatar { width: 40px; height: 40px; margin: 0; cursor: default; }
.akun-baris { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--garis); }
.akun-baris > div { flex: 1; }
.akun-baris p { margin: 2px 0 0; }
.akun-keluar { margin: 6px 0 0 -12px; }
.qr { display: grid; place-items: center; margin: 10px 0; }
.qr svg { width: 196px; height: 196px; background: #fff; border-radius: 10px; }

/* ---------- pratinjau (selalu gelap: foto & video terlihat paling jelas) ---------- */
.pratinjau { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; background: #0c1013; color: #e3e9ed; border: 0; }
.pratinjau[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pratinjau::backdrop { background: #0c1013; }
.pratinjau header { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px; background: rgba(255, 255, 255, .04); }
.pratinjau h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.pratinjau .ikon-saja { color: #c7d0d6; }
.pratinjau .ikon-saja:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pratinjau .tombol:not(.utama) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #e3e9ed; }
.pv-ikon { display: grid; }
.pv-ikon .ik { color: #d6a84e; }
.pv-aksi { display: flex; align-items: center; gap: 4px; }
.panggung { position: relative; display: grid; place-items: center; min-height: 0; padding: 12px 72px; overflow: hidden; }
.panggung > img, .panggung > video { max-width: 100%; max-height: 100%; object-fit: contain; }
.panggung > iframe { width: 100%; height: 100%; background: #fff; border: 0; border-radius: 6px; }
.panggung.j-pdf { padding: 0 72px; }
.panggung.j-audio { align-content: center; gap: 24px; }
.panggung.j-audio .raksasa { color: #6b7a85; }
.panggung audio { width: min(480px, 90vw); }
.panggung.j-teks { place-items: stretch center; }
.pv-teks, .pv-edit textarea { margin: 0; padding: 20px 24px; background: var(--kartu); color: var(--tinta); border: 1px solid var(--garis); border-radius: 10px; font: 13px/1.6 ui-monospace, Consolas, 'Cascadia Mono', monospace; tab-size: 4; }
.pv-teks { width: min(980px, 100%); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-edit { display: flex; flex-direction: column; gap: 10px; width: min(980px, 100%); min-height: 0; }
.pv-edit textarea { flex: 1; min-height: 0; resize: none; outline: none; }
.pv-edit textarea:focus { border-color: var(--kuningan); }
.pv-simpan { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.pv-simpan .redup { color: #9aa7b0; }
.pv-kosong { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #c7d0d6; text-align: center; }
.pv-kosong .raksasa { color: #6b7a85; }
.pv-kosong p { margin: 0; }
.pv-kosong a:not(.tombol) { color: #e2bb6c; }
.pv-muat { color: #9aa7b0; }
.geser { position: absolute; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #e3e9ed; cursor: pointer; translate: 0 -50%; }
.geser:hover { background: rgba(255, 255, 255, .16); }
.geser.kiri { left: 14px; }
.geser.kanan { right: 14px; }

/* ---------- halaman masuk & tautan publik ---------- */
.halaman-masuk { display: grid; place-items: center; min-height: 100dvh; overflow: hidden; }
.masuk { position: relative; display: grid; place-items: center; width: 100%; padding: 24px 16px; }
.masuk-dial { position: absolute; width: min(600px, 130vw); aspect-ratio: 1; pointer-events: none; }
.dial-besar { width: 100%; height: 100%; animation: putar-masuk 1.1s cubic-bezier(.2, .7, .2, 1); }
.dial-besar line { stroke-width: 1.3; }
.dial-besar .dial-cincin, .dial-besar .dial-poros { display: none; }
.membuka .dial-besar { transform: rotate(120deg); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
@keyframes putar-masuk { from { opacity: 0; transform: rotate(-60deg); } }
.masuk-panel { position: relative; width: min(360px, 100%); padding: 28px 28px 24px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 18px; box-shadow: var(--bayang); }
.masuk-panel h1 { margin: 0 0 10px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.masuk-panel .tombol.utama { margin-top: 8px; }
.masuk-panel .tombol.polos { margin-top: 4px; }

.bagi-berkas { display: flex; flex-direction: column; gap: 12px; max-width: 1180px; min-height: 100dvh; margin: 0 auto; padding: 12px 16px 16px; }
.bagi-atas { display: flex; align-items: center; min-height: 48px; }
.bagi-kartu { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; overflow: hidden; background: var(--kartu); border: 1px solid var(--garis); border-radius: 16px; }
.bagi-pratinjau { display: grid; place-items: center; min-height: 60vh; background: #0c1013; }
.bagi-pratinjau img, .bagi-pratinjau video { max-width: 100%; max-height: 82vh; }
.bagi-pratinjau iframe { width: 100%; height: 82vh; background: #fff; border: 0; }
.bagi-pratinjau.jenis-teks { place-items: stretch; background: var(--kartu); }
.bagi-pratinjau pre { max-height: 82vh; margin: 0; padding: 20px 24px; overflow: auto; font: 13px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.bagi-ikon { color: #c7d0d6; text-align: center; }
.bagi-ikon .ik { width: 96px; height: 96px; stroke-width: 1; color: #6b7a85; }
.bagi-info { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-left: 1px solid var(--garis); }
.bagi-info h1 { margin: 0; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.bagi-info p { margin: 0; }
.bagi-info .tombol { align-self: flex-start; margin-top: 10px; }

/* ---------- layar kecil ---------- */
@media (max-width: 900px) {
  .kerangka { grid-template-columns: 216px minmax(0, 1fr); }
  .dengan-lokasi .kepala-kolom, .dengan-lokasi.baris .item { grid-template-columns: minmax(0, 1fr) 120px 96px 80px 40px; }
}
@media (max-width: 640px) {
  .kerangka, .bagi .kerangka { grid-template-columns: minmax(0, 1fr); }
  .samping { position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(290px, 86vw); background: var(--latar); box-shadow: var(--bayang); transform: translateX(-105%); transition: transform .22s ease; }
  .samping.buka { transform: none; }
  .tirai { position: fixed; inset: 0; z-index: 29; background: rgba(8, 12, 15, .45); }
  .samping .baru { display: none; }
  .isi-utama, .bagi .isi-utama { margin: 0; border: 0; border-radius: 0; }
  .menu-hp { display: inline-grid; }
  .fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; width: 56px; height: 56px; padding: 0; border-radius: 18px; box-shadow: var(--bayang); }
  .fab .ik { width: 24px; height: 24px; stroke-width: 2.2; }
  .atas { gap: 4px; padding: 8px 8px 4px; }
  .cari { height: 44px; padding-left: 12px; }
  .cari select { display: none; }
  .bilah { padding: 2px 8px 2px 4px; min-height: 52px; }
  .bilah-aksi .tombol.kecil span { display: none; }
  .bilah-aksi .tombol.kecil { width: 36px; padding: 0; }
  .jejak a, .bilah h1, .bilah-judul { font-size: 16px; }
  .daftar { padding: 0 12px 96px; }
  .kisi .grup-isi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kisi .label { padding-left: 10px; gap: 8px; }
  .kepala-kolom { display: none; }
  .baris .item, .dengan-lokasi.baris .item { grid-template-columns: minmax(0, 1fr) 40px; height: 60px; padding: 0 4px; }
  .baris .meta { display: none; }
  .baris .sub { display: block; }
  .antrean { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast-wadah { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); translate: none; }
  .bagi .toast-wadah, .bagi .antrean { bottom: 16px; }
  .panggung, .panggung.j-pdf { padding: 8px; }
  .geser { display: none; }
  .dua-kolom { grid-template-columns: 1fr; gap: 0; }
  .dialog footer .tombol { flex: 1; }
  .bagi-kartu { grid-template-columns: minmax(0, 1fr); }
  .bagi-info { border-top: 1px solid var(--garis); border-left: 0; }
  .bagi-pratinjau { min-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
}