/* =====================================================================
   ABOUT / HERO
   ===================================================================== */
.aldi-about-wrapper { font-family: var(--font-body); color: var(--text); overflow-x: hidden; overflow-y: clip; position: relative; width: 100%; box-sizing: border-box; background: transparent; isolation: isolate; transition: color 0.4s ease; }
.aldi-about-wrapper * { margin: 0; padding: 0; box-sizing: border-box; }
.aldi-about-container { max-width: var(--max-width); margin: 0 auto; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 100%; }
.aldi-about-inner { max-width: 100%; width: 100%; }
.aldi-about-grid { display: grid; grid-template-columns: 1fr 145px; gap: 40px; align-items: center; }
.aldi-about-mobile { display: none; text-align: center; margin-bottom: 20px; padding-top: 20px; }
.aldi-about-mobile .aldi-about-photo { margin: 0 auto; }

@keyframes aldi-about-float { 0%,100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-6px) rotate(1deg); } 66% { transform: translateY(-3px) rotate(-0.5deg); } }
.aldi-about-float { animation: aldi-about-float 6s ease-in-out infinite; will-change: transform; }
@keyframes aldi-ripple-click { to { transform: scale(2.5); opacity: 0; } }
.aldi-ripple-span { position: absolute; border-radius: var(--radius-circle); background: radial-gradient(circle, rgba(154,165,184,0.35) 0%, rgba(154,165,184,0.12) 50%, transparent 100%); transform: scale(0); animation: aldi-ripple-click 0.55s ease-out forwards; pointer-events: none; z-index: 100; }
@keyframes aldi-about-glow { 0% { text-shadow: 1px 1px 0px var(--bg-shadow-dark), -1px -1px 0px var(--bg-shadow-light); } 100% { text-shadow: 2px 2px 4px var(--bg-shadow-dark), -2px -2px 4px var(--bg-shadow-light); } }
@keyframes aldi-about-glow-title { 0% { text-shadow: 2px 2px 0px var(--bg-shadow-dark), -2px -2px 0px var(--bg-shadow-light); } 100% { text-shadow: 3px 3px 6px var(--bg-shadow-dark), -3px -3px 6px var(--bg-shadow-light); } }
@keyframes aldi-about-blink { 0%,50% { border-color: var(--primary); opacity: 1; } 51%,100% { border-color: transparent; opacity: 0; } }
@keyframes aldi-about-dot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes aldi-about-ripple { 0% { transform: translate(-50%,-50%) scale(0.5); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; } }

