/* ============================================
   kartu.css — Desain Kartu Navy Gold
   Screen + Print (86×54mm)
   ============================================ */

/* ===== WRAPPER SCREEN ===== */
.kartu-outer{
  width:86mm;
  flex-shrink:0;
}
.kartu-outer .kartu-label{
  font-size:.72rem;color:#888;text-align:center;margin-bottom:.35rem;
}

/* ===== KARTU SHELL ===== */
.kartu{
  width:86mm;
  height:54mm;
  border-radius:9px;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--k-navy,#0d1f3c);
  box-shadow:0 4px 18px rgba(0,0,0,.28);
}

/* ===== ORNAMEN SVG absolut ===== */
.kartu-deco{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}

/* ===== HEADER ===== */
.kartu-header{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:1.85mm;
  padding:1.6mm 2.4mm 1.3mm;
  background:rgba(0,0,0,.35);
  border-bottom:1.5px solid var(--k-gold,#c9a84c);
  flex-shrink:0;
}
.kartu-logo{
  width:32px;height:32px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  background:#0a1728;
}
.kartu-logo-ph{
  width:32px;height:32px;border-radius:50%;
  background:#1a2d4a;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
  font-size:7px;font-weight:700;color:#c9a84c;letter-spacing:.03em;text-align:center;
}
.kartu-htext{flex:1;min-width:0}
.kartu-nama-lembaga{
  font-size:7px;font-weight:700;color:var(--k-gold,#c9a84c);
  line-height:1.2;text-transform:uppercase;letter-spacing:.03em;
}
.kartu-nama-unit{
  font-size:6.5px;font-weight:700;color:#e8d5a0;line-height:1.2;
}
.kartu-alamat-header{
  font-size:5.3px;color:#6a8aaa;line-height:1.3;margin-top:1px;
}
.kartu-qr{
  width:30px;height:30px;background:#fff;
  border-radius:2px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.kartu-qr img{width:100%;height:100%}

/* ===== BODY DEPAN ===== */
.kartu-body{
  position:relative;z-index:2;
  display:flex;gap:1.85mm;
  padding:1.85mm 2.4mm 1.3mm;
  flex:1;min-height:0;
}
/* Kiri: foto + fields */
.kartu-kiri{display:flex;gap:1.85mm;flex:1;min-width:0}
.kartu-foto-wrap{
  flex-shrink:0;
  width:14mm;height:17.7mm;
  border:1.5px solid var(--k-gold,#c9a84c);
  border-radius:3px;overflow:hidden;
  background:#1a2d4a;
}
.kartu-foto-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.kartu-foto-ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#1a2d4a;
}
.kartu-info{flex:1;min-width:0}
.kartu-judul{
  font-size:10.5px;font-weight:700;color:var(--k-gold,#c9a84c);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:1mm;line-height:1.1;
}
.kartu-fields{width:100%;border-collapse:collapse}
.kartu-fields td{
  font-size:6.2px;line-height:1.72;color:#dce8f5;vertical-align:top;
}
.kartu-fields td.kf-label{color:#8fa8c8;white-space:nowrap;padding-right:3px}
.kartu-fields td.kf-sep{padding-right:4px;color:#8fa8c8}
.kartu-fields td.kf-val strong{color:#fff;font-weight:600}

/* Kanan: area TTD */
.kartu-ttd-col{
  width:22mm;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;padding-bottom:0.5mm;
  /* garis pemisah hidden by default, bisa di-toggle */
  border-left:1px solid transparent;
  padding-left:1.85mm;
}
.kartu-ttd-col.show-border{border-left-color:rgba(201,168,76,.2)}
.kartu-ttd-kota   {font-size:5.6px;color:#8fa8c8;text-align:center}
.kartu-ttd-jabatan{font-size:5.6px;color:#8fa8c8;text-align:center}
.kartu-ttd-space{
  width:19mm;height:7.4mm;
  margin:0.8mm 0;
  border-radius:3px;
}
.kartu-ttd-nama{font-size:6.2px;color:var(--k-gold,#c9a84c);font-weight:700;text-align:center}

/* ===== FOOTER ===== */
.kartu-footer{
  position:relative;z-index:2;
  padding:0.9mm 2.4mm;
  background:var(--k-gold,#c9a84c);
  flex-shrink:0;
}
.kartu-masa{font-size:6.2px;font-weight:700;color:#0a1728}

/* ===== BODY BELAKANG ===== */
.kartu-back-body{
  position:relative;z-index:2;
  padding:1.6mm 2.4mm 1mm;
  flex:1;min-height:0;
  display:flex;flex-direction:column;
}
.kartu-syarat-judul{
  font-size:8.5px;font-weight:700;color:var(--k-gold,#c9a84c);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:1mm;border-bottom:1px solid rgba(201,168,76,.25);padding-bottom:0.5mm;
  flex-shrink:0;
}
.kartu-syarat-list{
  padding:0;margin:0;list-style:none;
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
}
.kartu-syarat-list li{
  font-size:5.3px;color:#ccdaea;line-height:1.55;
  padding-left:2.1mm;position:relative;text-align:justify;
}
.kartu-syarat-list li::before{content:"•";position:absolute;left:0;color:var(--k-gold,#c9a84c)}

/* ===== PRINT ===== */
@media print{
  @page{size:A4;margin:8mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
  body{background:white!important}

  /* halaman cetak depan: grid kartu 86×54mm */
  .cetak-grid{
    display:grid;
    grid-template-columns:repeat(2,86mm);
    gap:4mm;
  }
  .cetak-grid .kartu-outer{width:86mm}
  .cetak-grid .kartu{
    width:86mm;height:54mm;border-radius:3mm;
    box-shadow:none;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  /* scale semua font & elemen relatif ke mm */
  .cetak-grid .kartu-header  {padding:1.5mm 2.5mm 1.5mm}
  .cetak-grid .kartu-logo,
  .cetak-grid .kartu-logo-ph {width:8mm;height:8mm}
  .cetak-grid .kartu-qr      {width:8mm;height:8mm}
  .cetak-grid .kartu-nama-lembaga{font-size:1.9mm}
  .cetak-grid .kartu-nama-unit   {font-size:1.75mm}
  .cetak-grid .kartu-alamat-header{font-size:1.35mm}
  .cetak-grid .kartu-body    {padding:2mm 2.5mm 1.5mm;gap:2mm}
  .cetak-grid .kartu-body{flex:1;min-height:0;overflow:visible;}
  .cetak-grid .kartu-foto-wrap{width:14mm;height:18mm}
  .cetak-grid .kartu-judul   {font-size:2.7mm;margin-bottom:1mm}
  .cetak-grid .kartu-fields td{font-size:1.6mm;line-height:1.7}
  .cetak-grid .kartu-ttd-col {width:22mm;padding-left:2mm}
  .cetak-grid .kartu-ttd-kota,
  .cetak-grid .kartu-ttd-jabatan{font-size:1.45mm}
  .cetak-grid .kartu-ttd-space{width:18mm;height:7mm;margin:1mm 0}
  .cetak-grid .kartu-ttd-nama{font-size:1.6mm}
  .cetak-grid .kartu-footer  {padding:1mm 2.5mm}
  .cetak-grid .kartu-masa    {font-size:1.6mm}
  /* grid belakang 2x5 */
  .belakang-grid{display:grid;grid-template-columns:repeat(2,86mm);gap:4mm;}
  .belakang-wrap{padding:0!important;}

  /* belakang: 1 halaman A4 */
  .cetak-belakang{
    width:86mm;height:54mm;border-radius:3mm;
    box-shadow:none;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .cetak-belakang .kartu-header{padding:1.5mm 2.5mm}
  .cetak-belakang .kartu-logo,
  .cetak-belakang .kartu-logo-ph{width:8mm;height:8mm}
  .cetak-belakang .kartu-nama-lembaga{font-size:1.9mm}
  .cetak-belakang .kartu-nama-unit{font-size:1.75mm}
  .cetak-belakang .kartu-alamat-header{font-size:1.35mm}
  .cetak-belakang .kartu-back-body{padding:1.5mm 2.5mm 1mm}
  .cetak-belakang .kartu-syarat-judul{font-size:2.2mm}
  .cetak-belakang .kartu-syarat-list li{font-size:1.38mm}
  .cetak-belakang .kartu-footer{padding:1mm 2.5mm}
  .cetak-belakang .kartu-masa{font-size:1.6mm}

  .no-print{display:none!important}
}