/* vitap.id — komponen kartu nama (.nc). Varian generik (palet & identitas pengguna) dan varian PANDI (tema privat).
   Dipakai halaman publik tema namecard, landing, dan dashboard.
   Ukuran semua elemen relatif terhadap lebar kartu (cqw), sehingga proporsinya sama dengan desain cetak di ukuran berapa pun.
   Lanskap 16:9 (desain 2000×1125), potret 9:16 (desain 1125×2000). */
.nc {
  --nc-paper: #fdfbf2; --nc-ink: #231916; --nc-navy: #00427a; --nc-red: #e0402f; --nc-red-deep: #bf1a1b; --nc-teal: #0ea180;
  --nc-f-name: Archivo, "Helvetica Neue", Arial, sans-serif;
  --nc-f-title: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --nc-f-body: Lexend, "Helvetica Neue", Arial, sans-serif;
  /* Hallmark · motion: tiga kurva bernama, tanpa overshoot pada UI; durasi mikro/pendek/panjang */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* masuk */
  --ease-in: cubic-bezier(.7, 0, .84, 0);         /* keluar */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* perubahan keadaan (balik kartu) */
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  position: relative; width: 100%; aspect-ratio: 16 / 9; perspective: 1600px; container-type: inline-size; color: var(--nc-ink); text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.nc.is-portrait { aspect-ratio: 9 / 16; }
.nc-tilt, .nc-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.nc-tilt { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--dur-long) var(--ease-out); }
.nc.is-tracking .nc-tilt { transition-duration: var(--dur-micro); }
/* balik kartu: transisi CSS biasa, jadi klik berikutnya membalik arah di tengah jalan (bisa diinterupsi) */
.nc-flip { transition: transform 700ms var(--ease-in-out); }
.nc.is-flipped .nc-flip { transform: rotateY(180deg); }
.nc-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 1.1cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: var(--nc-paper);
  /* serat kertas halus + noda lembut seperti kertas cetak */
  background-image:
    radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(80% 70% at 85% 85%, rgba(236,226,200,.35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .38 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 1.6cqw 4cqw -1.4cqw rgba(60, 30, 10, .35), 0 .2cqw .5cqw rgba(60, 30, 10, .12), inset 0 0 0 1px rgba(120, 90, 40, .08);
}
.nc-back { transform: rotateY(180deg); }

/* ---------- depan: lanskap ---------- */
.nc-logo { position: absolute; top: 4.4cqw; right: 8cqw; width: 20.6cqw; height: auto; user-select: none; -webkit-user-drag: none; }
.nc-id { position: absolute; left: 8.1cqw; top: 13.4cqw; right: 33cqw; }
.nc-name { margin: 0; font: 800 4.6cqw/1.02 var(--nc-f-name); letter-spacing: -.012em; color: var(--nc-ink); font-size: calc(4.6cqw * var(--fit, 1)); overflow-wrap: anywhere; }
.nc-title { margin: .7cqw 0 0; font: italic 700 3.15cqw/1.15 var(--nc-f-title); color: var(--nc-navy); letter-spacing: -.005em; }
.nc-contact { position: absolute; left: 8.1cqw; top: 31.4cqw; right: 33cqw; display: grid; justify-items: start; gap: .5cqw; }
.nc-contact a, .nc-contact span { font: 400 2.65cqw/1.18 var(--nc-f-body); color: var(--nc-navy); text-decoration: none; letter-spacing: -.005em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.nc-contact a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15cqw; height: .14cqw; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.nc-contact a:focus-visible::after { transform: scaleX(1); }
.nc-qr { position: absolute; left: 73.25cqw; top: 20.1cqw; width: 18.75cqw; aspect-ratio: 1; background: #fff; padding: .9cqw; border-radius: .25cqw; cursor: zoom-in; border: 0; display: block; }
.nc-qr svg { display: block; width: 100%; height: 100%; }
.nc-qr .m { fill: #0b0b0b; }
.nc-qr-mark { position: absolute; left: 50%; top: 50%; width: 27%; height: auto; translate: -50% -50%; padding: 3% 4%; background: #fff; border-radius: 4px; box-sizing: content-box; }
.nc-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11.3cqw; padding: 0 6.75cqw; display: flex; flex-direction: column; justify-content: center; gap: .55cqw;
  color: #fff; overflow: hidden;
  background: linear-gradient(100deg, var(--nc-b1, #2a7fbf) 0%, var(--nc-b2, #174f7a) 100%);
}
.nc[data-variant="pandi"] .nc-band { background: linear-gradient(100deg, #e84c41 0%, #e0402f 38%, #d6321f 62%, #c51d1c 84%, #b8171b 100%); }
.nc-band::before, .nc-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.nc-band::before { /* bidang segi cahaya seperti desain */
  background:
    linear-gradient(100deg, transparent 41%, rgba(255,255,255,.07) 41%, rgba(255,255,255,.07) 61%, transparent 61%),
    linear-gradient(80deg, transparent 69%, rgba(0,0,0,.05) 69%, rgba(0,0,0,.05) 82%, transparent 82%);
}
.nc-band::after { /* kilau */
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.nc.is-enter .nc-band::after { animation: ncSheen 900ms var(--ease-in-out) 500ms both; }   /* kilau sekali saat muncul, tidak berulang */
.nc-band b { position: relative; font: 700 3cqw/1 var(--nc-f-body); letter-spacing: -.01em; white-space: nowrap; }
.nc-band b i { font-style: normal; font-weight: 300; opacity: .9; margin: 0 .25em; }
.nc-band span { position: relative; font: 300 2.05cqw/1.1 var(--nc-f-body); white-space: nowrap; opacity: .96; }
.nc-gloss { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity var(--dur-long) var(--ease-out);
  background: radial-gradient(60% 80% at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.9), transparent 60%); }
.nc.is-tracking .nc-gloss { opacity: .55; }

/* ---------- depan: potret ---------- */
.nc.is-portrait .nc-face { border-radius: 2cqw; }
.nc.is-portrait .nc-logo { top: 19.6cqw; right: auto; left: 50%; translate: -50% 0; width: 36.4cqw; }
.nc.is-portrait .nc-id { left: 8cqw; right: 8cqw; top: 43cqw; text-align: center; }
.nc.is-portrait .nc-name { font-size: calc(8.3cqw * var(--fit, 1)); }
.nc.is-portrait .nc-title { margin-top: 1.3cqw; font-size: 5.7cqw; }
.nc.is-portrait .nc-qr { left: 50%; translate: -50% 0; top: 68.6cqw; width: 43.2cqw; padding: 2cqw; }
.nc.is-portrait .nc-contact { left: 8cqw; right: 8cqw; top: 121.6cqw; justify-items: center; gap: 1cqw; }
.nc.is-portrait .nc-contact a, .nc.is-portrait .nc-contact span { font-size: 4.75cqw; }
.nc.is-portrait .nc-band { height: 16cqw; padding: 0 5cqw; align-items: center; text-align: center; gap: 1cqw; }
.nc.is-portrait .nc-band b { font-size: 4.4cqw; }
.nc.is-portrait .nc-band span { font-size: 3cqw; }

/* ---------- belakang ---------- */
.nc-back { display: flex; flex-direction: column; }
.nc-bhead { display: flex; align-items: center; gap: 2cqw; padding: 4cqw 6.75cqw 0; }
.nc-bhead img { width: 6.2cqw; height: auto; flex: none; }
.nc-bhead b { display: block; font: 800 2.6cqw/1.1 var(--nc-f-name); }
.nc-bhead small { display: block; font: italic 700 1.7cqw/1.2 var(--nc-f-title); color: var(--nc-navy); margin-top: .3cqw; }
.nc-bbody { flex: 1; min-height: 0; overflow: auto; padding: 2.4cqw 6.75cqw 2.6cqw; display: grid; align-content: start; gap: 2cqw; scrollbar-width: thin; }
.nc-intro { margin: 0; font: 300 1.75cqw/1.5 var(--nc-f-body); color: #3b3532; max-width: 64ch; }
.nc-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(17cqw, 1fr)); gap: 1.2cqw; }
.nc-act {
  display: flex; align-items: center; gap: 1.1cqw; padding: 1.15cqw 1.4cqw; border-radius: 1cqw; border: 1px solid rgba(0, 66, 122, .14);
  background: rgba(255,255,255,.7); color: var(--nc-navy); font: 600 1.45cqw/1.2 var(--nc-f-body); text-decoration: none; cursor: pointer; text-align: left;
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); min-width: 0;
}
.nc-act svg { width: 2.2cqw; height: 2.2cqw; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nc-act svg.fill { fill: currentColor; stroke: none; }
.nc-act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-act small { display: block; font-weight: 400; font-size: 1.2cqw; opacity: .7; overflow: hidden; text-overflow: ellipsis; }
.nc-act:focus-visible { background: #fff; border-color: rgba(224, 64, 47, .45); transform: translateY(-.25cqw); box-shadow: 0 1cqw 2cqw -1.2cqw rgba(140, 30, 20, .45); outline: none; }
.nc-act.is-done { border-color: var(--nc-teal); color: var(--nc-teal); }
.nc-links { display: flex; flex-wrap: wrap; gap: .9cqw; }
.nc-links a { display: inline-flex; align-items: center; gap: .7cqw; padding: .7cqw 1.3cqw; border-radius: 999px; background: rgba(0,66,122,.07); color: var(--nc-navy); font: 500 1.35cqw/1.2 var(--nc-f-body); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.nc-links a svg { width: 1.6cqw; height: 1.6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nc-links a svg.fill { fill: currentColor; stroke: none; }

.nc-bh { margin: 0; font: 700 1.2cqw/1 var(--nc-f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--nc-red); }
.nc-back .nc-band { position: relative; height: 7cqw; flex: none; }
.nc-back .nc-band b { font-size: 2cqw; } .nc-back .nc-band span { font-size: 1.4cqw; }
.nc.is-portrait .nc-bhead { padding: 7cqw 7cqw 0; gap: 3.5cqw; }
.nc.is-portrait .nc-bhead img { width: 12cqw; }
.nc.is-portrait .nc-bhead b { font-size: 5.6cqw; } .nc.is-portrait .nc-bhead small { font-size: 3.6cqw; margin-top: .8cqw; }
.nc.is-portrait .nc-bbody { padding: 5cqw 7cqw; gap: 4.5cqw; }
.nc.is-portrait .nc-intro { font-size: 3.7cqw; }
.nc.is-portrait .nc-actions { grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.nc.is-portrait .nc-act { font-size: 3.3cqw; padding: 2.8cqw 3cqw; gap: 2.4cqw; border-radius: 2.4cqw; }
.nc.is-portrait .nc-act svg { width: 4.8cqw; height: 4.8cqw; }
.nc.is-portrait .nc-act small { font-size: 2.6cqw; }
.nc.is-portrait .nc-links { gap: 2cqw; }
.nc.is-portrait .nc-links a { font-size: 3.1cqw; padding: 1.6cqw 3cqw; gap: 1.6cqw; }
.nc.is-portrait .nc-links a svg { width: 3.6cqw; height: 3.6cqw; }
.nc.is-portrait .nc-bh { font-size: 2.7cqw; }
.nc.is-portrait .nc-back .nc-band { height: 14cqw; }
.nc.is-portrait .nc-back .nc-band b { font-size: 3.8cqw; } .nc.is-portrait .nc-back .nc-band span { font-size: 2.6cqw; }

/* ---------- gerak masuk: satu urutan, tenang dalam ±1 detik; stagger ≤ 450 ms; hanya transform & opacity ---------- */
.nc.is-enter .nc-tilt { animation: ncDeal 700ms var(--ease-out) both; }
.nc.is-enter .nc-band { animation: ncWipe 600ms var(--ease-out) 100ms both; }
.nc.is-enter .nc-logo { animation: ncFromRight 500ms var(--ease-out) 150ms both; }
.nc.is-enter.is-portrait .nc-logo { animation-name: ncDrop; }
.nc.is-enter .nc-photo { animation: ncPopMark 500ms var(--ease-out) 150ms both; }
.nc.is-enter .nc-name .ch { display: inline-block; animation: ncRise 450ms var(--ease-out) both; animation-delay: calc(200ms + min(var(--i), 14) * 18ms); }
.nc-name .w { display: inline-block; white-space: nowrap; }
.nc.is-enter .nc-title { animation: ncRise 450ms var(--ease-out) 300ms both; }
.nc.is-enter .nc-contact > * { animation: ncRise 400ms var(--ease-out) both; animation-delay: calc(350ms + var(--i, 0) * 60ms); }
.nc.is-enter .nc-qr { animation: ncQr 500ms var(--ease-out) 250ms both; }
.nc.is-enter .nc-qr .m { animation: ncPop 300ms var(--ease-out) both; animation-delay: calc(300ms + var(--d) * .5ms); transform-box: fill-box; transform-origin: center; }
.nc.is-enter .nc-qr-mark { animation: ncPopMark 400ms var(--ease-out) 600ms both; }
.nc.is-enter .nc-band > * { animation: ncRise 400ms var(--ease-out) both; }
.nc.is-enter .nc-band b { animation-delay: 350ms; } .nc.is-enter .nc-band span { animation-delay: 400ms; }
.nc.is-shown .nc-back .nc-bbody > * { animation: ncRise 400ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 250ms); }

@keyframes ncDeal { from { opacity: 0; transform: translateY(6%) rotateX(12deg) scale(.97); } to { opacity: 1; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } }
@keyframes ncFromRight { from { opacity: 0; transform: translateX(8%); } to { opacity: 1; transform: none; } }
@keyframes ncDrop { from { opacity: 0; transform: translateY(-16%); } to { opacity: 1; transform: none; } }
@keyframes ncRise { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
@keyframes ncQr { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ncPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes ncPopMark { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ncWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ncSheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes ncFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* kartu kecil (dashboard, galeri) tanpa kilau */
.nc.is-mini .nc-band::after { animation: none; }
.nc.is-mini .nc-qr { cursor: inherit; }

/* kerangka saat memuat */
.nc-skel .nc-face { background: #f6f2e6; }
.nc-skel .nc-face i { position: absolute; display: block; border-radius: .6cqw; background: linear-gradient(90deg, #ebe4d2 0%, #f8f4ea 40%, #ebe4d2 80%) 0 0 / 300% 100%; animation: ncShimmer 1.4s linear infinite; }
.nc-skel .nc-face i:nth-child(1) { left: 8cqw; top: 14cqw; width: 34cqw; height: 5cqw; }
.nc-skel .nc-face i:nth-child(2) { left: 8cqw; top: 21.5cqw; width: 22cqw; height: 3cqw; }
.nc-skel .nc-face i:nth-child(3) { left: 73cqw; top: 20cqw; width: 19cqw; height: 19cqw; }
.nc-skel .nc-face i:nth-child(4) { left: 0; right: 0; bottom: 0; height: 11.3cqw; border-radius: 0; background: linear-gradient(90deg, #e5a49b, #f0c3bc, #e5a49b) 0 0 / 300% 100%; }
.nc-skel.is-portrait .nc-face i:nth-child(1) { left: 25cqw; top: 44cqw; width: 50cqw; height: 9cqw; }
.nc-skel.is-portrait .nc-face i:nth-child(2) { left: 32cqw; top: 56cqw; width: 36cqw; height: 5cqw; }
.nc-skel.is-portrait .nc-face i:nth-child(3) { left: 28cqw; top: 70cqw; width: 44cqw; height: 44cqw; }
.nc-skel.is-portrait .nc-face i:nth-child(4) { height: 16cqw; }
@keyframes ncShimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* QR besar untuk dipindai */
.nc-zoom { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(28, 16, 10, .55); backdrop-filter: blur(6px); animation: ncFade 300ms var(--ease-out, ease-out) both; cursor: zoom-out; padding: 24px; }
.nc-zoom > div { background: #fff; padding: 22px; border-radius: 18px; width: min(380px, 86vw); position: relative; animation: ncQrZoom 300ms cubic-bezier(.16, 1, .3, 1) both; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); }
.nc-zoom svg { display: block; width: 100%; height: auto; }
.nc-zoom .nc-qr-mark { width: 24%; }
.nc-zoom p { margin: 14px 0 0; text-align: center; font: 500 14px/1.3 var(--nc-f-body); color: #3b3532; word-break: break-all; }
.nc-zoom.out { animation: ncFadeOut 200ms cubic-bezier(.7, 0, .84, 0) both; }
@keyframes ncQrZoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ncFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ncFadeOut { to { opacity: 0; } }

/* gerak dikurangi: tanpa gerak ruang, hanya crossfade ≤ 150 ms; balik kartu menjadi pergantian sisi dengan pudar */
@media (prefers-reduced-motion: reduce) {
  .nc *, .nc *::before, .nc *::after { animation: none !important; transition-duration: 150ms !important; }
  .nc.is-enter .nc-tilt { animation: ncFadeIn 150ms linear both !important; }
  .nc-tilt { transform: none !important; }
  .nc-flip { transition: none; }
  .nc-face { transition: opacity 150ms linear; }
  .nc.is-flipped .nc-front, .nc:not(.is-flipped) .nc-back { opacity: 0; }
  .nc-skel .nc-face i { animation: ncShimmer 2.8s linear infinite !important; }   /* kerangka = gerak fungsional, diperlambat */
  .nc-zoom, .nc-zoom > div { animation: ncFadeIn 150ms linear both !important; }
}

/* ---------- varian generik: palet (sama dengan COLORS di config) ---------- */
.nc[data-variant="generic"] { --nc-navy: var(--nc-p, #1f5d8c); --nc-red: var(--nc-acc, #ff7a59); }
.nc[data-color="ocean"]    { --nc-p: #1d5f91; --nc-b1: #2a7fbf; --nc-b2: #174f7a; --nc-acc: #ff7a59; }
.nc[data-color="forest"]   { --nc-p: #2e6b4f; --nc-b1: #3a8463; --nc-b2: #1f4a37; --nc-acc: #e0a93f; }
.nc[data-color="sunset"]   { --nc-p: #b8452c; --nc-b1: #e2694d; --nc-b2: #a83a24; --nc-acc: #7a4bb5; }
.nc[data-color="grape"]    { --nc-p: #4b33b0; --nc-b1: #6d52db; --nc-b2: #3f2a96; --nc-acc: #ff6fae; }
.nc[data-color="rose"]     { --nc-p: #b53865; --nc-b1: #e05f8c; --nc-b2: #a8335c; --nc-acc: #1e8a6e; }
.nc[data-color="slate"]    { --nc-p: #2e3542; --nc-b1: #3e4757; --nc-b2: #1d222b; --nc-acc: #f0a020; }
.nc[data-color="sand"]     { --nc-p: #8a6535; --nc-b1: #c9a265; --nc-b2: #8f6a3a; --nc-acc: #2f6b8f; }
.nc[data-color="midnight"] { --nc-p: #1e2742; --nc-b1: #27325a; --nc-b2: #0b1020; --nc-acc: #3fb8e8; }

/* logo pengguna di pojok kanan atas */
.nc-ulogo { width: auto; max-width: 22cqw; max-height: 9.5cqw; object-fit: contain; }
.nc.is-portrait .nc-ulogo { max-width: 40cqw; max-height: 16cqw; }
/* monogram bila belum ada logo: kotak warna palet + nama organisasi */
.nc-mono { display: flex; align-items: center; gap: 1.4cqw; width: auto; justify-content: flex-end; }
.nc-mono i { font: 800 3cqw/1 var(--nc-f-name); font-style: normal; color: #fff; width: 7.4cqw; height: 7.4cqw; border-radius: 1.6cqw; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--nc-b1, #2a7fbf), var(--nc-b2, #174f7a)); box-shadow: 0 .6cqw 1.4cqw -.6cqw var(--nc-b2, #174f7a); position: relative; }
.nc-mono i::after { content: ""; position: absolute; top: .9cqw; right: .9cqw; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--nc-acc, #ff7a59); }
.nc-mono span { font: 600 2cqw/1.15 var(--nc-f-body); color: var(--nc-p, #1d5f91); max-width: 17cqw; text-align: left; }
.nc.is-portrait .nc-mono { flex-direction: column; gap: 2.4cqw; }
.nc.is-portrait .nc-mono i { width: 15cqw; height: 15cqw; font-size: 6cqw; border-radius: 3.4cqw; }
.nc.is-portrait .nc-mono i::after { width: 2.2cqw; height: 2.2cqw; top: 1.8cqw; right: 1.8cqw; }
.nc.is-portrait .nc-mono span { font-size: 4cqw; max-width: 60cqw; text-align: center; }
.nc.is-portrait[data-variant="generic"] .nc-logo { top: 16cqw; }
.nc[data-variant="generic"] .nc-qr-mark { border-radius: 6px; max-height: 27%; object-fit: contain; }
.nc-bmono { width: 6.2cqw; height: 6.2cqw; flex: none; border-radius: 1.4cqw; display: grid; place-items: center; color: #fff; font: 800 2.4cqw/1 var(--nc-f-name);
  background: linear-gradient(135deg, var(--nc-b1, #2a7fbf), var(--nc-b2, #174f7a)); }
.nc.is-portrait .nc-bmono { width: 12cqw; height: 12cqw; font-size: 4.8cqw; border-radius: 2.8cqw; }
.nc-bhead img:not([width]) { max-height: 6.2cqw; object-fit: contain; }
.nc[data-variant="generic"] .nc-bh { color: var(--nc-p); }
.nc[data-variant="generic"] .nc-act:focus-visible { border-color: var(--nc-b1); box-shadow: 0 1cqw 2cqw -1.2cqw var(--nc-b2); }


/* ---------- foto profil (varian generik) ---------- */
.nc-photo { position: absolute; left: 8.1cqw; top: 12.6cqw; width: 11.2cqw; height: 11.2cqw; border-radius: 50%; object-fit: cover; background: #eee;
  border: .45cqw solid #fff; box-shadow: 0 .8cqw 2cqw -.8cqw rgba(30, 20, 60, .45), 0 0 0 .2cqw var(--nc-b1, #2a7fbf); user-select: none; -webkit-user-drag: none; }
.nc.has-photo .nc-id, .nc.has-photo .nc-contact { left: 22.2cqw; }
.nc.has-photo .nc-id { top: 13.2cqw; }
.nc.is-portrait.has-photo .nc-photo { left: 50%; translate: -50% 0; top: 21cqw; width: 25cqw; height: 25cqw; border-width: .9cqw; box-shadow: 0 1.6cqw 3.6cqw -1.6cqw rgba(30, 20, 60, .5), 0 0 0 .45cqw var(--nc-b1, #2a7fbf); }
.nc.is-portrait.has-photo .nc-logo { top: 6.5cqw; }
.nc.is-portrait.has-photo .nc-ulogo { max-height: 10cqw; }
.nc.is-portrait.has-photo .nc-mono { flex-direction: row; gap: 2.4cqw; }
.nc.is-portrait.has-photo .nc-mono i { width: 10cqw; height: 10cqw; font-size: 4cqw; border-radius: 2.4cqw; }
.nc.is-portrait.has-photo .nc-mono i::after { width: 1.6cqw; height: 1.6cqw; top: 1.2cqw; right: 1.2cqw; }
.nc.is-portrait.has-photo .nc-mono span { text-align: left; max-width: 46cqw; }
.nc.is-portrait.has-photo .nc-id { left: 8cqw; top: 50cqw; }
.nc.is-portrait.has-photo .nc-qr { top: 77cqw; width: 39cqw; }
.nc.is-portrait.has-photo .nc-contact { left: 8cqw; top: 122cqw; }
.nc-bhead .nc-bphoto { width: 6.2cqw; height: 6.2cqw; max-height: none; border-radius: 50%; object-fit: cover; border: .3cqw solid #fff; box-shadow: 0 0 0 .15cqw var(--nc-b1, #2a7fbf); }
.nc.is-portrait .nc-bhead .nc-bphoto { width: 13cqw; height: 13cqw; border-width: .6cqw; }

/* hover hanya untuk perangkat berpointer: di layar sentuh, hover tidak "menempel" setelah ketukan */
@media (hover: hover) and (pointer: fine) { /* hallmark:hover */
  .nc-contact a:hover::after { transform: scaleX(1); }
  .nc-act:hover { background: #fff; border-color: rgba(224, 64, 47, .45); transform: translateY(-.25cqw); box-shadow: 0 1cqw 2cqw -1.2cqw rgba(140, 30, 20, .45); outline: none; }
  .nc-links a:hover { background: var(--nc-red); color: #fff; transform: translateY(-.2cqw); }
  .nc[data-variant="generic"] .nc-act:hover { border-color: var(--nc-b1); box-shadow: 0 1cqw 2cqw -1.2cqw var(--nc-b2); }
  .nc[data-variant="generic"] .nc-links a:hover { background: var(--nc-b1); }
}

/* tekan pada aksi kartu (setelah blok hover) */
.nc-act:active, .nc-links a:active { transform: scale(.97); transition: transform var(--dur-micro) var(--ease-in); }
.nc-act { transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.nc-qr:focus-visible, .nc-links a:focus-visible { outline: 2px solid var(--nc-navy); outline-offset: 3px; }