/* ============================================================
   ABOUT — nama besar, bio, kutipan, tombol, dan widget statistik
   ============================================================ */
.about { display: flex; align-items: center; }
.about__grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 40px; }
.about__name {
  margin: 22px 0 22px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5.2vw, 4.7rem); line-height: 1.02; letter-spacing: -.025em; max-width: 8.2em; word-break: normal;
}
.about__bio { max-width: 520px; font-size: 14px; line-height: 1.8; color: var(--fg-2); }
.about__quote {
  display: inline-block; margin: 26px 0 26px; padding: 14px 24px; border-radius: 12px;
  font-size: 12px; font-style: italic; color: var(--fg-2); max-width: 100%;
}
.about__btns { display: flex; flex-wrap: wrap; gap: 12px; }

.about__photo { position: relative; justify-self: center; width: clamp(210px, 22vw, 300px); aspect-ratio: 1; }
.about__photo img {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.6); transition: transform .8s var(--ease);
}
.about__photo:hover img { transform: scale(1.04) rotate(-2deg); }
.about__ring {
  position: absolute; inset: -9%; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 68%);
  border: 1px solid rgba(255,255,255,.06); animation: ring 6s ease-in-out infinite;
}
@keyframes ring { 50% { transform: scale(1.06); opacity: .6; } }

/* widget statistik */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 54px; }
.stat {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 26px 10px; align-content: space-between;
  min-height: 118px; padding: 20px 22px; text-align: left; border-radius: 22px; color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); overflow: hidden;
  transition: transform .5s var(--spring), border-color .3s, background .3s;
  transform-style: preserve-3d;
}
.stat:hover { transform: perspective(900px) translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.stat:active { transform: scale(.97) !important; }
.stat__ico { grid-row: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--fg-2); background: rgba(255,255,255,.05); }
.stat__num { grid-row: 1; grid-column: 2; font: 500 13px/1 var(--font-mono); color: var(--fg); }
.stat__label { grid-row: 2; align-self: end; font: 400 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.stat__go { grid-row: 2; grid-column: 2; align-self: end; color: var(--fg-3); transition: transform .4s var(--spring), color .25s; }
.stat:hover .stat__go { color: #fff; transform: translate(3px, -3px); }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { order: -1; width: 190px; justify-self: start; margin-bottom: 6px; }
  .stats { grid-template-columns: 1fr; }
  .stat { min-height: 96px; gap: 16px 10px; }
}

/* kartu statistik juga memakai animasi reveal */
.stat.reveal { transition: opacity .9s var(--ease), filter .9s var(--ease), transform .55s var(--spring), border-color .3s, background .3s; transition-delay: var(--rd, 0s), var(--rd, 0s), 0s, 0s, 0s; }