body { font-family: 'Inter', sans-serif; }
@keyframes gradientFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.animate-gradient { background-size: 400% 400%; animation: gradientFlow 12s ease infinite; }

/* ===== MODAL STYLES & ANIMATIONS ===== */
@keyframes mesh-gradient-animation {
    0% { transform: scale(1) translate(-50%, -50%); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { transform: scale(1.05) translate(-48%, -52%); border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%; }
    50% { transform: scale(1) translate(-50%, -50%); border-radius: 70% 30% 60% 40% / 70% 40% 30% 60%; }
    75% { transform: scale(0.95) translate(-52%, -48%); border-radius: 30% 70% 40% 60% / 40% 70% 60% 30%; }
    100% { transform: scale(1) translate(-50%, -50%); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes shimmer-new { 0% { transform: translateX(-150%) skewX(-30deg); opacity: 0.5; } 100% { transform: translateX(150%) skewX(-30deg); opacity: 0.5; } }
@keyframes falling-stars { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Keyframe yang BENAR untuk looping seamless */
@keyframes border-shimmer-sweep { 
    from { background-position: 200% 0; } 
    to { background-position: -200% 0; }
}

#modal-overlay { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.3s, opacity 0.3s ease; }
#modal-overlay.visible { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 0.3s ease; }
#modal-container > div { transform: scale(0.95); transition: transform 0.3s ease; }
#modal-overlay.visible #modal-container > div { transform: scale(1); }

.effects-container { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }

/* --- STARFALL DENSE FIX --- */
.effects-container .stars {
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px, var(--sparkle-color) 50%, transparent 100%), radial-gradient(1.5px, var(--sparkle-color) 50%, transparent 100%),
        radial-gradient(1px, var(--sparkle-color) 50%, transparent 100%), radial-gradient(1.5px, var(--sparkle-color) 50%, transparent 100%),
        radial-gradient(1px, var(--sparkle-color) 50%, transparent 100%), radial-gradient(1.5px, var(--sparkle-color) 50%, transparent 100%),
        radial-gradient(1px, var(--sparkle-color) 50%, transparent 100%), radial-gradient(1.5px, var(--sparkle-color) 50%, transparent 100%),
        radial-gradient(1px, var(--sparkle-color) 50%, transparent 100%), radial-gradient(1.5px, var(--sparkle-color) 50%, transparent 100%);
        
    background-repeat: no-repeat;
    background-size: 1.5px 1.5px;
    background-position: 
        10% 10%, 25% 60%, 40% 90%, 55% 30%, 70% 5%, 85% 75%, 30% 20%, 65% 50%, 95% 80%, 5% 40%;
    animation: falling-stars 8s linear infinite;
}

.effects-container .stars-2 {
    animation-duration: 12s; 
    animation-delay: -3s; 
    transform: scale(0.7); 
    background-position: 
        1% 95%, 21% 5%, 41% 35%, 58% 80%, 78% 15%, 11% 50%, 65% 25%, 85% 65%, 4% 30%, 30% 75%;
}
/* --- END STARFALL DENSE FIX --- */

.effects-container .hero-twinkles { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--sparkle-color) 1.5px, transparent 1.5px), radial-gradient(circle, var(--sparkle-color) 1px, transparent 1px); background-repeat: no-repeat; background-size: 2px 2px; background-position: 15% 30%, 80% 75%; animation: twinkle 4s ease-in-out infinite; }
.effects-container .shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--shimmer-color) 50%, transparent 80%); animation: shimmer-new 4s ease-in-out infinite; }

