/* ====== Kartu ID (CR80 / KTP 85,6 x 54 mm) ====== */
.card{
  --c1:#14305a;--c2:#2d6a9f;--ac:#c9a45c;--tx:#fff;--ct:#0e2342;--ink:#1d2433;--paper:#fffefb;
  --g:linear-gradient(135deg,var(--c1) 0%,50%,var(--c2) 100%);
  position:relative;box-sizing:border-box;overflow:hidden;flex:none;
  background:var(--paper);color:var(--ink);direction:ltr;text-align:left;line-height:1.2;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  border-radius:3.2mm;-webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.card *{box-sizing:border-box;margin:0;padding:0}
.card.p{width:54mm;height:85.6mm}
.card.l{width:85.6mm;height:54mm}
.card.sq{border-radius:0}
.card .wm{position:absolute;width:40mm;height:40mm;object-fit:contain;opacity:.1;filter:grayscale(1);z-index:0}
.card.p .wm{left:7mm;top:35mm}
.card.l .wm{right:3mm;top:12mm}

/* header */
.card .hd{position:absolute;left:0;top:0;right:0;overflow:hidden;color:var(--tx);display:flex;z-index:1;
  background:
   repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 .22mm,transparent .22mm 1.5mm),
   radial-gradient(circle at 100% 0,rgba(255,255,255,.17) 0 15mm,transparent 15.2mm),
   radial-gradient(circle at 0 100%,rgba(0,0,0,.13) 0 12mm,transparent 12.2mm),
   var(--g)}
.card .lg{flex:none;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .3mm var(--ac);overflow:hidden}
.card .lg img{width:100%;height:100%;object-fit:contain;padding:.7mm;display:block}
.card .lg .ini{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-weight:700;font-size:4.6mm;color:var(--c1)}
.card .sn{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-weight:700;text-transform:uppercase;letter-spacing:.12mm}
.card .sa{opacity:.88}

