/*
 * Bileşen: ER-Tabs
 * Kullanım:
 * <div class="er-tabs-container">
 *   <div class="er-tab er-active" data-tab="1">Sekme 1</div>
 *   <div class="er-tab" data-tab="2">Sekme 2</div>
 * </div>
 */

.er-tabs-container {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    margin-bottom: 20px;
}

.er-tab {
    padding: 12px 4px;
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 400;
    color: var(--text-muted);
    position: relative;
    font-size: 0.95rem;
}

.er-tab:hover {
    color: var(--primary);
}

.er-tab.er-active {
    color: var(--primary);
    font-weight: 500;
}

.er-tab.er-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
    animation: erTabIn 0.3s ease;
}

@keyframes erTabIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}