/* SVG Icon Styles */
.svg-icon {
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    pointer-events: none;
}

/* Icon Sizes */
.svg-icon-sm {
    width: 16px;
    height: 16px;
}

.svg-icon-md {
    width: 24px;
    height: 24px;
}

.svg-icon-lg {
    width: 32px;
    height: 32px;
}

.svg-icon-xl {
    width: 48px;
    height: 48px;
}

.svg-icon-2xl {
    width: 64px;
    height: 64px;
}

/* Icon Colors - CSS Variables ile dinamik renk */
.svg-icon-primary {
    color: var(--primary-color, #000000);
    fill: var(--primary-color, #000000);
}

.svg-icon-secondary {
    color: var(--secondary-color, #6c757d);
    fill: var(--secondary-color, #6c757d);
}

.svg-icon-white {
    color: #ffffff;
    fill: #ffffff;
}

.svg-icon-dark {
    color: #000000;
    fill: #000000;
}

/* Icon Hover Effects */
.svg-icon-hover:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Icon Animation */
.svg-icon-spin {
    animation: icon-spin 1s linear infinite;
}

@@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Icons */
@@media (max-width: 768px) {
    .svg-icon-responsive {
        width: 20px;
        height: 20px;
    }
}