@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

* { box-sizing: border-box; }
body { font-family:'Inter',sans-serif; margin:0; background:#14161a; color:#e4e4e7; }
.hidden { display:none !important; }

/* ---------- Bilah aplikasi ---------- */
.appbar { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:#1b1e24; border-bottom:1px solid #2a2e37; position:sticky; top:0; z-index:20; }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:38px; height:38px; border-radius:10px; background:#0b4356; color:#e6c96a; font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center; border:1.5px solid #c9a227; }
.brand-name { font-weight:800; font-size:17px; }
.brand-sub { font-size:12px; color:#9ca3af; }
.save-state { font-size:12px; color:#6b7280; margin-right:10px; }

/* ---------- Tata letak ---------- */
.layout { display:grid; grid-template-columns:400px 1fr; gap:16px; padding:16px; align-items:start; }
@media (max-width: 980px) { .layout { grid-template-columns:1fr; } }
.panel { display:flex; flex-direction:column; gap:14px; }
.card { background:#1b1e24; border:1px solid #2a2e37; border-radius:12px; padding:14px 16px; }
.card h3 { margin:0 0 10px; font-size:14px; color:#e6c96a; letter-spacing:.3px; }
.card label { display:block; font-size:12px; color:#9ca3af; margin:8px 0; }
.card input[type=text], .card input[type=email], .card input[type=password], .card select { width:100%; margin-top:4px; padding:8px 10px; border-radius:8px; border:1px solid #343945; background:#101216; color:#f4f4f5; font:inherit; font-size:13px; }
.card input[type=file] { margin-top:4px; font-size:12px; color:#9ca3af; }
.grid2 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.tambah-manual { border:1px dashed rgba(201,162,39,.45); border-radius:8px; padding:10px; margin:10px 0; }
.tm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.btn { padding:8px 12px; border-radius:8px; border:1px solid #343945; background:#23262e; color:#e4e4e7; font:inherit; font-size:13px; cursor:pointer; }
.btn:hover { background:#2b2f38; }
.btn.primary { background:#0b4356; border-color:#12586e; color:#fff; font-weight:600; }
.btn.ghost { background:transparent; }
.btn.wide { width:100%; margin-top:6px; }
.row-btns { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
.hint { font-size:12px; color:#8b919c; line-height:1.5; }
.check { display:flex !important; gap:8px; align-items:flex-start; font-size:12.5px !important; color:#c9ccd4 !important; }
.check input { margin-top:2px; }
.table-wrap { overflow:auto; max-height:300px; border:1px solid #2a2e37; border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:12px; }
th { text-align:left; padding:6px 8px; background:#101216; color:#9ca3af; position:sticky; top:0; }
td { padding:4px 6px; border-top:1px solid #23262e; }
td[contenteditable] { outline:none; min-width:52px; }
td[contenteditable]:focus { background:#262a33; }
tr.sel td { background:rgba(11,67,86,.35); }
td .del { color:#f87171; cursor:pointer; font-weight:700; background:none; border:none; font-size:14px; }
td .dup { color:#7dd3fc; cursor:pointer; background:none; border:none; font-size:13px; margin-right:2px; }
.berkas { margin-top:10px; display:flex; flex-direction:column; gap:12px; border-top:1px dashed #343945; padding-top:10px; }
.berkas-label { font-size:12px; font-weight:600; display:block; margin-bottom:4px; }
.berkas-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.berkas-prev { width:34px; height:34px; object-fit:contain; background:#fff; border:1px solid #343945; border-radius:6px; flex:none; }
.berkas-row input[type="file"] { font-size:12px; max-width:180px; }

/* ---------- Pratinjau ---------- */
.preview { background:#1b1e24; border:1px solid #2a2e37; border-radius:12px; padding:14px 16px; position:sticky; top:76px; }
.preview-bar { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.preview-bar label { font-size:12px; color:#9ca3af; }
.preview-bar select { margin-left:6px; padding:6px 8px; border-radius:8px; border:1px solid #343945; background:#101216; color:#f4f4f5; font:inherit; font-size:13px; }
.preview-scroll { overflow:auto; max-height:calc(100vh - 190px); padding:8px 4px; }
.pv-label { color:#71717a; font-size:13px; text-align:center; margin:14px 0 8px; }
.preview-scroll .krt { box-shadow:0 10px 25px rgba(0,0,0,.5); }
#preview-zoom { transform-origin: top center; display:flex; flex-direction:column; align-items:center; }

/* ================================================================
   TEMPLATE "TEAL KLASIK" — kartu 85,6 × 54 mm (ID-1)
   Kelas awalan .krt dipakai bersama oleh pratinjau & cetak.
   ================================================================ */
.krt { width:85.6mm; height:54mm; color:#1d2b33; border-radius:3mm; position:relative; overflow:hidden; box-sizing:border-box; background:#fdfbf7; flex:none; font-family:'Inter',sans-serif; }
.krt .rel { position:relative; z-index:1; }
.krt .orn { display:flex; align-items:center; gap:1.1mm; }
.krt .orn i { display:block; width:1.25mm; height:1.25mm; background:#c9a227; transform:rotate(45deg); }
.krt .orn i.s { width:.75mm; height:.75mm; opacity:.6; }
.krt .orn.ctr { justify-content:center; }
/* Depan */
.krt.depan { padding:2.4mm 3.2mm 0; display:flex; flex-direction:column; }
.krt .head { display:flex; align-items:center; gap:2.4mm; height:7.4mm; }
.krt .head svg { width:7.4mm; height:7.4mm; flex:none; }
.krt .head .logo-img { width:7.4mm; height:7.4mm; object-fit:contain; flex:none; }
.krt .h-name { font-size:9.4pt; font-weight:800; letter-spacing:.8px; color:#0b4356; line-height:1.15; }
.krt .h-addr { font-size:5.8pt; font-weight:600; letter-spacing:1.6px; color:#5f6f78; margin-top:.5mm; }
.krt .banner { position:relative; width:50mm; height:11.2mm; margin-top:1.6mm; flex:none; }
.krt .banner .edge, .krt .banner .shape { position:absolute; inset:0; clip-path:polygon(0 0, calc(100% - 5.5mm) 0, 100% 50%, calc(100% - 5.5mm) 100%, 0 100%); }
.krt .banner .edge { background:#c9a227; transform:translate(.8mm,.5mm); }
.krt .banner .shape { background:linear-gradient(100deg,#0a3d50 0%,#12586e 100%); }
.krt .banner .txt { position:relative; z-index:1; padding:1.2mm 3mm; }
.krt .bn-1 { font-size:11pt; font-weight:800; letter-spacing:.6px; color:#fff; line-height:1.12; }
.krt .bn-2 { font-size:7.8pt; font-weight:700; letter-spacing:.4px; color:#e6c96a; line-height:1.2; margin-top:.4mm; white-space:nowrap; overflow:hidden; }
.krt .foto { position:absolute; top:11.4mm; right:3.2mm; width:20mm; height:26.7mm; border:.45mm solid #c9a227; border-radius:1.6mm; overflow:hidden; background:#e8edef; z-index:2; }
.krt .foto img { width:100%; height:100%; object-fit:cover; display:block; }
.krt .foto svg { width:100%; height:100%; display:block; }
.krt .barcodeBox { position:absolute; top:38.9mm; right:3.2mm; width:20mm; z-index:2; text-align:center; }
.krt .barcodeBox svg.barcode { width:100%; height:auto; display:block; background:#fff; }
.krt .bc-num { font-size:5pt; font-weight:600; letter-spacing:1.8px; color:#333; margin-top:.5mm; text-align:center; }
.krt .data { margin-top:1.2mm; width:59mm; }
.krt .data .row { display:flex; align-items:baseline; height:4.5mm; }
.krt .data .lb { font-size:7.3pt; font-weight:700; color:#0b4356; width:19mm; flex:none; }
.krt .data .cl { font-size:7.3pt; color:#5b6a71; width:2.2mm; flex:none; }
.krt .data .vl { font-size:7.5pt; font-weight:600; color:#1d2b33; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.krt .d-note { position:absolute; bottom:2mm; left:3.2mm; right:3.2mm; text-align:center; font-size:5.3pt; color:#8b96a0; line-height:1.45; }
/* Belakang */
.krt.belakang { padding:1.4mm 3mm; display:flex; flex-direction:column; }
.krt .b-head { font-size:9pt; font-weight:800; color:#0b4356; text-align:center; }
.krt .b-head span { font-weight:600; color:#4b5563; font-size:7.2pt; }
.krt .b-head .orn { margin:1.1mm 0 1.2mm; }
.krt .b-table { width:100%; border-collapse:collapse; font-size:7pt; line-height:1.08; }
.krt .b-table th { background:#0b4356; color:#fff; font-size:6.8pt; font-weight:700; text-align:left; padding:.55mm .9mm; }
.krt .b-table td { padding:.6mm .9mm; white-space:nowrap; overflow:hidden; border-top:none; }
.krt .b-table tbody tr:nth-child(even) td { background:rgba(11,67,86,.055); }
.krt .b-table .c-hari { font-weight:700; width:17mm; }
.krt .b-sign { padding-top:1mm; margin-top:auto; position:relative; }
.krt .sign-block { font-size:7pt; line-height:1.3; color:#333; }
.krt .sign-space { height:4.2mm; position:relative; }
.krt .ttd-img { position:absolute; left:.5mm; bottom:-.6mm; height:6.6mm; max-width:30mm; object-fit:contain; }
.krt .sign-name { font-weight:700; text-decoration:underline; font-size:7.6pt; }
.krt .stempel-img { position:absolute; left:6.5mm; bottom:-1.2mm; width:15.5mm; height:15.5mm; object-fit:contain; opacity:.92; transform:rotate(-12deg); }

/* ---------- Area cetak ---------- */
#print-area { display:none; }
.sheet { width:210mm; height:297mm; padding:10mm; display:grid; grid-template-columns:repeat(2, 85.6mm); grid-auto-rows:54mm; gap:3mm; justify-content:center; align-content:start; page-break-after:always; background:#fff; }
.sheet .krt { border-radius:0; box-shadow:none; }
.single { page-break-after:always; }
.single .krt { border-radius:0; box-shadow:none; }

/* Mode percetakan A3+ (13 × 19 inci): grid 5 × 5 terpusat + bleed 3 mm */
.sheet-a3 { position:relative; width:483mm; height:330mm; page-break-after:always; background:#fff; overflow:hidden; }
.sheet-a3 .grid-a3 { position:absolute; left:12.5mm; top:15mm; width:458mm; display:flex; flex-wrap:wrap; }
.bleed { position:relative; width:91.6mm; height:60mm; overflow:hidden; flex:none; }
.bleed .krt { border-radius:0; box-shadow:none; }
.bleed-under { position:absolute; left:0; top:0; width:85.6mm; height:54mm; transform:scale(1.0701,1.1111); transform-origin:0 0; }
.bleed-top { position:absolute; left:3mm; top:3mm; }
.panduan-a3 { position:absolute; left:0; top:0; width:483mm; height:330mm; pointer-events:none; }
.info-a3 { position:absolute; left:12.5mm; bottom:5mm; font-size:8pt; color:#888; }

@media print {
  body { background:#fff; }
  .appbar, .layout { display:none !important; }
  #print-area { display:block; }

  .krt { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ================================================================
   TEMPLATE ARTWORK — latar SVG (folder templates/) + overlay data.
   ================================================================ */
.krt.art { padding:0; }
.krt .art-bg { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.krt .art-head { position:absolute; z-index:2; }
.krt .art-title { position:absolute; z-index:2; }
.krt .art-data { position:absolute; margin-top:0; z-index:1; }
.krt .data.sempit .lb { width:15.5mm; }
.krt .data.sempit .vl { font-size:7.1pt; }
.krt.art .data .lb { color:var(--tpl-primary); }
.krt .art-back { position:absolute; inset:0; z-index:1; padding:1.4mm 3mm; display:flex; flex-direction:column; }
.krt.art .b-table th { background:var(--tpl-primary); }
.krt.ne-back .b-table th { color:#e9c767; }
.krt.ne-back .b-table td:first-child { font-weight:700; color:#14344d; }
.krt.th-emas .b-table th { color:#e9c767; }
.krt.gelap .sign-block { color:#f3e9d2; }
.krt.gelap .b-table td { color:#f1e8d8; }
.krt.gelap .b-table td:first-child { color:#e9c767; }
.krt .b-table.padat2 { font-size:6.2pt; }
.krt .b-table.padat2 th { font-size:6pt; padding:.45mm .9mm; }
.krt .b-table.padat2 td { padding:.38mm .9mm; }
.krt.art .b-table tbody tr:nth-child(even) td { background:var(--tpl-soft); }

.krt .data.mini .vl { font-size:7pt; }

.krt .art-line { position:absolute; z-index:2; white-space:nowrap; overflow:hidden; }
.krt .b-table.padat { font-size:6.5pt; }
.krt .b-table.padat th { font-size:6.3pt; padding:.5mm .9mm; }
.krt .b-table.padat td { padding:.4mm .9mm; }

#auth-info a { color:#e6c96a; }

.kelola { margin-top:10px; border-top:1px solid #2a2e35; padding-top:8px; }
.kelola summary { cursor:pointer; font-size:12.5px; font-weight:600; color:#c9ccd4; }
.kelola #kelola-template { margin-top:8px; display:flex; flex-direction:column; gap:6px; }

/* Varian kartu gelap (mis. Navy Emas Premium): teks data terang di atas latar gelap */
.krt.gelap .data .lb { color:#e6c96a; }
.krt.gelap .data .cl { color:#8fa6b8; }
.krt.gelap .data .vl { color:#ffffff; }
.krt .data.rapat .row { height:4.05mm; }
.krt .data.garis .row { border-bottom:.16mm solid rgba(255,255,255,.25); }
.krt .data.garis .row:last-child { border-bottom:none; }