.aldi-about-content { padding-right: 40px; display: flex; flex-direction: column; gap: var(--space-4); }
.aldi-about-name-block { display: flex; flex-direction: column; gap: var(--space-1); }
.aldi-about-hello { font-size: var(--fs-heading); font-weight: var(--fw-black); color: var(--primary); line-height: var(--lh-tight); text-align: left; animation: aldi-about-glow 4s ease-in-out infinite alternate; will-change: text-shadow; }
.aldi-about-title { font-size: var(--fs-hero-name); font-weight: var(--fw-black); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--ls-wider); text-align: left; color: var(--text); animation: aldi-about-glow-title 5s ease-in-out infinite alternate; will-change: text-shadow; }
.aldi-about-founder { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-secondary); line-height: var(--lh-tight); text-align: left; margin-top: -2px; }
.aldi-about-role { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--primary); height: 26px; text-align: left; display: flex; align-items: center; position: relative; }
.aldi-about-typing { display: inline; }
.aldi-about-cursor { display: inline-block; width: 2px; height: 1.1em; background-color: var(--primary); border-radius: 1px; margin-left: 2px; vertical-align: middle; animation: aldi-about-blink 1.1s step-end infinite; will-change: opacity; }
.aldi-about-bio { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-secondary); text-align: justify; max-width: none; }
.aldi-about-quote { background: var(--surface); box-shadow: var(--shadow-inset-sm); border-left: 3px solid var(--primary); border-radius: var(--radius-md); padding: 12px 20px; text-align: left; max-width: none; }
.aldi-about-quote-text { font-style: italic; font-size: var(--fs-text3); font-weight: var(--fw-light); color: var(--text-secondary); line-height: var(--lh-normal); text-align: left; }
.aldi-about-socials { display: flex; gap: var(--space-4); align-items: center; padding: 6px 0; }
.aldi-about-social { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--radius-circle); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--primary); transition: var(--transition-hover); position: relative; overflow: hidden; text-decoration: none; cursor: pointer; }
.aldi-about-social:hover { box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.aldi-about-social:active { box-shadow: var(--shadow-inset) !important; transform: translateY(2px) !important; }
.aldi-about-social svg { width: var(--icon-lg); height: var(--icon-lg); position: relative; z-index: 2; }
.aldi-about-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.aldi-about-link { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--primary); border: none; padding: 10px 22px; border-radius: var(--radius-pill); font-size: var(--fs-tombol); font-weight: var(--fw-semibold); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; letter-spacing: var(--ls-wide); text-transform: uppercase; overflow: hidden; line-height: var(--lh-tight); position: relative; white-space: nowrap; transition: var(--transition-hover); }
.aldi-about-link:hover { box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.aldi-about-link:active { box-shadow: var(--shadow-inset) !important; transform: translateY(2px) !important; }
.aldi-about-outline { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--primary); color: var(--primary); }
.aldi-about-outline:hover { box-shadow: var(--shadow-pressed), inset 0 0 0 2px var(--primary); transform: translateY(2px); }
.aldi-about-outline:active { box-shadow: var(--shadow-inset), inset 0 0 0 2px var(--primary) !important; transform: translateY(2px) !important; }
.aldi-about-sidebar { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0; }
.aldi-about-photo-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: -19px; }
.aldi-about-photo { width: 170px; height: 170px; border-radius: var(--radius-circle); overflow: hidden; cursor: pointer; transition: var(--transition-hover); background: linear-gradient(145deg, var(--bg-shadow-light), var(--bg-shadow-dark)); box-shadow: 8px 8px 16px var(--bg-shadow-dark), -6px -6px 12px var(--bg-shadow-light), 0 0 0 3px var(--bg), 0 0 0 6px var(--primary), 0 0 14px 4px rgba(99,102,241,0.2); position: relative; z-index: 1; will-change: box-shadow; }
.aldi-about-photo:hover { box-shadow: 3px 3px 6px var(--bg-shadow-dark), -2px -2px 4px var(--bg-shadow-light), 0 0 0 3px var(--bg), 0 0 0 6px var(--primary), 0 0 16px 5px rgba(129,140,248,0.22); transform: translateY(2px); }
.aldi-about-photo:active { box-shadow: inset 5px 5px 10px var(--bg-shadow-dark), inset -4px -4px 8px var(--bg-shadow-light), 0 0 0 3px var(--bg), 0 0 0 6px var(--primary) !important; transform: translateY(2px) !important; }
.aldi-about-avatar { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: var(--radius-circle); position: relative; z-index: 1; }
.aldi-about-status { position: relative; top: auto; left: auto; transform: none; margin-top: var(--space-6); background: var(--surface); box-shadow: var(--shadow-inset-sm); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); display: flex; align-items: center; gap: 6px; cursor: default; z-index: 5; white-space: nowrap; }
.aldi-about-status-dot { width: 8px; height: 8px; background: linear-gradient(135deg, var(--primary), var(--primary)); border-radius: var(--radius-circle); animation: aldi-about-dot-pulse 2.5s ease-in-out infinite; position: relative; z-index: 2; will-change: transform; }
.aldi-about-status-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border-radius: var(--radius-circle); background-color: var(--primary); animation: aldi-about-ripple 2.5s ease-out infinite; opacity: 0; z-index: 1; will-change: transform, opacity; }
.aldi-about-status-text { font-size: var(--fs-text4); font-weight: var(--fw-regular); color: var(--primary); letter-spacing: var(--ls-wide); white-space: nowrap; }
.aldi-about-metrics { max-width: 100%; display: flex; gap: var(--space-6); width: 100%; justify-content: center; }
.aldi-about-metric { background: var(--surface); box-shadow: var(--shadow-inset-sm); border-radius: var(--radius-md); padding: 14px var(--space-3); text-align: center; height: 68px; flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; cursor: default; }
.aldi-about-metric-inner { display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: center; position: relative; z-index: 1; }
.aldi-about-num { font-size: var(--fs-stat-num); font-weight: var(--fw-bold); margin: 0 0 3px 0; color: var(--primary); }
.aldi-about-label { font-size: calc(var(--fs-text4) - 1.5px); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold); }
.aldi-about-modal { display: none; position: fixed; z-index: 150000; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(224,229,236,0); backdrop-filter: blur(0); transition: all var(--transition-slow); will-change: background, backdrop-filter; }
.aldi-about-modal.aldi-about-show { background: rgba(163,177,198,0.5); backdrop-filter: blur(25px); }
[data-theme="dark"] .aldi-about-modal.aldi-about-show { background: rgba(10,11,16,0.75); backdrop-filter: blur(25px); }
.aldi-about-modal-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.3); opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change: transform, opacity; }
.aldi-about-modal.aldi-about-show .aldi-about-modal-inner { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.aldi-about-modal img { max-width: 60vw; max-height: 60vh; border-radius: 32px; box-shadow: 16px 16px 32px rgba(0,0,0,0.4), -16px -16px 32px rgba(0,0,0,0.15); display: block; }
.aldi-about-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: var(--surface); box-shadow: var(--shadow-pressed); border-radius: var(--radius-circle); color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center; border: none; transition: var(--transition-hover); }
.aldi-about-close:hover { box-shadow: 1px 1px 3px var(--bg-shadow-dark), -1px -1px 2px var(--bg-shadow-light); transform: translateY(1px); }
.aldi-about-close:active { box-shadow: inset 2px 2px 4px var(--bg-shadow-dark), inset -1px -1px 3px var(--bg-shadow-light) !important; transform: translateY(1px) !important; }
.aldi-about-close::before { content: '✕'; font-size: var(--fs-2xs); line-height: var(--lh-tight); }

