@layer base{html,body{width:100%;margin:0;padding:0;min-height:100%;}body{-webkit-tap-highlight-color:transparent;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}}
/* Penyesuaian untuk identitas dan layar kecil. */
html { scroll-padding-top: 24px; overflow-x: hidden; overflow-y: auto; }
body { overflow: visible; }
.links-panel { width: 100%; min-width: 0; }
h1 { max-width: 100%; text-wrap: balance; }
.profile-intro .profile-avatar { width: 144px; height: 144px; }
/* Geser area crop ke atas agar pusat wajah sejajar dengan pusat lingkaran. */
.profile-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 5%;
}
/* Titik mengikuti lingkaran foto pada arah kanan bawah, berapa pun ukuran foto. */
.profile-intro .profile-photo { position: relative; width: max-content; flex-shrink: 0; }
.profile-photo .profile-status {
  position: absolute;
  top: 85%;
  left: 85%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.profile-intro .profile-name {
  letter-spacing: 0.01em;
  word-spacing: 0.12em;
  line-height: 1.4;
}
a:focus-visible { outline: 2px solid #f5bc7e; outline-offset: 4px; }
a[aria-disabled="true"] { cursor: default; }
.section-anchor { display: block; height: 0; margin-top: -12px; }
.placeholder-note { margin: 18px 8px 0; color: #8e9193; font-size: 11px; line-height: 1.7; text-align: center; }
/* Nama lengkap tetap terbaca, termasuk pada kartu sosial. */
.truncate { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .text-headline-md { font-size: 17px; line-height: 24px; }
  .text-label-sm { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Navigasi bawah dihapus; ruang bawah tidak lagi perlu menampung bilah menu. */
#identity { padding-bottom: 32px; }

/* Desktop: identitas di kiri dan seluruh tautan di kanan dalam satu layar.
   Tinggi tetap mengikuti isi untuk menjaga akses saat zoom atau layar sangat pendek. */
@media (min-width: 1024px) {
  #identity { min-height: 100svh; justify-content: center; padding: 24px 32px; }
  #identity > .profile-shell {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: minmax(min-content, 1fr);
    min-height: calc(100svh - 48px);
    column-gap: clamp(36px, 5vw, 80px);
    row-gap: 12px;
    max-width: 1120px;
    padding: 0;
    align-items: center;
  }
  .profile-intro { grid-column: 1; grid-row: 1; }
  .links-panel { grid-column: 2; grid-row: 1; }
  .profile-intro .profile-avatar { width: 176px; height: 176px; }
  .profile-intro h1 { font-size: 32px; line-height: 1.3; }
  .profile-intro > p { margin-bottom: 24px; }
  .profile-intro > div:last-child { margin-bottom: 0; }
  #links { grid-column: 2; grid-row: 1; gap: 10px; }
  #links > a { min-height: 70px; padding: 12px; }
  #links .text-headline-md { font-size: 17px; line-height: 24px; }
  #links > a > div:first-child > div:first-child { width: 42px; height: 42px; }
  .section-anchor { display: none; }
  .links-panel > .placeholder-note { margin: 12px 0 0; }
}

/* Laptop dengan area tampilan lebih pendek: rapatkan jarak, tetap tampilkan semua kartu. */
@media (min-width: 1024px) and (max-height: 740px) {
  #identity { padding-top: 16px; padding-bottom: 16px; }
  #identity > .profile-shell { min-height: calc(100svh - 32px); }
  #links { gap: 8px; }
  #links > a { min-height: 62px; padding: 10px 12px; }
  .profile-intro .profile-avatar { width: 152px; height: 152px; }
  .profile-intro h1 { font-size: 28px; }
  .profile-intro > p { margin-bottom: 16px; }
}

/* Ikon merek sosial lokal, mengikuti warna tema dan status hover. */
.social-shortcut .social-brand-icon { width: 20px; height: 20px; fill: currentColor; }

/* Spasi judul menu tetap jelas di desktop dan ponsel. */
#links .menu-title {
  letter-spacing: 0.01em;
  word-spacing: 0.14em;
  line-height: 1.4;
}

/* Ponsel: susun seluruh isi dalam tinggi layar, termasuk area aman perangkat. */
@media (max-width: 1023px) {
  html, body { width: 100%; max-width: 100%; }
  #identity {
    min-height: 100svh;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow-x: clip;
  }
  #identity > .profile-shell {
    max-width: 480px;
    min-width: 0;
    min-height: calc(100svh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    padding: 0;
    gap: clamp(10px, 2svh, 18px);
  }
  .profile-shell > .profile-intro { margin-top: auto; min-width: 0; }
  .profile-shell > .links-panel { margin-bottom: auto; }
  .profile-intro > .absolute { right: 0; max-width: 100%; }
  .profile-intro .profile-photo { margin-bottom: clamp(8px, 1.5svh, 12px); }
  .profile-intro .profile-avatar {
    width: clamp(104px, 18svh, 144px);
    height: clamp(104px, 18svh, 144px);
  }
  .profile-intro .profile-name { font-size: clamp(18px, 3svh, 22px); line-height: 1.35; min-width: 0; }
  .profile-intro > .inline-flex { margin-bottom: clamp(8px, 1.5svh, 12px); }
  .profile-intro > p { font-size: clamp(12px, 1.8svh, 14px); line-height: 1.5; margin-bottom: clamp(10px, 2svh, 16px); }
  .profile-intro > div[aria-label="Media sosial"] { margin-bottom: 0; }
  #links { gap: clamp(8px, 1.5svh, 12px); }
  #links > a { min-width: 0; min-height: 56px; padding: clamp(8px, 1.5svh, 12px); }
  #links > a > div:first-child { gap: 12px; }
  #links > a > div:first-child > div:first-child { width: 40px; height: 40px; }
  #links .menu-title { font-size: clamp(16px, 2.5svh, 20px); overflow-wrap: break-word; }
}

/* Layar pendek: rapatkan isi, tanpa memotong tautan atau mengunci scroll saat zoom. */
@media (max-width: 1023px) and (max-height: 620px) {
  #identity { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #identity > .profile-shell { min-height: calc(100svh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); gap: 10px; }
  #links > a { min-height: 50px; padding: 7px 10px; }
  #links > a > div:first-child > div:first-child { width: 36px; height: 36px; }
}

/* Tampilan yang disetujui dari preview lokal. */
:root { color-scheme: dark; }
/* Foto tanpa bayangan atau cahaya latar. */
.profile-intro .profile-avatar { box-shadow: none; filter: none; }
.destination-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-article { color: #f5bc7e; }
.icon-menu_book { color: #acd6bb; }
.icon-school { color: #b3c8ef; }
#links > a { border: 1px solid #ffffff08; transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease, border-color .22s ease; }
@media (hover: hover) {
  #links > a:hover { transform: translateY(-3px); border-color: #f5bc7e55; box-shadow: 0 10px 30px #00000025; }
  .social-shortcut:hover { transform: translateY(-3px); box-shadow: 0 5px 16px #00000025; }
}
#links > a:active, .social-shortcut:active { transform: scale(.97); }
.social-shortcut { transition: transform .2s ease, color .2s ease, background-color .2s ease; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.profile-intro { animation: arrive .65s ease-out both; }
#links > a { animation: arrive .55s ease-out backwards; }
#links > a:nth-child(1) { animation-delay: .12s; }
#links > a:nth-child(2) { animation-delay: .20s; }
#links > a:nth-child(3) { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .profile-intro, #links > a { animation: none; }
  #links > a, .social-shortcut { transition: none; }
}