/* Halaman profil publik + kartu template (dipakai juga di situs.css lewat @import). */
.hp-body { margin: 0; min-height: 100vh; }
.hp {
  box-sizing: border-box;
  min-height: 100vh;
  background: var(--hp-bg);
  background-attachment: fixed;
  color: var(--hp-text);
  font-family: var(--hp-font);
  padding: 48px 18px 28px;
  -webkit-font-smoothing: antialiased;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp-in { max-width: 580px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: calc(100vh - 76px); }
.hp-kepala { display: flex; flex-direction: column; align-items: center; }
.hp-ava { width: 96px; height: 96px; object-fit: cover; display: block; margin-bottom: 14px; }
.hp-ava--circle { border-radius: 50%; }
.hp-ava--rounded { border-radius: 24px; }
.hp-ava--square { border-radius: 4px; }
.hp-ava--inisial {
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-btn); color: var(--hp-btn-text);
  font-size: 34px; font-weight: 700; letter-spacing: .02em;
}
.hp--outline .hp-ava--inisial, .hp--soft .hp-ava--inisial, .hp--glass .hp-ava--inisial {
  background: color-mix(in srgb, var(--hp-text) 14%, transparent); color: var(--hp-text);
}
.hp-nama { font-size: 22px; line-height: 1.25; margin: 0 0 6px; font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
.hp-bio { margin: 0; max-width: 440px; line-height: 1.5; opacity: .85; font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }

.hp-sosial { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0 4px; }
.hp-sos { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: inherit; border-radius: 50%; transition: transform .15s, background .15s; }
.hp-sos:hover { background: color-mix(in srgb, var(--hp-text) 10%, transparent); transform: translateY(-2px); }
.hp-sos .ik { width: 24px; height: 24px; }

.hp-blok { width: 100%; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.hp-judul { font-size: 15px; font-weight: 700; margin: 10px 0 -2px; opacity: .9; letter-spacing: .01em; }
.hp-kosong { opacity: .7; font-size: 14px; }

.hp-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 14px 22px;
  border-radius: var(--hp-rad); border: 2px solid transparent;
  font: inherit; font-weight: 600; font-size: 15.5px; line-height: 1.3;
  text-decoration: none; cursor: pointer;
  background: var(--hp-btn); color: var(--hp-btn-text);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
  overflow-wrap: anywhere;
}
a.hp-btn:hover, button.hp-btn:hover { transform: scale(1.02); }
a.hp-btn:focus-visible, button.hp-btn:focus-visible, .hp-sos:focus-visible { outline: 3px solid var(--hp-text); outline-offset: 3px; }
.hp--outline .hp-btn { background: transparent; border-color: var(--hp-btn); color: var(--hp-btn-text); }
.hp--outline a.hp-btn:hover { background: color-mix(in srgb, var(--hp-btn) 12%, transparent); }
.hp--soft .hp-btn { background: color-mix(in srgb, var(--hp-btn) 13%, transparent); color: var(--hp-btn-text); }
.hp--shadow .hp-btn { border-color: var(--hp-text); box-shadow: 4px 4px 0 var(--hp-text); }
.hp--shadow a.hp-btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--hp-text); }
.hp--glass .hp-btn {
  background: color-mix(in srgb, var(--hp-btn) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--hp-btn) 40%, transparent);
  color: var(--hp-btn-text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hp-btn-ik { width: 18px; height: 18px; flex: none; }
.hp-btn--sorot { animation: hp-goyang 3.2s ease-in-out infinite; }
@keyframes hp-goyang { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-1.5deg); } 93% { transform: rotate(1.5deg); } 96% { transform: rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .hp-btn--sorot { animation: none; } .hp-btn, .hp-sos { transition: none; } }

.hp-embed { width: 100%; overflow: hidden; border-radius: min(var(--hp-rad), 16px); background: color-mix(in srgb, var(--hp-text) 8%, transparent); }
.hp-embed iframe { display: block; width: 100%; border: 0; }
.hp-embed--video iframe { aspect-ratio: 16 / 9; height: auto; }
.hp-embed--pendek iframe { height: 152px; }
.hp-embed--musik iframe { height: 352px; }
.hp-embed--kosong { display: flex; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 16 / 9; font-size: 14px; opacity: .85; }
.hp-embed--kosong .ik { width: 28px; height: 28px; }

.hp-form {
  display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 18px;
  border-radius: min(var(--hp-rad), 18px);
  background: color-mix(in srgb, var(--hp-text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--hp-text) 16%, transparent);
}
.hp-form strong { font-size: 15px; }
.hp-form input, .hp-form textarea {
  font: inherit; font-size: 15px; width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hp-text) 25%, transparent);
  background: color-mix(in srgb, var(--hp-bg1) 70%, #fff 30%); color: #111; resize: vertical;
}
.hp-form input:focus, .hp-form textarea:focus { outline: 2px solid var(--hp-btn); outline-offset: 1px; }
.hp-form .hp-btn { min-height: 46px; }
.hp-form-ok { margin: 0; font-size: 14px; font-weight: 600; }
.hp-madu { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.hp-merek { margin-top: auto; padding-top: 36px; font-size: 13px; color: inherit; opacity: .7; text-decoration: none; }
a.hp-merek:hover { opacity: 1; }