/* MikroTik Control Center — effects.css (dipecah dari frontend/index.html) */

/* --- BACKGROUND --- */
.liquid-bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; pointer-events: none; }

.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.7; }

.orb-1 { width: 500px; height: 500px; top: -50px; left: -50px; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(210,230,255,0.8) 100%); }

.orb-2 { width: 600px; height: 600px; bottom: -100px; right: -50px; background: radial-gradient(circle, rgba(235,245,255,1) 0%, rgba(200,225,255,0.6) 100%); }

@keyframes pulseDi { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

.shake-err { animation: shake 0.4s; }

@keyframes popIn { to { transform: scale(1); opacity: 1; } }

@keyframes fadeScaleOut { to { transform: scale(1.1); opacity: 0; } }

@keyframes blinkCaret { from, to { border-color: transparent } 50% { border-color: var(--accent); } }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.morph-wrapper { width: 75px; height: 75px; margin: 0 auto 15px; position: relative; }

.morph-svg { width: 100%; height: 100%; }

.track-circle { fill: none; stroke: rgba(0,0,0,0.05); stroke-width: 4; }

.draw-circle { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 164; stroke-dashoffset: 164; transform-origin: center; transform: rotate(-90deg); transition: stroke-dashoffset 0.4s ease, stroke 0.4s ease; }

.check-line { fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 0.4s ease; }

.cross-line { fill: none; stroke: var(--danger); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 0.4s ease; }

.is-loading .draw-circle { animation: spinSvg 1s linear infinite; stroke-dashoffset: 60; }

@keyframes spinSvg { 100% { transform: rotate(270deg); } }

.is-success .draw-circle { stroke: var(--success); stroke-dashoffset: 0; transform: rotate(-90deg); animation: none; fill: transparent; }

.is-success .check-line { stroke-dashoffset: 0; transition-delay: 0.1s; }

.is-failed .draw-circle { stroke: var(--danger); stroke-dashoffset: 0; transform: rotate(-90deg); animation: none; fill: transparent; }

.is-failed .cross-line { stroke-dashoffset: 0; transition-delay: 0.1s; }

@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(255,59,48, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(255,59,48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48, 0); } }

.val-update { animation: textPop 0.3s ease; }

@keyframes textPop { 0% { transform: scale(1); color: var(--accent); } 50% { transform: scale(1.1); color: var(--success); } 100% { transform: scale(1); } }