/* EFEK MESH GRADIENT BLOB EKSKLUSIF */
.effects-container .mesh-gradient-blob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%; 
    height: 150%;
    background: radial-gradient(at 0% 0%, #4a00e0, transparent), 
                radial-gradient(at 100% 0%, #8e2de2, transparent), 
                radial-gradient(at 0% 100%, #da22ff, transparent), 
                radial-gradient(at 100% 100%, #21d4fd, transparent); 
    background-size: 100% 100%;
    filter: blur(80px); 
    opacity: 0.6; 
    animation: mesh-gradient-animation 15s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0; 
}


/* === PERBAIKAN FINAL (Mobile-Safe + Solid BG) === */
.shimmer-border-effect { 
    position: relative; 
    z-index: 1;
    border: 2px solid transparent;
    background: linear-gradient(120deg, transparent 20%, var(--rank-border-color) 50%, transparent 80%);
    background-size: 200% 100%;
    background-clip: border-box;
    background-origin: border-box;
    background-repeat: repeat-x; /* FIX "PATAH" */
    animation: border-shimmer-sweep 3s linear infinite;
}

.shimmer-border-effect::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rank-bg-color); /* Latar Belakang Solid */
    border-radius: inherit;
    z-index: -1; /* Di belakang konten */
    display: block; 
}
/* === AKHIR PERBAIKAN === */


/* --- UNIFIED RANK STYLES (SEMUA BACKGROUND JADI SOLID) --- */
.rank-style-default { --sparkle-color: #e5e7eb; --shimmer-color: rgba(209, 213, 219, 0.1); --rank-text-color: #9ca3af; --rank-border-color: #6b7280; --rank-bg-color: rgb(55, 65, 81); }
.rank-style-manager { --sparkle-color: #bbf7d0; --shimmer-color: rgba(134, 239, 172, 0.15); --rank-text-color: #86efac; --rank-border-color: #4ade80; --rank-bg-color: rgb(22, 101, 52); }

/* LOYAL MANAGER (Sudah solid, aman) */
.rank-style-loyal-manager {
    --sparkle-color: transparent; 
    --shimmer-color: transparent; 
    --rank-text-color: #a78bfa; 
    --rank-border-color: #c4b5fd; 
    --rank-bg-color: #1a0033; 
}
.rank-style-loyal-manager .effects-container .stars,
.rank-style-loyal-manager .effects-container .stars-2,
.rank-style-loyal-manager .effects-container .hero-twinkles,
.rank-style-loyal-manager .effects-container .shimmer {
    display: none;
}

.rank-style-gold { --sparkle-color: #fde68a; --shimmer-color: rgba(252, 211, 77, 0.2); --rank-text-color: #fcd34d; --rank-border-color: #fbbf24; --rank-bg-color: rgb(146, 105, 12); }
.rank-style-diamond { --sparkle-color: #a5f3fc; --shimmer-color: rgba(103, 232, 249, 0.2); --rank-text-color: #7dd3fc; --rank-border-color: #38bdf8; --rank-bg-color: rgb(14, 116, 144); }
.rank-style-crown { --sparkle-color: #f472b6; --shimmer-color: rgba(244, 114, 182, 0.2); --rank-text-color: #f472b6; --rank-border-color: #c026d3; --rank-bg-color: rgb(134, 25, 143); }
.rank-style-kantor-cabang { --sparkle-color: #fda4af; --shimmer-color: rgba(244, 63, 94, 0.2); --rank-text-color: #fb7185; --rank-border-color: #f43f5e; --rank-bg-color: rgb(190, 18, 60); }
.rank-style-stokis { --sparkle-color: #fcd34d; --shimmer-color: rgba(251, 191, 36, 0.2); --rank-text-color: #fbbf24; --rank-border-color: #f59e0b; --rank-bg-color: rgb(217, 119, 6); }
.rank-style-sub-stokis { --sparkle-color: #a3e635; --shimmer-color: rgba(132, 204, 22, 0.2); --rank-text-color: #bef264; --rank-border-color: #84cc16; --rank-bg-color: rgb(77, 124, 15); }

.member-card { cursor: pointer; }
#modal-photo-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.75rem; /* rounded-xl */ }
#modal-photo-container div { width: 100%; height: 100%; object-fit: cover; }