.hero {
    position: relative;
    min-height: 100vh;
    padding-top: var(--nav-h);
    display: flex; align-items: center;
    overflow: hidden;
}

/* Bintang pixel sederhana (tanpa gambar) */
.hero__stars {
    position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 10% 20%, var(--text) 50%, transparent 51%),
        radial-gradient(2px 2px at 30% 70%, var(--yellow) 50%, transparent 51%),
        radial-gradient(2px 2px at 55% 35%, var(--text) 50%, transparent 51%),
        radial-gradient(2px 2px at 75% 80%, var(--pink) 50%, transparent 51%),
        radial-gradient(2px 2px at 90% 25%, var(--green) 50%, transparent 51%);
    background-size: 340px 340px;
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
    padding-block: 40px;
}

/* Karakter */
.hero__character { display: flex; justify-content: center; }
.avatar-stage { position: relative; width: min(340px, 80%); }
.avatar {
    width: 100%;
    /* Latar hitam foto menyatu dengan background situs.
       Jika nanti memakai PNG transparan, baris ini boleh dihapus. */
    mix-blend-mode: lighten;
}
.avatar.idle { animation: idle 1.2s steps(2) infinite alternate; }
@keyframes idle {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}
.avatar-shadow {
    position: absolute; left: 50%; bottom: -6px;
    width: 60%; height: 14px; transform: translateX(-50%);
    background: rgba(0,0,0,.6);
    border-radius: 50%;
}

/* Info */
.hero__info { display: flex; flex-direction: column; gap: 20px; }
.hero__name { font-size: clamp(20px, 3.4vw, 34px); color: var(--text); }
.hero__role {
    font-family: var(--font-pixel);
    font-size: clamp(10px, 1.4vw, 13px);
    color: var(--green);
    min-height: 1.6em;
}
.cursor-blink { animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__tagline { color: var(--text-2); font-size: 17px; }

.status { display: grid; gap: 12px; max-width: 380px; }
.status__row {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-pixel); font-size: 10px;
}
.status__row span { width: 32px; color: var(--text-2); }
.status__row strong { color: var(--yellow); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 6px; }

/* Indikator scroll */
.scroll-indicator {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-family: var(--font-pixel); font-size: 8px; color: var(--text-2);
    transition: opacity .3s;
}
.scroll-indicator.is-hidden { opacity: 0; pointer-events: none; }
.scroll-indicator__arrow { color: var(--green); animation: bounce 1s steps(2) infinite; }
@keyframes bounce { 50% { transform: translateY(6px); } }

.placeholder { padding-block: 120px; text-align: center; }

@media (max-width: 800px) {
    .hero__grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .hero__info { align-items: center; }
    .status { width: 100%; text-align: left; }
    .hero__actions { justify-content: center; }
    .avatar-stage { width: min(240px, 60%); }
    .scroll-indicator { display: none; }
}
.hero__world {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 42%;
    image-rendering: pixelated;
    pointer-events: none;
}
@media (max-width: 800px) { .hero__world { height: 30%; } }