@media(min-width:1441px) {
  .aldi-about-container { padding: 40px 100px; }
  .aldi-about-grid { grid-template-columns: 1fr 145px; }
  .aldi-about-content { padding-right: 80px; }
}
@media(min-width:1025px) and (max-width:1440px) {
  .aldi-about-container { padding: 40px 50px; }
  .aldi-about-grid { grid-template-columns: 1fr 145px; }
  .aldi-about-content { padding-right: 40px; }
  .aldi-about-metrics { gap: 20px; }
}
@media(max-width:1024px) {
  .aldi-about-grid { grid-template-columns: 1fr 134px; gap: 26px; }
  .aldi-about-content { padding-right: var(--space-6); gap: var(--space-3); }
  .aldi-about-hello { font-size: 21px; line-height: 1.2; margin-bottom: -8px; }
  .aldi-about-title { font-size: 25px; line-height: 1.2; }
  .aldi-about-founder { font-size: var(--fs-base); }
  .aldi-about-role { font-size: var(--fs-md); height: 18px; line-height: var(--lh-normal); }
  .aldi-about-quote { padding: 10px 18px; }
  .aldi-about-photo { width: 134px; height: 134px; }
  .aldi-about-status { margin-top: 17px; padding: 5px var(--space-3); }
  .aldi-about-status-dot { width: 6px; height: 6px; }
  .aldi-about-container { padding: var(--space-6) var(--space-6); gap: var(--space-5); }
  .aldi-about-metric { padding: var(--space-3) 10px; height: 62px; }

  .aldi-about-modal img { max-width: 75vw; max-height: 50vh; border-radius: 19px; }
  .aldi-about-close { width: 26px; height: 26px; top: 8px; right: 8px; }
  .aldi-about-close::before { font-size: var(--fs-3xs); }
  .aldi-about-socials { gap: 10px; }
  .aldi-about-social { width: 42px; height: 42px; }
  .aldi-about-social svg { width: var(--icon-md); height: var(--icon-md); }
  .aldi-about-actions { gap: 10px; }
}
@media(max-width:768px) {
  .aldi-about-grid { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }
  .aldi-about-content { padding-right: 0; gap: var(--space-3); }
  .aldi-about-sidebar { display: none; }
  .aldi-about-mobile { display: block; margin-bottom: 10px; padding-top: 20px; }
  .aldi-about-hello, .aldi-about-title { text-align: center; }
  .aldi-about-hello { font-size: 19px; line-height: 1.2; margin-bottom: -8px; }
  .aldi-about-title { font-size: 21px; line-height: 1.2; }
  .aldi-about-founder { font-size: 13.5px; text-align: center; }
  .aldi-about-role { font-size: var(--fs-md); height: 22px; text-align: center; justify-content: center; }
  .aldi-about-typing { min-height: 22px; }
  .aldi-about-bio { text-align: center; }
  .aldi-about-quote { padding: 10px 18px; }
  .aldi-about-quote-text { text-align: center; }
  .aldi-about-socials { justify-content: center; gap: 13px; padding: 4px 0; }
  .aldi-about-social { width: 44px; height: 44px; }
  .aldi-about-social svg { width: 22px; height: 22px; }
  .aldi-about-photo { width: 90px; height: 90px; }
  .aldi-about-status { margin-top: 15px; padding: 5px 10px; border-radius: var(--radius-md); }
  .aldi-about-status-dot { width: 5px; height: 5px; }
  .aldi-about-actions { justify-content: center; gap: 13px; }
  .aldi-about-link { flex-shrink: 0; padding: 10px 19px; white-space: nowrap; }
  .aldi-about-metrics { gap: 13px; }
  .aldi-about-metric { padding: 10px 6px; height: 56px; border-radius: var(--radius-md); }

  .aldi-about-modal img { max-width: 75vw; max-height: 50vh; border-radius: 19px; }
  .aldi-about-close { width: 24px; height: 24px; top: 7px; right: 7px; }
  .aldi-about-close::before { font-size: 9px; }
  .aldi-about-container { padding: var(--space-6) var(--space-6); gap: var(--space-5); }
}
@media(max-width:480px) {
  .aldi-about-container { padding: 20px 20px; gap: var(--space-5); }
  .aldi-about-mobile { margin-bottom: 10px; padding-top: 10px; }
  .aldi-about-hello { font-size: 17px; line-height: 1.2; margin-bottom: -8px; }
  .aldi-about-title { font-size: 19px; line-height: 1.2; }
  .aldi-about-founder { font-size: 12.5px; text-align: center; }
  .aldi-about-role { font-size: var(--fs-base); height: 20px; justify-content: center; }
  .aldi-about-typing { min-height: 20px; }
  .aldi-about-bio { text-align: center; }
  .aldi-about-quote { padding: 10px 16px; }
  .aldi-about-quote-text { text-align: center; }
  .aldi-about-socials { justify-content: center; gap: 18px; padding: 4px 0; }
  .aldi-about-social { width: 44px; height: 44px; }
  .aldi-about-social svg { width: 22px; height: 22px; }
  .aldi-about-photo { width: 80px; height: 80px; }
  .aldi-about-status { margin-top: 13px; border-radius: var(--radius-md); padding: 5px 10px; }
  .aldi-about-status-dot { width: 5px; height: 5px; }
  .aldi-about-actions { justify-content: center; gap: var(--space-4); }
  .aldi-about-link { flex-shrink: 0; padding: 10px 18px; white-space: nowrap; }
  .aldi-about-metrics { gap: var(--space-2); }
  .aldi-about-metric { padding: 10px 6px; height: 56px; border-radius: var(--radius-md); }

  .aldi-about-modal img { max-width: 85vw; max-height: 45vh; border-radius: var(--radius-lg); }
  .aldi-about-close { width: 22px; height: 22px; top: 6px; right: 6px; }
  .aldi-about-close::before { font-size: 8px; }
}