/* foto */
.card .ph{flex:none;position:relative;overflow:hidden;background:#e6e2da;border:.45mm solid var(--ac);border-radius:.7mm;
  box-shadow:0 0 0 .35mm #fff,0 .5mm 1.4mm .3mm rgba(0,0,0,.28)}
.card .ph img,.card .ph svg{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}

/* teks identitas */
.card .ttl{display:flex;align-items:center;justify-content:center;gap:1.4mm;font-weight:800;color:var(--ct);text-transform:uppercase;letter-spacing:.3mm;line-height:1.1;text-align:center}
.card .ttl:before,.card .ttl:after{content:"";flex:1 1 0;min-width:0;height:.25mm;background:var(--ac)}
.card .nm{display:flex;align-items:center;font-weight:800;text-transform:uppercase;line-height:1.14;color:var(--ink)}
.card .dt{display:grid;grid-template-columns:auto 1fr;gap:.6mm 1.7mm;align-items:baseline}
.card .dt i{font-style:normal;color:#6a7080;letter-spacing:.1mm}
.card .dt b{font-weight:600;color:var(--ink);word-break:break-word}

/* footer */
.card .ft{position:absolute;left:0;right:0;bottom:0;height:4.4mm;z-index:3;display:flex;align-items:center;justify-content:center;
  background:var(--g);color:var(--tx);border-top:.3mm solid var(--ac);font-size:1.5mm;letter-spacing:.22mm;text-transform:uppercase;font-weight:600}
.card .ft span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92%}

/* ---- portrait ---- */
.card.p .hd{height:25mm;flex-direction:column;align-items:center;padding-top:2.6mm;text-align:center}
.card.p .hd:after{content:"";position:absolute;left:-25%;right:-25%;bottom:-.2mm;height:4.2mm;background:var(--paper);
  border-top:.3mm solid var(--ac);border-radius:50% 50% 0 0/100% 100% 0 0}
.card.p .lg{width:8.6mm;height:8.6mm;margin-bottom:1mm}
.card.p .sn{font-size:2.2mm;line-height:1.15;padding:0 3.2mm}
.card.p .sa{font-size:1.4mm;margin-top:.5mm;padding:0 4.5mm;line-height:1.25;max-height:3.6mm;overflow:hidden}
.card.p .bd{position:absolute;left:0;right:0;top:25mm;bottom:4.4mm;display:flex;flex-direction:column;align-items:center;z-index:2}
.card.p .info{display:contents}
.card.p .ttl{order:1;margin:.5mm 0 0;padding:0 5mm;width:100%;font-size:2.7mm}
.card.p .ttl.t1{font-size:2.3mm}.card.p .ttl.t2{font-size:1.95mm}
.card.p .ph{order:2;width:22mm;height:29.3mm;margin-top:1.4mm}
.card.p .nm{order:3;width:100%;justify-content:center;text-align:center;padding:0 3.5mm;margin-top:1.8mm;min-height:6.6mm;font-size:2.9mm}
.card.p .nm.s1{font-size:2.45mm}.card.p .nm.s2{font-size:2.05mm}
.card.p .dt{order:4;align-self:stretch;margin:.7mm 5mm 0;padding-top:1.1mm;border-top:.2mm solid rgba(0,0,0,.12);font-size:2.1mm}
.card.p .dt i{font-size:1.7mm}

/* ---- landscape ---- */
.card.l .hd{height:14.5mm;align-items:flex-start;padding:2.3mm 4mm 0;gap:2.6mm;border-bottom:.45mm solid var(--ac)}
.card.l .lg{width:9mm;height:9mm}
.card.l .sc{min-width:0;height:9mm;display:flex;flex-direction:column;justify-content:center}
.card.l .sn{font-size:3mm;line-height:1.1}
.card.l .sa{font-size:1.6mm;margin-top:.5mm;line-height:1.25;max-height:4mm;overflow:hidden}
.card.l .bd{position:absolute;left:0;right:0;top:14.5mm;bottom:4.4mm;display:flex;padding:0 4mm;z-index:2}
.card.l .ph{width:22.5mm;height:30mm;margin-top:-1.7mm}
.card.l .info{flex:1;min-width:0;padding:2.6mm 0 0 4.4mm;display:flex;flex-direction:column}
.card.l .ttl{justify-content:flex-start;font-size:3mm;text-align:left}
.card.l .ttl:before{display:none}
.card.l .ttl.t1{font-size:2.5mm}.card.l .ttl.t2{font-size:2.1mm}
.card.l .nm{margin-top:2.2mm;font-size:3.7mm}
.card.l .nm.s1{font-size:3.1mm}.card.l .nm.s2{font-size:2.55mm}
.card.l .dt{margin-top:2mm;font-size:2.8mm;gap:1mm 2.2mm}
.card.l .dt i{font-size:2.1mm}

/* ---- banyak baris data (4-5 isian): ukuran menyesuaikan otomatis ---- */
.card.l.r4 .info,.card.l.r5 .info{padding-top:2.2mm}
.card.l.r4 .ttl,.card.l.r5 .ttl{font-size:2.6mm}
.card.l.r4 .ttl.t1,.card.l.r5 .ttl.t1{font-size:2.3mm}.card.l.r4 .ttl.t2,.card.l.r5 .ttl.t2{font-size:2mm}
.card.l.r4 .nm,.card.l.r5 .nm{margin-top:1.2mm;font-size:3.05mm}
.card.l.r4 .nm.s1,.card.l.r5 .nm.s1{font-size:2.8mm}.card.l.r4 .nm.s2,.card.l.r5 .nm.s2{font-size:2.4mm}
.card.l.r4 .dt,.card.l.r5 .dt{margin-top:1.1mm;font-size:2.15mm;gap:.4mm 1.8mm}
.card.l.r4 .dt i,.card.l.r5 .dt i{font-size:1.75mm;white-space:nowrap}
.card.l.r5 .nm{font-size:3mm;margin-top:1.1mm}.card.l.r5 .dt{font-size:2.1mm;gap:.35mm 1.6mm;margin-top:1mm}.card.l.r5 .dt i{font-size:1.7mm}
.card.p.r4 .ph,.card.p.r5 .ph{width:19mm;height:25.3mm;margin-top:1.2mm}
.card.p.r4 .nm,.card.p.r5 .nm{min-height:5.8mm;margin-top:1.4mm}
.card.p.r4 .dt,.card.p.r5 .dt{font-size:1.85mm;gap:.35mm 1.5mm;margin:.4mm 4.5mm 0;padding-top:.8mm}
.card.p.r4 .dt i,.card.p.r5 .dt i{font-size:1.5mm;white-space:nowrap}
.card.p.r5 .ph{width:17mm;height:22.7mm}.card.p.r5 .dt{font-size:1.8mm}

/* ---- sisi belakang ---- */
.card.back{display:flex;flex-direction:column}
.card.back .bkbar{flex:none;display:flex;align-items:center;gap:1.8mm;padding:0 3.2mm;height:7.4mm;color:var(--tx);border-bottom:.35mm solid var(--ac);
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 .22mm,transparent .22mm 1.5mm),var(--g)}
.card.back .bkbar .lg{width:5mm;height:5mm}
.card.back .bkbar .lg .ini{font-size:2.6mm}
.card.back .bkbar span{font-family:"Palatino Linotype",Palatino,Georgia,serif;font-weight:700;font-size:1.9mm;text-transform:uppercase;letter-spacing:.1mm;line-height:1.15}
.card.back .bkbody{flex:1;min-height:0;padding:2.6mm 4mm 0;overflow:hidden}
.card.back .bkt{font-weight:800;font-size:2.1mm;color:var(--ct);letter-spacing:.15mm;padding-bottom:.9mm;margin-bottom:1.3mm;border-bottom:.25mm solid var(--ac);display:inline-block}
.card.back .bktx{white-space:pre-line;font-size:1.85mm;line-height:1.4;color:#33394a}
.card.back .bksg{flex:none;align-self:flex-end;margin:0 4mm 1.4mm 0;text-align:center;font-size:1.6mm;line-height:1.25;color:#33394a;display:flex;flex-direction:column;align-items:center}
.card.back .bksg .sig{height:6mm;max-width:16mm;object-fit:contain;display:block}
.card.back .bksg b{font-size:1.7mm;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:.3mm}
.card.back .bkct{flex:none;margin:0 4mm 5.8mm;padding-top:1.1mm;border-top:.2mm solid rgba(0,0,0,.12);text-align:center;font-size:1.4mm;line-height:1.35;color:#6a7080}
.card.back.l .bkbody{padding-top:2.2mm}
.card.back.l .bktx{font-size:1.95mm;line-height:1.35}
.card.back.l .bkct{margin-bottom:5.6mm}
.card.back .ft{position:absolute}