.hero-mascot-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 480px; /* sesuaikan dengan lebar mascot di desain asli */
    user-select: none;
}

.mascot-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* ===== MATA ===== */
.mascot-eye {
    position: absolute;
    width: 6.4%;
    aspect-ratio: 1;
    z-index: 3;
    pointer-events: none;
}

.mascot-eye-left  { left: 51.31%; top: 25.12%; transform: translate(-50%, -50%); }
.mascot-eye-right { left: 69.66%; top: 25.44%; width: 5.8%; transform: translate(-50%, -50%); }

.pupil {
    width: 80%;
    height: 92%; /* Tinggi lebih besar dari lebar agar berbentuk oval */
    border-radius: 50%;
    position: absolute;
    top: 4%;
    left: 10%;
    transition: transform 0.09s ease-out;
    background: 
        radial-gradient(at 28% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 12%, transparent 15%),
        radial-gradient(at 50% 50%, #0a0a0a 0%, #0a0a0a 45%, transparent 48%),
        radial-gradient(at 50% 50%, #b36e1c 0%, #8c4e0d 45%, #472605 75%, #1a0d01 100%);
    box-shadow: 0 0 4px rgba(0,0,0,0.6), inset 0 0 3px rgba(0,0,0,0.9);
}

/* ===== API OBOR ===== */
.torch-flame {
    position: absolute;
    left: 17.52%;
    top: 15.82%;
    transform: translate(-50%, -100%); /* anchor di titik bawah nyala api */
    width: 8%;
    height: 14%;
    z-index: 3; /* di depan obor asli */
    pointer-events: none;
}

.flame {
    position: absolute;
    bottom: 0;
    left: 50%;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    transform-origin: bottom center;
    animation: flicker 1.1s ease-in-out infinite alternate;
    filter: blur(0.3px);
}

.flame-outer {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 75%, #ff9d00, #ff5500 55%, transparent 85%);
    transform: translateX(-50%);
    animation-delay: 0s;
    opacity: 0.9;
}

.flame-inner {
    width: 62%;
    height: 72%;
    background: radial-gradient(circle at 50% 75%, #ffd500, #ff8800 65%, transparent 88%);
    transform: translateX(-50%);
    animation-delay: 0.12s;
}

.flame-core {
    width: 30%;
    height: 40%;
    background: radial-gradient(circle at 50% 75%, #ffffff, #ffe066 55%, transparent 90%);
    transform: translateX(-50%);
    animation-delay: 0.25s;
}

.flame-glow {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 220%;
    height: 220%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,150,0,0.35) 0%, transparent 70%);
    filter: blur(6px);
    animation: glow-pulse 1.4s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes flicker {
    0%   { transform: translateX(-50%) scaleY(1)    scaleX(1)    rotate(-3deg); }
    30%  { transform: translateX(-53%) scaleY(1.1)  scaleX(0.92) rotate(3deg); }
    60%  { transform: translateX(-47%) scaleY(0.92) scaleX(1.08) rotate(-2deg); }
    100% { transform: translateX(-50%) scaleY(1.06) scaleX(0.96) rotate(2deg); }
}

@keyframes glow-pulse {
    0%   { opacity: 0.5; transform: translateX(-50%) scale(1); }
    100% { opacity: 0.8; transform: translateX(-50%) scale(1.12); }
}

/* Responsif: sedikit kecilkan area interaktif mata di layar kecil agar tidak terlalu sensitif */
@media (max-width: 640px) {
    .hero-mascot-wrapper { max-width: 300px; }
}