:root{
  --merah:#B4121B;
  --merah-tua:#8E0D14;
  --kuning:#F2B705;
  --teks:#2B2B2B;
  --teks-lembut:#8A8A8A;
  --garis:#ECECEC;
  --bg:#F2F2F2;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--teks);
  display:flex;justify-content:center;min-height:100vh;
}
.kartu{width:100%;max-width:480px;background:#fff;min-height:100vh;position:relative;overflow-x:hidden;padding-bottom:110px}

/* header */
.header{background:linear-gradient(160deg,var(--merah) 0%,var(--merah-tua) 100%);height:190px;position:relative}
.header svg.ornamen{position:absolute;inset:0;width:100%;height:100%}
.logo{
  position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);z-index:3;
  width:150px;height:150px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.12);overflow:hidden;
}
.logo img{width:78%;height:62%;object-fit:contain}

/* identitas */
.panel{
  position:relative;z-index:1;background:#fff;border-radius:26px 26px 0 0;
  margin-top:-26px;padding:78px 20px 22px;text-align:center;
}
.nama{font-size:26px;font-weight:700;letter-spacing:-.3px}
.jabatan{margin-top:8px;font-size:13px;font-weight:500;color:var(--teks-lembut);text-transform:uppercase;letter-spacing:.7px;line-height:1.5}
.departemen{margin-top:5px;font-size:13px;color:#B0B0B0}

/* aksi cepat */
.aksi{display:flex;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.aksi a{
  flex:1 1 0;padding:16px 4px;text-decoration:none;color:var(--teks-lembut);
  display:flex;flex-direction:column;align-items:center;font-size:13px;transition:background .15s;
}
.aksi a:active{background:#FAFAFA}
.aksi a + a{border-left:1px solid var(--garis)}
.aksi svg{width:22px;height:22px;stroke:var(--merah);fill:none;stroke-width:1.8;margin-bottom:7px}

/* deskripsi */
.deskripsi{padding:20px 24px;text-align:center;font-size:14.5px;line-height:1.65;color:#4A4A4A;border-bottom:1px solid var(--garis)}

/* daftar kontak */
.kontak{padding:8px 20px 6px}
.baris{display:flex;padding:14px 2px;align-items:flex-start}
.baris + .baris{border-top:1px solid #F6F6F6}
.baris svg{width:20px;height:20px;flex:0 0 20px;margin:2px 14px 0 0;stroke:var(--merah);fill:none;stroke-width:1.8}
.baris a,.baris span{font-size:15px;line-height:1.5;color:#3D3D3D;text-decoration:none;word-break:break-word}
.baris a:hover{color:var(--merah)}
.peta{display:block;margin-top:4px;font-size:13px;color:#7B3FBF;font-weight:500}

/* simpan kontak */
.simpan{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  width:min(440px,calc(100% - 40px));
  background:var(--merah);color:#fff;border:none;border-radius:14px;
  padding:15px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(180,18,27,.34);font-family:inherit;
}
.simpan:active{background:var(--merah-tua)}
.simpan svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;margin-right:9px}
.simpan:focus-visible{outline:3px solid var(--kuning);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- tautan tambahan (sosial, katalog, video) ---------- */
.tautan-blok{padding:10px 20px 4px}
.tombol-tautan{
  display:flex;align-items:center;text-decoration:none;color:#3D3D3D;
  border:1px solid var(--garis);border-radius:12px;
  padding:13px 15px;margin-bottom:10px;font-size:15px;font-weight:500;
  transition:border-color .15s,background .15s;
}
.tombol-tautan:active{background:#FAFAFA}
.tombol-tautan:hover{border-color:var(--merah)}
.tombol-tautan svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--merah);fill:none;stroke-width:1.8;margin-right:13px}
.tombol-tautan span{flex:1}
.tombol-tautan .panah{width:16px;height:16px;flex:0 0 16px;stroke:#C4C4C4;margin:0}